From 7e9ab12503ed33c1e6acb8a1fa5fd89fc82d35fd Mon Sep 17 00:00:00 2001 From: wwsun Date: Tue, 12 Sep 2023 17:21:49 +0800 Subject: [PATCH] fix: remove some useless setters --- .eslintrc | 4 +- packages/designer/src/index.ts | 2 +- packages/designer/src/sandbox/sandbox.tsx | 57 ++--- packages/setting-form/src/form-item.tsx | 3 +- .../setting-form/src/setters/icon-setter.tsx | 44 ---- .../setting-form/src/setters/image-setter.tsx | 148 ------------- packages/setting-form/src/setters/index.ts | 31 +-- .../src/setters/listener-setter.tsx | 203 ------------------ .../src/setters/render-props-setter.tsx | 14 -- .../setting-form/src/setters/rule-setter.tsx | 175 --------------- 10 files changed, 36 insertions(+), 645 deletions(-) delete mode 100644 packages/setting-form/src/setters/icon-setter.tsx delete mode 100644 packages/setting-form/src/setters/image-setter.tsx delete mode 100644 packages/setting-form/src/setters/listener-setter.tsx delete mode 100644 packages/setting-form/src/setters/rule-setter.tsx diff --git a/.eslintrc b/.eslintrc index 4c47c6f..734b559 100644 --- a/.eslintrc +++ b/.eslintrc @@ -6,6 +6,8 @@ "@typescript-eslint/no-unused-vars": "warn", "import/no-cycle": "off", "no-nested-ternary": "off", - "no-useless-return":"off" + "no-useless-return":"off", + "no-param-reassign": "off", + "prefer-destructuring": "off" } } diff --git a/packages/designer/src/index.ts b/packages/designer/src/index.ts index c0e9ed1..443857d 100644 --- a/packages/designer/src/index.ts +++ b/packages/designer/src/index.ts @@ -12,4 +12,4 @@ export * from './sidebar'; export * from './toolbar'; export * from './selection-menu'; -export { register as registerSetter } from '@music163/tango-setting-form'; +export { register as registerSetter, FormItemComponentProps, FormItemCreateOptionsType } from '@music163/tango-setting-form'; diff --git a/packages/designer/src/sandbox/sandbox.tsx b/packages/designer/src/sandbox/sandbox.tsx index 0839394..064a620 100644 --- a/packages/designer/src/sandbox/sandbox.tsx +++ b/packages/designer/src/sandbox/sandbox.tsx @@ -9,23 +9,27 @@ import { DndQuery, useDnd } from '../dnd'; import { Navigator } from './navigator'; import { SelectionToolsProps } from '../simulator/selection'; -type SandboxEventHandlerConfig = { +interface ISandboxEventHandlerConfig { sandboxQuery?: DndQuery; sandboxType?: 'design' | 'preview'; isActive: boolean; [x: string]: any; -}; +} export type SandboxProps = Omit & { isPreview?: boolean; selectionTools?: SelectionToolsProps['actions']; builtinSelectionMenuMap?: SelectionToolsProps['builtinActionMap']; + /** + * tangoConfigJson 处理器 + */ + configFormatter?: IMergeTangoConfigJsonConfig['formatter']; sandboxType?: 'design' | 'preview'; mode?: 'single' | 'combined'; injectScript?: string; - onViewChange?: (data: any, config?: SandboxEventHandlerConfig) => void; - onMessage?: (data: any, config?: SandboxEventHandlerConfig) => void; - onLoad?: (config?: SandboxEventHandlerConfig) => void; + onViewChange?: (data: any, config?: ISandboxEventHandlerConfig) => void; + onMessage?: (data: any, config?: ISandboxEventHandlerConfig) => void; + onLoad?: (config?: ISandboxEventHandlerConfig) => void; }; export type CombinedSandboxRef = { @@ -37,6 +41,7 @@ const LANDING_PAGE_PATH = '/__background_landing_page__'; function useSandbox({ isPreview: isPreviewProp, + configFormatter, onViewChange, onMessage: onMessageProp, onLoad: onLoadProp, @@ -70,12 +75,12 @@ function useSandbox({ let files = Array.from(workspace.files.keys()).reduce((prev, filename) => { let code = workspace.getFile(filename).code; if (filename === '/tango.config.json') { - code = mergeTangoConfigJson(code, isPreview, { injectScript }); + code = mergeTangoConfigJson(code, { isPreview, injectScript, formatter: configFormatter }); } prev[filename] = { code }; return prev; }, {}); - files = normalizeFiles(files, workspace.entry); + files = fixSandboxFiles(files, workspace.entry); const onMessage = (data: any) => onMessageProp && onMessageProp(data, getSandboxConfig()); const onLoad = () => onLoadProp && onLoadProp(getSandboxConfig()); @@ -188,7 +193,7 @@ export const CombinedSandbox = observer( const activeSandbox = useRef(); const [startRoute, setStartRoute] = useState(workspace.activeRoute); - const onViewChange = (data: any, config: SandboxEventHandlerConfig) => { + const onViewChange = (data: any, config: ISandboxEventHandlerConfig) => { if (config.isActive) { const curPath = data?.pathname + data?.search; const isSandboxChanged = config.sandboxType !== activeSandbox.current; @@ -296,7 +301,7 @@ export const Sandbox = observer( : combinedSandboxRef.current?.designSandbox; } - const onViewChange = (data: any, { isActive }: SandboxEventHandlerConfig) => { + const onViewChange = (data: any, { isActive }: ISandboxEventHandlerConfig) => { if (isActive) { navigatorRef.current.changeRelativeUrl(data?.pathname + data?.search); } @@ -380,7 +385,7 @@ export const Sandbox = observer( ); // 兼容 tango.config.json，转成 sandbox.config.json -function normalizeFiles(files: object, entry = '/src/index.js') { +function fixSandboxFiles(files: Record, entry = '/src/index.js') { if (files['/tango.config.json']) { const tangConfigJsonStr = files['/tango.config.json'].code; const tangConfigJson = JSON.parse(tangConfigJsonStr); @@ -388,6 +393,7 @@ function normalizeFiles(files: object, entry = '/src/index.js') { code: JSON.stringify(tangConfigJson.sandbox, null, 2), }; } + if (!files['/index.html']) { files['/index.html'] = { code: ` @@ -407,28 +413,30 @@ function normalizeFiles(files: object, entry = '/src/index.js') { `, }; } - return files; } -function mergeTangoConfigJson(code: string, isPreview: boolean, config?: { [x: string]: any }) { +interface IMergeTangoConfigJsonConfig { + isPreview?: boolean; + injectScript?: string; + formatter?: (json: object) => object; +} + +function mergeTangoConfigJson( + code: string, + { isPreview, injectScript, formatter }: IMergeTangoConfigJsonConfig = {}, +) { let json; try { json = JSON.parse(code); } catch (err) { - logger.error(err); + logger.error('Json parse failed!', err); return code; } - const ox = getValue(json, 'dataSource.ox'); const userJs = getValue(json, 'sandbox.evaluateJavaScript') || ''; let mergedUserJs = userJs; - const { injectScript } = config || {}; - if (ox) { - // TIP: 自动拼装 __tango_ox__ 注入到沙箱中 - mergedUserJs = `window.__tango_ox__=${JSON.stringify(ox)};${mergedUserJs}`; - } if (injectScript) { mergedUserJs = `${mergedUserJs};${injectScript}`; } @@ -437,15 +445,6 @@ function mergeTangoConfigJson(code: string, isPreview: boolean, config?: { [x: s setValue(json, 'sandbox.evaluateJavaScript', mergedUserJs); } - const i18n = getValue(json, 'i18n'); - if (i18n) { - // TIP: 合并 i18n 配置到沙箱配置中 - setValue(json, 'sandbox.i18n', { - id: i18n.appId, - preModule: i18n.preModule, - }); - } - // 合并 packages 内的信息至 sandbox const packages = getValue(json, 'packages'); const externals = getValue(json, 'sandbox.externals') || {}; @@ -492,6 +491,8 @@ function mergeTangoConfigJson(code: string, isPreview: boolean, config?: { [x: s setValue(json, 'sandbox.externals', externals); setValue(json, 'sandbox.externalResources', [...new Set(externalResources)]); + json = formatter?.(json); + return JSON.stringify(json); } diff --git a/packages/setting-form/src/form-item.tsx b/packages/setting-form/src/form-item.tsx index 2de9d11..835e990 100644 --- a/packages/setting-form/src/form-item.tsx +++ b/packages/setting-form/src/form-item.tsx @@ -5,6 +5,7 @@ import { clone, ComponentPropType, isVariableString, + logger, SetterOnChangeDetailType, useBoolean, } from '@music163/tango-helpers'; @@ -241,7 +242,7 @@ export function SettingFormItem(props: FormItemProps) { */ export function register(options: FormItemCreateOptionsType) { if (SETTERS_DICT[options.name]) { - throw Error(`Duplicate setter name: <${options.name}>`); + logger.log(`Internal setter override: <${options.name}>`); } SETTERS_DICT[options.name] = createFormItem(options); } diff --git a/packages/setting-form/src/setters/icon-setter.tsx b/packages/setting-form/src/setters/icon-setter.tsx deleted file mode 100644 index 568f1a7..0000000 --- a/packages/setting-form/src/setters/icon-setter.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { css } from 'styled-components'; -import { Box } from 'coral-system'; -import { Select } from 'antd'; -// import { IconPro } from '@ant-design/icons'; -import { FormItemComponentProps } from '../form-item'; - -const acStyle = css` - .ant-select { - width: 100%; - } -`; - -const ALL_ICON_NAMES: string[] = []; - -/** - * Icon 组件设置器 - * onChange 返回 `{}` - */ -export function IconSetter({ onChange, ...rest }: FormItemComponentProps) { - const handleChange = (val: string) => { - onChange && - onChange(val, { - relatedImports: ['Icon'], - }); - }; - return ( - - - - ); -} diff --git a/packages/setting-form/src/setters/image-setter.tsx b/packages/setting-form/src/setters/image-setter.tsx deleted file mode 100644 index 7da734f..0000000 --- a/packages/setting-form/src/setters/image-setter.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { Button, Empty, Modal, Pagination, Radio } from 'antd'; -import { Box, css, Grid, GridItem, Text } from 'coral-system'; -import { isFunction, useBoolean } from '@music163/tango-helpers'; -import { FormItemComponentProps } from '../form-item'; -import { useFormVariable } from '../context'; - -const wrapperStyle = css` - img { - max-width: 100%; - max-height: 150px; - } -`; - -export function ImageSetter({ value, onChange }: FormItemComponentProps) { - const [visible, { on, off }] = useBoolean(); - const label = value ? '更新图片' : '上传图片'; - const { remoteServices } = useFormVariable(); - return ( - - - {value ? preview image : null} - - - - { - onChange(url); - off(); - }} - /> - - - ); -} - -const categories = [ - { label: '我的素材', value: 'listMy' }, - { label: '我的收藏', value: 'listFav' }, - { label: '公共素材', value: 'listPub' }, -]; - -interface ImageCenterProps { - onSelect?: ImageListProps['onSelect']; - imageService?: Record Promise>; -} - -const pageSize = 20; - -function ImageCenter({ imageService, onSelect }: ImageCenterProps) { - const [cate, setCate] = useState('listMy'); - const [page, setPage] = useState(1); - const [data, setData] = useState({}); - useEffect(() => { - imageService?.[cate]?.({ limit: pageSize, offset: (page - 1) * pageSize }).then((res: any) => { - setData(res || {}); - }); - }, [imageService, cate, page]); - return ( - - - { - setCate(e.target.value); - }} - options={categories} - optionType="button" - buttonStyle="solid" - /> - - - {data.list?.length ? ( - - ) : ( - - )} - {data.count > pageSize ? ( - - ) : null} - - ); -} - -const imageListWrapper = css` - img { - max-width: 100%; - max-height: 120px; - } - - button { - border-color: transparent; - outline: none; - padding: 0; - margin: 0; - - &:hover { - border-color: var(--tango-colors-brand); - } - } -`; - -interface ImageListProps { - dataSource?: any[]; - onSelect?: (url: string) => void; -} - -function ImageList({ dataSource = [], onSelect }: ImageListProps) { - return ( - - {dataSource.map((item) => ( - - { - isFunction(onSelect) && onSelect(item.url); - }} - > - - - {item.name} - - - - ))} - - ); -} diff --git a/packages/setting-form/src/setters/index.ts b/packages/setting-form/src/setters/index.ts index eba54f5..5b70142 100644 --- a/packages/setting-form/src/setters/index.ts +++ b/packages/setting-form/src/setters/index.ts @@ -5,7 +5,6 @@ import { PickerSetter } from './picker-setter'; import { ChoiceSetter } from './choice-setter'; import { FormItemCreateOptionsType } from '../form-item'; import { ListSetter } from './list-setter'; -import { IconSetter } from './icon-setter'; import { ColumnSetter } from './column-setter'; import { NumberSetter, SliderSetter } from './number-setter'; import { ExpressionSetter, expressionValueValidate, jsonValueValidate } from './expression-setter'; @@ -25,16 +24,8 @@ import { FlexDirectionSetter, } from './style-setter'; import { CssSetter } from './css-setter'; -import { ListenerSetter } from './listener-setter'; -import { RuleSetter } from './rule-setter'; import { ModelSetter } from './model-setter'; -import { - RenderSetter, - TableCellSetter, - TableExpandableSetter, - XToolbarSetter, -} from './render-props-setter'; -import { ImageSetter } from './image-setter'; +import { RenderSetter, TableCellSetter, TableExpandableSetter } from './render-props-setter'; import { RouterSetter } from './router-setter'; import { BoolSetter } from './bool-setter'; @@ -122,10 +113,6 @@ export const INTERNAL_SETTERS: FormItemCreateOptionsType[] = [ name: 'choiceSetter', component: ChoiceSetter, }, - { - name: 'iconSetter', - component: IconSetter, - }, { name: 'optionSetter', component: OptionSetter, @@ -181,14 +168,6 @@ export const INTERNAL_SETTERS: FormItemCreateOptionsType[] = [ name: 'columnSetter', component: ColumnSetter, }, - { - name: 'listenerSetter', - component: ListenerSetter, - }, - { - name: 'ruleSetter', - component: RuleSetter, - }, { name: 'renderPropsSetter', component: RenderSetter, @@ -201,14 +180,6 @@ export const INTERNAL_SETTERS: FormItemCreateOptionsType[] = [ name: 'tableExpandableSetter', component: TableExpandableSetter, }, - { - name: 'xtoolbarSetter', - component: XToolbarSetter, - }, - { - name: 'imageSetter', - component: ImageSetter, - }, { name: 'routerSetter', component: RouterSetter, diff --git a/packages/setting-form/src/setters/listener-setter.tsx b/packages/setting-form/src/setters/listener-setter.tsx deleted file mode 100644 index 45f0082..0000000 --- a/packages/setting-form/src/setters/listener-setter.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import React, { FunctionComponent, useState } from 'react'; -import { Box } from 'coral-system'; -import { Select, Input, Tabs, Button } from 'antd'; -import { FieldStringOutlined } from '@ant-design/icons'; -import { SingleMonacoEditor } from '@music163/tango-ui'; -import { FormItemComponentProps } from '../form-item'; -import { useFormVariable } from '../context'; -import { ListSetter } from './list-setter'; - -const { TabPane } = Tabs; - -// TODO: 需考虑 option选项联动 & 组件属性联动等面板 -const CustomComponent: FunctionComponent = ({ value = {}, onChange }) => { - // FIXME: 这里之前判断逻辑有问题，导致每次 value 变更都执行 parseExpression - const [tabIndex, setTabIndex] = useState(typeof value === 'string' ? '2' : '1'); - - const triggerChange = (changedValue: any) => { - onChange({ - ...value, - ...changedValue, - }); - }; - - const customListenerDefaultValue = `/* {(valid, field, form) => { - form.fieldMap.input1.setValue("联动改变值"); - }}*/`; - return ( - - - - { - triggerChange({ - ui: { - ...value?.ui, - required: v, - }, - }); - }} - placeholder="必填" - options={[ - { - label: '必填', - value: true, - }, - { - label: '不必填', - value: false, - }, - ]} - /> - { - triggerChange({ - ui: { - ...value?.ui, - label: e.target.value, - }, - }); - }} - /> - { - triggerChange({ - value: e.target.value, - }); - }} - /> - - - - onChange(v.trim())} - hasBorder - height="150px" - options={{ - lineNumbers: 'off', - fontSize: 12, - wordWrap: 'on', - minimap: { - enabled: false, - }, - }} - /> - - - ); -}; - -const renderSetterItem = (item: any) => { - return ( - <> - - - {item.title} - - - ); -}; - -/** - * XFormItem响应器 - */ -export const ListenerSetter = (props: FormItemComponentProps) => { - const { formFieldsOptions } = useFormVariable(); - - return ( - item.key || item.dataIndex} - addBtnText="配置响应器" - listItemFormFields={[ - { - label: '来源字段', - name: 'watch', - required: true, - component: ({ label: t, value: t }))} />, - }, - { - label: '是否必填', - name: 'required', - component: , - }, - { - label: '触发方式', - name: 'trigger', - component: ({ label: t, value: t }))} />, - }, - { - label: '错误提示语', - name: 'message', - extra: '自定义错误提示', - }, - { - label: '正则表达式', - name: 'pattern', - extra: '复杂场景，可以自定义正则。', - component: , - }, - { - label: '自定义校验', - name: 'validator', - width: '400px', - extra: ( - - ), - component: ( - - ), - }, -]; - -const renderSetterItem = (item: any) => { - return ( - <> - - - {item.title} - - - ); -}; - -/** - * 校验属性配置 - */ -export function RuleSetter(props: FormItemComponentProps) { - return ( - item.key || item.dataIndex} - addBtnText="配置校验器" - listItemFormFields={optionFormFields} - newItemDefaultValues={{ - type: 'string', - trigger: 'change', - status: 'error', - }} - renderItem={renderSetterItem} - {...props} - /> - ); -}