Merge pull request #569 from sebgroup/feature/dynamic-forms-extra-pro…

…ps-and-initial-values Feature/dynamic forms extra props and initial values
seb-oss · Apr 6, 2021 · d8fab69 · d8fab69
2 parents ad526a0 + e5e4c05
commit d8fab69
Show file tree

Hide file tree

Showing 18 changed files with 278 additions and 159 deletions.
diff --git 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 = `<Button>Click me</Button>`;
 
 const buttonSizes: Array<DynamicFormOption<ButtonSize>> = [
-    { 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<DynamicFormOption<ButtonTheme>> = [
     { 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
@@ -12,17 +12,17 @@ const code: string = `<ButtonGroup>
 </ButtonGroup>`;
 
 const sizes: Array<DynamicFormOption<ButtonGroupProps["size"]>> = [
-    { 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<void> => {
     const [renderControls, { controls }] = useDynamicForm([
         {
             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
@@ -17,8 +17,8 @@ const code: string = `<Carousel>
 </Carousel>`;
 
 const transitionStyles: Array<DynamicFormOption<CarouselProps["transitionStyle"]>> = [
-    { 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<void> => {
@@ -31,7 +31,7 @@ const CarouselPage: React.FC = (): React.ReactElement<void> => {
                 { 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
@@ -13,9 +13,9 @@ const checkboxWithDescriptionCode: string = `<Checkbox>
 </Checkbox>`;
 
 const indicators: Array<DynamicFormOption<IndicatorType>> = [
-    { 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<DynamicFormOption> = [
@@ -36,10 +36,9 @@ const CheckboxPage: React.FC = (): React.ReactElement<void> => {
                     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,15 +48,17 @@ const CheckboxPage: React.FC = (): React.ReactElement<void> => {
                     condition: true,
                     options: indicatorGrouping,
                     value: indicatorGrouping[0].value,
-                    indent: true,
+                    additionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
     ]);
 
     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 (
         <Docs

diff --git a/docs/src/pages/docs/datepicker.tsx b/docs/src/pages/docs/datepicker.tsx
@@ -22,7 +22,7 @@ const DatepickerPage: React.FC = () => {
                     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
@@ -178,6 +178,26 @@ export default ComponentConditionalRender;
                             </TableCell>
                             <TableCell>The form items that belong to that section.</TableCell>
                         </TableRow>
+                        <TableRow>
+                            <TableCell>
+                                <b>wrappingElement</b>
+                            </TableCell>
+                            <TableCell>&#10004;</TableCell>
+                            <TableCell>
+                                <code>{`"div" | "section" | "none"`}</code>
+                            </TableCell>
+                            <TableCell>The wrapping element (if any) for the form items of that section. Defaut: "none"'.</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell>
+                                <b>additionalProps</b>
+                            </TableCell>
+                            <TableCell>&#10004;</TableCell>
+                            <TableCell>
+                                <code>{`{ [k: string]: any; }`}</code>
+                            </TableCell>
+                            <TableCell>Any additional element props to be mapped to the wrappingElement (if one is enabled).</TableCell>
+                        </TableRow>
                     </TableBody>
                 </Table>
 
@@ -212,7 +232,7 @@ export default ComponentConditionalRender;
                             <TableCell>
                                 <code>"Hidden" | "Text" | "Textarea" | "Checkbox" | "Dropdown" | "Datepicker" | "Radio" | "Option" | "ErrorLabel" | "Stepper"</code>
                             </TableCell>
-                            <TableCell>Required type of element (or control)</TableCell>
+                            <TableCell>Required type of element (or control). Default: "Text".</TableCell>
                         </TableRow>
                         <TableRow>
                             <TableCell>
@@ -316,18 +336,6 @@ export default ComponentConditionalRender;
                                 Defines all the available options for the following components: <code>Dropdown</code>, <code>Radio</code>, <code>Option</code>
                             </TableCell>
                         </TableRow>
-                        <TableRow>
-                            <TableCell>
-                                <b>inline</b>
-                            </TableCell>
-                            <TableCell>&#10004;</TableCell>
-                            <TableCell>
-                                <code>boolean</code>
-                            </TableCell>
-                            <TableCell>
-                                Shows the <code>Radio</code> options inlined.
-                            </TableCell>
-                        </TableRow>
                         <TableRow>
                             <TableCell>
                                 <b>valueType</b>
@@ -366,6 +374,18 @@ export default ComponentConditionalRender;
                                 the <b>rulerKey</b> item.
                             </TableCell>
                         </TableRow>
+                        <TableRow>
+                            <TableCell>
+                                <b>additionalProps</b>
+                            </TableCell>
+                            <TableCell>&#10004;</TableCell>
+                            <TableCell>
+                                <code>{`{ [k: string]: any; }`}</code>
+                            </TableCell>
+                            <TableCell>
+                                Any additional element props to be mapped to the element. Depends on the <b>controlType</b>. Must be a valid prop for that element.
+                            </TableCell>
+                        </TableRow>
                     </TableBody>
                 </Table>
 
@@ -404,34 +424,36 @@ export default ComponentConditionalRender;
                         </TableRow>
                         <TableRow>
                             <TableCell>
-                                <b>disabled</b>
+                                <b>label</b>
                             </TableCell>
                             <TableCell>&#10004;</TableCell>
                             <TableCell>
-                                <code>boolean</code>
+                                <code>string</code>
                             </TableCell>
-                            <TableCell>If this option should be displayed as disabled or not (on supporting Components).</TableCell>
+                            <TableCell>The label of the option.</TableCell>
                         </TableRow>
                         <TableRow>
                             <TableCell>
-                                <b>label</b>
+                                <b>description</b>
                             </TableCell>
                             <TableCell>&#10004;</TableCell>
                             <TableCell>
                                 <code>string</code>
                             </TableCell>
-                            <TableCell>The label of the option.</TableCell>
+                            <TableCell>
+                                An optional description displayed below the label for the following components: <code>Checkbox</code>, <code>Radio</code>
+                            </TableCell>
                         </TableRow>
                         <TableRow>
                             <TableCell>
-                                <b>description</b>
+                                <b>additionalProps</b>
                             </TableCell>
                             <TableCell>&#10004;</TableCell>
                             <TableCell>
-                                <code>string</code>
+                                <code>{`{ [k: string]: any; }`}</code>
                             </TableCell>
                             <TableCell>
-                                An optional description displayed below the label for the following components: <code>Checkbox</code>, <code>Radio</code>
+                                Any additional element props to be mapped to the element. Depends on the <b>controlType</b>. Must be a valid prop for that element.
                             </TableCell>
                         </TableRow>
                     </TableBody>

diff --git 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 = `<Img src={imageSrc} />`;
 
 const imgTypes: Array<DynamicFormOption<ImgProps["type"]>> = [
-    { 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<void> => {
@@ -25,13 +25,12 @@ const ImagePage: React.FC = (): React.ReactElement<void> => {
                     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<void> => {
                     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
@@ -7,29 +7,29 @@ const importString: string = require("!raw-loader!@sebgroup/react-components/Loa
 const code: string = `<Loader toggle={toggle} />`;
 
 const sizes: Array<DynamicFormOption<LoaderSize>> = [
-    { 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<DynamicFormOption<LoaderType>> = [
-    { 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<DynamicFormOption> = [
-    { 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<void> => {
     const [renderControls, { controls }, setState] = useDynamicForm([
         {
             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
@@ -14,14 +14,14 @@ const code: string = `<Modal toggle={toggle}>
 </Modal>`;
 
 const sizses: Array<DynamicFormOption<ModalSize>> = [
-    { 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<DynamicFormOption<ModalPosition>> = [
-    { 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 },