diff --git a/library/src/components/Payload/Conditions/Conditions.tsx b/library/src/components/Payload/Conditions/Conditions.tsx index 459f8ed8d..7ee75fe82 100644 --- a/library/src/components/Payload/Conditions/Conditions.tsx +++ b/library/src/components/Payload/Conditions/Conditions.tsx @@ -15,140 +15,133 @@ export const Conditions = ({ dependentSchemas, }: ConditionsProps) => { return ( - <> -

- Conditions -

-
- {schema.oneOf()?.length && ( -
-
- Can be One Of the following: -
- {schema - .oneOf() - ?.map((s, idx) => ( - - ))} -
- )} - - {schema.anyOf()?.length && ( -
-
- Can be Any Of the following: -
- {schema - .anyOf() - ?.map((s, idx) => ( - - ))} -
- )} - - {schema.allOf()?.length && ( -
-
- Must consist All Of the following: -
- {schema - .allOf() - ?.map((s, idx) => ( - - ))} -
- )} - - {schema.not() && ( - - )} - - {schema.propertyNames() && ( - - )} - - {schema.contains() && ( - - )} - - {schema.if() && ( -
- {schema.if() && ( +
+ {schema.oneOf()?.length && ( +
+
+ Can be One Of the following: +
+ {schema + .oneOf() + ?.map((s, idx) => ( - )} - {schema.then() && ( + ))} +
+ )} + + {schema.anyOf()?.length && ( +
+
+ Can be Any Of the following: +
+ {schema + .anyOf() + ?.map((s, idx) => ( - )} - {schema.else() && ( + ))} +
+ )} + + {schema.allOf()?.length && ( +
+
+ Must consist All Of the following: +
+ {schema + .allOf() + ?.map((s, idx) => ( - )} -
- )} - - {dependentSchemas && ( - - )} -
- + ))} +
+ )} + + {schema.not() && ( + + )} + + {schema.propertyNames() && ( + + )} + + {schema.contains() && ( + + )} + + {schema.if() && ( +
+ {schema.if() && ( + + )} + {schema.then() && ( + + )} + {schema.else() && ( + + )} +
+ )} + + {dependentSchemas && ( + + )} +
); }; diff --git a/library/src/components/Payload/Payload.tsx b/library/src/components/Payload/Payload.tsx index 5598f97b4..e8a6dd28d 100644 --- a/library/src/components/Payload/Payload.tsx +++ b/library/src/components/Payload/Payload.tsx @@ -6,10 +6,10 @@ import { CollapseButton, Markdown, Extensions, - HiChevronRight, + // HiChevronRight, } from '../index'; import { SchemaHelpers } from '../../helpers'; -import { useElementSize } from '../../hooks/useElementSize'; +// import { useElementSize } from '../../hooks/useElementSize'; import { SchemaItems } from './SchemaItems'; import { AdditionalItems } from './AdditionalItems'; import { SchemaProperties } from './SchemaProperties'; @@ -57,13 +57,14 @@ export const Payload: React.FunctionComponent = ({ const { reverse, deepExpanded } = useContext(PayloadSchemaContext); const [expanded, setExpanded] = useState(propExpanded || isArray); const [deepExpand, setDeepExpand] = useState(false); + const [tabOpen, setTabOpen] = useState<'RULES' | 'CONDITIONS'>('RULES'); // rulesSidebarOpen state is usefull only when recursionCounter is 0, else it is redundant - const [rulesSidebarOpen, setRulesSidebarOpen] = useState(false); - const [setConditionsRef, conditionsSize] = useElementSize(); - const [setRulesRef, rulesSize] = useElementSize(); + // const [rulesSidebarOpen, setRulesSidebarOpen] = useState(false); + // const [setConditionsRef, conditionsSize] = useElementSize(); + // const [setRulesRef, rulesSize] = useElementSize(); - const floatConditionsToRight = - isProperty && recursionCounter >= 2 && rulesSidebarOpen; + // const floatConditionsToRight = + // isProperty && recursionCounter >= 2 && rulesSidebarOpen; useEffect(() => { if (!isArray) { @@ -124,11 +125,15 @@ export const Payload: React.FunctionComponent = ({ const isExpandable = SchemaHelpers.isExpandable(schema) || rulesExist || conditionsExist; - const childrenHaveConditions = SchemaHelpers.childrenHaveConditions(schema); + // const childrenHaveConditions = SchemaHelpers.childrenHaveConditions(schema); // this is the ammount of shift it needs to be moved to the right in px // by absolute when the components gets nested a lot - const conditionsRightShift = 30 + 10 * (recursionCounter - 1); + // const conditionsRightShift = 30 + 10 * (recursionCounter - 1); + + useEffect(() => { + if (!rulesExist) setTabOpen('CONDITIONS'); + }, []); return ( = ({ {deepExpand ? 'Collapse all' : 'Expand all'} )} - {childrenHaveConditions && recursionCounter == 0 && ( + {/* {childrenHaveConditions && recursionCounter == 0 && ( - )} + )} */} @@ -259,7 +264,8 @@ export const Payload: React.FunctionComponent = ({ {/* Expandable Content */} {!isCircular && isExpandable && expanded && (
{/* Properties Section */} = ({ recursionCounter={recursionCounter + 1} /> -
+
+
+ {rulesExist && ( + + )} + {conditionsExist && ( + + )} +
{/* Conditions Section: has hella recursion in it*/} - {conditionsExist && ( -
+ {conditionsExist && tabOpen == 'CONDITIONS' && ( +
= ({ )} {/* Rules Section: it generally doesnt have any recursion in it */} - {rulesExist && ( -
+ {rulesExist && tabOpen == 'RULES' && ( +
)} @@ -333,9 +343,9 @@ export const Payload: React.FunctionComponent = ({
)} {/* right side conditions sidebar */} - {expanded && rulesSidebarOpen && recursionCounter == 0 && ( + {/* {expanded && rulesSidebarOpen && recursionCounter == 0 && (
- )} + )} */}
diff --git a/library/src/components/Payload/Rules/Rules.tsx b/library/src/components/Payload/Rules/Rules.tsx index 9f63154aa..827e23a47 100644 --- a/library/src/components/Payload/Rules/Rules.tsx +++ b/library/src/components/Payload/Rules/Rules.tsx @@ -9,75 +9,68 @@ interface RulesProps { export const Rules = ({ schema, constraints }: RulesProps) => { return ( - <> -

- Rules -

-
- {schema.format() && ( - - format:{' '} - - {schema.format()} - +
+ {schema.format() && ( + + format:{' '} + + {schema.format()} - )} - {schema.pattern() && ( - - must match:{' '} - - {schema.pattern()} - + + )} + {schema.pattern() && ( + + must match:{' '} + + {schema.pattern()} - )} - {schema.contentEncoding() !== undefined && ( - - encoding:{' '} - - {schema.contentEncoding()} - + + )} + {schema.contentEncoding() !== undefined && ( + + encoding:{' '} + + {schema.contentEncoding()} - )} - {constraints.map((constraint) => ( - - {constraint} - - ))} - {schema.default() !== undefined && ( -
- Default value: - - {SchemaHelpers.prettifyValue(schema.default())} - -
- )} - {schema.const() !== undefined && ( -
- Constant value: - - {SchemaHelpers.prettifyValue(schema.const())} + + )} + {constraints.map((constraint) => ( + + {constraint} + + ))} + {schema.default() !== undefined && ( +
+ Default value: + + {SchemaHelpers.prettifyValue(schema.default())} + +
+ )} + {schema.const() !== undefined && ( +
+ Constant value: + + {SchemaHelpers.prettifyValue(schema.const())} + +
+ )} + {schema.enum() && ( +
+ Allowed values: + {schema.enum()?.map((e, idx) => ( + + {SchemaHelpers.prettifyValue(e)} -
- )} - {schema.enum() && ( -
- Allowed values: - {schema.enum()?.map((e, idx) => ( - - {SchemaHelpers.prettifyValue(e)} - - ))} -
- )} -
- + ))} +
+ )} +
); }; diff --git a/library/src/helpers/schema.ts b/library/src/helpers/schema.ts index fea4f35f4..24daa918c 100644 --- a/library/src/helpers/schema.ts +++ b/library/src/helpers/schema.ts @@ -632,27 +632,27 @@ export class SchemaHelpers { } // checks if any of the nested schema children has got conditions in it - public static childrenHaveConditions( - schema: SchemaInterface, - visited: WeakSet = new WeakSet(), - ): boolean { - if (visited.has(schema)) { - return false; - } - visited.add(schema); - const children = schema.properties(); - if (!children) { - return false; - } - const childArray = Object.values(children); - for (const child of childArray) { - if ( - this.hasConditions(child) || - this.childrenHaveConditions(child, visited) - ) { - return true; - } - } - return false; - } + // public static childrenHaveConditions( + // schema: SchemaInterface, + // visited: WeakSet = new WeakSet(), + // ): boolean { + // if (visited.has(schema)) { + // return false; + // } + // visited.add(schema); + // const children = schema.properties(); + // if (!children) { + // return false; + // } + // const childArray = Object.values(children); + // for (const child of childArray) { + // if ( + // this.hasConditions(child) || + // this.childrenHaveConditions(child, visited) + // ) { + // return true; + // } + // } + // return false; + // } } diff --git a/library/src/hooks/useElementSize.tsx b/library/src/hooks/useElementSize.tsx index 9aeed2da1..24c4e40a2 100644 --- a/library/src/hooks/useElementSize.tsx +++ b/library/src/hooks/useElementSize.tsx @@ -1,48 +1,48 @@ -import { useCallback, useEffect, useLayoutEffect, useState } from 'react'; -export interface Size { - width: number; - height: number; -} - -/** - * `useElementSize` is a hook to measure the size of a DOM element. - * It tracks the width and height of the element and updates them on window resize or element changes. - * - * @param ref - The React ref object attached to the element to measure. - * @return - An object containing the `width` and `height` of the element. - */ - -function useElementSize(): [ - (node: T | null) => void, - Size, -] { - const [ref, setRef] = useState(null); - const [size, setSize] = useState({ width: 0, height: 0 }); - - const handleSize = useCallback(() => { - if (ref) { - setSize({ - width: ref.offsetWidth, - height: ref.offsetHeight, - }); - } - }, [ref]); - - const useEnviromentEffect = - typeof window !== 'undefined' ? useLayoutEffect : useEffect; - - useEnviromentEffect(() => { - if (!ref) return; - - handleSize(); - - const resizeObserver = new ResizeObserver(handleSize); - resizeObserver.observe(ref); - - return () => resizeObserver.disconnect(); - }, [ref, handleSize]); - - return [setRef, size]; -} - -export { useElementSize }; +// import { useCallback, useEffect, useLayoutEffect, useState } from 'react'; +// export interface Size { +// width: number; +// height: number; +// } + +// /** +// * `useElementSize` is a hook to measure the size of a DOM element. +// * It tracks the width and height of the element and updates them on window resize or element changes. +// * +// * @param ref - The React ref object attached to the element to measure. +// * @return - An object containing the `width` and `height` of the element. +// */ + +// function useElementSize(): [ +// (node: T | null) => void, +// Size, +// ] { +// const [ref, setRef] = useState(null); +// const [size, setSize] = useState({ width: 0, height: 0 }); + +// const handleSize = useCallback(() => { +// if (ref) { +// setSize({ +// width: ref.offsetWidth, +// height: ref.offsetHeight, +// }); +// } +// }, [ref]); + +// const useEnviromentEffect = +// typeof window !== 'undefined' ? useLayoutEffect : useEffect; + +// useEnviromentEffect(() => { +// if (!ref) return; + +// handleSize(); + +// const resizeObserver = new ResizeObserver(handleSize); +// resizeObserver.observe(ref); + +// return () => resizeObserver.disconnect(); +// }, [ref, handleSize]); + +// return [setRef, size]; +// } + +// export { useElementSize };