chore(designable-antd): switch to dark mode

alibaba · Jul 30, 2021 · c19d22d · c19d22d
1 parent 52457e1
commit c19d22d
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 63 deletions.
diff --git a/designable/antd/playground/main.tsx b/designable/antd/playground/main.tsx
@@ -57,7 +57,7 @@ const App = () => {
   const engine = useMemo(() => createDesigner(), [])
 
   return (
-    <Designer engine={engine}>
+    <Designer engine={engine} theme="dark">
       <MainPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
         <CompositePanel>
           <CompositePanel.Item

diff --git a/designable/antd/playground/webpack.base.ts b/designable/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/designable/antd/playground/widgets/LogoWidget.tsx b/designable/antd/playground/widgets/LogoWidget.tsx
@@ -1,10 +1,20 @@
 import React from 'react'
+import { useTheme } from '@designable/react'
 
-export const LogoWidget: React.FC = () => (
-  <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
-    <img
-      src="//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg"
-      style={{ margin: '12px 8px', height: 18, width: 'auto' }}
-    />
-  </div>
-)
+const logo = {
+  dark: '//img.alicdn.com/imgextra/i2/O1CN01NTUDi81fHLQvZCPnc_!!6000000003981-55-tps-1141-150.svg',
+  light:
+    '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
+}
+
+export const LogoWidget: React.FC = () => {
+  const url = logo[useTheme()]
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
+      <img
+        src={url}
+        style={{ margin: '12px 8px', height: 18, width: 'auto' }}
+      />
+    </div>
+  )
+}
diff --git a/docs/guide/advanced/controlled.zh-CN.md b/docs/guide/advanced/controlled.zh-CN.md
@@ -257,7 +257,6 @@ export default () => {
 
 ```tsx
 import React, { useMemo } from 'react'
-import { observable } from '@formily/reactive'
 import { createForm } from '@formily/core'
 import { createSchemaField, observer } from '@formily/react'
 import { Form, FormItem, Input, Select } from '@formily/antd'
@@ -314,14 +313,8 @@ const DYNAMIC_INJECT_SCHEMA = {
   },
 }
 
-const SchemaForm = observer(({ values }) => {
-  const form = useMemo(
-    () =>
-      createForm({
-        values,
-      }),
-    [values.type]
-  )
+export default observer(() => {
+  const form = useMemo(() => createForm(), [])
 
   const schema = {
     type: 'object',
@@ -336,27 +329,16 @@ const SchemaForm = observer(({ values }) => {
         'x-decorator': 'FormItem',
         'x-component': 'Select',
       },
-      container: DYNAMIC_INJECT_SCHEMA[values.type],
+      container: DYNAMIC_INJECT_SCHEMA[form.values.type],
     },
   }
 
   return (
     <Form form={form} layout="vertical">
-      <SchemaField schema={schema} />
+      <SchemaField schema={schema} autoCleanup />
     </Form>
   )
 })
-
-export default () => {
-  const values = useMemo(
-    () =>
-      observable({
-        type: 'type_1',
-      }),
-    []
-  )
-  return <SchemaForm values={values} />
-}
 ```
 
 ## 字段级受控

diff --git a/packages/antd/src/array-items/style.less b/packages/antd/src/array-items/style.less
@@ -13,6 +13,7 @@
   padding: 3px 6px;
   background: @card-background;
   justify-content: space-between;
+  color: @text-color;
 
   .@{ant-prefix}-formily-item:not(.@{ant-prefix}-formily-item-feedback-layout-popover) {
     margin-bottom: 0 !important;

diff --git a/packages/antd/src/radio/style.less b/packages/antd/src/radio/style.less
@@ -0,0 +1,5 @@
+@import '~antd/lib/style/themes/default.less';
+
+.@{ant-prefix}-radio-button-wrapper-checked:not([class*=' @{ant-prefix}-radio-button-wrapper-disabled']).@{ant-prefix}-radio-button-wrapper:first-child {
+  border-right-color: inherit !important;
+}
diff --git a/packages/antd/src/radio/style.ts b/packages/antd/src/radio/style.ts
@@ -1 +1,2 @@
 import 'antd/lib/radio/style/index'
+import './style.less'
diff --git a/packages/antd/src/style.ts b/packages/antd/src/style.ts
@@ -11,3 +11,4 @@ import './form-item/style.less'
 import './form-layout/style.less'
 import './form/style.less'
 import './preview-text/style.less'
+import './radio/style.less'
diff --git a/yarn.lock b/yarn.lock
@@ -1156,12 +1156,12 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f"
   integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
 
-"@designable/core@0.4.17", "@designable/core@^0.4.17":
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.17.tgz#9717268d7ef7db56a75324266ddd5a94713e98c1"
-  integrity sha512-mLqPVlFz59s6/1eELV8ohMcl4vGA4OofZZTfSyer69BFABYTCsHGXtc6QQ1KSC+fWpL9t6jIrkw0SDq5R0jJvQ==
+"@designable/core@0.4.19", "@designable/core@^0.4.19":
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.19.tgz#be5163b3448f458e07cbc6df286d7fa16bc66c21"
+  integrity sha512-d/Chc71fZNZfe6ZBh0vo5v8UAGrxBxlWhzwJKaOMgavw0QOROon8Lt0jgdIMYYchqc8tPlrNGA828/3VXyKfyA==
   dependencies:
-    "@designable/shared" "0.4.17"
+    "@designable/shared" "0.4.19"
     "@formily/json-schema" "^2.0.0-beta.76"
     "@formily/path" "^2.0.0-beta.76"
     "@formily/reactive" "^2.0.0-beta.76"
@@ -1178,25 +1178,25 @@
     "@formily/reactive" "^2.0.0-beta.50"
     "@juggle/resize-observer" "^3.3.1"
 
-"@designable/formily@^0.4.17":
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.17.tgz#5423790a04b1be793bf9c3b2b7eaf210a6f91713"
-  integrity sha512-26J655BmpYcISBwZE/80RE8HkaS9T/Cwluf7vOKKmr10d/syUvnnRQ/DEvtenJwwQf0L28mWIxQ1LxAamSbkhg==
+"@designable/formily@^0.4.19":
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.19.tgz#5d3c9c66124916e936160e70df2114dd1d6c2218"
+  integrity sha512-yBhPQ01DD6l+5VqA0X20WyaLyBUB5qGFPjLefT83VBYFNIfXDohE0FvnLP/U9ZWZflzUmmXnEJqDmKPp7S1dyw==
   dependencies:
-    "@designable/core" "0.4.17"
-    "@designable/shared" "0.4.17"
+    "@designable/core" "0.4.19"
+    "@designable/shared" "0.4.19"
     "@formily/core" "^2.0.0-beta.76"
     "@formily/json-schema" "^2.0.0-beta.76"
 
-"@designable/react-settings-form@^0.4.17":
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.17.tgz#15925cc6372c4b440f0b300d16b6f0a0f5bbfbc0"
-  integrity sha512-Bkc2ONyjLXxziqo9VN3xCGEAoWsUj1QUvpgdXuBseBijzGOOAEaOrEpoMMAcvt2CQZHjEsJX2M/SdadA5atzFA==
+"@designable/react-settings-form@^0.4.19":
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.19.tgz#bb52efc7e7bf7bc0c64af216338f6bcdd178cab6"
+  integrity sha512-be9LcjTgS8uGEBt7qhAUAw8crjFUzqaTeZm4p7kZfVWNZWd6mP51ADkgSbThngHF9pZ4UKKs7L3qmbweT6v5iA==
   dependencies:
     "@babel/parser" "^7.14.7"
-    "@designable/core" "0.4.17"
-    "@designable/react" "0.4.17"
-    "@designable/shared" "0.4.17"
+    "@designable/core" "0.4.19"
+    "@designable/react" "0.4.19"
+    "@designable/shared" "0.4.19"
     "@formily/antd" "^2.0.0-beta.76"
     "@formily/core" "^2.0.0-beta.76"
     "@formily/react" "^2.0.0-beta.76"
@@ -1209,13 +1209,13 @@
     react-color "^2.19.3"
     react-tiny-popover "^6.0.5"
 
-"@designable/react@0.4.17", "@designable/react@^0.4.17":
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.17.tgz#d0a7f2a2c6087af38a8109aa22eed73099195498"
-  integrity sha512-as/t+4JTgXzJ/C0HDLBnmj1mIjsya7fFmCRWBDG7TlK6irnze/t7tsVHaxpbgXDn7PKa+Vd1fuD8cz6w5tu6xA==
+"@designable/react@0.4.19", "@designable/react@^0.4.19":
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.19.tgz#b50fe38aa5a6bdca2b6264e08783ebe8e4bccab7"
+  integrity sha512-rp9IOqWXkvHvQ2h5icsH1WWOBnU83muyaNUze04XE6MGM/kRF/QRaeMhtVbpNLblhNc73gvcsvoBuxJqf9NLzg==
   dependencies:
-    "@designable/core" "0.4.17"
-    "@designable/shared" "0.4.17"
+    "@designable/core" "0.4.19"
+    "@designable/shared" "0.4.19"
     "@formily/reactive" "^2.0.0-beta.76"
     "@formily/reactive-react" "^2.0.0-beta.76"
     "@juggle/resize-observer" "^3.3.1"
@@ -1227,10 +1227,10 @@
   dependencies:
     requestidlecallback "^0.3.0"
 
-"@designable/shared@0.4.17":
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.17.tgz#d2cf5a2bcd6bae39a1b8e154dbd3b9e64eedfd11"
-  integrity sha512-7z+cbCEIbR39CG3FMrAyU63qtRdJkuo8sRCKT1KA4RMisoLCpFNLk5jn1EwDdDvyw+nhA6YTHB+i+1Lqg3js5A==
+"@designable/shared@0.4.19":
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.19.tgz#d35d99419a71abd56b74ee6e81ad7e62b97661da"
+  integrity sha512-cPzPyXuWm6TvbDDRcsm3RAawHobfRwwmSUtmy9SR9o72iMhG9vH9hmFvXmqQte67BZ18qvpyuhvR7fGGwqKG8A==
   dependencies:
     requestidlecallback "^0.3.0"