feffery_antd_components 0.1.16 → 0.2.0-rc1

package/src/lib/components/AntdAvatar.react.js

@@ -1,84 +1,95 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Avatar } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import AntdIcon from './AntdIcon.react';
 import 'antd/dist/antd.css';
 
 // 定义头像组件AntdAvatar，api参数参考https://ant.design/components/avatar-cn/
-export default class AntdAvatar extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            className,
-            style,
-            key,
-            mode,
-            text,
-            src,
-            srcSet,
-            icon,
-            alt,
-            gap,
-            size,
-            shape,
-            loading_state,
-            setProps
-        } = this.props;
-
-        // image图片模式
-        if (mode === 'image') {
-            return (
-                <Avatar
-                    id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    src={src}
-                    srcSet={srcSet}
-                    alt={alt}
-                    size={size}
-                    shape={shape}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }
-                />
-            );
-        } else if (mode === 'text') {
-
-            // text文字模式
-            return (
-                <Avatar
-                    id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    gap={gap}
-                    size={size}
-                    shape={shape}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }
-                >{text}</Avatar>
-            );
-        } else {
-            // icon图标模式
-            return (
-                <Avatar
-                    id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    icon={icon ? <AntdIcon icon={icon} /> : <AntdIcon icon={'antd-user'} />}
-                    size={size}
-                    shape={shape}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }
-                />
-            );
-        }
-
+const AntdAvatar = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        mode,
+        text,
+        src,
+        srcSet,
+        icon,
+        alt,
+        gap,
+        size,
+        shape,
+        loading_state,
+        setProps
+    } = props;
+
+    // image图片模式
+    if (mode === 'image') {
+        return (
+            <Avatar
+                id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        useCss(className)
+                }
+                style={style}
+                key={key}
+                src={src}
+                srcSet={srcSet}
+                alt={alt}
+                size={size}
+                shape={shape}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            />
+        );
+    } else if (mode === 'text') {
+
+        // text文字模式
+        return (
+            <Avatar
+                id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        useCss(className)
+                }
+                style={style}
+                key={key}
+                gap={gap}
+                size={size}
+                shape={shape}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            >{text}</Avatar>
+        );
+    } else {
+        // icon图标模式
+        return (
+            <Avatar
+                id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        useCss(className)
+                }
+                style={style}
+                key={key}
+                icon={icon ? <AntdIcon icon={icon} /> : <AntdIcon icon={'antd-user'} />}
+                size={size}
+                shape={shape}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            />
+        );
     }
 }
 
@@ -88,7 +99,10 @@ AntdAvatar.propTypes = {
     id: PropTypes.string,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -164,4 +178,6 @@ AntdAvatar.propTypes = {
 // 设置默认参数
 AntdAvatar.defaultProps = {
     mode: 'icon'
-}
+}
+
+export default AntdAvatar;

package/src/lib/components/AntdBackTop.react.js

@@ -1,37 +1,41 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import { BackTop } from 'antd';
 import 'antd/dist/antd.css';
 
 // 定义回到顶部组件AntdBackTop，api参数参考https://ant.design/components/back-top-cn/
-export default class AntdBackTop extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            className,
-            style,
-            key,
-            duration,
-            visibilityHeight,
-            containerId,
-            setProps,
-            loading_state
-        } = this.props;
+const AntdBackTop = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        duration,
+        visibilityHeight,
+        containerId,
+        setProps,
+        loading_state
+    } = props;
 
-        return (
-            <BackTop id={id}
-                className={className}
-                style={style}
-                key={key}
-                target={containerId ? () => document.getElementById(containerId) : () => window}
-                duration={duration * 1000}
-                visibilityHeight={visibilityHeight}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                } />
-        );
-    }
+    return (
+        <BackTop id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            target={containerId ? () => document.getElementById(containerId) : () => window}
+            duration={duration * 1000}
+            visibilityHeight={visibilityHeight}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
 }
 
 // 定义参数或属性
