chore(react): improve theme styles

alibaba · Oct 4, 2021 · f45572d · f45572d
1 parent bac67cf
commit f45572d
Show file tree

Hide file tree

Showing 28 changed files with 461 additions and 347 deletions.
diff --git a/formily/antd/playground/main.tsx b/formily/antd/playground/main.tsx
@@ -102,7 +102,7 @@ const App = () => {
     []
   )
   return (
-    <Designer engine={engine}>
+    <Designer engine={engine} theme="dark">
       <StudioPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
         <CompositePanel>
           <CompositePanel.Item title="panels.Component" icon="Component">

diff --git a/formily/antd/playground/webpack.base.ts b/formily/antd/playground/webpack.base.ts
@@ -3,7 +3,7 @@ import fs from 'fs-extra'
 import { GlobSync } from 'glob'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import autoprefixer from 'autoprefixer'
-//import { getThemeVariables } from 'antd/dist/theme'
+import { getThemeVariables } from 'antd/dist/theme'
 
 const getWorkspaceAlias = () => {
   const basePath = path.resolve(__dirname, '../../../')
@@ -80,9 +80,9 @@ export default {
           {
             loader: 'less-loader',
             options: {
-              // modifyVars: getThemeVariables({
-              //   dark: true, // 开启暗黑模式
-              // }),
+              modifyVars: getThemeVariables({
+                dark: true, // 开启暗黑模式
+              }),
               javascriptEnabled: true,
             },
           },

diff --git a/formily/antd/src/common/LoadTemplate/index.tsx b/formily/antd/src/common/LoadTemplate/index.tsx
@@ -1,8 +1,5 @@
 import React from 'react'
-import { Space, Typography, Divider } from 'antd'
-import { usePrefix, TextWidget } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
+import { NodeActionsWidget } from '@designable/react'
 
 export interface ITemplateAction {
   title: React.ReactNode
@@ -18,27 +15,11 @@ export interface ILoadTemplateProps {
 }
 
 export const LoadTemplate: React.FC<ILoadTemplateProps> = (props) => {
-  const prefix = usePrefix('load-template')
   return (
-    <div className={cls(prefix, props.className)} style={props.style}>
-      <div className={prefix + '-actions'}>
-        <Space split={<Divider type="vertical" />}>
-          {props.actions?.map((action, key) => {
-            return (
-              <Typography.Link
-                key={key}
-                data-click-stop-propagation="true"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  action?.onClick?.()
-                }}
-              >
-                <TextWidget>{action.title}</TextWidget>
-              </Typography.Link>
-            )
-          })}
-        </Space>
-      </div>
-    </div>
+    <NodeActionsWidget>
+      {props.actions?.map((action, key) => {
+        return <NodeActionsWidget.Action {...action} key={key} />
+      })}
+    </NodeActionsWidget>
   )
 }
diff --git a/formily/antd/src/components/ArrayCards/preview.tsx b/formily/antd/src/components/ArrayCards/preview.tsx
@@ -154,6 +154,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
         actions={[
           {
             title: node.getMessage('addIndex'),
+            icon: 'AddIndex',
             onClick: () => {
               if (
                 hasNodeByComponentPath(node, [
@@ -176,6 +177,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
 
           {
             title: node.getMessage('addOperation'),
+            icon: 'AddOperation',
             onClick: () => {
               const oldAdditionNode = findNodeByComponentPath(node, [
                 'ArrayCards',

diff --git a/formily/antd/src/components/ArrayTable/preview.tsx b/formily/antd/src/components/ArrayTable/preview.tsx
@@ -243,6 +243,7 @@ export const ArrayTable: DnFC<TableProps<any>> = observer((props) => {
         actions={[
           {
             title: node.getMessage('addSortHandle'),
+            icon: 'AddSort',
             onClick: () => {
               if (
                 hasNodeByComponentPath(node, [
@@ -277,6 +278,7 @@ export const ArrayTable: DnFC<TableProps<any>> = observer((props) => {
           },
           {
             title: node.getMessage('addIndex'),
+            icon: 'AddIndex',
             onClick: () => {
               if (
                 hasNodeByComponentPath(node, [
@@ -321,6 +323,7 @@ export const ArrayTable: DnFC<TableProps<any>> = observer((props) => {
           },
           {
             title: node.getMessage('addColumn'),
+            icon: 'AddColumn',
             onClick: () => {
               const operationNode = findNodeByComponentPath(node, [
                 'ArrayTable',
@@ -353,6 +356,7 @@ export const ArrayTable: DnFC<TableProps<any>> = observer((props) => {
           },
           {
             title: node.getMessage('addOperation'),
+            icon: 'AddOperation',
             onClick: () => {
               const oldOperationNode = findNodeByComponentPath(node, [
                 'ArrayTable',

diff --git a/formily/antd/src/components/Field/shared.ts b/formily/antd/src/components/Field/shared.ts
@@ -169,7 +169,7 @@ export const createVoidFieldSchema = (
             'x-reactions': {
               fulfill: {
                 state: {
-                  visible: '{{$form.values["x-decorator"] === "FormItem"}}',
+                  hidden: '{{$form.values["x-decorator"] === "FormItem"}}',
                 },
               },
             },
@@ -181,7 +181,7 @@ export const createVoidFieldSchema = (
             'x-reactions': {
               fulfill: {
                 state: {
-                  visible: '{{$form.values["x-decorator"] === "FormItem"}}',
+                  hidden: '{{$form.values["x-decorator"] === "FormItem"}}',
                 },
               },
             },

diff --git a/formily/antd/src/components/FormCollapse/preview.tsx b/formily/antd/src/components/FormCollapse/preview.tsx
@@ -118,6 +118,7 @@ export const FormCollapse: DnFC<CollapseProps> & {
         actions={[
           {
             title: node.getMessage('addCollapsePanel'),
+            icon: 'AddPanel',
             onClick: () => {
               const tabPane = new TreeNode({
                 componentName: 'Field',

diff --git a/formily/antd/src/components/FormGrid/preview.tsx b/formily/antd/src/components/FormGrid/preview.tsx
@@ -35,6 +35,7 @@ export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
         actions={[
           {
             title: node.getMessage('addGridColumn'),
+            icon: 'AddColumn',
             onClick: () => {
               const column = new TreeNode({
                 componentName: 'Field',

diff --git a/formily/antd/src/components/FormTab/preview.tsx b/formily/antd/src/components/FormTab/preview.tsx
@@ -108,6 +108,7 @@ export const FormTab: DnFC<TabsProps> & {
         actions={[
           {
             title: node.getMessage('addTabPane'),
+            icon: 'AddPanel',
             onClick: () => {
               const tabPane = new TreeNode({
                 componentName: 'Field',

diff --git a/formily/antd/src/locales/ArrayBase.ts b/formily/antd/src/locales/ArrayBase.ts
@@ -19,7 +19,6 @@ export const ArrayAddition = {
     title: '添加按钮',
     settings: {
       'x-component-props': {
-        title: '标题',
         method: '方法',
         defaultValue: '默认值',
       },

diff --git a/formily/antd/src/schemas/ArrayTable.ts b/formily/antd/src/schemas/ArrayTable.ts
@@ -79,14 +79,6 @@ const Column: ISchema = {
 const Addition: ISchema = {
   type: 'object',
   properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-      'x-component-props': {
-        defaultValue: 'Addition',
-      },
-    },
     method: {
       type: 'string',
       enum: ['push', 'unshift'],

diff --git a/formily/next/src/common/LoadTemplate/index.tsx b/formily/next/src/common/LoadTemplate/index.tsx
@@ -1,8 +1,5 @@
 import React from 'react'
-import { Space, Typography, Divider } from 'antd'
-import { usePrefix, TextWidget } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
+import { NodeActionsWidget } from '@designable/react'
 
 export interface ITemplateAction {
   title: React.ReactNode
@@ -18,27 +15,11 @@ export interface ILoadTemplateProps {
 }
 
 export const LoadTemplate: React.FC<ILoadTemplateProps> = (props) => {
-  const prefix = usePrefix('load-template')
   return (
-    <div className={cls(prefix, props.className)} style={props.style}>
-      <div className={prefix + '-actions'}>
-        <Space split={<Divider type="vertical" />}>
-          {props.actions?.map((action, key) => {
-            return (
-              <Typography.Link
-                key={key}
-                data-click-stop-propagation="true"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  action?.onClick?.()
-                }}
-              >
-                <TextWidget>{action.title}</TextWidget>
-              </Typography.Link>
-            )
-          })}
-        </Space>
-      </div>
-    </div>
+    <NodeActionsWidget>
+      {props.actions?.map((action, key) => {
+        return <NodeActionsWidget.Action {...action} key={key} />
+      })}
+    </NodeActionsWidget>
   )
 }
diff --git a/formily/next/src/common/LoadTemplate/styles.less b/formily/next/src/common/LoadTemplate/styles.less
diff --git a/formily/next/src/components/ArrayCards/preview.tsx b/formily/next/src/components/ArrayCards/preview.tsx
@@ -156,6 +156,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
         actions={[
           {
             title: node.getMessage('addIndex'),
+            icon: 'AddIndex',
             onClick: () => {
               if (
                 hasNodeByComponentPath(node, [
@@ -178,6 +179,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
 
           {
             title: node.getMessage('addOperation'),
+            icon: 'AddOperation',
             onClick: () => {
               const oldAdditionNode = findNodeByComponentPath(node, [
                 'ArrayCards',

diff --git a/formily/next/src/components/ArrayTable/preview.tsx b/formily/next/src/components/ArrayTable/preview.tsx
@@ -213,6 +213,7 @@ export const ArrayTable: DnFC<TableProps> = observer((props) => {
         actions={[
           {
             title: node.getMessage('addIndex'),
+            icon: 'AddIndex',
             onClick: () => {
               if (
                 hasNodeByComponentPath(node, [
@@ -257,6 +258,7 @@ export const ArrayTable: DnFC<TableProps> = observer((props) => {
           },
           {
             title: node.getMessage('addColumn'),
+            icon: 'AddColumn',
             onClick: () => {
               const operationNode = findNodeByComponentPath(node, [
                 'ArrayTable',
@@ -289,6 +291,7 @@ export const ArrayTable: DnFC<TableProps> = observer((props) => {
           },
           {
             title: node.getMessage('addOperation'),
+            icon: 'AddOperation',
             onClick: () => {
               const oldOperationNode = findNodeByComponentPath(node, [
                 'ArrayTable',

diff --git a/formily/next/src/components/FormCollapse/preview.tsx b/formily/next/src/components/FormCollapse/preview.tsx
@@ -109,6 +109,7 @@ export const FormCollapse: DnFC<CollapseProps> & {
         actions={[
           {
             title: node.getMessage('addCollapsePanel'),
+            icon: 'AddPanel',
             onClick: () => {
               const collapsePanel = new TreeNode({
                 componentName: 'Field',

diff --git a/formily/next/src/components/FormGrid/preview.tsx b/formily/next/src/components/FormGrid/preview.tsx
@@ -35,6 +35,7 @@ export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
         actions={[
           {
             title: node.getMessage('addGridColumn'),
+            icon: 'AddColumn',
             onClick: () => {
               const column = new TreeNode({
                 componentName: 'Field',

diff --git a/formily/next/src/components/FormTab/preview.tsx b/formily/next/src/components/FormTab/preview.tsx
@@ -108,6 +108,7 @@ export const FormTab: DnFC<TabProps> & {
         actions={[
           {
             title: node.getMessage('addTabPane'),
+            icon: 'AddPanel',
             onClick: () => {
               const tabPane = new TreeNode({
                 componentName: 'Field',

diff --git a/packages/react-settings-form/src/SettingsForm.tsx b/packages/react-settings-form/src/SettingsForm.tsx
@@ -43,7 +43,7 @@ export const SettingsForm: React.FC<ISettingFormProps> = observer(
     const form = useMemo(() => {
       return createForm({
         initialValues: node?.designerProps?.defaultProps,
-        values: node.props,
+        values: node?.props,
         effects(form) {
           useLocales(node)
           useSnapshot(operation)