refactor: Optimised form styles

packages/arco-lib/src/components/Form/EmptyPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@arco-design/web-react';
 
-const DragComponentTips: React.FC<{ componentName: string }> = ({ componentName }) => {
+const EmptyPlaceholder: React.FC<{ componentName: string }> = ({ componentName }) => {
   return (
     <Typography.Paragraph style={{ color: '#b2b2b2' }}>
       Please drag{' '}
@@ -12,4 +12,4 @@ const DragComponentTips: React.FC<{ componentName: string }> = ({ componentName
   );
 };
 
-export { DragComponentTips };
+export { EmptyPlaceholder };

packages/arco-lib/src/components/Form/Form.tsx

@@ -4,29 +4,15 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../../sunmao-helper';
 import { FormPropsSchema as BaseFormPropsSchema } from '../../generated/types/Form';
-import { DragComponentTips } from './DragComponentTips';
+import { EmptyPlaceholder } from './EmptyPlaceholder';
 
 const FormPropsSchema = Type.Object(BaseFormPropsSchema);
 const FormStateSchema = Type.Object({});
 
 const FormImpl: ComponentImpl<Static<typeof FormPropsSchema>> = props => {
-  const { childrenLayout, bordered, ...cProps } = getComponentProps(props);
+  const { inline, bordered, ...cProps } = getComponentProps(props);
   const { elementRef, customStyle, slotsElements } = props;
 
-  let formStyle;
-  if (cProps.layout === 'inline' && childrenLayout === 'vertical') {
-    formStyle = `
-      && {
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
-      && > *{
-        margin:0 10px 10px 0;
-        display: block;
-        width: auto
-      }
-      `;
-  }
   const borderStyle = css`
     border: 1px solid #eee;
     width: 100%;
@@ -36,11 +22,15 @@ const FormImpl: ComponentImpl<Static<typeof FormPropsSchema>> = props => {
 
   return (
     <div ref={elementRef} className={bordered ? borderStyle : ''}>
-      <BaseForm className={css(customStyle?.content, formStyle)} {...cProps}>
+      <BaseForm
+        className={css(customStyle?.content)}
+        {...cProps}
+        layout={inline ? 'inline' : 'horizontal'}
+      >
         {slotsElements.content ? (
           slotsElements.content
         ) : (
-          <DragComponentTips componentName="Form Control" />
+          <EmptyPlaceholder componentName="Form Control" />
         )}
       </BaseForm>
     </div>
@@ -48,19 +38,17 @@ const FormImpl: ComponentImpl<Static<typeof FormPropsSchema>> = props => {
 };
 
 const exampleProperties: Static<typeof FormPropsSchema> = {
-  layout: 'horizontal',
+  inline: false,
   size: 'default',
   bordered: true,
-  labelAlign: 'left',
-  childrenLayout: 'horizontal',
 };
 
 const options = {
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
-    name: 'formStack',
-    displayName: 'Form Stack',
+    name: 'form',
+    displayName: 'Form',
     exampleProperties,
     annotations: {
       category: 'Display',

packages/arco-lib/src/components/Form/FormControl.tsx

@@ -4,7 +4,7 @@ import { css, cx } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../../sunmao-helper';
 import { FormControlPropsSchema as BaseFormControlPropsSchema } from '../../generated/types/Form';
-import { DragComponentTips } from './DragComponentTips';
+import { EmptyPlaceholder } from './EmptyPlaceholder';
 import { FormControlErrorMessage } from './FormControlErrorMessage';
 
 const FormControlPropsSchema = Type.Object(BaseFormControlPropsSchema);
@@ -14,18 +14,12 @@ const FormControlImpl: ComponentImpl<Static<typeof FormControlPropsSchema>> = pr
   const { label, errorMsg, ...cProps } = getComponentProps(props);
   const { elementRef, slotsElements, customStyle } = props;
 
-  if (!cProps.colon) {
-    Reflect.deleteProperty(cProps, 'colon');
-  }
-  if (cProps.labelAlign === 'unset') {
-    Reflect.deleteProperty(cProps, 'labelAlign');
-  }
-
-  const formControlProps = {
-    className: cx(
-      'sunmao-form-control-layout',
-      css`
+  return (
+    <BaseFormControl
+      label={<Text cssStyle="display:inline-block" value={label} />}
+      className={css`
         ${customStyle?.content}
+        margin-right:10px;
         svg {
           display: inherit;
         }
@@ -35,22 +29,14 @@ const FormControlImpl: ComponentImpl<Static<typeof FormControlPropsSchema>> = pr
         & label {
           white-space: inherit !important;
         }
-      `
-    ),
-  };
-
-  return (
-    <BaseFormControl
-      label={<Text cssStyle="display:inline-block" value={label} />}
+      `}
       ref={elementRef}
-      {...formControlProps}
       {...cProps}
-      labelAlign={cProps.labelAlign as any}
     >
       {slotsElements.content ? (
         slotsElements.content
       ) : (
-        <DragComponentTips componentName="Form Control" />
+        <EmptyPlaceholder componentName="Form Control" />
       )}
       <FormControlErrorMessage errorMsg={errorMsg} />
     </BaseFormControl>
@@ -62,11 +48,12 @@ const exampleProperties: Static<typeof FormControlPropsSchema> = {
     format: 'md',
     raw: '**label**',
   },
+  layout: 'horizontal',
   required: false,
   hidden: false,
   extra: '',
   errorMsg: '',
-  labelAlign: 'unset',
+  labelAlign: 'left',
   colon: false,
   labelCol: { span: 5, offset: 0 },
   wrapperCol: { span: 19, offset: 0 },

packages/arco-lib/src/generated/types/Form.ts

@@ -13,6 +13,10 @@ export const FormControlPropsSchema = {
         title: 'Hidden',
         category: PRESET_PROPERTY_CATEGORY.Basic
     }),
+    layout: StringUnion(['vertical', 'horizontal'], {
+        title: 'Layout',
+        category: PRESET_PROPERTY_CATEGORY.Layout,
+    }),
     extra: Type.String({
         title: 'Extra',
         category: PRESET_PROPERTY_CATEGORY.Basic
@@ -25,7 +29,7 @@ export const FormControlPropsSchema = {
         title: 'Help Message',
         category: PRESET_PROPERTY_CATEGORY.Basic
     }),
-    labelAlign: StringUnion(['left', 'right', 'unset'], {
+    labelAlign: StringUnion(['left', 'right'], {
         title: 'Label Align',
         category: PRESET_PROPERTY_CATEGORY.Layout
     }),
@@ -50,16 +54,8 @@ export const FormControlPropsSchema = {
 }
 
 export const FormPropsSchema = {
-    layout: StringUnion(['horizontal', 'vertical', 'inline'], {
-        title: 'Layout',
-        category: PRESET_PROPERTY_CATEGORY.Layout
-    }),
-    childrenLayout: StringUnion(['vertical', 'horizontal'], {
-        title: 'Children Layout',
-        category: PRESET_PROPERTY_CATEGORY.Layout,
-    }),
-    labelAlign: StringUnion(['left', 'right'], {
-        title: 'Label Align',
+    inline: Type.Boolean({
+        title: 'Inline',
         category: PRESET_PROPERTY_CATEGORY.Layout
     }),
     size: StringUnion(['mini', 'small', 'default', 'large'], {

packages/editor/package.json

@@ -34,7 +34,6 @@
     "@chakra-ui/icons": "^1.0.15",
     "@chakra-ui/react": "^1.7.1",
     "@emotion/css": "^11.7.1",
-    "@sunmao-ui/arco-lib": "^0.0.7-alpha.1",
     "@sunmao-ui/chakra-ui-lib": "^0.2.0",
     "@sunmao-ui/core": "^0.4.0",
     "@sunmao-ui/runtime": "^0.4.0",

packages/editor/src/main.tsx

@@ -2,7 +2,6 @@ import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import { Registry } from '@sunmao-ui/runtime';
 import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
-import { ArcoDesignLib } from '@sunmao-ui/arco-lib';
 import { initSunmaoUIEditor } from './init';
 import { LocalStorageManager } from './LocalStorageManager';
 
@@ -15,7 +14,7 @@ type Options = Partial<{
 
 const lsManager = new LocalStorageManager();
 const { Editor, registry } = initSunmaoUIEditor({
-  libs: [sunmaoChakraUILib, ArcoDesignLib],
+  libs: [sunmaoChakraUILib],
   storageHandler: {
     onSaveApp(app) {
       lsManager.saveAppInLS(app);

yarn.lock

@@ -3199,22 +3199,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@sunmao-ui/arco-lib@^0.0.7-alpha.1":
-  version "0.0.7-alpha.1"
-  resolved "https://registry.yarnpkg.com/@sunmao-ui/arco-lib/-/arco-lib-0.0.7-alpha.1.tgz#d5a82d3538f8c82e5c70515324ec660fa3be48a8"
-  integrity sha512-k/eRuyA7NBjv/wkRO52lc9wCZObqGQj427A6BxUvCJjM3k9wv0N/XJQqs3psjiOd1HSUkqJxhrOw2HK/ZPezXw==
-  dependencies:
-    "@arco-design/web-react" "^2.29.0"
-    "@emotion/css" "^11.5.0"
-    "@sinclair/typebox" "^0.21.2"
-    "@sunmao-ui/core" "^0.4.0"
-    "@sunmao-ui/runtime" "^0.4.0"
-    eslint-plugin-react-hooks "^4.3.0"
-    lodash "^4.17.21"
-    lodash-es "^4.17.21"
-    react "^17.0.2"
-    react-dom "^17.0.2"
-
 "@swc/core-android-arm64@^1.2.121":
   version "1.2.121"
   resolved "https://registry.yarnpkg.com/@swc/core-android-arm64/-/core-android-arm64-1.2.121.tgz#f3508a8e1022ea05c4658082c21000073a404889"