Merge branch 'main' of https://github.com/WeBankFinTech/fes-design

WeBankFinTech · Dec 15, 2021 · f7c5603 · f7c5603
2 parents 9fdff2a + 7d43824
commit f7c5603
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 112 deletions.
diff --git a/components/config-provider/config.js b/components/config-provider/config.js
diff --git a/components/config-provider/configProvider.jsx b/components/config-provider/configProvider.jsx
@@ -1,19 +1,37 @@
-import {
-    defineComponent, watch,
-} from 'vue';
-import config from './config';
+import { defineComponent, watch, reactive } from 'vue';
+import { isObject, isNil } from 'lodash-es';
+
+const config = reactive({
+    getContainer: () => document.body,
+});
+
+export const setConfig = (data) => {
+    if (isObject(data)) {
+        Object.keys(data).forEach((prop) => {
+            if (!isNil(data[prop])) {
+                config[prop] = data[prop];
+            }
+        });
+    }
+};
+
+export const getConfig = () => config;
 
 export default defineComponent({
     name: 'FConfigProvider',
     props: {
         getContainer: Function,
     },
     setup(props, { slots }) {
-        watch(props, () => {
-            config.setConfig(props);
-        }, {
-            immediate: true,
-        });
+        watch(
+            props,
+            () => {
+                setConfig(props);
+            },
+            {
+                immediate: true,
+            },
+        );
         return () => slots.default?.();
     },
 });
diff --git a/components/config-provider/index.js b/components/config-provider/index.js
@@ -1,11 +1,7 @@
 import { withInstall } from '../_util/withInstall';
 import ConfigProvider from './configProvider';
-import config from './config';
-
-ConfigProvider.setConfig = config.setConfig;
-
-ConfigProvider.getConfig = config.getConfig;
 
 export const FConfigProvider = withInstall(ConfigProvider);
 
-export default ConfigProvider;
+export default FConfigProvider;
+export { setConfig, getConfig } from './configProvider';
diff --git a/components/drawer/drawer.jsx b/components/drawer/drawer.jsx
@@ -5,7 +5,7 @@ import FButton from '../button';
 import { CloseOutlined } from '../icon';
 import PopupManager from '../_util/popupManager';
 import useLockScreen from '../_util/use/useLockScreen';
-import ConfigProvider from '../config-provider';
+import { getConfig } from '../config-provider';
 
 const prefixCls = getPrefixCls('drawer');
 const UPDATE_SHOW_EVENT = 'update:show';
@@ -91,7 +91,7 @@ const Drawer = defineComponent({
             },
             { immediate: true },
         );
