Merge pull request #3655 from czwe-01/thulasizwe/en/read-only-style

Thulasizwe/en/read only style

Author: czwe-01

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

@@ -244,7 +244,6 @@ const AutocompleteInner: FC<IAutocompleteBaseProps> = (props: IAutocompleteBaseP
       };
 
     return (
-      <div style={{ width: 'fit-content' }}>
       <ReadOnlyDisplayFormItem
         value={readonlyValue}
         type={props.mode === 'multiple' ? 'dropdownMultiple' : 'dropdown'}
@@ -256,7 +255,6 @@ const AutocompleteInner: FC<IAutocompleteBaseProps> = (props: IAutocompleteBaseP
         quickviewGetEntityUrl={props.quickviewGetEntityUrl}
         quickviewWidth={props.quickviewWidth ? Number(props.quickviewWidth) : null} // quick fix string value of quickviewWidth (from configurator)
       />
-      </div>
     );
   }
 

shesha-reactjs/src/components/autocomplete/models.tsx

@@ -126,8 +126,6 @@ export interface IAutocompleteBaseProps {
    * @deprecated
    */
   typeShortAlias?: string;
-
-  disabledStyleOnReadonly?: boolean;
 }
 
 export interface IAutocompleteProps extends Omit<IAutocompleteBaseProps, 'uid'> {

shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx

@@ -39,7 +39,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
 
   const { icon, label, tooltip, iconPosition, size, buttonType, borderColor, borderRadius,
     height, width, backgroundColor, fontSize, fontWeight, color, borderStyle, borderWidth,
-    readOnly, block, danger, disabledStyleOnReadonly } = actualItem;
+    readOnly, block, danger } = actualItem;
 
   const model = {
     ...actualItem,
@@ -59,15 +59,14 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
   const prevStyles = migratePrevStyles(model, initialValues());
 
   const buttonStyles = useFormComponentStyles(prevStyles);
-  const disableReadonlyStyles = disabledStyleOnReadonly && readOnly;
 
   const newStyles = {
     ...buttonStyles.dimensionsStyles,
-    ...(['primary', 'default', 'ghost'].includes(item.buttonType) && !disableReadonlyStyles && buttonStyles.borderStyles),
+    ...(['primary', 'default', 'ghost'].includes(item.buttonType) && buttonStyles.borderStyles),
     ...buttonStyles.fontStyles,
-    ...(['dashed', 'default', 'ghost'].includes(item.buttonType) && !disableReadonlyStyles && buttonStyles.backgroundStyles),
-    ...(['primary', 'default', 'dashed', 'ghost'].includes(item.buttonType) && !disableReadonlyStyles && buttonStyles.shadowStyles),
-    ...(!disableReadonlyStyles && buttonStyles.jsStyle),
+    ...(['dashed', 'default', 'ghost'].includes(item.buttonType) && buttonStyles.backgroundStyles),
+    ...(['primary', 'default', 'dashed', 'ghost'].includes(item.buttonType) && buttonStyles.shadowStyles),
+    ...(buttonStyles.jsStyle),
     ...buttonStyles.stylingBoxAsCSS,
     justifyContent: buttonStyles.fontStyles.textAlign,
   };
@@ -85,8 +84,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
             className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable')}
             size={size}
             block={block}
-            disabled={readOnly}
-            style={{ ...newStyles }}
+            style={{ ...newStyles, ...(readOnly && { cursor: 'not-allowed' }) }}
           >
             {label}
           </Button>

shesha-reactjs/src/components/buttonGroupConfigurator/itemSettings.ts

@@ -246,8 +246,8 @@ export const getItemSettings = () => {
                                         {
                                             id: nanoid(),
                                             type: 'switch',
-                                            propertyName: 'disabledStyleOnReadonly',
-                                            label: 'Disable Style On Readonly',
+                                            propertyName: 'enableStyleOnReadonly',
+                                            label: 'Enable Style On Readonly',
                                             tooltip: 'Removes all visual styling except typography when the component becomes read-only',
                                             jsSetting: true,
                                             hidden: {

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

@@ -28,7 +28,7 @@ export interface ICustomFileProps extends IInputStyles {
   hideFileName?: boolean;
   container?: IStyleType;
   primaryColor?: string;
-  disabledStyleOnReadonly?: boolean;
+  enableStyleOnReadonly?: boolean;
 }
 
 export const CustomFile: FC<ICustomFileProps> = (props) => {

shesha-reactjs/src/components/dropdown/dropdown.tsx

@@ -34,7 +34,8 @@ export const Dropdown: FC<IDropdownProps> = ({
     showItemName,
     allowClear = true,
     displayStyle,
-    tagStyle
+    tagStyle,
+    enableStyleOnReadonly
 }) => {
 
     const { styles } = useStyles({ style });
@@ -143,6 +144,7 @@ export const Dropdown: FC<IDropdownProps> = ({
                 filterOption={filterOption}
                 incomeValueFunc={incomeValueFunc}
                 outcomeValueFunc={outcomeValueFunc}
+                enableStyleOnReadonly={enableStyleOnReadonly}
             />
         );
     }
@@ -156,14 +158,13 @@ export const Dropdown: FC<IDropdownProps> = ({
         return options?.filter(({ value: currentValue }) => selectedValues.indexOf(currentValue) > -1)?.map(({ label }) => ({ label }));
     };
 
-
-
     if (readOnly) {
         return <ReadOnlyDisplayFormItem
             showIcon={showIcon}
             solidColor={solidColor}
             showItemName={showItemName}
-            style={displayStyle === 'tags' ? tagStyle : style}
+            tagStyle={tagStyle}
+            style={style}
             dropdownDisplayMode={displayStyle === 'tags' ? 'tags' : 'raw'}
             type={mode === 'multiple' ? 'dropdownMultiple' : 'dropdown'}
             value={mode === 'multiple' ?
@@ -224,7 +225,7 @@ export const Dropdown: FC<IDropdownProps> = ({
     return (
         <Select
             {...commonSelectProps}
-            style={{ ...style }}
+            style={style}
             showSearch
             filterOption={filterOption}
             placeholder={placeholder}

shesha-reactjs/src/components/dropdown/model.ts

@@ -50,5 +50,5 @@ export interface IDropdownProps {
   showItemName?: boolean;
   showIcon?: boolean;
   solidColor?: boolean;
-  disabledStyleOnReadonly?: boolean;
+  enableStyleOnReadonly?: boolean;
 }

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

@@ -71,7 +71,7 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
   const { backendUrl, httpHeaders } = useSheshaApplication();
   const { refetch: fetchForm } = useFormConfiguration({ formId: formIdentifier, lazy: true });
   const { notification } = App.useApp();
-  const {styles, cx} = useStyles();
+  const { styles, cx } = useStyles();
 
   useEffect(() => {
     if (formIdentifier) {
@@ -194,7 +194,7 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
 export const GenericQuickView: FC<IQuickViewProps> = (props) => {
   const { getEntityFormId } = useConfigurationItemsLoader();
   const [formConfig, setFormConfig] = useState<FormIdentifier>(props.formIdentifier ?? undefined);
-  const {styles, cx} = useStyles();
+  const { styles, cx } = useStyles();
 
   useEffect(() => {
     if (props.className && !formConfig)

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

@@ -1,4 +1,4 @@
-import { Space, Switch } from 'antd';
+import { Switch } from 'antd';
 import Checkbox from 'antd/lib/checkbox/Checkbox';
 import { ValueRenderer } from '@/components/valueRenderer/index';
 import React, { FC, useMemo } from 'react';
@@ -90,11 +90,10 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
                 solidColor={solidColor}
                 showItemName={showItemName}
                 label={displayName}
-              />
-              : <InputField style={style} value={displayName ?? (typeof value === 'object' ? null : value)} />;
+              /> :
+              <InputField style={style} value={displayName ?? (typeof value === 'object' ? null : value)} />;
           }
         }
-
         return null;
 
       case 'dropdownMultiple': {
@@ -103,7 +102,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
 
           return dropdownDisplayMode === 'raw'
             ? <InputField style={style} value={values?.join(', ')} />
-            : <Space size={8}>
+            : <div style={{ padding: '0px 4px', ...style, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, justifyContent: style?.textAlign }}>
               {value?.map(({ label, color, icon, value, description }) => {
                 return <ReflistTag
                   key={value}
@@ -118,7 +117,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
                   label={label}
                 />;
               })}
-            </Space>;
+            </div>;
         }
 
         throw new Error(
@@ -135,7 +134,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
         return <Checkbox checked={checked} defaultChecked={defaultChecked} disabled style={style} />;
       }
       case 'switch': {
-        return <Switch checked={checked} defaultChecked={defaultChecked} style={{ pointerEvents: 'none', ...style }} />;
+        return <Switch checked={checked} defaultChecked={defaultChecked} style={{ pointerEvents: 'none', ...style }} size={props.size} />;
       }
       case 'textArea': {
         return <div style={{ ...style, whiteSpace: 'pre-wrap' }}>{value}</div>;

shesha-reactjs/src/components/readOnlyDisplayFormItem/inputField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStyles } from './styles/styles';
 
 interface IInputFieldProps {
-    value: string | number | React.ReactNode;
+    value?: string | number | React.ReactNode;
     style?: React.CSSProperties;
     children?: React.ReactNode;
 }
@@ -14,8 +14,8 @@ function InputField({ value, style, children }: IInputFieldProps) {
     const { fontSize, fontWeight, color, fontFamily, textAlign, height, } = style || {};
 
     return value || children ? (
-        <div style={{ ...style, height: height === 'auto' ? '32px' : height, display: 'flex', alignItems: 'center', justifyContent: textAlign }} >
-            <div className={styles.inputField} style={{ fontSize, fontWeight, color, fontFamily }}>{value || children}</div>
+        <div style={{ padding: '4px', ...style, height: height, display: 'flex', alignItems: 'center', justifyContent: textAlign }} >
+            <div className={styles.inputField} style={{ fontSize, fontWeight, color, fontFamily, whiteSpace: height === 'auto' ? 'pre-wrap' : 'nowrap' }}>{value || children}</div>
         </div>
     ) : null;
 }