Merge branch 'main' of github.com:DouyinFE/semi-design

content/other/configprovider/index-en-US.md

@@ -8,6 +8,15 @@ dir: column
 brief: Provide a unified global configuration for components.
 ---
 
+## Scenes to be used
+
+Coverage configuration is divided into two scenarios
+
+- When you need to override sub-component configuration, use ConfigProvider
+- When you need to globally modify component Props, use semiGlobal
+
+
+## ConfigProvider
 
 ## Demos
 
@@ -413,4 +422,36 @@ const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin').default;
 module.exports = {
 +    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
 }
+```
+
+
+## semiGlobal
+
+You can override the default Props of global components
+
+In `semiGlobal.config.overrideDefaultProps` you can configure the component default Props. You need to put your configuration at the entrance of the entire site, that is, it will be executed before all semi components.
+
+<Notice title={"Notes"}>
+semiGlobal is a singleton mode that affects the entire site. If you only want to cover certain components in certain places, it is recommended not to use semiGlobal. Instead, encapsulate the corresponding components that need to be covered and pass in the modified default props.
+</Notice>
+
+For example, the configuration below sets all Buttons to warning by default, and the zIndex of Select to 2000 by default, etc.
+
+```js
+import { semiGlobal } from "@douiyinfe/semi-ui"
+
+semiGlobal.config.overrideDefaultProps = {
+   Button: {
+     type: 'warning',
+   },
+   Select: {
+     zIndex: 2000,
+   },
+   Tooltip: {
+     zIndex: 2001,
+     trigger:"click"
+   },
+};
+
+
 ```

content/other/configprovider/index.md

@@ -8,6 +8,15 @@ dir: column
 brief: 为组件提供统一的全局化配置。
 ---
 
+## 使用场景
+
+覆盖配置分为两种场景
+
+- 需要覆盖子组件配置时，使用 ConfigProvider
+- 需要全局修改组件 Props时，使用 semiGlobal
+
+
+## ConfigProvider
 
 ## 代码演示
 
@@ -416,3 +425,36 @@ module.exports = {
 +    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
 }
 ```
+
+
+## semiGlobal
+
+你可以覆盖全局组件的默认 Props
+
+在 `semiGlobal.config.overrideDefaultProps` 可配置组件默认 Props，你需要将你的配置放到整个站点的入口处，即优先于所有 semi 组件执行。
+
+<Notice title={"注意事项"}>
+semiGlobal 是单例模式，会影响整个站点，如果你只想覆盖某些地方的某些组件，建议不要使用 semiGlobal，而是将对应需要覆盖的组件封装一层并传入修改后的默认 props。
+</Notice>
+
+比如下方配置就是将所有的 Button 默认设置为 warning，Select 的 zIndex 默认设置为 2000 等
+
+```js
+import { semiGlobal } from "@douiyinfe/semi-ui"
+
+semiGlobal.config.overrideDefaultProps = {
+  Button: {
+    type: 'warning',
+  },
+  Select: {
+    zIndex: 2000,
+  },
+  Tooltip: {
+    zIndex: 2001,
+    trigger:"click"
+  },
+};
+
+
+```
+

packages/semi-foundation/form/interface.ts

@@ -36,12 +36,22 @@ export interface setValuesConfig {
     isOverride: boolean
 }
 
