feat(Former): ✨ update layout to use buttonArea prop instead of buttonOnTop

src/Former/Former.types.ts

@@ -23,8 +23,8 @@ export interface FormerProps<T extends FieldValues = any> {
   id?: string;
   keepOpen?: boolean;
   layout?: {
+    buttonArea?: "bottom" | "none" | "top";
     buttonAreaGroupProps?: GroupProps;
-    buttonOnTop?: boolean;
     closeButtonProps?: ButtonProps;
     closeButtonTitle?: React.ReactNode;
     renderBottom?: FormerSectionRender<T>;

src/Former/FormerLayoutBottom.tsx

@@ -2,8 +2,8 @@ import { useFormerStore } from './Former.store';
 import { FormerButtonArea } from './FormerButtonArea';
 
 export const FormerLayoutBottom = () => {
-  const { buttonOnTop, getState, opened, renderBottom } = useFormerStore((state) => ({
-    buttonOnTop: state.layout?.buttonOnTop,
+  const { buttonArea, getState, opened, renderBottom } = useFormerStore((state) => ({
+    buttonArea: state.layout?.buttonArea,
     getState: state.getState,
     opened: state.opened,
     renderBottom: state.layout?.renderBottom,
@@ -19,5 +19,5 @@ export const FormerLayoutBottom = () => {
     );
   }
 
-  return buttonOnTop ? <></> : <FormerButtonArea />;
+  return buttonArea === "bottom" ?  <FormerButtonArea /> : <></>;
 };

src/Former/FormerLayoutTop.tsx

@@ -2,8 +2,8 @@ import { useFormerStore } from './Former.store';
 import { FormerButtonArea } from './FormerButtonArea';
 
 export const FormerLayoutTop = () => {
-  const { buttonOnTop, getState, opened, renderTop } = useFormerStore((state) => ({
-    buttonOnTop: state.layout?.buttonOnTop,
+  const { buttonArea, getState, opened, renderTop } = useFormerStore((state) => ({
+    buttonArea: state.layout?.buttonArea,
     getState: state.getState,
     opened: state.opened,
     renderTop: state.layout?.renderTop,
@@ -18,5 +18,5 @@ export const FormerLayoutTop = () => {
       getState
     );
   }
-  return buttonOnTop ? <FormerButtonArea /> : <></>;
+  return buttonArea === "top" ? <FormerButtonArea /> : <></>;
 };

src/Former/stories/example.tsx

@@ -35,8 +35,8 @@ export const FormTest = () => {
     url: '',
   });
   const [layout, setLayout] = useState({
+    buttonArea: "bottom",
     buttonAreaGroupProps: { justify: 'center' },
-    buttonOnTop: false,
     title: 'Custom Former Title',
   } as FormerProps['layout']);
 
@@ -63,11 +63,13 @@ export const FormTest = () => {
           label="Disable HTML Form"
           onChange={(event) => setDisableHTML(event.currentTarget.checked)}
         />
-        <Switch
-          checked={layout?.buttonOnTop ?? false}
-          label="Button On Top"
-          onChange={(event) => setLayout({ ...layout, buttonOnTop: event.currentTarget.checked })}
+        <Select
+        data={['top', 'bottom', 'none']}
+  
+          onChange={(value) => setLayout({ ...layout, buttonArea: value as 'bottom' | 'none' | 'top' })}
+          value={layout?.buttonArea}
         />
+
         <Switch
           checked={apiOptions.type === 'api'}
           label="Use API"