style widget

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { HStack, Input, Text } from '@chakra-ui/react';
+import { CORE_VERSION, StyleWidgetName } from '@sunmao-ui/shared';
+import { WidgetProps } from '../../../types/widget';
+import { implementWidget } from '../../../utils/widget';
+
+type Size = {
+  width: string;
+  height: string;
+};
+
+export const SizeField: React.FC<WidgetProps<{}, Size>> = props => {
+  const { value, onChange } = props;
+  // const [size, setSize] = React.useState<Size>({ width: '', height: '' });
+
+  return (
+    <HStack>
+      <Text>W</Text>
+      <Input
+        value={value.width}
+        onChange={e => {
+          const newSize = {
+            ...value,
+            height: e.target.value,
+          };
+          // setSize({
+          //   ...size,
+          //   width: e.target.value,
+          // });
+          onChange(newSize);
+        }}
+      />
+      <Text>H</Text>
+      <Input
+        value={value.height}
+        onChange={e => {
+          const newSize = {
+            ...value,
+            height: e.target.value,
+          };
+          onChange(newSize);
+          // setSize({
+          //   ...size,
+          //   height: e.target.value,
+          // });
+        }}
+      />
+    </HStack>
+  );
+};
+
+export default implementWidget({
+  version: CORE_VERSION,
+  metadata: {
+    name: StyleWidgetName.Size,
+  },
+})(SizeField);

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

@@ -14,6 +14,7 @@ import moduleWidgetSpec from './ModuleWidget';
 import recordWidgetSpec from './RecordField';
 import eventWidgetSpec from './EventWidget';
 import popoverWidgetSpec from './PopoverWidget';
+import sizeWidgetSpec from './StyleWidgets/SizeWidget';
 
 export * from './SpecWidget';
 export * from './ArrayField';
@@ -30,6 +31,8 @@ export * from './ModuleWidget';
 export * from './RecordField';
 export * from './EventWidget';
 export * from './PopoverWidget';
+export * from './StyleWidgets/SizeWidget';
+
 export const widgets: ImplementedWidget<any>[] = [
   specWidgetSpec,
   arrayFieldSpec,
@@ -45,5 +48,6 @@ export const widgets: ImplementedWidget<any>[] = [
   expressionWidgetSpec,
   recordWidgetSpec,
   eventWidgetSpec,
-  popoverWidgetSpec
+  popoverWidgetSpec,
+  sizeWidgetSpec,
 ];

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

@@ -4,14 +4,14 @@ import { ComponentSchema } from '@sunmao-ui/core';
 import { EditorServices } from './editor';
 import { SpecOptions } from '@sunmao-ui/shared';
 
-export type WidgetProps<WidgetOptions = Record<string, any>> = {
+export type WidgetProps<WidgetOptions = Record<string, any>, ValueType = any> = {
   component: ComponentSchema;
   spec: JSONSchema7 & SpecOptions<WidgetOptions>;
   services: EditorServices;
   path: string[];
   level: number;
-  value: any;
-  onChange: (v: any) => void;
+  value: ValueType;
+  onChange: (v: ValueType) => void;
 };
 
 export type Widget = {
@@ -23,10 +23,13 @@ export type Widget = {
   spec?: {
     options?: JSONSchema7;
   };
-}
+};
 
 export type CreateWidgetOptions = Omit<Widget, 'kind'>;
 
-export type ImplementedWidget<T = Record<string, any>> = CreateWidgetOptions & {
-  impl: React.ComponentType<WidgetProps<T>>;
+export type ImplementedWidget<
+  T = Record<string, any>,
+  ValueType = any
+> = CreateWidgetOptions & {
+  impl: React.ComponentType<WidgetProps<T, ValueType>>;
 };

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

@@ -16,6 +16,7 @@ import { genOperation } from '../../../operations';
 import { formWrapperCSS } from '../style';
 import { EditorServices } from '../../../types';
 import { CORE_VERSION, CoreTraitName } from '@sunmao-ui/shared';
+import { SizeField } from '@sunmao-ui/editor-sdk';
 
 type Props = {
   component: ComponentSchema;
@@ -127,6 +128,25 @@ export const StyleTraitForm: React.FC<Props> = props => {
       };
       return (
         <VStack key={`${styleSlot}-${i}`} css={formWrapperCSS} width="full" spacing="2">
+          <FormControl>
+            <FormLabel marginInlineEnd="0">
+              <HStack width="full" justify="space-between">
+                <Text>Size</Text>
+                <IconButton
+                  aria-label="remove style"
+                  size="sm"
+                  variant="ghost"
+                  colorScheme="red"
+                  icon={<CloseIcon />}
+                  onClick={removeStyle}
+                />
+              </HStack>
+            </FormLabel>
+            <SizeField
+              value={{ width: '123px', height: '666px' }}
+              onChange={() => console.log('hhh')}
+            />
+          </FormControl>
           <FormControl id={styleSlot}>
             <FormLabel marginInlineEnd="0">
               <HStack width="full" justify="space-between">

packages/shared/src/constants/core.ts

@@ -1,4 +1,5 @@
 export const CORE_VERSION = 'core/v1';
+export declare const STYLE_VERSION = "style/v1";
 // core components
 export enum CoreComponentName {
   Dummy = 'dummy',
@@ -37,3 +38,7 @@ export enum CoreWidgetName {
   StringField = 'string',
   UnsupportedField = 'unsupported',
 }
+
+export enum StyleWidgetName {
+  Size = 'size'
+}