Thulasizwe/en/form components width

shesha-reactjs/src/components/configurableForm/models.ts

@@ -3,7 +3,7 @@ import { ColProps } from 'antd/lib/col';
 import { FormInstance, FormProps } from 'antd/lib/form';
 import { FormLayout } from 'antd/lib/form/Form';
 import { ConfigurableFormInstance } from '@/providers/form/contexts';
-import { FormMode, Store, HasFormIdOrMarkup, IFormActions, IFormSections, FormIdentifier } from '@/providers/form/models';
+import { FormMode, Store, HasFormIdOrMarkup, IFormActions, IFormSections, FormIdentifier, IFormItemMargin } from '@/providers/form/models';
 import { IConfigurableFormComponent, ValidateErrorEntity } from '@/interfaces';
 import { IShaFormInstance, ProcessingState } from '@/providers/form/store/interfaces';
 
@@ -14,6 +14,7 @@ export interface IConfigurableFormRendererProps<Values = any, _FieldData = any>
   showDataSubmitIndicator?: boolean;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
+  formItemMargin?: IFormItemMargin;
   layout?: FormLayout;
   initialValues?: Store;
   parentFormValues?: Store;

shesha-reactjs/src/components/entityPicker/styles/styles.ts

@@ -74,6 +74,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }:
   const entitySelect = cx("entity-select", css`
         --ant-color-text: ${style?.color || '#000'} !important;
         width: calc(100% - 32px) !important;
+        flex-basis: unset !important;
         &:hover {
                 border-color: ${token.colorPrimary} !important;
               }

shesha-reactjs/src/components/fileUpload/index.tsx

@@ -11,7 +11,7 @@ import { Image } from 'antd/lib';
 import { UploadProps } from 'antd/lib/upload/Upload';
 import filesize from 'filesize';
 import { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, FC, useEffect, useRef, useState } from 'react';
 import { listType } from '@/designer-components/attachmentsEditor/attachmentsEditor';
 import { getFileIcon, isImageType } from '@/icons/fileIcons';
 import { useSheshaApplication, useStoredFile, useTheme } from '@/providers';
@@ -36,7 +36,7 @@ export interface IFileUploadProps {
   thumbnailHeight?: string;
   borderRadius?: number;
   hideFileName?: boolean;
-  styles?: any;
+  style?: CSSProperties;
   type?: string;
 }
 
@@ -51,7 +51,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
   isDragger = false,
   listType = 'text',
   hideFileName = false,
-  styles: stylesProp,
+  style,
 }) => {
   const {
     fileInfo,
@@ -62,7 +62,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
   } = useStoredFile();
   const { backendUrl, httpHeaders } = useSheshaApplication();
   const props = {
-    style: stylesProp,
+    style,
     model: {
       layout: listType === 'thumbnail' && !isDragger,
       isDragger,
@@ -221,7 +221,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
     accept: allowedFileTypes?.join(','),
     multiple: false,
     fileList: fileInfo ? [fileInfo] : [],
-    style: !isDragger && stylesProp,
+    style: isDragger ? undefined : style,
     customRequest: onCustomRequest,
     beforeUpload: (file) => {
       if (!isFileTypeAllowed(file.name, allowedFileTypes)) {

shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx

@@ -6,6 +6,8 @@
 import { IConfigurableFormItemProps } from './model';
 import { ConfigurableFormItemContext } from './configurableFormItemContext';
 import { ConfigurableFormItemForm } from './configurableFormItemForm';
+import { useStyles } from './styles';
+import { addPx } from '@/utils/style';
 
 export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   children,
@@ -19,12 +21,30 @@
   const { getPublicFormApi } = useShaFormInstance();
   const getFormData = getPublicFormApi().getFormData;
   const formItem = useFormItem();
+  const shaForm = useShaFormInstance();
   const { namePrefix, wrapperCol: formItemWrapperCol, labelCol: formItemlabelCol } = formItem;
 
   const layout = useMemo(() => {
     // Make sure the `wrapperCol` and `labelCol` from `FormItemProver` override the ones from the main form
     return { labelCol: formItemlabelCol || labelCol, wrapperCol: formItemWrapperCol || wrapperCol };
   }, [formItemlabelCol, formItemWrapperCol]);
+  const settings = shaForm.settings;
+  const { styles } = useStyles(settings.layout);
+
+  const defaultMargins = settings?.formItemMargin || {};
+  const { top, left, right, bottom } = defaultMargins;
+  const {
+    marginTop = top ?? 5,
+    marginBottom = bottom ?? 5,
+    marginRight = right ?? 3,
+    marginLeft = left ?? 3,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+  } = model?.allStyles?.fullStyle || {};
 
   const { hideLabel, hidden } = model;
   if (hidden) return null;
@@ -34,7 +54,7 @@
     : model.propertyName;
 
   const formItemProps: FormItemProps = {
-    className: classNames(className),
+    className: classNames(className, styles.formItem, settings.layout),
     label: hideLabel ? null : model.label,
     labelAlign: model.labelAlign,
     hidden: model.hidden,
@@ -46,6 +66,7 @@
     wrapperCol: hideLabel ? { span: 24 } : layout?.wrapperCol,
     // layout: model.layout, this property appears to have been removed from the Ant component
     name: model.context ? undefined : getFieldNameFromExpression(propName),
+    style: { marginBottom, marginRight, marginLeft, marginTop, width, height, minHeight, minWidth, maxHeight, maxWidth },
   };
 
   if (typeof children === 'function') {

shesha-reactjs/src/components/formDesigner/components/configurableFormItemSetting.tsx

@@ -5,14 +5,15 @@ import { getPropertySettingsFromData } from '@/designer-components/_settings/uti
 import { SettingsControl, useShaFormInstance } from '@/index';
 import { IConfigurableFormItemChildFunc, IConfigurableFormItemProps } from './model';
 import { ConfigurableFormItemLive } from './configurableFormItemLive';
+import { useStyles } from './styles';
 
 export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({
   children,
   model,
   valuePropName,
 }) => {
   const { formData } = useShaFormInstance();
-
+  const { styles } = useStyles();
   if (model.hidden) return null;
 
   const { _mode: mode } = getPropertySettingsFromData(formData, model.propertyName);
@@ -24,12 +25,13 @@ export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({
     required: model.validate?.required,
     tooltip: model.description || undefined,
     hidden: model.hidden,
+    className: styles.formItem,
   };
 
   if (typeof children === 'function') {
     const childrenFunc = children as IConfigurableFormItemChildFunc;
     return (
-      <Form.Item {...formProps}>
+      <Form.Item {...formProps} className={styles.formItem}>
         <SettingsControl propertyName={model.propertyName} mode={mode}>
           {(value, onChange, propertyName) => childrenFunc(value, onChange, propertyName)}
         </SettingsControl>

shesha-reactjs/src/components/formDesigner/components/styles.ts

@@ -0,0 +1,37 @@
+import { createStyles } from '@/styles';
+
+export const useStyles = createStyles(({ css, cx }, layout: 'vertical' | 'horizontal' | 'inline' | undefined) => {  
+  const formItem = cx(css`
+        --ant-form-item-margin-bottom: 0px !important;
+        .ant-form-item-row {
+            height: 100%;
+            width: 100%;
+        }
+
+        .ant-row .ant-form-item-control {
+            width: 100% !important;
+            height: 100% !important;
+            max-height: ${layout === 'vertical' ? 'calc(100% - 32px)' : '100%'};
+            margin: auto;
+
+            .ant-form-item-control-input {
+                min-height : 0px !important;
+                height: 100%;
+                width: 100%;
+
+                .ant-form-item-control-input-content {
+                    height: 100%;
+                    width: 100%;
+                    > div {
+                     vertical-align: middle;
+                    }
+                }
+            }
+        }
+
+
+  `);
+  return {
+    formItem,
+  };
+});

shesha-reactjs/src/components/formDesigner/configurableFormComponent/index.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import { createPortal } from 'react-dom';
 import ValidationIcon from './validationIcon';
-import { DataContextTopLevels, EditMode, IConfigurableFormComponent } from '@/providers';
+import { DataContextTopLevels, EditMode, IConfigurableFormComponent, useCanvas, useShaFormInstance } from '@/providers';
 import {
   EditOutlined,
   EyeInvisibleOutlined,
@@ -21,10 +21,14 @@ import { isPropertySettings } from '@/designer-components/_settings/utils';
 import { Show } from '@/components/show';
 import { Tooltip } from 'antd';
 import { ShaForm, useIsDrawingForm } from '@/providers/form';
-import { useFormDesignerState } from '@/providers/formDesigner';
+import { useFormDesignerState, useFormDesignerStateSelector } from '@/providers/formDesigner';
 import { useStyles } from '../styles/styles';
 import { ComponentProperties } from '../componentPropertiesPanel/componentProperties';
 import { useFormDesignerComponentGetter } from '@/providers/form/hooks';
+import { useFormComponentStyles } from '@/hooks/formComponentHooks';
+import { getComponentTypeInfo } from '../utils/componentTypeUtils';
+import { getComponentDimensions, getDeviceDimensions, getDeviceFlexBasis } from '../utils/dimensionUtils';
+import { createRootContainerStyle } from '../utils/stylingUtils';
 
 export interface IConfigurableFormComponentDesignerProps {
   componentModel: IConfigurableFormComponent;
@@ -43,11 +47,21 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
   componentEditMode,
 }) => {
   const { styles } = useStyles();
-
   const getToolboxComponent = useFormDesignerComponentGetter();
-
+  const formSettings = useFormDesignerStateSelector((x) => x.formSettings);
+  const { formMode } = useShaFormInstance();
+  const { activeDevice } = useCanvas();
+
+  const component = getToolboxComponent(componentModel?.type);
+  const typeInfo = getComponentTypeInfo(component);
+  const { dimensionsStyles, stylingBoxAsCSS } = useFormComponentStyles({ ...componentModel, ...componentModel?.[activeDevice] });
+  const { top, left, bottom, right } = formSettings?.formItemMargin || {};
+  const desktopConfig = componentModel?.[activeDevice] || {};
+  const originalDimensions = dimensionsStyles;
+  const originalStylingBox = stylingBoxAsCSS;
+
+  const hasLabel = componentModel.label && componentModel.label.toString().length > 0;
   const isSelected = componentModel.id && selectedComponentId === componentModel.id;
-
   const invalidConfiguration = componentModel.settingsValidationErrors && componentModel.settingsValidationErrors.length > 0;
 
   const hiddenFx = isPropertySettings(componentModel.hidden);
@@ -57,9 +71,9 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
   const actionText2 = (hiddenFx ? 'showing' : '') + (hiddenFx && componentEditModeFx ? '/' : '') + (componentEditModeFx ? 'enabled' : '');
 
   const settingsEditor = useMemo(() => {
-    const renderRerquired = isSelected && settingsPanelRef.current;
+    const renderRequired = isSelected && settingsPanelRef.current;
 
-    if (!renderRerquired)
+    if (!renderRequired)
       return null;
 
     const createPortalInner = true
@@ -82,8 +96,57 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
     return result;
   }, [isSelected]);
 
+  const { marginLeft = left, marginRight = right, marginBottom = bottom, marginTop = top } = stylingBoxAsCSS;
+
+  const stylingBoxPadding = useMemo(() => {
+    return {
+      paddingBottom: originalStylingBox.paddingBottom,
+      paddingLeft: originalStylingBox.paddingLeft,
+      paddingRight: originalStylingBox.paddingRight,
+      paddingTop: originalStylingBox.paddingTop,
+    };
+  }, [formMode, originalStylingBox, desktopConfig.stylingBox]);
+
+  const stylingBoxMargin = useMemo(() => {
+    return {
+      marginTop: marginTop ? top : marginTop,
+      marginBottom: marginBottom ? bottom : marginBottom,
+      marginLeft: marginLeft ? left : marginLeft,
+      marginRight: marginRight ? right : marginRight,
+    };
+  }, [formMode, originalStylingBox, desktopConfig.stylingBox]);
+
+  const paddingStyles = JSON.stringify(stylingBoxPadding);
+  const marginStyles = JSON.stringify(stylingBoxMargin);
+
+  const componentDimensions = getComponentDimensions(typeInfo, dimensionsStyles);
+
+  const renderComponentModel = useMemo(() => {
+    const deviceDimensions = getDeviceDimensions(typeInfo, dimensionsStyles);
+
+    return {
+      ...componentModel,
+      [activeDevice]: {
+        ...desktopConfig,
+        dimensions: deviceDimensions,
+      },
+      // ...(formMode === 'designer' ? {stylingBox: paddingStyles} : {stylingBox: JSON.stringify({...stylingBoxPadding, ...stylingBoxMargin})}),
+      flexBasis: getDeviceFlexBasis(dimensionsStyles),
+    };
+  }, [componentModel, desktopConfig, paddingStyles, originalDimensions, formMode, typeInfo, activeDevice, dimensionsStyles]);
+
+  const rootContainerStyle = useMemo(() => {
+    return createRootContainerStyle(
+      componentDimensions,
+      { ...JSON.parse(marginStyles) },
+      originalDimensions,
+      typeInfo.isInput,
+    );
+  }, [componentDimensions, marginTop, marginBottom, marginLeft, marginRight, originalDimensions, hasLabel]);
+
   return (
     <div
+      style={rootContainerStyle}
       className={classNames(styles.shaComponent, {
         "selected": isSelected,
         'has-config-errors': invalidConfiguration,
@@ -107,6 +170,7 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
             <StopOutlined />
           </Tooltip>
         </Show>
+
         <Show when={!componentEditModeFx && componentEditMode === 'editable'}>
           <Tooltip title="This component is always in Edit/Action mode">
             <EditOutlined />
@@ -115,10 +179,23 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
       </span>
 
       {invalidConfiguration && <ValidationIcon validationErrors={componentModel.settingsValidationErrors} />}
-      <div>
+
+      <div style={{
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+      }}
+      >
         <DragWrapper componentId={componentModel.id} readOnly={readOnly}>
-          <div style={{ padding: '5px 3px' }}>
-            <FormComponent componentModel={componentModel} />
+          <div style={{
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+          }}
+          >
+            <FormComponent
+              componentModel={renderComponentModel}
+            />
           </div>
         </DragWrapper>
       </div>

shesha-reactjs/src/components/formDesigner/styles/styles.ts

@@ -537,4 +537,4 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
     formDesigner,
     quickEditModal,
   };
-});
+});

shesha-reactjs/src/components/formDesigner/toolbar/debugButton.tsx

@@ -16,8 +16,8 @@ export const DebugButton: FC = () => {
       icon={<BugOutlined />}
       title="Debug"
       type="primary"
-      ghost={!isDebug}
       size="small"
+      ghost={!isDebug}
     />
   );
 };

shesha-reactjs/src/components/formDesigner/toolbar/saveMenu.tsx

@@ -70,6 +70,7 @@ export const SaveMenu: FC<ISaveMenuProps> = ({ onSaved }) => {
         icon={<SaveOutlined />}
         onClick={onSaveClick}
         type="primary"
+        size="small"
       >
         Save
       </Button>

shesha-reactjs/src/components/formDesigner/utils/componentTypeUtils.ts

@@ -0,0 +1,16 @@
+import { IConfigurableFormComponent, IToolboxComponent } from "@/interfaces";
+
+export interface ComponentTypeInfo {
+  isDataTableContext: boolean;
+  isInput: boolean;
+}
+
+export const getComponentTypeInfo = (component: IToolboxComponent<IConfigurableFormComponent>): ComponentTypeInfo => {
+  const isDataTableContext = component?.type === 'datatableContext';
+  const isInput = component?.isInput || component?.type === 'button';
+
+  return {
+    isDataTableContext,
+    isInput,
+  };
+};