feffery_antd_components 0.3.15 → 0.4.0-rc5

package/src/lib/components/layout/AntdDivider.react.js

@@ -5,39 +5,38 @@ import { Divider } from "antd";
 // 辅助库
 import { isString } from "lodash";
 import { pickBy } from 'ramda';
+import { useLoading } from "../utils";
 // 自定义hooks
 import useCss from "../../hooks/useCss";
 
 /**
  * 分割线组件AntdDivider
  */
-const AntdDivider = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        direction,
-        innerTextOrientation,
-        isDashed,
-        lineColor,
-        fontSize,
-        fontStyle,
-        fontWeight,
-        fontFamily,
-        fontColor,
-        variant,
-        plain,
-        loading_state,
-    } = props;
+const AntdDivider = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    direction = 'horizontal',
+    innerTextOrientation = 'center',
+    isDashed = false,
+    lineColor,
+    fontSize,
+    fontStyle,
+    fontWeight,
+    fontFamily,
+    fontColor,
+    variant = 'solid',
+    plain = true,
+    ...others
+}) => {
 
     if (direction === "horizontal") {
-
         return (
             <Divider
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 style={{
                     ...style,
@@ -61,19 +60,16 @@ const AntdDivider = (props) => {
                 orientation={innerTextOrientation}
                 type={"horizontal"}
                 plain={plain}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
+                data-dash-is-loading={useLoading()}
             >
                 {children}
             </Divider>
         );
     } else if (direction === "vertical") {
-
         return (
             <Divider
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
                 id={id}
                 style={{
                     ...style,
@@ -97,9 +93,7 @@ const AntdDivider = (props) => {
                 orientation={innerTextOrientation}
                 type={"vertical"}
                 plain={plain}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
+                data-dash-is-loading={useLoading()}
             >
                 {children}
             </Divider>
@@ -209,21 +203,6 @@ AntdDivider.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.
@@ -231,13 +210,4 @@ AntdDivider.propTypes = {
     setProps: PropTypes.func,
 };
 
-// 设置默认参数
-AntdDivider.defaultProps = {
-    innerTextOrientation: 'center',
-    isDashed: false,
-    direction: 'horizontal',
-    variant: 'solid',
-    plain: true
-};
-
 export default AntdDivider;

package/src/lib/components/layout/AntdFlex.react.js

@@ -4,36 +4,35 @@ import PropTypes from 'prop-types';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
-import { parseChildrenToArray } from '../utils';
+import { parseChildrenToArray, useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
 /**
  * 弹性布局组件AntdFlex
  */
-const AntdFlex = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        vertical,
-        wrap,
-        justify,
-        align,
-        flex,
-        gap,
-        setProps,
-        loading_state
-    } = props;
+const AntdFlex = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    vertical = false,
+    wrap = 'nowrap',
+    justify = 'normal',
+    align = 'normal',
+    flex = 'normal',
+    gap,
+    setProps,
+    ...others
+}) => {
 
     children = parseChildrenToArray(children)
 
     return (
         <Flex
             // 提取具有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) ?
@@ -48,9 +47,7 @@ const AntdFlex = (props) => {
             align={align}
             flex={flex}
             gap={gap}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
             {children}
         </Flex>
     );
@@ -137,21 +134,6 @@ AntdFlex.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.
@@ -159,13 +141,4 @@ AntdFlex.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdFlex.defaultProps = {
-    vertical: false,
-    wrap: 'nowrap',
-    justify: 'normal',
-    align: 'normal',
-    flex: 'normal'
-}
-
 export default AntdFlex;

package/src/lib/components/layout/AntdFooter.react.js

@@ -5,7 +5,7 @@ import { Layout } from 'antd';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
-import { parseChildrenToArray } from '../utils';
+import { parseChildrenToArray, useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
@@ -14,23 +14,22 @@ const { Footer } = Layout;
 /**
  * 页尾组件AntdFooter
  */
-const AntdFooter = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        setProps,
-        loading_state
-    } = props;
+const AntdFooter = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    setProps,
+    ...others
+}) => {
 
     children = parseChildrenToArray(children)
 
     return (
         <Footer
             // 提取具有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) ?
@@ -39,9 +38,7 @@ const AntdFooter = (props) => {
             }
             style={style}
             key={key}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
             {children}
         </Footer>
     );
@@ -86,21 +83,6 @@ AntdFooter.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.
@@ -108,8 +90,4 @@ AntdFooter.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdFooter.defaultProps = {
-}
-
 export default AntdFooter;

package/src/lib/components/layout/AntdHeader.react.js

@@ -5,7 +5,7 @@ import { Layout } from 'antd';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
-import { parseChildrenToArray } from '../utils';
+import { parseChildrenToArray, useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
@@ -14,23 +14,22 @@ const { Header } = Layout;
 /**
  * 页首组件AntdHeader
  */
-const AntdHeader = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        setProps,
-        loading_state
-    } = props;
+const AntdHeader = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    setProps,
+    ...others
+}) => {
 
     children = parseChildrenToArray(children)
 
     return (
         <Header
             // 提取具有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) ?
@@ -39,9 +38,7 @@ const AntdHeader = (props) => {
             }
             style={style}
             key={key}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
             {children}
         </Header>
     );
@@ -86,21 +83,6 @@ AntdHeader.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.
@@ -108,8 +90,4 @@ AntdHeader.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdHeader.defaultProps = {
-}
-
 export default AntdHeader;

package/src/lib/components/layout/AntdLayout.react.js

@@ -5,30 +5,29 @@ import { Layout } from 'antd';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
-import { parseChildrenToArray } from '../utils';
+import { parseChildrenToArray, useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
 /**
  * 布局容器组件AntdLayout
  */
-const AntdLayout = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        setProps,
-        loading_state
-    } = props;
+const AntdLayout = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    setProps,
+    ...others
+}) => {
 
     children = parseChildrenToArray(children)
 
     return (
         <Layout
             // 提取具有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) ?
@@ -37,9 +36,7 @@ const AntdLayout = (props) => {
             }
             style={style}
             key={key}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
             {children}
         </Layout>
     );
@@ -84,21 +81,6 @@ AntdLayout.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.
@@ -106,8 +88,4 @@ AntdLayout.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdLayout.defaultProps = {
-}
-
 export default AntdLayout;

package/src/lib/components/layout/AntdSider.react.js

@@ -5,7 +5,7 @@ import { Layout } from 'antd';
 // 辅助库
 import { isString } from 'lodash';
 import { pickBy } from 'ramda';
-import { parseChildrenToArray } from '../utils';
+import { parseChildrenToArray, useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 
@@ -14,24 +14,23 @@ const { Sider } = Layout;
 /**
  * 侧边栏组件AntdSider
  */
-const AntdSider = (props) => {
-    let {
-        id,
-        children,
-        className,
-        style,
-        key,
-        breakpoint,
-        collapsed,
-        collapsedWidth,
-        collapsible,
-        reverseArrow,
-        theme,
-        width,
-        trigger,
-        setProps,
-        loading_state
-    } = props;
+const AntdSider = ({
+    id,
+    children,
+    className,
+    style,
+    key,
+    breakpoint,
+    collapsed,
+    collapsedWidth = 80,
+    collapsible = false,
+    reverseArrow = false,
+    theme = 'dark',
+    width = 200,
+    trigger,
+    setProps,
+    ...others
+}) => {
 
     const onCollapse = collapsed => {
         setProps({ collapsed });
@@ -42,7 +41,7 @@ const AntdSider = (props) => {
     return (
         <Sider
             // 提取具有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) ?
@@ -60,9 +59,7 @@ const AntdSider = (props) => {
             trigger={trigger}
             breakpoint={breakpoint}
             onCollapse={onCollapse}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
+            data-dash-is-loading={useLoading()}>
             {children}
         </Sider>
     );
@@ -156,21 +153,6 @@ AntdSider.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.
@@ -178,13 +160,4 @@ AntdSider.propTypes = {
     setProps: PropTypes.func
 };
 
-// 设置默认参数
-AntdSider.defaultProps = {
-    collapsedWidth: 80,
-    collapsible: false,
-    reverseArrow: false,
-    theme: 'dark',
-    width: 200
-}
-
 export default AntdSider;