-        const config = ConfigProvider.getConfig();
+        const config = getConfig();
         const getContainer = computed(() => props.getContainer || config.getContainer);
 
         function handleCancel(event) {

diff --git a/components/message/index.jsx b/components/message/index.jsx
@@ -2,14 +2,14 @@ import { isObject } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
 import { createManager } from '../_util/noticeManager';
 import Alert from '../alert/alert';
-import ConfigProvider from '../config-provider';
+import { getConfig } from '../config-provider';
 
 const prefixCls = getPrefixCls('message');
 
 const defaultConfig = {
     duration: 3,
     getContainer: () => {
-        const config = ConfigProvider.getConfig();
+        const config = getConfig();
         return config.getContainer();
     },
     maxCount: null,
@@ -20,15 +20,7 @@ let mergeConfig = defaultConfig;
 
 let messageInstance = null;
 
-async function create({
-    type,
-    content,
-    duration,
-    icon,
-    closable,
-    afterClose,
-    colorful,
-}) {
+async function create({ type, content, duration, icon, closable, afterClose, colorful }) {
     if (!messageInstance) {
         messageInstance = await createManager({
             getContainer: mergeConfig.getContainer,

diff --git a/components/modal/modal.jsx b/components/modal/modal.jsx
@@ -1,21 +1,12 @@
-import {
-    computed,
-    defineComponent,
-    Teleport,
-    Transition,
-    ref,
-    watch,
-    nextTick,
-} from 'vue';
+import { computed, defineComponent, Teleport, Transition, ref, watch, nextTick } from 'vue';
 import { isNumber } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
 import FButton from '../button';
 import { CloseOutlined } from '../icon';
 import { iconComponentMap } from '../_util/noticeManager';
 import PopupManager from '../_util/popupManager';
 import useLockScreen from '../_util/use/useLockScreen';
-import ConfigProvider from '../config-provider';
-
+import { getConfig } from '../config-provider';
 
 const prefixCls = getPrefixCls('modal');
 const UPDATE_SHOW_EVENT = 'update:show';
@@ -116,7 +107,7 @@ const Modal = defineComponent({
             },
             { immediate: true },
         );
-        const config = ConfigProvider.getConfig();
+        const config = getConfig();
         const getContainer = computed(() => props.getContainer || config.getContainer);
 
         function handleCancel(event) {
@@ -140,13 +131,7 @@ const Modal = defineComponent({
             const Icon = modalIconMap[props.type];
             return (
                 <div class={`${prefixCls}-header`}>
-                    {props.forGlobal && (
-                        <div
-                            class={`${prefixCls}-icon ${prefixCls}-status-${props.type}`}
-                        >
-                            { Icon && <Icon /> }
-                        </div>
-                    )}
+                    {props.forGlobal && <div class={`${prefixCls}-icon ${prefixCls}-status-${props.type}`}>{Icon && <Icon />}</div>}
                     <div>{header}</div>
                 </div>
             );
@@ -161,19 +146,11 @@ const Modal = defineComponent({
                 footer = (
                     <>
                         {(!props.forGlobal || props.type === 'confirm') && (
-                            <FButton
-                                size="middle"
-                                class="btn-margin"
-                                onClick={handleCancel}
-                            >
+                            <FButton size="middle" class="btn-margin" onClick={handleCancel}>
                                 {props.cancelText}
                             </FButton>
                         )}
-                        <FButton
-                            type="primary"
-                            size="middle"
-                            onClick={handleOk}
-                        >
+                        <FButton type="primary" size="middle" onClick={handleOk}>
                             {props.okText}
                         </FButton>
                     </>
@@ -190,64 +167,39 @@ const Modal = defineComponent({
             };
         });
 
-        const showDom = computed(
-            () => (props.displayDirective === 'if' && visible.value)
-                || props.displayDirective === 'show',
-        );
+        const showDom = computed(() => (props.displayDirective === 'if' && visible.value) || props.displayDirective === 'show');
 
         return () => (
             <Teleport to={getContainer.value?.()}>
                 <div class={`${prefixCls}`}>
                     <Transition name={`${prefixCls}-mask-fade`}>
-                        {props.mask && showDom.value && (
-                            <div
-                                class={`${prefixCls}-mask`}
-                                style={{ zIndex: zIndex.value }}
-                                v-show={visible.value}
-                            ></div>
-                        )}
+                        {props.mask && showDom.value && <div class={`${prefixCls}-mask`} style={{ zIndex: zIndex.value }} v-show={visible.value}></div>}
                     </Transition>
-                    <Transition
-                        name={`${prefixCls}-fade`}
-                        onAfterLeave={handleTransitionAfterLeave}
-                    >
+                    <Transition name={`${prefixCls}-fade`} onAfterLeave={handleTransitionAfterLeave}>
                         {showDom.value && (
                             <div
                                 v-show={visible.value}
                                 class={{
                                     [`${prefixCls}-container`]: true,
                                     [`${prefixCls}-center`]: props.center,
-                                    [`${prefixCls}-fullscreen`]:
-                                        props.fullScreen,
+                                    [`${prefixCls}-fullscreen`]: props.fullScreen,
                                     [`${prefixCls}-global`]: props.forGlobal,
                                     [`${prefixCls}-no-header`]: !hasHeader.value,
                                     [`${prefixCls}-no-footer`]: !props.footer,
                                 }}
                                 style={{ zIndex: zIndex.value }}
-                                onClick={event => props.maskClosable
-                                    && props.mask
-                                    && handleCancel(event)
-                                }
+                                onClick={(event) => props.maskClosable && props.mask && handleCancel(event)}
                             >
                                 <div
-                                    class={`${prefixCls}-wrapper ${
-                                        props.contentClass || ''
-                                    }`}
+                                    class={`${prefixCls}-wrapper ${props.contentClass || ''}`}
                                     style={styles.value}
-                                    onClick={event => event.stopPropagation()}
+                                    onClick={(event) => event.stopPropagation()}
                                 >
                                     {getHeader()}
-                                    <div class={`${prefixCls}-body`}>
-                                        {ctx.slots.default
-                                            ? ctx.slots.default()
-                                            : props.forGlobal && props.content}
-                                    </div>
+                                    <div class={`${prefixCls}-body`}>{ctx.slots.default ? ctx.slots.default() : props.forGlobal && props.content}</div>
                                     {getFooter()}
                                     {props.closable && (
-                                        <div
-                                            class={`${prefixCls}-close`}
-                                            onClick={handleCancel}
-                                        >
+                                        <div class={`${prefixCls}-close`} onClick={handleCancel}>
                                             <CloseOutlined />
                                         </div>
                                     )}

diff --git a/components/popper/popper.jsx b/components/popper/popper.jsx
@@ -6,7 +6,7 @@ import useTrigger from './useTrigger';
 import usePopper from './usePopper';
 import useResize from './useResize';
 import { getFirstValidNode } from '../_util/vnode';
-import ConfigProvider from '../config-provider';
+import { getConfig } from '../config-provider';
 
 const prefixCls = getPrefixCls('popper');
 
@@ -70,7 +70,7 @@ export default defineComponent({
         if (!ctx.slots.trigger) {
             throw new Error('FPopper', 'Trigger must be provided');
         }
-        const config = ConfigProvider.getConfig();
+        const config = getConfig();
         const getContainer = computed(() => props.getContainer || config.getContainer);
         const { slots } = ctx;
         const { visible, updateVisible, triggerRef, popperRef, arrowRef, update, popperStyle, updateVirtualRect } = usePopper(props, ctx);