feffery_antd_components 0.3.15 → 0.4.0-rc5

package/src/lib/components/dataDisplay/AntdTooltip.react.js

@@ -6,10 +6,56 @@ const LazyAntdTooltip = React.lazy(() => import(/* webpackChunkName: "data_displ
 /**
  * 文字提示组件AntdTooltip
  */
-const AntdTooltip = (props) => {
+const AntdTooltip = ({
+    id,
+    children,
+    className,
+    style,
+    styles,
+    classNames,
+    key,
+    title,
+    placement = 'top',
+    color,
+    mouseEnterDelay = 0.1,
+    mouseLeaveDelay = 0.1,
+    trigger = 'hover',
+    zIndex,
+    arrow = 'show',
+    fresh = false,
+    open = false,
+    permanent = false,
+    popupContainer = 'body',
+    setProps,
+    ...others
+}) => {
     return (
         <Suspense fallback={null}>
-            <LazyAntdTooltip {...props} />
+            <LazyAntdTooltip {
+                ...{
+                    id,
+                    children,
+                    className,
+                    style,
+                    styles,
+                    classNames,
+                    key,
+                    title,
+                    placement,
+                    color,
+                    mouseEnterDelay,
+                    mouseLeaveDelay,
+                    trigger,
+                    zIndex,
+                    arrow,
+                    fresh,
+                    open,
+                    permanent,
+                    popupContainer,
+                    setProps,
+                    ...others
+                }
+            } />
         </Suspense>
     );
 }
@@ -43,6 +89,34 @@ AntdTooltip.propTypes = {
         PropTypes.object
     ]),
 
+    /**
+     * 细分控制子元素css样式
+     */
+    styles: PropTypes.exact({
+        /**
+         * 根元素（包含箭头、内容元素）css样式
+         */
+        root: PropTypes.object,
+        /**
+         * 内容元素css样式
+         */
+        body: PropTypes.object
+    }),
+
+    /**
+     * 细分控制子元素css类名
+     */
+    classNames: PropTypes.exact({
+        /**
+         * 根元素（包含箭头、内容元素）css类名
+         */
+        root: PropTypes.string,
+        /**
+         * 内容元素css类名
+         */
+        body: PropTypes.string
+    }),
+
     /**
      * 组件型，文字提示内容
      */
@@ -73,24 +147,6 @@ AntdTooltip.propTypes = {
      */
     mouseLeaveDelay: PropTypes.number,
 
-    /**
-     * 文字提示卡片css类名，支持[动态css](/advanced-classname)
-     */
-    overlayClassName: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-
-    /**
-     * 文字提示卡片css样式
-     */
-    overlayStyle: PropTypes.object,
-
-    /**
-     * 内容区css样式
-     */
-    overlayInnerStyle: PropTypes.object,
-
     /**
      * 触发方式，可选项有`'hover'`、`'focus'`、`'click'`，可多选
      * 默认值：`'hover'`
@@ -169,19 +225,6 @@ AntdTooltip.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdTooltip.defaultProps = {
-    mouseEnterDelay: 0.1,
-    mouseLeaveDelay: 0.1,
-    placement: 'top',
-    trigger: 'hover',
-    popupContainer: 'body',
-    arrow: 'show',
-    fresh: false,
-    open: false,
-    permanent: false
-}
-
 export default AntdTooltip;
 
 export const propTypes = AntdTooltip.propTypes;

package/src/lib/components/dataDisplay/AntdTree.react.js

@@ -6,10 +6,109 @@ const LazyAntdTree = React.lazy(() => import(/* webpackChunkName: "data_entry" *
 /**
  * 树形控件组件AntdTree
  */
-const AntdTree = (props) => {
+const AntdTree = ({
+    id,
+    className,
+    setProps,
+    style,
+    key,
+    treeData,
+    treeNodeKeyToTitle,
+    treeDataMode = 'tree',
+    checkable = false,
+    selectable = true,
+    selectedKeys,
+    expandedKeys,
+    checkedKeys,
+    defaultExpandAll = false,
+    defaultExpandedKeys,
+    defaultExpandParent = false,
+    checkStrictly = false,
+    defaultCheckedKeys,
+    defaultSelectedKeys,
+    multiple = false,
+    showLine = { 'showLeafIcon': false },
+    switcherIcon,
+    showIcon = false,
+    height,
+    draggable = false,
+    showDragIcon = true,
+    dragInSameLevel = false,
+    dragDisabledKeys = [],
+    dropDisabledKeys = [],
+    enableNodeFavorites = false,
+    favoritedKeys = [],
+    scrollTarget,
+    searchKeyword,
+    caseSensitive = true,
+    highlightStyle = {
+        fontWeight: 'bold',
+        backgroundColor: 'transparent',
+        padding: 0,
+        color: '#ff5500'
+    },
+    nodeCheckedSuffix,
+    nodeUncheckedSuffix,
+    nodeCheckedStyle,
+    nodeUncheckedStyle,
+    enableAsyncLoad = false,
+    persistence,
+    persisted_props,
+    persistence_type,
+    batchPropsNames = [],
+    ...others
+}) => {
     return (
         <Suspense fallback={null}>
-            <LazyAntdTree {...props} />
+            <LazyAntdTree {
+                ...{
+                    id,
+                    className,
+                    setProps,
+                    style,
+                    key,
+                    treeData,
+                    treeNodeKeyToTitle,
+                    treeDataMode,
+                    checkable,
+                    selectable,
+                    selectedKeys,
+                    expandedKeys,
+                    checkedKeys,
+                    defaultExpandAll,
+                    defaultExpandedKeys,
+                    defaultExpandParent,
+                    checkStrictly,
+                    defaultCheckedKeys,
+                    defaultSelectedKeys,
+                    multiple,
+                    showLine,
+                    switcherIcon,
+                    showIcon,
+                    height,
+                    draggable,
+                    showDragIcon,
+                    dragInSameLevel,
+                    dragDisabledKeys,
+                    dropDisabledKeys,
+                    enableNodeFavorites,
+                    favoritedKeys,
+                    scrollTarget,
+                    searchKeyword,
+                    caseSensitive,
+                    highlightStyle,
+                    nodeCheckedSuffix,
+                    nodeUncheckedSuffix,
+                    nodeCheckedStyle,
+                    nodeUncheckedStyle,
+                    enableAsyncLoad,
+                    persistence,
+                    persisted_props,
+                    persistence_type,
+                    batchPropsNames,
+                    ...others
+                }
+            } />
         </Suspense>
     );
 }
@@ -504,21 +603,6 @@ AntdTree.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.
@@ -547,35 +631,9 @@ AntdTree.propTypes = {
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-// 设置默认参数
-AntdTree.defaultProps = {
-    showIcon: false,
-    treeDataMode: 'tree',
-    checkable: false,
-    defaultExpandAll: false,
-    defaultExpandParent: false,
-    checkStrictly: false,
-    multiple: false,
-    selectable: true,
-    showLine: { 'showLeafIcon': false },
-    draggable: false,
-    showDragIcon: true,
-    dragInSameLevel: false,
-    dragDisabledKeys: [],
-    dropDisabledKeys: [],
-    caseSensitive: true,
-    highlightStyle: {
-        fontWeight: 'bold',
-        backgroundColor: 'transparent',
-        padding: 0,
-        color: '#ff5500'
-    },
-    enableNodeFavorites: false,
-    favoritedKeys: [],
-    enableAsyncLoad: false,
+AntdTree.dashPersistence = {
     persisted_props: ['selectedKeys', 'checkedKeys', 'expandedKeys', 'halfCheckedKeys'],
-    persistence_type: 'local',
-    batchPropsNames: []
+    persistence_type: 'local'
 }
 
 export default AntdTree;

package/src/lib/components/dataDisplay/card/AntdCard.react.js

@@ -3,10 +3,50 @@ import PropTypes from 'prop-types';
 
 const LazyAntdCard = React.lazy(() => import(/* webpackChunkName: "data_display" */ '../../../fragments/dataDisplay/card/AntdCard.react'));
 
-const AntdCard = (props) => {
+const AntdCard = ({
+    id,
+    children,
+    className,
+    style,
+    styles,
+    classNames,
+    key,
+    actions,
+    extraLink,
+    extra,
+    coverImg,
+    variant = 'outlined',
+    hoverable = false,
+    size = 'default',
+    title,
+    nClicks = 0,
+    setProps,
+    ...others
+}) => {
     return (
         <Suspense fallback={null}>
-            <LazyAntdCard {...props} />
+            <LazyAntdCard {
+                ...{
+                    id,
+                    children,
+                    className,
+                    style,
+                    styles,
+                    classNames,
+                    key,
+                    actions,
+                    extraLink,
+                    extra,
+                    coverImg,
+                    variant,
+                    hoverable,
+                    size,
+                    title,
+                    nClicks,
+                    setProps,
+                    ...others
+                }
+            } />
         </Suspense>
     );
 }
@@ -40,6 +80,66 @@ AntdCard.propTypes = {
         PropTypes.object
     ]),
 
+    /**
+     * 细分控制子元素css样式
+     */
+    styles: PropTypes.exact({
+        /**
+         * 设置卡片头部区域css样式
+         */
+        header: PropTypes.object,
+        /**
+         * 设置卡片标题css样式
+         */
+        title: PropTypes.object,
+        /**
+         * 设置卡片右上角的操作区域css样式
+         */
+        extra: PropTypes.object,
+        /**
+         * 设置标题封面css样式
+         */
+        cover: PropTypes.object,
+        /**
+         * 设置卡片内容区域css样式
+         */
+        body: PropTypes.object,
+        /**
+         * 设置卡片底部操作组css样式
+         */
+        actions: PropTypes.object
+    }),
+
+    /**
+     * 细分控制子元素css类名
+     */
+    classNames: PropTypes.exact({
+        /**
+         * 设置卡片头部区域css类名
+         */
+        header: PropTypes.string,
+        /**
+         * 设置卡片标题css类名
+         */
+        title: PropTypes.string,
+        /**
+         * 设置卡片右上角的操作区域css类名
+         */
+        extra: PropTypes.string,
+        /**
+         * 设置标题封面css类名
+         */
+        cover: PropTypes.string,
+        /**
+         * 设置卡片内容区域css类名
+         */
+        body: PropTypes.string,
+        /**
+         * 设置卡片底部操作组css类名
+         */
+        actions: PropTypes.string
+    }),
+
     /**
      * 组件型，底部操作区元素
      */
@@ -104,20 +204,10 @@ AntdCard.propTypes = {
     }),
 
     /**
-     * 内容区css样式
-     */
-    bodyStyle: PropTypes.object,
-
-    /**
-     * 标题css样式
-     */
-    headStyle: PropTypes.object,
-
-    /**
-     * 是否渲染边框
-     * 默认值：`true`
+     * 卡片形态变体，可选项有`'outlined'`、`'borderless'`
+     * 默认值：`'outlined'`
      */
-    bordered: PropTypes.bool,
+    variant: PropTypes.oneOf(['outlined', 'borderless']),
 
     /**
      * 是否在鼠标悬停时显示特殊样式
@@ -147,21 +237,6 @@ AntdCard.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.
@@ -169,14 +244,6 @@ AntdCard.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdCard.defaultProps = {
-    bordered: true,
-    hoverable: false,
-    size: 'default',
-    nClicks: 0
-}
-
 export default AntdCard;
 
 export const propTypes = AntdCard.propTypes;

package/src/lib/components/dataDisplay/card/AntdCardGrid.react.js

@@ -6,10 +6,32 @@ const LazyAntdCardGrid = React.lazy(() => import(/* webpackChunkName: "data_disp
 /**
  * 卡片网格组件AntdCardGrid
  */
-const AntdCardGrid = (props) => {
+const AntdCardGrid = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    hoverable = true,
+    nClicks = 0,
+    setProps,
+    ...others
+}) => {
     return (
         <Suspense fallback={null}>
-            <LazyAntdCardGrid {...props} />
+            <LazyAntdCardGrid {
+                ...{
+                    id,
+                    children,
+                    className,
+                    style,
+                    key,
+                    hoverable,
+                    nClicks,
+                    setProps,
+                    ...others
+                }
+            } />
         </Suspense>
     );
 }
@@ -65,21 +87,6 @@ AntdCardGrid.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.
@@ -87,12 +94,6 @@ AntdCardGrid.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdCardGrid.defaultProps = {
-    hoverable: true,
-    nClicks: 0
-}
-
 export default AntdCardGrid;
 
 export const propTypes = AntdCardGrid.propTypes;

package/src/lib/components/dataDisplay/card/AntdCardMeta.react.js

@@ -6,10 +6,32 @@ const LazyAntdCardMeta = React.lazy(() => import(/* webpackChunkName: "data_disp
 /**
  * 结构化卡片组件AntdCardMeta
  */
-const AntdCardMeta = (props) => {
+const AntdCardMeta = ({
+    id,
+    className,
+    style,
+    key,
+    avatar,
+    description,
+    title,
+    setProps,
+    ...others
+}) => {
     return (
         <Suspense fallback={null}>
-            <LazyAntdCardMeta {...props} />
+            <LazyAntdCardMeta {
+                ...{
+                    id,
+                    className,
+                    style,
+                    key,
+                    avatar,
+                    description,
+                    title,
+                    setProps,
+                    ...others
+                }
+            } />
         </Suspense>
     );
 }
@@ -63,21 +85,6 @@ AntdCardMeta.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.
@@ -85,9 +92,6 @@ AntdCardMeta.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdCardMeta.defaultProps = {}
-
 export default AntdCardMeta;
 
 export const propTypes = AntdCardMeta.propTypes;