Merge pull request #3102 from czwe-01/thulasizwe/en/tabed-properties-panel

Thulasizwe/en/tabed properties panel

Author: James-Baloyi

shesha-reactjs/src/designer-components/_settings/components/formItem.tsx

@@ -24,9 +24,9 @@ const FormItem: FC<ISettingsFormItemProps> = (props) => {
         childElement,
         {
             ...childElement?.props,
-            readOnly: readOnly || hasCode,
+            readOnly: readOnly,
             size: 'small',
-            disabled: readOnly || hasCode,
+            disabled: readOnly,
             onChange: handleChange(onChange),
             [valuePropName]: value
         }

shesha-reactjs/src/designer-components/_settings/settingsControl.tsx

@@ -9,6 +9,10 @@ import { GetAvailableConstantsFunc, GetResultTypeFunc, ICodeEditorProps } from '
 import { CodeEditorWithStandardConstants } from '../codeEditor/codeEditorWithConstants';
 import { useConstantsEvaluator } from '../codeEditor/hooks/useConstantsEvaluator';
 import { useResultTypeEvaluator } from '../codeEditor/hooks/useResultType';
+import { Button } from 'antd';
+import {
+  CodeOutlined, CodeFilled, FormOutlined
+} from '@ant-design/icons';
 
 export type SettingsControlChildrenType = (value: any, onChange: (val: any) => void, propertyName: string) => ReactElement;
 
@@ -75,6 +79,11 @@ export const SettingsControl = <Value = any>(props: ISettingsControlProps<Value>
     }
   };
 
+  const onSwitchMode = () => {
+    const newMode = mode === 'code' ? 'value' : 'code';
+    onInternalChange(setting, newMode);
+  };
+
 
   const propertyName = !!setting._code || setting._mode === 'code' ? `${props.propertyName}._value` : props.propertyName;
   const functionName = `get${camelcase(props.propertyName, { pascalCase: true })}`;
@@ -94,7 +103,6 @@ export const SettingsControl = <Value = any>(props: ISettingsControlProps<Value>
     },
     type: 'text',
     label: ' ',
-    className: `${styles.jsSwitch}`,
     ghost: true,
     exposedVariables: defaultExposedVariables,
     hidden: !setting._code && props.readOnly,
