feffery_antd_components 0.3.15 → 0.4.0-rc5

package/src/lib/components/feedback/AntdModal.react.js

@@ -7,6 +7,7 @@ import { Modal, ConfigProvider } from 'antd';
 import { str2Locale } from '../locales.react';
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
+import { useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 自定义上下文
@@ -15,44 +16,43 @@ import PropsContext from '../../contexts/PropsContext';
 /**
  * 对话框组件AntdModal
  */
-const AntdModal = (props) => {
-    let {
-        id,
-        children,
-        className,
-        key,
-        style,
-        locale,
-        setProps,
-        title,
-        visible,
-        renderFooter,
-        okButtonProps,
-        cancelButtonProps,
-        okText,
-        loadingOkText,
-        cancelText,
-        width,
-        centered,
-        keyboard,
-        closable,
-        mask,
-        maskClosable,
-        okClickClose,
-        zIndex,
-        maskStyle,
-        bodyStyle,
-        okCounts,
-        cancelCounts,
-        closeCounts,
-        confirmLoading,
-        confirmAutoSpin,
-        transitionType,
-        forceRender,
-        destroyOnClose,
-        loading,
-        loading_state
-    } = props;
+const AntdModal = ({
+    id,
+    children,
+    className,
+    key,
+    style,
+    styles,
+    classNames,
+    locale = 'zh-cn',
+    setProps,
+    title,
+    visible = false,
+    renderFooter = false,
+    okButtonProps,
+    cancelButtonProps,
+    okText,
+    loadingOkText,
+    cancelText,
+    width = 520,
+    centered = false,
+    keyboard = true,
+    closable = true,
+    mask = true,
+    maskClosable = true,
+    okClickClose = true,
+    zIndex = 1000,
+    okCounts = 0,
+    cancelCounts = 0,
+    closeCounts = 0,
+    confirmLoading = false,
+    confirmAutoSpin = false,
+    transitionType = 'zoom',
+    forceRender = false,
+    destroyOnClose = true,
+    loading = false,
+    ...others
+}) => {
 
     const context = useContext(PropsContext)
     locale = (context && context.locale) || locale
@@ -83,7 +83,7 @@ const AntdModal = (props) => {
         <ConfigProvider locale={str2Locale.get(locale)}>
             <Modal
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 className={
                     isString(className) ?
@@ -91,6 +91,8 @@ const AntdModal = (props) => {
                         (className ? useCss(className) : undefined)
                 }
                 style={style}
+                styles={styles}
+                classNames={classNames}
                 key={key}
                 title={title}
                 open={visible}
@@ -106,8 +108,6 @@ const AntdModal = (props) => {
                 mask={mask}
                 maskClosable={maskClosable}
                 zIndex={zIndex}
-                maskStyle={maskStyle}
-                bodyStyle={bodyStyle}
                 onOk={listenOk}
                 onCancel={listenCancel}
                 afterClose={listenClose}
@@ -116,9 +116,7 @@ const AntdModal = (props) => {
                 forceRender={forceRender}
                 destroyOnClose={destroyOnClose}
                 loading={loading}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
+                data-dash-is-loading={useLoading()}
             >{children}</Modal>
         </ConfigProvider>
     );
@@ -154,10 +152,70 @@ AntdModal.propTypes = {
     ]),
 
     /**
-     * 组件文案语种，可选项有`'zh-cn'`（简体中文）、`'en-us'`（英语）、`'de-de'`（德语）
+     * 细分控制子元素css样式
+     */
+    styles: PropTypes.exact({
+        /**
+         * 遮罩层元素css样式
+         */
+        mask: PropTypes.object,
+        /**
+         * 容器元素css样式
+         */
+        content: PropTypes.object,
+        /**
+         * 包裹层元素css样式
+         */
+        wrapper: PropTypes.object,
+        /**
+         * 头部元素css样式
+         */
+        header: PropTypes.object,
+        /**
+         * 内容元素css样式
+         */
+        body: PropTypes.object,
+        /**
+         * 底部元素css样式
+         */
+        footer: PropTypes.object
+    }),
+
+    /**
+     * 细分控制子元素css类名
+     */
+    classNames: PropTypes.exact({
+        /**
+         * 遮罩层元素css类名
+         */
+        mask: PropTypes.string,
+        /**
+         * 容器元素css类名
+         */
+        content: PropTypes.string,
+        /**
+         * 包裹层元素css类名
+         */
+        wrapper: PropTypes.string,
+        /**
+         * 头部元素css类名
+         */
+        header: PropTypes.string,
+        /**
+         * 内容元素css类名
+         */
+        body: PropTypes.string,
+        /**
+         * 底部元素css类名
+         */
+        footer: PropTypes.string
+    }),
+
+    /**
+     * 组件文案语种，可选项有`'zh-cn'`（简体中文）、`'en-us'`（英语）、`'de-de'`（德语）、`'ru-ru'`（俄语）
      * 默认值：`'zh-cn'`
      */
-    locale: PropTypes.oneOf(['zh-cn', 'en-us', 'de-de']),
+    locale: PropTypes.oneOf(['zh-cn', 'en-us', 'de-de', 'ru-ru']),
 
     /**
      * 监听或设置对话框是否可见
@@ -282,7 +340,34 @@ AntdModal.propTypes = {
      */
     width: PropTypes.oneOfType([
         PropTypes.number,
-        PropTypes.string
+        PropTypes.string,
+        // 响应式
+        PropTypes.shape({
+            xs: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string
+            ]),
+            sm: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string
+            ]),
+            md: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string
+            ]),
+            lg: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string
+            ]),
+            xl: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string
+            ]),
+            xxl: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string
+            ])
+        })
     ]),
 
     /**
@@ -327,16 +412,6 @@ AntdModal.propTypes = {
      */
     zIndex: PropTypes.number,
 
