diff --git a/docs/src/pages/docs/button.tsx b/docs/src/pages/docs/button.tsx index 780b5b810..7ecfe6c9a 100644 --- a/docs/src/pages/docs/button.tsx +++ b/docs/src/pages/docs/button.tsx @@ -7,9 +7,9 @@ const importString: string = require("!raw-loader!@sebgroup/react-components/But const code: string = ``; const buttonSizes: Array> = [ - { key: "sm", label: "sm", value: "sm" }, - { key: "md", label: "md", value: "md" }, - { key: "lg", label: "lg", value: "lg" }, + { key: "sm", label: "sm", value: "sm", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "md", label: "md", value: "md", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "lg", label: "lg", value: "lg", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const buttonThemes: Array> = [ { key: "primary", label: "primary", value: "primary" }, @@ -27,7 +27,7 @@ const ButtonPage: React.FC = () => { { key: "controls", items: [ - { key: "size", label: "size", options: buttonSizes, inline: true, controlType: "Radio" }, + { key: "size", label: "size", options: buttonSizes, controlType: "Radio" }, { key: "theme", label: "theme", options: buttonThemes, controlType: "Dropdown", placeholder: "Select theme" }, { key: "disabled", label: "disabled", controlType: "Checkbox" }, { key: "block", label: "block", description: "Sets the display of the button to block so it can take up the container width", controlType: "Checkbox" }, diff --git a/docs/src/pages/docs/buttongroup.tsx b/docs/src/pages/docs/buttongroup.tsx index cdcbd2d14..0c7ab2e4a 100644 --- a/docs/src/pages/docs/buttongroup.tsx +++ b/docs/src/pages/docs/buttongroup.tsx @@ -12,9 +12,9 @@ const code: string = ` `; const sizes: Array> = [ - { key: "sm", label: "sm", value: "sm" }, - { key: "md", label: "md", value: "md" }, - { key: "lg", label: "lg", value: "lg" }, + { key: "sm", label: "sm", value: "sm", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "md", label: "md", value: "md", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "lg", label: "lg", value: "lg", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const ButtonGroupPage: React.FC = (): React.ReactElement => { @@ -22,7 +22,7 @@ const ButtonGroupPage: React.FC = (): React.ReactElement => { { key: "controls", items: [ - { key: "size", label: "size", options: sizes, controlType: "Radio", inline: true }, + { key: "size", label: "size", options: sizes, controlType: "Radio" }, { key: "vertical", label: "vertical", controlType: "Checkbox" }, ], }, diff --git a/docs/src/pages/docs/carousel.tsx b/docs/src/pages/docs/carousel.tsx index 5447ce755..d643f68e6 100644 --- a/docs/src/pages/docs/carousel.tsx +++ b/docs/src/pages/docs/carousel.tsx @@ -17,8 +17,8 @@ const code: string = ` `; const transitionStyles: Array> = [ - { key: "slide", label: "slide", value: "slide" }, - { key: "fade", label: "fade", value: "fade" }, + { key: "slide", label: "slide", value: "slide", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "fade", label: "fade", value: "fade", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const CarouselPage: React.FC = (): React.ReactElement => { @@ -31,7 +31,7 @@ const CarouselPage: React.FC = (): React.ReactElement => { { key: "infinite", label: "infinite", controlType: "Checkbox", value: false }, { key: "autoplay", label: "autoplay", controlType: "Checkbox", value: false }, { key: "showIndicators", label: "showIndicators", controlType: "Checkbox" }, - { key: "transitionStyle", label: "transitionStyle", controlType: "Radio", inline: true, options: transitionStyles, value: transitionStyles[0].value }, + { key: "transitionStyle", label: "transitionStyle", controlType: "Radio", options: transitionStyles, value: transitionStyles[0].value }, ], }, ]); diff --git a/docs/src/pages/docs/checkbox.tsx b/docs/src/pages/docs/checkbox.tsx index df92c7296..49da4d4f0 100644 --- a/docs/src/pages/docs/checkbox.tsx +++ b/docs/src/pages/docs/checkbox.tsx @@ -13,9 +13,9 @@ const checkboxWithDescriptionCode: string = ` `; const indicators: Array> = [ - { key: "error", label: "danger", value: "danger" }, - { key: "success", label: "success", value: "success" }, - { key: "warning", label: "warning", value: "warning" }, + { key: "error", label: "danger", value: "danger", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "success", label: "success", value: "success", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "warning", label: "warning", value: "warning", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const indicatorGrouping: Array = [ @@ -36,10 +36,9 @@ const CheckboxPage: React.FC = (): React.ReactElement => { condition: true, label: "Indicator type", options: indicators, - inline: true, controlType: "Radio", value: indicators[0].value, - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, }, { key: "indicatorGrouping", @@ -49,7 +48,7 @@ const CheckboxPage: React.FC = (): React.ReactElement => { condition: true, options: indicatorGrouping, value: indicatorGrouping[0].value, - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, }, ], }, @@ -57,7 +56,9 @@ const CheckboxPage: React.FC = (): React.ReactElement => { const isIndividual: boolean = controls.indicatorGrouping === "1"; const isGrouped: boolean = controls.indicatorGrouping === "2"; - const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null; + const indicator: Indicator = React.useMemo(() => { + return controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null; + }, [controls.indicator, controls.indicatorType]); return ( { label: "Locale code:", description: "Set a locale for the custom picker (defaults to system locale).", controlType: "Text", - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, }, ], }, diff --git a/docs/src/pages/docs/dynamic-forms.tsx b/docs/src/pages/docs/dynamic-forms.tsx index 9d1890e90..e669514a1 100644 --- a/docs/src/pages/docs/dynamic-forms.tsx +++ b/docs/src/pages/docs/dynamic-forms.tsx @@ -178,6 +178,26 @@ export default ComponentConditionalRender; The form items that belong to that section. + + + wrappingElement + + ✔ + + {`"div" | "section" | "none"`} + + The wrapping element (if any) for the form items of that section. Defaut: "none"'. + + + + additionalProps + + ✔ + + {`{ [k: string]: any; }`} + + Any additional element props to be mapped to the wrappingElement (if one is enabled). + @@ -212,7 +232,7 @@ export default ComponentConditionalRender; "Hidden" | "Text" | "Textarea" | "Checkbox" | "Dropdown" | "Datepicker" | "Radio" | "Option" | "ErrorLabel" | "Stepper" - Required type of element (or control) + Required type of element (or control). Default: "Text". @@ -316,18 +336,6 @@ export default ComponentConditionalRender; Defines all the available options for the following components: Dropdown, Radio, Option - - - inline - - ✔ - - boolean - - - Shows the Radio options inlined. - - valueType @@ -366,6 +374,18 @@ export default ComponentConditionalRender; the rulerKey item. + + + additionalProps + + ✔ + + {`{ [k: string]: any; }`} + + + Any additional element props to be mapped to the element. Depends on the controlType. Must be a valid prop for that element. + + @@ -404,34 +424,36 @@ export default ComponentConditionalRender; - disabled + label ✔ - boolean + string - If this option should be displayed as disabled or not (on supporting Components). + The label of the option. - label + description ✔ string - The label of the option. + + An optional description displayed below the label for the following components: Checkbox, Radio + - description + additionalProps ✔ - string + {`{ [k: string]: any; }`} - An optional description displayed below the label for the following components: Checkbox, Radio + Any additional element props to be mapped to the element. Depends on the controlType. Must be a valid prop for that element. diff --git a/docs/src/pages/docs/image.tsx b/docs/src/pages/docs/image.tsx index f254ff831..0b3ca77bd 100644 --- a/docs/src/pages/docs/image.tsx +++ b/docs/src/pages/docs/image.tsx @@ -9,8 +9,8 @@ const importString: string = require("!raw-loader!@sebgroup/react-components/Ima const code: string = ``; const imgTypes: Array> = [ - { key: "img", value: "img", label: "img" }, - { key: "div", value: "div", label: "div" }, + { key: "img", value: "img", label: "img", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "div", value: "div", label: "div", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const ImagePage: React.FC = (): React.ReactElement => { @@ -25,13 +25,12 @@ const ImagePage: React.FC = (): React.ReactElement => { controlType: "Radio", options: imgTypes, value: imgTypes[0].value, - inline: true, }, { key: "bgFixed", label: "bgFixed", rulerKey: "imgType", - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, condition: imgTypes[1], description: "Fixing the background allows it to have parallax effect when scrolling. Only available for div image type.", controlType: "Checkbox", @@ -40,7 +39,7 @@ const ImagePage: React.FC = (): React.ReactElement => { key: "showChildren", label: "Render children inside div image", rulerKey: "imgType", - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, condition: imgTypes[1], description: "One advantage of a div image is that you can render children inside the image", controlType: "Checkbox", diff --git a/docs/src/pages/docs/loader.tsx b/docs/src/pages/docs/loader.tsx index 2866b9f36..bcfa182c5 100644 --- a/docs/src/pages/docs/loader.tsx +++ b/docs/src/pages/docs/loader.tsx @@ -7,19 +7,19 @@ const importString: string = require("!raw-loader!@sebgroup/react-components/Loa const code: string = ``; const sizes: Array> = [ - { key: "sm", label: "sm", value: "sm" }, - { key: "md", label: "md", value: "md" }, - { key: "lg", label: "lg", value: "lg" }, + { key: "sm", label: "sm", value: "sm", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "md", label: "md", value: "md", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "lg", label: "lg", value: "lg", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const types: Array> = [ - { key: "spinner", label: "spinner", value: "spinner" }, - { key: "square", label: "square", value: "square" }, + { key: "spinner", label: "spinner", value: "spinner", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "square", label: "square", value: "square", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const displayTypes: Array = [ - { key: "cover", label: "cover", value: "cover" }, - { key: "fullscreen", label: "fullscreen", value: "fullscreen" }, + { key: "cover", label: "cover", value: "cover", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "fullscreen", label: "fullscreen", value: "fullscreen", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const LoaderPage: React.FC = (): React.ReactElement => { @@ -27,9 +27,9 @@ const LoaderPage: React.FC = (): React.ReactElement => { { key: "controls", items: [ - { key: "size", label: "size", options: sizes, controlType: "Radio", inline: true }, - { key: "type", label: "type", options: types, controlType: "Radio", value: types[0].value, inline: true }, - { key: "display", label: "Display types", options: displayTypes, controlType: "Radio", inline: true, value: displayTypes[0].value }, + { key: "size", label: "size", options: sizes, controlType: "Radio" }, + { key: "type", label: "type", options: types, controlType: "Radio", value: types[0].value }, + { key: "display", label: "Display types", options: displayTypes, controlType: "Radio", value: displayTypes[0].value }, { key: "backdrop", label: "backdrop", controlType: "Checkbox", value: false }, { key: "children", label: "Render children to be displayed under the loader", controlType: "Checkbox", value: false }, ], diff --git a/docs/src/pages/docs/modal.tsx b/docs/src/pages/docs/modal.tsx index ec3d4c4cc..9ec1f70bd 100644 --- a/docs/src/pages/docs/modal.tsx +++ b/docs/src/pages/docs/modal.tsx @@ -14,14 +14,14 @@ const code: string = ` `; const sizses: Array> = [ - { label: "sm", value: "sm", key: "sm" }, - { label: "md", value: "md", key: "md" }, - { label: "lg", value: "lg", key: "lg" }, + { key: "sm", label: "sm", value: "sm", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "md", label: "md", value: "md", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "lg", label: "lg", value: "lg", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const positions: Array> = [ - { label: "default", value: "default", key: "default" }, - { label: "left", value: "left", key: "left" }, - { label: "right", value: "right", key: "bottom" }, + { label: "default", value: "default", key: "default", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { label: "left", value: "left", key: "left", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { label: "right", value: "right", key: "bottom", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const NotificationPage: React.FC = () => { @@ -31,8 +31,8 @@ const NotificationPage: React.FC = () => { { key: "controls", items: [ - { key: "size", label: "Size", controlType: "Radio", options: sizses, value: sizses[1].value, inline: true }, - { key: "position", label: "Position", controlType: "Radio", options: positions, value: positions[0].value, inline: true }, + { key: "size", label: "Size", controlType: "Radio", options: sizses, value: sizses[1].value }, + { key: "position", label: "Position", controlType: "Radio", options: positions, value: positions[0].value }, { key: "centered", label: "centered", controlType: "Checkbox", value: false }, { key: "fullscreen", label: "fullscreen", controlType: "Checkbox", value: false }, { key: "trapfocus", label: "trapfocus", controlType: "Checkbox", value: false }, diff --git a/docs/src/pages/docs/notification.tsx b/docs/src/pages/docs/notification.tsx index 2e740ac12..320cc3f7f 100644 --- a/docs/src/pages/docs/notification.tsx +++ b/docs/src/pages/docs/notification.tsx @@ -12,8 +12,8 @@ const code: string = ` setToggle(f `; const types: Array> = [ - { label: "slide", value: "slide", key: "slide" }, - { label: "bar", value: "bar", key: "bar" }, + { label: "slide", value: "slide", key: "slide", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { label: "bar", value: "bar", key: "bar", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const themes: Array> = [ { label: "purple", value: "purple", key: "purple" }, @@ -30,8 +30,8 @@ const slidePositions: Array> = { label: "top-right", value: "top-right", key: "top-right" }, ]; const barPositions: Array> = [ - { label: "top", value: "top", key: "top" }, - { label: "bottom", value: "bottom", key: "bottom" }, + { label: "top", value: "top", key: "top", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { label: "bottom", value: "bottom", key: "bottom", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const NotificationPage: React.FC = () => { @@ -43,9 +43,9 @@ const NotificationPage: React.FC = () => { items: [ { key: "theme", label: "theme", controlType: "Dropdown", options: themes, value: themes[0].value }, { key: "persist", label: "persist", value: false, controlType: "Checkbox", description: "Disable timer and persist the notification until dismissed" }, - { key: "type", label: "type", controlType: "Radio", options: types, inline: true, value: types[0].value }, - { key: "slidePosition", label: "position", controlType: "Radio", options: slidePositions, value: slidePositions[0].value, rulerKey: "type", condition: types[0].value }, - { key: "barPosition", label: "position", controlType: "Radio", options: barPositions, inline: true, value: barPositions[0].value, rulerKey: "type", condition: types[1].value }, + { key: "type", label: "type", controlType: "Radio", options: types, value: types[0].value }, + { key: "slidePosition", label: "position", controlType: "Dropdown", options: slidePositions, value: slidePositions[0].value, rulerKey: "type", condition: types[0].value }, + { key: "barPosition", label: "position", controlType: "Radio", options: barPositions, value: barPositions[0].value, rulerKey: "type", condition: types[1].value }, ], }, ]); diff --git a/docs/src/pages/docs/radiobutton.tsx b/docs/src/pages/docs/radiobutton.tsx index c1e68edf0..ee46914ec 100644 --- a/docs/src/pages/docs/radiobutton.tsx +++ b/docs/src/pages/docs/radiobutton.tsx @@ -20,9 +20,9 @@ const code: string = `{/* Use them in our RadioGroup helper component */} setValue(e.target.value)}>Maybe`; const indicators: Array> = [ - { key: "error", label: "danger", value: "danger" }, - { key: "success", label: "success", value: "success" }, - { key: "warning", label: "warning", value: "warning" }, + { key: "error", label: "danger", value: "danger", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "success", label: "success", value: "success", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "warning", label: "warning", value: "warning", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const indicatorGrouping: Array = [ @@ -57,7 +57,6 @@ const RadioButtonPage: React.FC = () => { condition: true, options: indicators, value: indicators[0].value, - inline: true, }, ], }, @@ -65,7 +64,9 @@ const RadioButtonPage: React.FC = () => { const isIndividual: boolean = controls.indicatorGrouping === "1"; const isGrouped: boolean = controls.indicatorGrouping === "2"; - const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null; + const indicator: Indicator = React.useMemo(() => { + return controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null; + }, [controls.indicator, controls.indicatorType]); return ( > = [ { key: "warning", label: "Warning", value: "warning" }, ]; const indicators: Array> = [ - { key: "error", label: "danger", value: "danger" }, - { key: "success", label: "success", value: "success" }, - { key: "warning", label: "warning", value: "warning" }, + { key: "error", label: "danger", value: "danger", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "success", label: "success", value: "success", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "warning", label: "warning", value: "warning", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const SliderPage: React.FC = (): React.ReactElement => { @@ -28,8 +28,8 @@ const SliderPage: React.FC = (): React.ReactElement => { { key: "controls", items: [ - { key: "theme", label: "Theme", options: tooltipThemes, value: "primary", controlType: "Dropdown", inline: true }, - { key: "tooltipTheme", label: "Tooltip theme", options: tooltipThemes, value: "inverted", controlType: "Dropdown", inline: true }, + { key: "theme", label: "Theme", options: tooltipThemes, value: "primary", controlType: "Dropdown", additionalProps: { className: "indent pl-3 pt-2" } }, + { key: "tooltipTheme", label: "Tooltip theme", options: tooltipThemes, value: "inverted", controlType: "Dropdown", additionalProps: { className: "indent pl-3 pt-2" } }, { key: "min", label: "Min", controlType: "Text", value: 1, valueType: "number" }, { key: "max", label: "Max", controlType: "Text", value: 100, valueType: "number" }, { key: "step", label: "Step", controlType: "Text", value: 1, valueType: "number" }, @@ -45,11 +45,19 @@ const SliderPage: React.FC = (): React.ReactElement => { condition: true, options: indicators, value: indicators[0].value, - inline: true, - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, }, { key: "labels", label: "labels", controlType: "Checkbox", value: false, description: "Pass a list of positions and labels to be mapped" }, - { key: "showTicks", label: "showTicks", controlType: "Checkbox", value: false, description: "Show ticks for the lables", rulerKey: "labels", condition: true, indent: true }, + { + key: "showTicks", + label: "showTicks", + controlType: "Checkbox", + value: false, + description: "Show ticks for the lables", + rulerKey: "labels", + condition: true, + additionalProps: { className: "indent pl-3 pt-2" }, + }, ], }, ]); @@ -62,7 +70,9 @@ const SliderPage: React.FC = (): React.ReactElement => { { position: controls.max, label: controls.max }, ]; - const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null; + const indicator: Indicator = React.useMemo(() => { + return controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null; + }, [controls.indicator, controls.indicatorType]); return ( `; const indicators: Array> = [ - { key: "error", label: "danger", value: "danger" }, - { key: "success", label: "success", value: "success" }, - { key: "warning", label: "warning", value: "warning" }, + { key: "error", label: "danger", value: "danger", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "success", label: "success", value: "success", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, + { key: "warning", label: "warning", value: "warning", additionalProps: { wrapperProps: { className: "d-inline-block" } } }, ]; const StepTrackerPage: React.FC = React.memo(() => { @@ -37,10 +37,9 @@ const StepTrackerPage: React.FC = React.memo(() => { condition: true, label: "Indicator type", options: indicators, - inline: true, controlType: "Radio", value: indicators[0].value, - indent: true, + additionalProps: { className: "indent pl-3 pt-2" }, }, ], }, diff --git a/docs/src/pages/docs/textarea.tsx b/docs/src/pages/docs/textarea.tsx index 53b4308ff..e051e23c6 100644 --- a/docs/src/pages/docs/textarea.tsx +++ b/docs/src/pages/docs/textarea.tsx @@ -8,9 +8,9 @@ const importString: string = require("!raw-loader!@sebgroup/react-components/Tex const code: string = `