fix: add setter type

NetEase · May 15, 2024 · 9c0d195 · 9c0d195
1 parent c5006a4
commit 9c0d195
Show file tree

Hide file tree

Showing 14 changed files with 487 additions and 460 deletions.
diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx
diff --git a/packages/designer/src/index.ts b/packages/designer/src/index.ts
@@ -14,7 +14,6 @@ export * from './selection-menu';
 export * from './widgets';
 export * from './themes';
 export * from './components';
-export * from './setters';
 
 export { register as registerSetter } from '@music163/tango-setting-form';
 

diff --git a/packages/designer/src/setters/css-setter.tsx b/packages/designer/src/setters/css-setter.tsx
@@ -2,9 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Box } from 'coral-system';
 // @ts-ignore
 import { toJSON } from 'cssjson';
-import { InputNumber, Space } from 'antd';
+import { InputNumber, Slider, Space } from 'antd';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
-import { SliderSetter } from './number-setter';
 import {
   BgSetter,
   BorderSetter,
@@ -16,10 +15,11 @@ import {
   FlexJustifyContentSetter,
   SpacingSetter,
 } from './style-setter';
+import { wrapCode } from '@music163/tango-helpers';
 
 const getRawCssValue = (value: string) => {
-  if (value && value.startsWith('{css`')) {
-    return value.split('').slice(5, -2).join('').trim();
+  if (value && value.startsWith('{{css`')) {
+    return value.split('').slice(6, -3).join('').trim();
   }
   return value;
 };
@@ -51,7 +51,8 @@ const cssPattern = (string: string, name: string): any => {
 };
 
 /**
- * 废弃
+ * coral-system css prop
+ * @example 提供 css-in-js 代码支持，例如 css`background: red;`
  * @deprecated 使用嵌套属性代替
  */
 export function CssSetter(props: FormItemComponentProps<string>) {
@@ -82,16 +83,14 @@ export function CssSetter(props: FormItemComponentProps<string>) {
 
   useEffect(() => {
     if (contentValue || contentValue === '') {
-      onChange(`{css\`${contentValue}\`}`, {
-        // relatedImports: ['']
-      });
+      onChange(wrapCode(`css\`${contentValue}\``));
     }
   }, [contentValue]);
 
   const isFlex = ['flex', 'inline-flex'].includes(display);
 
   return (
-    <Box>
+    <Box bg="fill1">
       <ItemGroup title="布局方式">
         <DisplaySetter
           value={toJSON(contentValue).attributes?.display}
@@ -204,12 +203,12 @@ export function CssSetter(props: FormItemComponentProps<string>) {
         />
       </ItemGroup>
       <ItemGroup title="透明度">
-        <SliderSetter
+        <Slider
           max={1}
           min={0}
           step={0.1}
           value={toJSON(contentValue).attributes?.opacity || 1}
-          onChange={(v) => {
+          onChange={(v: number) => {
             changeStyle(v, 'opacity');
           }}
         />

diff --git a/packages/designer/src/setters/date-setter.tsx b/packages/designer/src/setters/date-setter.tsx
@@ -25,13 +25,18 @@ const style = {
   width: '100%',
 };
 
-export function DateSetter({ value, onChange, format = 'YYYY-MM-DD', ...rest }: FormItemComponentProps<string>) {
+export function DateSetter({
+  value,
+  onChange,
+  format = 'YYYY-MM-DD',
+  ...rest
+}: FormItemComponentProps<string>) {
   return (
     <DatePicker
       {...rest}
       format={format}
       style={style}
-      value={toMoment(value, format)}
+      value={value ? toMoment(value, format) : undefined}
       onChange={(val, str) => {
         onChange && onChange(str);
       }}
@@ -46,7 +51,12 @@ function toMoments(value: string[], format: string): moment.Moment[] {
   return [];
 }
 
-export function DateRangeSetter({ value, onChange, format = 'YYYY-MM-DD', ...rest }: FormItemComponentProps<string[]>) {
+export function DateRangeSetter({
+  value,
+  onChange,
+  format = 'YYYY-MM-DD',
+  ...rest
+}: FormItemComponentProps<string[]>) {
   return (
     <DatePicker.RangePicker
       {...rest}
@@ -60,7 +70,12 @@ export function DateRangeSetter({ value, onChange, format = 'YYYY-MM-DD', ...res
   );
 }
 
-export function TimeSetter({ value, onChange, format = 'HH:mm:ss', ...rest }: FormItemComponentProps<string>) {
+export function TimeSetter({
+  value,
+  onChange,
+  format = 'HH:mm:ss',
+  ...rest
+}: FormItemComponentProps<string>) {
   return (
     <TimePicker
       {...rest}
@@ -74,7 +89,12 @@ export function TimeSetter({ value, onChange, format = 'HH:mm:ss', ...rest }: Fo
   );
 }
 
-export function TimeRangeSetter({ value, onChange, format = 'HH:mm:ss', ...rest }: FormItemComponentProps<string[]>) {
+export function TimeRangeSetter({
+  value,
+  onChange,
+  format = 'HH:mm:ss',
+  ...rest
+}: FormItemComponentProps<string[]>) {
   return (
     <TimePicker.RangePicker
       {...rest}

diff --git a/packages/designer/src/setters/expression-setter.tsx b/packages/designer/src/setters/expression-setter.tsx
@@ -2,14 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Box, Text, css } from 'coral-system';
 import { Dropdown, Modal } from 'antd';
 import { isValidExpressionCode } from '@music163/tango-core';
-import {
-  noop,
-  useBoolean,
-  getValue,
-  IVariableTreeNode,
-  wrapCode,
-  getCodeOfWrappedCode,
-} from '@music163/tango-helpers';
+import { noop, useBoolean, getValue, IVariableTreeNode } from '@music163/tango-helpers';
 import { CloseCircleFilled, ExpandAltOutlined, MenuOutlined } from '@ant-design/icons';
 import { Panel, InputCode, Action } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
@@ -65,26 +58,23 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
     newStoreTemplate,
     showOptionsDropDown = true,
   } = props;
-  const codeValue = getCodeOfWrappedCode(valueProp);
-  const [inputValue, setInputValue] = useState(codeValue);
+  // const codeValue = getCodeOfWrappedCode(valueProp);
+  const [inputValue, setInputValue] = useState(valueProp);
   const [visible, { on, off }] = useBoolean();
 
   // when receive new value, sync state
   useEffect(() => {
-    const nextCodeValue = getCodeOfWrappedCode(valueProp);
-    setInputValue(nextCodeValue);
+    setInputValue(valueProp);
   }, [valueProp]);
 
   const change = useCallback(
     (code: string) => {
-      if (code === codeValue) {
+      if (code === valueProp) {
         return;
       }
-
-      // FIXME: 这里要加提示，告诉用户应该怎么写
-      onChange(code ? wrapCode(code) : undefined);
+      onChange(code);
     },
-    [codeValue, onChange],
+    [valueProp, onChange],
   );
 
   const sandbox = useSandboxQuery();

diff --git a/packages/designer/src/setters/index.ts b/packages/designer/src/setters/index.ts
@@ -32,18 +32,20 @@ export const BUILT_IN_SETTERS: IFormItemCreateOptions[] = [
     name: 'codeSetter',
     alias: ['expSetter', 'expressionSetter'],
     component: ExpressionSetter,
-    disableVariableSetter: true,
+    type: 'code',
   },
   {
-    name: 'choiceSetter',
+    name: 'radioGroupSetter',
+    alias: ['choiceSetter'],
     component: ChoiceSetter,
   },
   {
     name: 'actionListSetter',
     component: ActionListSetter,
   },
   {
-    name: 'columnSetter',
+    name: 'tableColumnsSetter',
+    alias: ['columnSetter'], // 兼容
     component: ColumnSetter,
   },
   {
@@ -75,18 +77,15 @@ export const BUILT_IN_SETTERS: IFormItemCreateOptions[] = [
     alias: ['actionSetter', 'functionSetter', 'callbackSetter'],
     component: EventSetter,
   },
-  {
-    name: 'expressionSetter',
-    alias: ['expSetter'],
-    component: ExpressionSetter,
-  },
   {
     name: 'jsonSetter',
     component: JSONSetter,
+    type: 'code',
   },
   {
     name: 'jsxSetter',
     component: JsxSetter,
+    type: 'code',
   },
   {
     name: 'listSetter',
@@ -101,20 +100,24 @@ export const BUILT_IN_SETTERS: IFormItemCreateOptions[] = [
     component: OptionSetter,
   },
   {
-    name: 'pickerSetter',
+    name: 'selectSetter',
+    alias: ['pickerSetter'],
     component: PickerSetter,
   },
   {
     name: 'renderPropsSetter',
     component: RenderSetter,
+    type: 'code',
   },
   {
     name: 'tableCellSetter',
     component: TableCellSetter,
+    type: 'code',
   },
   {
     name: 'tableExpandableSetter',
     component: TableExpandableSetter,
+    type: 'code',
   },
   {
     name: 'routerSetter',

diff --git a/packages/designer/src/setters/json-setter.tsx b/packages/designer/src/setters/json-setter.tsx
@@ -1,20 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box } from 'coral-system';
 import { SingleMonacoEditor } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
-import { wrapCode } from '@music163/tango-helpers';
 
 /**
  * JSON Setter
  */
-export function JSONSetter({ value, onChange }: FormItemComponentProps) {
+export function JSONSetter({ value: valueProp, onChange }: FormItemComponentProps) {
+  const [value, setValue] = useState(valueProp || '');
   return (
     <Box height="120px" border="solid" borderColor="line.normal" borderRadius="s">
       <SingleMonacoEditor
         defaultValue={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
         onBlur={(newValue) => {
           if (newValue !== value) {
-            onChange(wrapCode(newValue));
+            onChange(newValue);
           }
         }}
         language="json"

diff --git a/packages/designer/src/setters/jsx-setter.tsx b/packages/designer/src/setters/jsx-setter.tsx
@@ -1,9 +1,7 @@
-import React, { useMemo } from 'react';
-import { wrapCode } from '@music163/tango-helpers';
+import React, { useEffect, useState } from 'react';
 import { ActionSelect, InputCode } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { Box } from 'coral-system';
-import { value2expressionCode } from '@music163/tango-core';
 
 const options = [
   { label: '取消自定义', value: '' },
@@ -55,25 +53,36 @@ const defaultGetTemplate = (key: string) => {
  */
 export function JsxSetter(props: JsxSetterProps) {
   const { showInput, getTemplate = defaultGetTemplate, value, onChange } = props;
-  const inputCode = useMemo(() => value2expressionCode(value), [value]);
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
   return (
     <Box>
       <ActionSelect
         showInput={showInput}
-        defaultInputValue={inputCode}
+        defaultInputValue={value}
         options={options}
         text="设置此区域为"
         onInputChange={onChange}
         onSelect={(key) => {
           const [tpl, deps] = getTemplate(key);
           if (tpl) {
-            onChange(wrapCode(tpl), { relatedImports: deps });
+            onChange(tpl, { relatedImports: deps });
           } else {
             onChange(undefined);
           }
         }}
       />
-      {value && <InputCode value={inputCode} readOnly editable={false} />}
+      {value && (
+        <InputCode
+          value={value}
+          onChange={(val) => setInputValue(val)}
+          onBlur={() => {
+            onChange(inputValue);
+          }}
+        />
+      )}
     </Box>
   );
 }
diff --git a/packages/designer/src/setters/render-setter.tsx b/packages/designer/src/setters/render-setter.tsx
@@ -2,8 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ActionSelect, InputCode } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { Box } from 'coral-system';
-import { value2expressionCode } from '@music163/tango-core';
-import { wrapCode } from '@music163/tango-helpers';
 
 interface IRenderOption {
   label: string;
@@ -18,21 +16,24 @@ export interface RenderSetterProps {
   fallbackOption?: IRenderOption;
 }
 
+const defaultOptions: IRenderOption[] = [
+  { label: '取消自定义', value: '' },
+  { label: '自定义渲染', value: 'Box', render: '() => <Box></Box>' },
+];
+
 /**
  * Render Props Setters
  */
 export function RenderSetter({
   value,
   onChange,
   text = '自定义渲染为',
-  options = [],
+  options = defaultOptions,
   fallbackOption,
 }: FormItemComponentProps & RenderSetterProps) {
-  const [inputValue, setInputValue] = useState(() => {
-    return value2expressionCode(value);
-  });
+  const [inputValue, setInputValue] = useState(value || '');
   useEffect(() => {
-    setInputValue(value2expressionCode(value));
+    setInputValue(value);
   }, [value]);
 
   const optionsMap = useMemo(() => {
@@ -83,7 +84,7 @@ const getRender = (content: string, type?: 'tableCell' | 'tableExpandable') => {
       code = `() => ${content}`;
       break;
   }
-  return wrapCode(code);
+  return code;
 };
 
 const tableCellOptions: RenderSetterProps['options'] = [
@@ -128,6 +129,7 @@ export function TableCellSetter(props: FormItemComponentProps) {
   return <RenderSetter options={tableCellOptions} {...props} />;
 }
 
+// FIXME: 应该直接用 props 嵌套的模式
 export function TableExpandableSetter(props: FormItemComponentProps) {
   return <RenderSetter options={tableExpandableOptions} text="配置表格可展开行" {...props} />;
 }