@@ -107,8 +115,19 @@ export const SettingsControl = <Value = any>(props: ISettingsControlProps<Value>
 
   return (
     <div className={mode === 'code' ? styles.contentCode : styles.contentJs}>
-      {editor}
-      {!code && <div className={styles.jsContent} style={{ marginLeft: 0 }}>
+      <Button
+        hidden={props.readOnly}
+        className={`${styles.jsSwitch} inlineJS`}
+        type='text'
+        danger={mode === 'value' && !!code}
+        ghost
+        size='small'
+        icon={mode === 'code' ? <FormOutlined /> : !!code ? <CodeFilled /> : <CodeOutlined />}
+        color='lightslategrey'
+        onClick={onSwitchMode}
+      />
+      {mode === 'code' && editor}
+      {mode === 'value' && <div className={styles.jsContent} style={{ marginLeft: 0 }}>
         {props.children(setting?._value, valueOnChange, propertyName)}
       </div>}
     </div>

shesha-reactjs/src/designer-components/_settings/styles/styles.ts

@@ -1,6 +1,6 @@
 import { createStyles, sheshaStyles } from '@/styles';
 
-export const useStyles = createStyles(({ css, cx, responsive, prefixCls, token }, hasCode) => {
+export const useStyles = createStyles(({ css, cx, responsive, token }, hasCode) => {
 
     const contentJs = cx(css`
         position: relative;
@@ -51,7 +51,6 @@ export const useStyles = createStyles(({ css, cx, responsive, prefixCls, token }
         top: -8px;
         `);
     const jsSwitch = cx(css`
-        &.${prefixCls}-btn {
             position: absolute;
             right: 0;
             top: 4px;
@@ -74,14 +73,14 @@ export const useStyles = createStyles(({ css, cx, responsive, prefixCls, token }
             .sidebar-container & {
                 right: 0;
                 left: auto;
-                top: ${hasCode ? '-35px' : '-25px'};
+                top: -25px;
             }
             .${sheshaStyles.verticalSettingsClass} & {
                 right: 0;
                 left: auto;
                 top: ${hasCode ? '-38px' : '-25px'};
             }
-        }
+        
     `);
 
     return {

shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx

@@ -18,7 +18,7 @@ import { readThemeColor } from "@/components/colorPicker";
 
 export const getBorderStyle = (input: IBorderValue, jsStyle: React.CSSProperties, theme?: IConfigurableTheme): React.CSSProperties => {
     if (!input) return {};
-        
+
     const style: React.CSSProperties = {};
     const border = input.border || {};
     const { all = {}, top = {}, right = {}, bottom = {}, left = {} } = border;
@@ -127,8 +127,8 @@ export const borderCorners = [
     { value: "bottomRight", icon: "RadiusBottomrightOutlined", title: "Bottom Right" }
 ];
 
-
 const generateCode = (type: string, isCustom: boolean, isResponsive: boolean, path: string) => {
+
     const devicePath = isResponsive ? 'data[`${contexts.canvasContext?.designerDevice || "desktop"}`]' : 'data';
     return `return getSettingValue(${devicePath}${path ? '?.' + path : ''}?.border?.${type}) !== "${isCustom ? "custom" : "all"}";`;
 };

shesha-reactjs/src/designer-components/button/button.tsx

@@ -92,7 +92,7 @@ const ButtonComponent: IToolboxComponent<IButtonComponentProps> = {
       ...(['dashed', 'default'].includes(model.buttonType) && backgroundStyles),
       ...(['primary', 'default'].includes(model.buttonType) && shadowStyles),
       ...stylingBoxAsCSS,
-      ...jsStyle
+      ...jsStyle,
     };
 
     return (

shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx

@@ -10,9 +10,8 @@ import {
   Tabs,
   Typography
 } from 'antd';
-import classNames from 'classnames';
 import { CodeEditor as BaseCodeEditor } from '@/components/codeEditor/codeEditor';
-import { CodeFilled, CodeOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+import { CodeOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import { CodeVariablesTables } from '@/components/codeVariablesTable';
 import { ICodeEditorProps } from './interfaces';
 import { Show } from '@/components';
@@ -146,8 +145,13 @@ export const CodeEditor: FC<ICodeEditorProps> = ({
     ? (<Typography.Text disabled>No Code</Typography.Text>)
     : (
       <>
-        <Button type={props.type ? props.type : hasValue ? 'primary' : 'default'} className={classNames(styles.button, props.className)} icon={hasValue ? <CodeFilled /> : <CodeOutlined />} onClick={openEditorDialog} size="small" style={{}}>
-          {props.label !== " " && (readOnly ? 'View Code' : '...')}
+        <Button
+          className={props.className}
+          size="small"
+          onClick={openEditorDialog}
+          style={hasValue ? { fontFamily: 'monospace', fontSize: '12px' } : undefined}
+        >
+          {hasValue ? <><CodeOutlined /> {value}</> : <><CodeOutlined /> ...</>}
         </Button>
         {showDialog && (
           <Modal

shesha-reactjs/src/designer-components/propertiesTabs/style.ts

@@ -16,6 +16,18 @@ export const useStyles = createStyles(({ css, cx, }) => {
             .ant-tabs-tab {
                 --ant-tabs-card-padding-sm: 0 8px;
             }
+
+            .sha-toolbar-btn-configurable, .ant-btn {
+                display: flex;
+                align-items: center;
+                max-width: 100%;
+                span {
+                    max-width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+        }
         `);
 
     return {