-    /**
-     * 遮罩层css样式
-     */
-    maskStyle: PropTypes.object,
-
-    /**
-     * 内容区域css样式
-     */
-    bodyStyle: PropTypes.object,
-
     /**
      * 监听确认按钮累计点击次数
      * 默认值：`0`
@@ -413,46 +488,7 @@ AntdModal.propTypes = {
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
      */
-    setProps: PropTypes.func,
-
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string
-    }),
+    setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdModal.defaultProps = {
-    visible: false,
-    renderFooter: false,
-    width: 520,
-    centered: false,
-    keyboard: true,
-    closable: true,
-    mask: true,
-    maskClosable: true,
-    okClickClose: true,
-    zIndex: 1000,
-    okCounts: 0,
-    cancelCounts: 0,
-    closeCounts: 0,
-    confirmLoading: false,
-    confirmAutoSpin: false,
-    transitionType: 'zoom',
-    forceRender: false,
-    destroyOnClose: true,
-    locale: 'zh-cn',
-    loading: false
-}
-
 export default AntdModal;

package/src/lib/components/feedback/AntdNotification.react.js

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 // antd核心
-import { notification, Button, App } from 'antd';
+import { notification, Button } from 'antd';
 // 辅助库
 import { isString, omit } from 'lodash';
 // 自定义hooks
@@ -11,26 +11,23 @@ import useCss from '../../hooks/useCss';
 /**
  * 通知提醒框组件AntdNotification
  */
