feffery_antd_components 0.3.15 → 0.4.0-rc5

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

@@ -13,35 +13,36 @@ import Draggable from "react-draggable";
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
 import { v4 as uuidv4 } from 'uuid';
+import { useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
 /**
  * 弹出式卡片组件AntdPopupCard
  */
-const AntdPopupCard = (props) => {
-    const {
-        id,
-        children,
-        className,
-        key,
-        style,
-        visible,
-        title,
-        width,
-        transitionType,
-        forceRender,
-        destroyOnClose,
-        closable,
-        closeIconType,
-        draggable,
-        dragClassName,
-        zIndex,
-        bodyStyle,
-        loading,
-        setProps,
-        loading_state
-    } = props;
+const AntdPopupCard = ({
+    id,
+    children,
+    className,
+    key,
+    style,
+    styles,
+    classNames,
+    visible = true,
+    title,
+    width,
+    transitionType = 'fade',
+    forceRender = false,
+    destroyOnClose = true,
+    closable = true,
+    closeIconType = 'default',
+    draggable = false,
+    dragClassName,
+    zIndex = 1000,
+    loading = false,
+    setProps,
+    ...others
+}) => {
 
     const [handleId, setHandleId] = useState(uuidv4().replace(/\d+/g, ""));
     const [disabled, setDisabled] = useState(false);
@@ -72,7 +73,7 @@ const AntdPopupCard = (props) => {
     return (
         <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) ?
@@ -80,6 +81,8 @@ const AntdPopupCard = (props) => {
                     (className ? useCss(className) : undefined)
             }
             style={style}
+            styles={styles}
+            classNames={classNames}
             key={key}
             title={
                 <div
@@ -151,7 +154,6 @@ const AntdPopupCard = (props) => {
             width={width}
             open={visible}
             zIndex={zIndex}
-            bodyStyle={bodyStyle}
             mask={false}
             maskClosable={false}
             closable={false}
@@ -169,9 +171,7 @@ const AntdPopupCard = (props) => {
                     </Draggable>
                 ) : undefined}
             loading={loading}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={useLoading()}
         >{children}</Modal>
     );
 }
@@ -205,6 +205,66 @@ AntdPopupCard.propTypes = {
         PropTypes.object
     ]),
 
+    /**
+     * 细分控制子元素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
+    }),
+
     /**
      * 组件型，标题内容
      */
@@ -277,11 +337,6 @@ AntdPopupCard.propTypes = {
      */
     zIndex: PropTypes.number,
 
-    /**
-     * 内容区域css样式
-     */
-    bodyStyle: PropTypes.object,
-
     /**
      * 是否整体渲染为加载中状态
      * 默认值：`false`
@@ -302,35 +357,7 @@ AntdPopupCard.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
 };
 
-// 设置默认参数
-AntdPopupCard.defaultProps = {
-    transitionType: 'fade',
-    closeIconType: 'default',
-    draggable: false,
-    visible: true,
-    closable: true,
-    zIndex: 1000,
-    loading: false,
-    forceRender: false,
-    destroyOnClose: true
-}
-
 export default AntdPopupCard;

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

@@ -6,41 +6,40 @@ import { Progress } from 'antd';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
+import { useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
 /**
  * 进度条组件AntdProgress
  */
-const AntdProgress = (props) => {
-    let {
-        id,
-        className,
-        style,
-        key,
-        type,
-        size,
-        percent,
-        success,
-        format,
-        status,
-        showInfo,
-        strokeColor,
-        strokeLinecap,
-        strokeWidth,
-        trailColor,
-        width,
-        gapDegree,
-        gapPosition,
-        steps,
-        loading_state,
-        setProps
-    } = props;
+const AntdProgress = ({
+    id,
+    className,
+    style,
+    key,
+    type = 'line',
+    size = 'default',
+    percent = 0,
+    success,
+    format,
+    status,
+    showInfo = true,
+    strokeColor,
+    strokeLinecap,
+    strokeWidth,
+    trailColor,
+    gapDegree,
+    gapPosition = 'bottom',
+    steps,
+    setProps,
+    ...others
+}) => {
 
     return (
         <Progress
             // 提取具有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) ?
@@ -73,13 +72,10 @@ const AntdProgress = (props) => {
             strokeLinecap={strokeLinecap}
             strokeWidth={strokeWidth}
             trailColor={trailColor}
-            width={width}
             gapDegree={gapDegree}
             gapPosition={gapPosition}
             steps={steps}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={useLoading()}
         ></Progress>
     );
 }
@@ -115,13 +111,23 @@ AntdProgress.propTypes = {
     type: PropTypes.oneOf(['line', 'circle', 'dashboard']),
 
     /**
-     * 进度条尺寸规格，可选项有`'small'`、`'default'`、`'large'`，传入数值型表示像素尺寸
+     * 进度条尺寸规格，可选项有`'small'`、`'default'`、`'large'`，传入数值型表示像素尺寸，传入字典型可分别控制宽度和高度
      * 默认值：`'default'`
      */
     size: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.arrayOf(PropTypes.number),
         PropTypes.oneOf(['small', 'default']),
+        PropTypes.shape({
+            /**
+             * 像素宽度
+             */
+            width: PropTypes.number,
+            /**
+             * 像素高度
+             */
+            height: PropTypes.number
+        })
     ]),
 
     /**
@@ -224,12 +230,6 @@ AntdProgress.propTypes = {
      */
     trailColor: PropTypes.string,
 
-    /**
-     * 进度条画布宽度，`type='circle'`或`type='dashboard'`时有效
-     * 默认值：`132`
-     */
-    width: PropTypes.number,
-
     /**
      * 进度条缺口角度，取值应在`0`到`295`之间，仅`type='dashboard'`时可用
      * 默认值：`75`
@@ -257,21 +257,6 @@ AntdProgress.propTypes = {
      */
     'aria-*': PropTypes.string,
 
-    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
-    }),
-
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -279,14 +264,4 @@ AntdProgress.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdProgress.defaultProps = {
-    type: 'line',
-    size: 'default',
-    percent: 0,
-    showInfo: true,
-    width: 132,
-    gapPosition: 'bottom'
-}
-
 export default AntdProgress;

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

@@ -7,31 +7,31 @@ import { LoadingOutlined } from '@ant-design/icons';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
+import { useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
 /**
  * 结果组件AntdResult
  */
-const AntdResult = (props) => {
-    let {
-        id,
-        className,
-        style,
-        key,
-        extra,
-        status,
-        title,
-        subTitle,
-        icon,
-        loading_state,
-        setProps
-    } = props;
+const AntdResult = ({
+    id,
+    className,
+    style,
+    key,
+    extra,
+    status = 'info',
+    title,
+    subTitle,
+    icon,
+    setProps,
+    ...others
+}) => {
 
     return (
         <Result
             // 提取具有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) ?
@@ -51,9 +51,7 @@ const AntdResult = (props) => {
             status={status}
             title={title}
             subTitle={subTitle}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
         </Result>
     );
 }
@@ -118,21 +116,6 @@ AntdResult.propTypes = {
      */
     'aria-*': PropTypes.string,
 
-    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
-    }),
-
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -140,9 +123,4 @@ AntdResult.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdResult.defaultProps = {
-    status: 'info'
-}
-
 export default AntdResult;

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

@@ -5,36 +5,40 @@ import PropTypes from 'prop-types';
 import { Spin } from 'antd';
 // 辅助库
 import { isString, isNumber } from 'lodash';
-import { pickBy } from 'ramda';
+import { pickBy, equals } from 'ramda';
+import { useLoading, loadingSelector } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss'
 
 /**
- * 加载动画组件AntdSpid
+ * 加载动画组件AntdSpin
  */
-const AntdSpin = (props) => {
-    let {
-        id,
-        className,
-        wrapperClassName,
-        style,
-        key,
-        children,
-        spinning,
-        size,
-        delay,
-        fullscreen,
-        loading_state,
-        text,
-        listenPropsMode,
-        excludeProps,
-        includeProps,
-        debug,
-        indicator,
-        manual,
-        percent,
-        setProps
-    } = props;
+const AntdSpin = ({
+    id,
+    className,
+    wrapperClassName,
+    style,
+    key,
+    children,
+    spinning = false,
+    size = 'middle',
+    delay,
+    fullscreen = false,
+    text,
+    listenPropsMode = 'default',
+    excludeProps = [],
+    includeProps = [],
+    debug = false,
+    indicator,
+    manual = false,
+    percent,
+    setProps,
+    ...others
+}) => {
+
+    const ctx = window.dash_component_api.useDashContext();
+    // 获取内部加载中组件信息
+    const loading_info = ctx.useSelector(loadingSelector(ctx.componentPath), equals);
 
     useEffect(() => {
         // 检查数值型percent参数是否取值在合法的0到100之间
@@ -49,42 +53,42 @@ const AntdSpin = (props) => {
 
     useEffect(() => {
         // 非手动控制模式下
-        if (!manual && loading_state) {
+        if (!manual && loading_info) {
             if (timer.current) {
                 clearTimeout(timer.current);
             }
-            if (loading_state.is_loading && !showSpinning) {
-                // 当listenPropsMode为'default'时-
+            if (loading_info.length > 0 && !showSpinning) {
+                // 当listenPropsMode为'default'时
                 if (listenPropsMode === 'default') {
                     if (debug) {
-                        console.log(loading_state.component_name + '.' + loading_state.prop_name.split('@')[0])
+                        loading_info.forEach(item => console.log(item.id + '.' + item.property))
                     }
                     setShowSpinning(true);
                 } else if (listenPropsMode === 'exclude') {
                     // 当listenPropsMode为'exclude'模式时
-                    // 当前触发loading_state的组件+属性组合不在排除列表中时，激活动画
-                    if (excludeProps.indexOf(loading_state.component_name + '.' + loading_state.prop_name.split('@')[0]) === -1) {
+                    // 当前触发加载状态的组件+属性组合均不在排除列表中时，激活动画
+                    if (loading_info.every(item => excludeProps.indexOf(item.id + '.' + item.property) === -1)) {
                         if (debug) {
-                            console.log(loading_state.component_name + '.' + loading_state.prop_name.split('@')[0])
+                            loading_info.forEach(item => console.log(item.id + '.' + item.property))
                         }
                         setShowSpinning(true);
                     }
                 } else if (listenPropsMode === 'include') {
                     // 当listenPropsMode为'include'模式时
-                    // 当前触发loading_state的组件+属性组合在包含列表中时，激活动画
-                    if (includeProps.indexOf(loading_state.component_name + '.' + loading_state.prop_name.split('@')[0]) !== -1) {
+                    // 当前触发加载状态的组件+属性组合至少有一个在包含列表中时，激活动画
+                    if (loading_info.some(item => includeProps.indexOf(item.id + '.' + item.property) !== -1)) {
                         if (debug) {
-                            console.log(loading_state.component_name + '.' + loading_state.prop_name.split('@')[0])
+                            loading_info.forEach(item => console.log(item.id + '.' + item.property))
                         }
                         setShowSpinning(true);
                     }
                 }
 
-            } else if (!loading_state.is_loading && showSpinning) {
+            } else if (loading_info.length === 0 && showSpinning) {
                 timer.current = setTimeout(() => setShowSpinning(false));
             }
         }
-    }, [loading_state]);
+    }, [loading_info]);
 
     // 修复设置全屏后子元素无法渲染的问题
     if (fullscreen) {
@@ -92,7 +96,7 @@ const AntdSpin = (props) => {
             <>
                 <Spin
                     // 提取具有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) ?
@@ -113,9 +117,7 @@ const AntdSpin = (props) => {
                     tip={text}
                     indicator={indicator}
                     percent={percent}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    } />
+                    data-dash-is-loading={useLoading()} />
                 {children}
             </>
         );
@@ -124,7 +126,7 @@ const AntdSpin = (props) => {
     return (
         <Spin
             // 提取具有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) ?
@@ -145,14 +147,10 @@ const AntdSpin = (props) => {
             tip={text}
             indicator={indicator}
             percent={percent}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } > {children} </Spin>
+            data-dash-is-loading={useLoading()} > {children} </Spin>
     );
 }
 
-AntdSpin._dashprivate_isLoadingComponent = true;
-
 AntdSpin.propTypes = {
     /**
      * 组件唯一id
@@ -266,21 +264,6 @@ AntdSpin.propTypes = {
      */
     'aria-*': PropTypes.string,
 
-    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
-    }),
-
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -288,16 +271,4 @@ AntdSpin.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdSpin.defaultProps = {
-    size: 'middle',
-    spinning: false,
-    fullscreen: false,
-    listenPropsMode: 'default',
-    excludeProps: [],
-    includeProps: [],
-    debug: false,
-    manual: false
-}
-
 export default AntdSpin;