feat(StyleTraitForm): add padding and margin widget

packages/editor-sdk/src/components/Widgets/StyleWidgets/SpaceWidget.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { CORE_VERSION, StyleWidgetName } from '@sunmao-ui/shared';
+import { WidgetProps } from '../../../types/widget';
+import { implementWidget, mergeWidgetOptionsIntoSpec } from '../../../utils/widget';
+import { ExpressionWidget } from '../ExpressionWidget';
+import { Grid, GridItem } from '@chakra-ui/react';
+
+const SPACE_DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+
+export const SpaceWidget: React.FC<WidgetProps<{}>> = props => {
+  const { value, onChange } = props;
+
+  return (
+    <div>
+      <Grid
+        templateRows="repeat(3, 1fr)"
+        templateColumns="repeat(3, 1fr)"
+        templateAreas={`". top ."
+                        "left . right"
+                        ". bottom ."`}
+        gap="1"
+      >
+        {SPACE_DIRECTIONS.map((direction, idx) => {
+          return (
+            <GridItem
+              maxW="120px"
+              minW="0px"
+              key={direction}
+              area={direction}
+              gridArea={direction}
+            >
+              <ExpressionWidget
+                {...props}
+                spec={mergeWidgetOptionsIntoSpec(props.spec, {
+                  compactOptions: { height: '32px' },
+                })}
+                value={value[idx]}
+                onChange={v => {
+                  onChange(v, direction);
+                }}
+              />
+            </GridItem>
+          );
+        })}
+      </Grid>
+    </div>
+  );
+};
+
+export default implementWidget({
+  version: CORE_VERSION,
+  metadata: {
+    name: StyleWidgetName.Space,
+  },
+})(SpaceWidget);

packages/editor-sdk/src/components/Widgets/index.ts

@@ -17,6 +17,7 @@ import popoverWidgetSpec from './PopoverWidget';
 import sizeWidgetSpec from './StyleWidgets/SizeWidget';
 import fontWidgetSpec from './StyleWidgets/FontWidget';
 import colorWidgetSpec from './StyleWidgets/ColorWidget';
+import spaceWidgetSpec from './StyleWidgets/SpaceWidget';
 
 export * from './SpecWidget';
 export * from './ArrayField';
@@ -36,8 +37,10 @@ export * from './PopoverWidget';
 export * from './StyleWidgets/SizeWidget';
 export * from './StyleWidgets/FontWidget';
 export * from './StyleWidgets/ColorWidget';
+export * from './StyleWidgets/SpaceWidget';
 
 export const widgets: ImplementedWidget<any>[] = [
+  spaceWidgetSpec,
   specWidgetSpec,
   arrayFieldSpec,
   booleanFieldSpec,

packages/editor-sdk/src/types/widget.ts

@@ -11,7 +11,7 @@ export type WidgetProps<WidgetOptions = Record<string, any>, ValueType = any> =
   path: string[];
   level: number;
   value: ValueType;
-  onChange: (v: ValueType) => void;
+  onChange: (v: ValueType, ...args: any[]) => void;
 };
 
 export type Widget = {

packages/editor/src/components/ComponentForm/StyleTraitForm/StyleTraitForm.tsx

@@ -19,11 +19,12 @@ import {
 } from '@chakra-ui/react';
 import { ComponentSchema } from '@sunmao-ui/core';
 import { CORE_VERSION, CoreTraitName } from '@sunmao-ui/shared';
-import { FontWidget, SizeWidget, ColorWidget } from '@sunmao-ui/editor-sdk';
+import { FontWidget, SizeWidget, ColorWidget, SpaceWidget } from '@sunmao-ui/editor-sdk';
 import { CssEditor } from '../../../components/CodeEditor';
 import { genOperation } from '../../../operations';
 import { formWrapperCSS } from '../style';
 import { EditorServices } from '../../../types';
+import { capitalize } from 'lodash-es';
 
 type PartialCSSProperties = Partial<Record<keyof React.CSSProperties, any>>;
 
@@ -199,6 +200,42 @@ export const StyleTraitForm: React.FC<Props> = props => {
                   onChange={changeCssProperties}
                 />
               </CollapsibleFormControl>
+              <CollapsibleFormControl label="Margin">
+                <SpaceWidget
+                  {...widgetProps}
+                  value={[
+                    _cssProperties.marginTop,
+                    _cssProperties.marginRight,
+                    _cssProperties.marginBottom,
+                    _cssProperties.marginLeft,
+                  ]}
+                  onChange={(v: string, direction: string) => {
+                    const key = `margin${capitalize(direction)}`;
+                    changeCssProperties({
+                      ..._cssProperties,
+                      [key]: v,
+                    });
+                  }}
+                />
+              </CollapsibleFormControl>
+              <CollapsibleFormControl label="Padding">
+                <SpaceWidget
+                  {...widgetProps}
+                  value={[
+                    _cssProperties.paddingTop,
+                    _cssProperties.paddingRight,
+                    _cssProperties.paddingBottom,
+                    _cssProperties.paddingLeft,
+                  ]}
+                  onChange={(v: string, direction: string) => {
+                    const key = `padding${capitalize(direction)}`;
+                    changeCssProperties({
+                      ..._cssProperties,
+                      [key]: v,
+                    });
+                  }}
+                />
+              </CollapsibleFormControl>
               <CollapsibleFormControl label="Font">
                 <FontWidget
                   value={_cssProperties || {}}

packages/shared/src/constants/core.ts

@@ -44,4 +44,5 @@ export enum StyleWidgetName {
   Size = 'size',
   Color = 'color',
   Font = 'font',
+  Space = 'space',
 }