+type ExcludeStringNumberKeys<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K]
+}
+
+type CustomKeys<T> = { [K in keyof T]: string extends K ? never : number extends K ? never : K; } extends { [K in keyof T]: infer U } ? U : never;
+
+type FieldPath<T, K extends CustomKeys<T> = CustomKeys<T>> = K extends string ? T[K] extends Record<string, any> ? `${K}.${FieldPath<T[K], CustomKeys<T[K]>>}` | K : K : never;
+
 // use object replace Record<string, any>, fix issue 933
 export interface BaseFormApi<T extends object = any> {
+// export interface BaseFormApi<T extends object = any> {
     /** get value of field */
     getValue: <K extends keyof T>(field?: K) => T[K];
     /** set value of field */
-    setValue: <K extends keyof T>(field: K, newFieldValue: T[K]) => void;
+    setValue: <K extends CustomKeys<T>>(field: FieldPath<T, K> | FieldPath<K>, newFieldValue: any) => void;
+    // setValue: <K extends keyof T>(field: K, newFieldValue: T[K]) => void;
     /** get error of field */
     getError: <K extends keyof T>(field: K) => any;
     /** set error of field */

packages/semi-foundation/tsconfig.json

@@ -9,7 +9,6 @@
         "lib": ["es7", "dom", "es2017"],
         "moduleResolution": "node",
         "noImplicitAny": false,
-        "suppressImplicitAnyIndexErrors": true,
         "forceConsistentCasingInFileNames": true,
         "allowSyntheticDefaultImports": true,
         "experimentalDecorators": true,

packages/semi-icons/tsconfig.json

@@ -10,7 +10,6 @@
         "moduleResolution": "node",
         "noImplicitAny": false,
         "jsx": "react",
-        "suppressImplicitAnyIndexErrors": true,
         "forceConsistentCasingInFileNames": true,
         "allowSyntheticDefaultImports": true,
         "experimentalDecorators": true,

packages/semi-ui/form/_story/form.stories.tsx

@@ -76,7 +76,7 @@ const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi })
         <Input size='default' showClear insetLabel />
         <FieldB insetLabel placeholder='fe' fieldClassName='fefe' field='custom' />
 
-        <Button onClick={() => formApi.setValue('fieldA', 'fe')}>set</Button>
+        {/* <Button onClick={() => formApi.setValue('fieldA', 'fe')}>set</Button> */}
         <Form.Select field='test' ref={ref}>
             <Form.Select.Option value="f1"></Form.Select.Option>
             <Form.Select.Option value="f2"></Form.Select.Option>
@@ -155,17 +155,36 @@ interface FData {
     test4: {
         event: string,
     },
+    test5: {
+        kkk: {
+            jjj: string
+        }
+    }
     testK: boolean;
     // [x: string]: any;
 }
 class Demo extends React.Component<IProps, IState> {
+
+    formApi: FormApi<FData>
+
     constructor(props:any) {
       super(props);
       this.state = { visible: false};
     }
 
-    getFormApi(formApi: FormApi<FData>) {
-        formApi.getValue()
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    setData() {
+        const formApi = this.formApi;
+        formApi.setValue('test3', 123);
+        formApi.setValue('test8', 123);
+        formApi.setValue('test4.event', 123);
+        formApi.setValue('test5.kkk', 123);
+        formApi.setValue('test5.kkk.jjj', 123);
+        formApi.setValue('test5.kkk.ppp', 123);
+        formApi.setValue('test4.5', 123);
     }
 
     render() {

packages/semi-ui/form/hoc/withField.tsx

@@ -413,6 +413,7 @@ function withField<
         }, [rules, validate]);
 
         useIsomorphicEffect(() => {
+            isUnmounted.current = false;
             // exec validate once when trigger include 'mount'
             if (validateOnMount) {
                 fieldValidate(value);

packages/semi-ui/form/hooks/useFieldApi.tsx

@@ -9,6 +9,7 @@ const buildFieldApi = (formApi: FormApi, field: string) => ({
     getTouched: () => formApi.getTouched(field),
     setTouched: (isTouched: boolean) => formApi.setTouched(field, isTouched),
     getValue: () => formApi.getValue(field),
+    // @ts-ignore
     setValue: (value: any) => formApi.setValue(field, value),
 });
 

packages/semi-ui/index.ts

@@ -101,3 +101,5 @@ export {
 
 export { default as Image } from './image'; 
 export { Preview as ImagePreview } from './image';
+
+export { default as semiGlobal } from "./_utils/semi-global";

packages/semi-ui/tsconfig.json

@@ -16,7 +16,6 @@
             "@douyinfe/semi-theme-default/*": ["../semi-theme-default/*"],
             "@douyinfe/semi-icons": ["../semi-icons/src"]
         },
-        "suppressImplicitAnyIndexErrors": true,
         "forceConsistentCasingInFileNames": true,
         "allowSyntheticDefaultImports": true,
         "experimentalDecorators": true,