@@ -40,7 +44,10 @@ AntdBackTop.propTypes = {
     id: PropTypes.string,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -82,3 +89,5 @@ AntdBackTop.propTypes = {
 // 设置默认参数
 AntdBackTop.defaultProps = {
 }
+
+export default AntdBackTop;

package/src/lib/components/AntdButton.react.js

@@ -1,60 +1,76 @@
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
+import { useRequest } from 'ahooks';
 
 // 定义分割线组件AntdButton，api参数参考https://ant.design/components/button-cn/
-export default class AntdButton extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            setProps,
-            type,
-            href,
-            target,
-            block,
-            danger,
-            disabled,
-            shape,
-            size,
-            nClicks,
-            loading,
-            loading_state
-        } = this.props;
-
-        // 返回定制化的前端组件
-        return (
-            <Button
-                id={id}
-                className={className}
-                style={style}
-                key={key}
-                type={type}
-                href={href}
-                target={target}
-                block={block}
-                danger={danger}
-                disabled={disabled}
-                shape={shape}
-                size={size}
-                onClick={(e) => {
-                    nClicks++;
-                    // 更新nClicks
-                    setProps({ nClicks: nClicks })
-                }}
-                loading={loading}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-            >{children}
-            </Button>
-        );
-    }
+const AntdButton = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        setProps,
+        type,
+        href,
+        target,
+        block,
+        danger,
+        disabled,
+        shape,
+        size,
+        nClicks,
+        debounceWait,
+        icon,
+        loading,
+        loading_state
+    } = props;
+
+    const { run: onClick } = useRequest(
+        () => {
+            nClicks++;
+            // 更新nClicks
+            setProps({ nClicks: nClicks })
+        },
+        {
+            debounceWait: debounceWait,
+            debounceLeading: true,
+            manual: true
+        }
+    )
+
+    // 返回定制化的前端组件
+    return (
+        <Button
+            id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            type={type}
+            href={href}
+            target={target}
+            block={block}
+            danger={danger}
+            disabled={disabled}
+            shape={shape}
+            size={size}
+            icon={icon}
+            onClick={onClick}
+            loading={loading}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        >{children}
+        </Button>
+    );
 }
 
 // 定义参数或属性
@@ -66,7 +82,10 @@ AntdButton.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -101,6 +120,12 @@ AntdButton.propTypes = {
     // 记录按钮从渲染后开始被点击的次数，默认为0
     nClicks: PropTypes.number,
 
+    // 用于配置value变化更新的防抖等待时长（单位：毫秒），默认为0
+    debounceWait: PropTypes.number,
+
+    // 组件型参数，设置按钮前缀图标元素
+    icon: PropTypes.node,
+
     // 用于设置是否为按钮渲染“加载中不可点击”效果，默认为false
     loading: PropTypes.bool,
 
@@ -132,5 +157,8 @@ AntdButton.defaultProps = {
     block: false,
     danger: false,
     disabled: false,
-    nClicks: 0
+    nClicks: 0,
+    debounceWait: 0
 }
+
+export default AntdButton;

package/src/lib/components/AntdCarousel.react.js

@@ -1,42 +1,46 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Carousel } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
 
 // 定义走马灯组件AntdCarousel，api参数参考https://ant.design/components/carousel-cn/
-export default class AntdCarousel extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            autoplay,
-            dotPosition,
-            easing,
-            effect,
-            loading_state,
-            setProps
-        } = this.props;
+const AntdCarousel = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        autoplay,
+        dotPosition,
+        easing,
+        effect,
+        loading_state,
+        setProps
+    } = props;
 
-        return (
-            <Carousel
-                id={id}
-                className={className}
-                style={style}
-                key={key}
-                autoplay={autoplay}
-                dotPosition={dotPosition}
-                easing={easing}
-                effect={effect}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-            >{children}</Carousel>
-        );
-    }
+    return (
+        <Carousel
+            id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            autoplay={autoplay}
+            dotPosition={dotPosition}
+            easing={easing}
+            effect={effect}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        >{children}</Carousel>
+    );
 }
 
 // 定义参数或属性
@@ -48,7 +52,10 @@ AntdCarousel.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -92,4 +99,6 @@ AntdCarousel.propTypes = {
 
 // 设置默认参数
 AntdCarousel.defaultProps = {
-}
+}
+
+export default AntdCarousel;