-const AntdNotification = (props) => {
-    let {
-        className,
-        style,
-        message,
-        description,
-        type,
-        placement,
-        top,
-        bottom,
-        duration,
-        closable,
-        closeButton,
-        underCompatibilityMode,
-        loading_state,
-        setProps
-    } = props;
-
-    const [api, contextHolder] = notification.useNotification({ stack: false });
-    const { notification: _notification } = App.useApp();
+const AntdNotification = ({
+    className,
+    style,
+    message,
+    description,
+    type = 'default',
+    placement = 'topRight',
+    top = 24,
+    bottom = 24,
+    duration = 4.5,
+    showProgress = false,
+    pauseOnHover = true,
+    closable = true,
+    closeButton,
+    stack = false,
+    setProps
+}) => {
 
     let config = {
         className: (
@@ -45,6 +42,8 @@ const AntdNotification = (props) => {
         top: top,
         bottom: bottom,
         duration: duration,
+        showProgress: showProgress,
+        pauseOnHover: pauseOnHover,
         closeIcon: (
             closable ?
                 undefined :
@@ -58,41 +57,29 @@ const AntdNotification = (props) => {
                     </Button>
                 ) :
                 undefined
-        )
+        ),
+        stack: stack
     }
 
+    const [notificationApi, contextHolder] = notification.useNotification(config);
+
     useEffect(() => {
-        if (underCompatibilityMode) {
-            if (type === 'default') {
-                _notification.open(config)
-            } else if (type === 'success') {
-                _notification.success(config)
-            } else if (type === 'error') {
-                _notification.error(config)
-            } else if (type === 'info') {
-                _notification.info(config)
-            } else if (type === 'warning') {
-                _notification.warning(config)
-            }
-        } else {
-            if (type === 'default') {
-                api.open(config)
-            } else if (type === 'success') {
-                api.success(config)
-            } else if (type === 'error') {
-                api.error(config)
-            } else if (type === 'info') {
-                api.info(config)
-            } else if (type === 'warning') {
-                api.warning(config)
-            }
+        if (type === 'default') {
+            notificationApi.open(config)
+        } else if (type === 'success') {
+            notificationApi.success(config)
+        } else if (type === 'error') {
+            notificationApi.error(config)
+        } else if (type === 'info') {
+            notificationApi.info(config)
+        } else if (type === 'warning') {
+            notificationApi.warning(config)
         }
     })
 
     return <>{contextHolder}</>;
 }
 
-// 定义参数或属性
 AntdNotification.propTypes = {
     /**
      * 组件唯一id
@@ -157,6 +144,18 @@ AntdNotification.propTypes = {
      */
     duration: PropTypes.number,
 
+    /**
+     * 是否显示自动关闭进度条
+     * 默认值：`false`
+     */
+    showProgress: PropTypes.bool,
+
+    /**
+     * `showProgress=True`时，是否在鼠标移入时暂停进度条倒计时
+     * 默认值：`true`
+     */
+    pauseOnHover: PropTypes.bool,
+
     /**
      * 是否显示关闭按钮
      * 默认值：`true`
@@ -192,24 +191,10 @@ AntdNotification.propTypes = {
     }),
 
     /**
-     * 当前通知提醒框组件是否位于设置了`compatibilityMode=true`的`AntdConfigProvider`内部
+     * 是否开启多通知自动折叠堆叠功能
+     * 默认值：`false`
      */
-    underCompatibilityMode: PropTypes.bool,
-
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string
-    }),
+    stack: PropTypes.bool,
 
     /**
      * Dash-assigned callback that should be called to report property changes
@@ -218,14 +203,4 @@ AntdNotification.propTypes = {
     setProps: PropTypes.func,
 };
 
-// 设置默认参数
-AntdNotification.defaultProps = {
-    type: 'default',
-    placement: 'topRight',
-    top: 24,
-    bottom: 24,
-    duration: 4.5,
-    closable: true
-}
-
 export default AntdNotification;

package/src/lib/components/feedback/AntdPopconfirm.react.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Popconfirm, ConfigProvider } from 'antd';
 // 辅助库
 import { str2Locale } from '../locales.react';
-import { parseChildrenToArray } from '../utils';
+import { parseChildrenToArray, useLoading } from '../utils';
 import { isString, isUndefined } from 'lodash';
 import { pickBy } from 'ramda';
 // 自定义hooks
@@ -16,41 +16,39 @@ import PropsContext from '../../contexts/PropsContext';
 /**
  * 气泡确认框组件AntdPopconfirm
  */
-const AntdPopconfirm = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        locale,
-        icon,
-        title,
-        description,
-        disabled,
-        placement,
-        mouseEnterDelay,
-        mouseLeaveDelay,
-        overlayClassName,
-        overlayStyle,
-        overlayInnerStyle,
-        okText,
-        okButtonProps,
-        cancelText,
-        cancelButtonProps,
-        showCancel,
-        confirmCounts,
-        cancelCounts,
-        trigger,
-        zIndex,
-        arrow,
-        fresh,
-        open,
-        permanent,
-        popupContainer,
-        setProps,
-        loading_state
-    } = props;
+const AntdPopconfirm = ({
+    id,
+    children,
+    className,
+    style,
+    styles,
+    classNames,
+    key,
+    locale = 'zh-cn',
+    icon,
+    title,
+    description,
+    disabled = false,
+    placement = 'top',
+    mouseEnterDelay = 0.1,
+    mouseLeaveDelay = 0.1,
+    okText,
+    okButtonProps,
+    cancelText,
+    cancelButtonProps,
+    showCancel = true,
+    confirmCounts = 0,
+    cancelCounts = 0,
+    trigger = 'click',
+    zIndex,
+    arrow = 'show',
+    fresh = false,
+    open = false,
+    permanent = false,
+    popupContainer = 'body',
+    setProps,
+    ...others
+}) => {
 
     const arrowPoint = useMemo(() => {
         if (arrow === 'hide') {
@@ -83,7 +81,7 @@ const AntdPopconfirm = (props) => {
         <ConfigProvider locale={str2Locale.get(locale)}>
             <Popconfirm
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 className={
                     isString(className) ?
@@ -91,6 +89,8 @@ const AntdPopconfirm = (props) => {
                         (className ? useCss(className) : undefined)
                 }
                 style={style}
+                styles={styles}
+                classNames={classNames}
                 key={key}
                 icon={icon}
                 title={title}
@@ -103,13 +103,6 @@ const AntdPopconfirm = (props) => {
                 placement={placement}
                 mouseEnterDelay={mouseEnterDelay}
                 mouseLeaveDelay={mouseLeaveDelay}
-                overlayClassName={
-                    isString(overlayClassName) ?
-                        overlayClassName :
-                        (overlayClassName ? useCss(overlayClassName) : undefined)
-                }
-                overlayStyle={overlayStyle}
-                overlayInnerStyle={overlayInnerStyle}
                 trigger={trigger}
                 okText={okText}
                 okButtonProps={okButtonProps}
@@ -130,9 +123,7 @@ const AntdPopconfirm = (props) => {
                 }
                 onCancel={listenCancel}
                 onConfirm={listenConfirm}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
+                data-dash-is-loading={useLoading()}>
                 {children}
             </Popconfirm>
         </ConfigProvider>
@@ -169,10 +160,38 @@ AntdPopconfirm.propTypes = {
     ]),
 
     /**
-     * 组件文案语种，可选项有`'zh-cn'`（简体中文）、`'en-us'`（英语）、`'de-de'`（德语）
+     * 细分控制子元素css样式
+     */
+    styles: PropTypes.exact({
+        /**
+         * 根元素（包含箭头、内容元素）css样式
+         */
+        root: PropTypes.object,
+        /**
+         * 内容元素css样式
+         */
+        body: PropTypes.object
+    }),
+
+    /**
+     * 细分控制子元素css类名
+     */
+    classNames: PropTypes.exact({
+        /**
+         * 根元素（包含箭头、内容元素）css类名
+         */
+        root: PropTypes.string,
+        /**
+         * 内容元素css类名
+         */
+        body: PropTypes.string
+    }),
+
+    /**
+     * 组件文案语种，可选项有`'zh-cn'`（简体中文）、`'en-us'`（英语）、`'de-de'`（德语）、`'ru-ru'`（俄语）
      * 默认值：`'zh-cn'`
      */
-    locale: PropTypes.oneOf(['zh-cn', 'en-us', 'de-de']),
+    locale: PropTypes.oneOf(['zh-cn', 'en-us', 'de-de', 'ru-ru']),
 
     /**
      * 组件型，提示图标
@@ -216,24 +235,6 @@ AntdPopconfirm.propTypes = {
      */
     mouseLeaveDelay: PropTypes.number,
 
-    /**
-     * 气泡确认框css类名
-     */
-    overlayClassName: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-
-    /**
-     * 气泡确认框css样式
-     */
-    overlayStyle: PropTypes.object,
-
-    /**
-     * 内容区域css样式
-     */
-    overlayInnerStyle: PropTypes.object,
-
     /**
      * 组件型，确认按钮内容
      */
@@ -430,22 +431,4 @@ AntdPopconfirm.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdPopconfirm.defaultProps = {
-    disabled: false,
-    placement: 'top',
-    mouseEnterDelay: 0.1,
-    mouseLeaveDelay: 0.1,
-    showCancel: true,
-    confirmCounts: 0,
-    cancelCounts: 0,
-    trigger: 'click',
-    locale: 'zh-cn',
-    popupContainer: 'body',
-    arrow: 'show',
-    fresh: false,
-    open: false,
-    permanent: false
-}
-
 export default AntdPopconfirm;