feffery_antd_components 0.1.16 → 0.2.0-rc0

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

@@ -1,191 +1,213 @@
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'antd';
 import md5 from 'md5';
+import { useRequest } from 'ahooks';
 import 'antd/dist/antd.css';
 
 const { Search, TextArea } = Input;
 
 // 定义输入框组件AntdInput，api参数参考https://ant.design/components/input-cn/
-export default class AntdInput extends Component {
-
-    constructor(props) {
-        super(props)
+const AntdInput = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        mode,
+        passwordUseMd5,
+        autoComplete,
+        placeholder,
+        value,
+        size,
+        addonBefore,
+        addonAfter,
+        prefix,
+        suffix,
+        allowClear,
+        bordered,
+        defaultValue,
+        disabled,
+        maxLength,
+        showCount,
+        nClicksSearch,
+        nSubmit,
+        status,
+        autoSize,
+        debounceWait,
+        setProps,
+        loading_state,
+        persistence,
+        persisted_props,
+        persistence_type
+    } = props;
+
+    useEffect(() => {
         // 初始化value
-        if (props.defaultValue) {
+        if (defaultValue) {
             // 当defaultValue不为空时，为value初始化defaultValue对应的value值
-            props.setProps({
-                value: props.defaultValue,
-                md5Value: md5(props.defaultValue)
+            setProps({
+                value: defaultValue,
+                md5Value: md5(defaultValue)
             })
         }
-    }
-
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            className,
-            style,
-            key,
-            mode,
-            passwordUseMd5,
-            autoComplete,
-            placeholder,
-            value,
-            size,
-            addonBefore,
-            addonAfter,
-            allowClear,
-            bordered,
-            defaultValue,
-            disabled,
-            maxLength,
-            showCount,
-            nClicksSearch,
-            nSubmit,
-            status,
-            autoSize,
-            setProps,
-            loading_state,
-            persistence,
-            persisted_props,
-            persistence_type
-        } = this.props;
-
-        // 监听输入内容变化事件
-        const onChange = e => {
+    }, [])
+
+    // 监听输入内容变化事件
+    const onChange = e => {
+        // 若启用md5加密且为密码模式
+        if (passwordUseMd5 && mode === 'password') {
+            setProps({
+                md5Value: md5(e.target.value),
+                value: e.target.value
+            })
+        } else {
             setProps({ value: e.target.value })
         }
+    }
 
-        // 监听聚焦到输入框时enter键点按次数
-        const onPressEnter = e => {
-            setProps({ nSubmit: nSubmit + 1 })
+    const { run: onDebounceChange } = useRequest(
+        (e) => {
+            setProps({ debounceValue: e })
+        },
+        {
+            debounceWait: debounceWait,
+            manual: true
         }
+    )
 
-        // 监听搜索按钮点按事件
-        const onSearch = e => {
-            setProps({ nClicksSearch: nClicksSearch + 1 })
-        }
+    // 监听聚焦到输入框时enter键点按次数
+    const onPressEnter = e => {
+        setProps({ nSubmit: nSubmit + 1 })
+    }
 
-        // 不同的mode模式下渲染不同的组件
-        if (mode === 'default') {
-            return (
-                <Input id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    placeholder={placeholder}
-                    autoComplete={autoComplete}
-                    value={value}
-                    size={size}
-                    addonBefore={addonBefore}
-                    addonAfter={addonAfter}
-                    allowClear={allowClear}
-                    bordered={bordered}
-                    defaultValue={defaultValue}
-                    disabled={disabled}
-                    maxLength={maxLength}
-                    status={status}
-                    onChange={onChange}
-                    onPressEnter={onPressEnter}
-                    persistence={persistence}
-                    persisted_props={persisted_props}
-                    persistence_type={persistence_type}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    } />
-            );
-        } else if (mode === 'search') {
-            return (
-                <Search id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    placeholder={placeholder}
-                    autoComplete={autoComplete}
-                    size={size}
-                    allowClear={allowClear}
-                    bordered={bordered}
-                    value={value}
-                    defaultValue={defaultValue}
-                    disabled={disabled}
-                    maxLength={maxLength}
-                    status={status}
-                    onSearch={onSearch}
-                    onChange={onChange}
-                    onPressEnter={onPressEnter}
-                    persistence={persistence}
-                    persisted_props={persisted_props}
-                    persistence_type={persistence_type}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    } />
-            );
-        } else if (mode === 'text-area') {
-            return (
-                <TextArea id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    placeholder={placeholder}
-                    autoComplete={autoComplete}
-                    size={size}
-                    allowClear={allowClear}
-                    bordered={bordered}
-                    value={value}
-                    defaultValue={defaultValue}
-                    disabled={disabled}
-                    maxLength={maxLength}
-                    showCount={showCount}
-                    status={status}
-                    autoSize={autoSize}
-                    onChange={onChange}
-                    onPressEnter={onPressEnter}
-                    persistence={persistence}
-                    persisted_props={persisted_props}
-                    persistence_type={persistence_type}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    } />
-            );
-        } else if (mode === 'password') {
-            return (
-                <Input.Password id={id}
-                    className={className}
-                    style={style}
-                    key={key}
-                    placeholder={placeholder}
-                    autoComplete={autoComplete}
-                    size={size}
-                    bordered={bordered}
-                    disabled={disabled}
-                    value={value}
-                    defaultValue={defaultValue}
-                    maxLength={maxLength}
-                    status={status}
-                    onChange={(e) => {
-                        // 若启用md5加密
-                        if (passwordUseMd5) {
-                            setProps({
-                                md5Value: md5(e.target.value),
-                                value: e.target.value
-                            })
-                        } else {
-                            setProps({
-                                value: e.target.value
-                            })
-                        }
-                    }}
-                    onPressEnter={onPressEnter}
-                    persistence={persistence}
-                    persisted_props={persisted_props}
-                    persistence_type={persistence_type}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    } />
-            );
-        }
+    // 监听搜索按钮点按事件
+    const onSearch = e => {
+        setProps({ nClicksSearch: nClicksSearch + 1 })
+    }
+
+    // 不同的mode模式下渲染不同的组件
+    if (mode === 'default') {
+        return (
+            <Input id={id}
+                className={className}
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                value={value}
+                size={size}
+                addonBefore={addonBefore}
+                addonAfter={addonAfter}
+                prefix={prefix}
+                suffix={suffix}
+                allowClear={allowClear}
+                bordered={bordered}
+                defaultValue={defaultValue}
+                disabled={disabled}
+                maxLength={maxLength}
+                status={status}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    } else if (mode === 'search') {
+        return (
+            <Search id={id}
+                className={className}
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                size={size}
+                allowClear={allowClear}
+                bordered={bordered}
+                value={value}
+                defaultValue={defaultValue}
+                disabled={disabled}
+                maxLength={maxLength}
+                status={status}
+                onSearch={onSearch}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    } else if (mode === 'text-area') {
+        return (
+            <TextArea id={id}
+                className={className}
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                size={size}
+                allowClear={allowClear}
+                bordered={bordered}
+                value={value}
+                defaultValue={defaultValue}
+                disabled={disabled}
+                maxLength={maxLength}
+                showCount={showCount}
+                status={status}
+                autoSize={autoSize}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    } else if (mode === 'password') {
+        return (
+            <Input.Password id={id}
+                className={className}
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                size={size}
+                bordered={bordered}
+                disabled={disabled}
+                value={value}
+                defaultValue={defaultValue}
+                maxLength={maxLength}
+                status={status}
+                prefix={prefix}
+                suffix={suffix}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
     }
 }
 
@@ -231,10 +253,16 @@ AntdInput.propTypes = {
     size: PropTypes.oneOf(['small', 'middle', 'large']),
 
     // 设置前置标签内容
-    addonBefore: PropTypes.string,
+    addonBefore: PropTypes.node,
 
     // 设置后置标签内容
-    addonAfter: PropTypes.string,
+    addonAfter: PropTypes.node,
+
+    // 设置框内嵌前缀内容
+    prefix: PropTypes.node,
+
+    // 设置框内嵌后缀内容
+    suffix: PropTypes.node,
 
     // 设置是否添加内容清除按钮，默认false
     allowClear: PropTypes.bool,
@@ -257,6 +285,12 @@ AntdInput.propTypes = {
     // 当passwordUseMd5=true时，用于记录加密的value值
     md5Value: PropTypes.string,
 
+    // 记录防抖状态下的已输入文字内容
+    debounceValue: PropTypes.string,
+
+    // 用于配置debounceValue变化更新的防抖等待时长（单位：毫秒），默认为0
+    debounceWait: PropTypes.number,
+
     // 设置是否展示字数，默认为false
     showCount: PropTypes.bool,
 
@@ -306,7 +340,7 @@ AntdInput.propTypes = {
      * component or the page. Since only `value` is allowed this prop can
      * normally be ignored.
      */
-    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value', 'md5Value'])),
 
     /**
      * Where persisted user changes will be stored:
@@ -324,5 +358,8 @@ AntdInput.defaultProps = {
     nClicksSearch: 0,
     nSubmit: 0,
     persisted_props: ['value'],
-    persistence_type: 'local'
-}
+    persistence_type: 'local',
+    debounceWait: 300
+}
+
+export default AntdInput;

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

@@ -25,6 +25,8 @@ export default class AntdInputNumber extends Component {
             size,
             addonBefore,
             addonAfter,
+            prefix,
+            suffix,
             bordered,
             controls,
             value,
@@ -69,6 +71,8 @@ export default class AntdInputNumber extends Component {
                 size={size}
                 addonBefore={addonBefore}
                 addonAfter={addonAfter}
+                prefix={prefix}
+                suffix={suffix}
                 placeholder={placeholder}
                 bordered={bordered}
                 controls={controls}
@@ -113,10 +117,16 @@ AntdInputNumber.propTypes = {
     size: PropTypes.oneOf(['small', 'middle', 'large']),
 
     // 设置前置标签内容
-    addonBefore: PropTypes.string,
+    addonBefore: PropTypes.node,
 
     // 设置后置标签内容
-    addonAfter: PropTypes.string,
+    addonAfter: PropTypes.node,
+
+    // 设置框内嵌前缀内容
+    prefix: PropTypes.node,
+
+    // 设置框内嵌后缀内容
+    suffix: PropTypes.node,
 
     // 设置是否有边框，默认为true
     bordered: PropTypes.bool,

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

@@ -31,6 +31,9 @@ export default class AntdModal extends Component {
             mask,
             maskClosable,
             okClickClose,
+            zIndex,
+            maskStyle,
+            bodyStyle,
             okCounts,
             cancelCounts,
             closeCounts,
@@ -79,6 +82,9 @@ export default class AntdModal extends Component {
                         closable={closable}
                         mask={mask}
                         maskClosable={maskClosable}
+                        zIndex={zIndex}
+                        maskStyle={maskStyle}
+                        bodyStyle={bodyStyle}
                         onOk={listenOk}
                         onCancel={listenCancel}
                         afterClose={listenClose}
@@ -111,6 +117,9 @@ export default class AntdModal extends Component {
                         closable={closable}
                         mask={mask}
                         maskClosable={maskClosable}
+                        zIndex={zIndex}
+                        maskStyle={maskStyle}
+                        bodyStyle={bodyStyle}
                         onOk={listenOk}
                         onCancel={listenCancel}
                         destroyOnClose={true}
@@ -167,7 +176,10 @@ AntdModal.propTypes = {
     renderFooter: PropTypes.bool,
 
     // 自定义对话框的像素宽度
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
 
     // 设置是否垂直居中显示对话框
     centered: PropTypes.bool,
@@ -187,6 +199,15 @@ AntdModal.propTypes = {
     // 设置点击确认按钮是否会触发对话框关闭，默认为true
     okClickClose: PropTypes.bool,
 
+    // 设置模态框的zIndex，默认为1000
+    zIndex: PropTypes.number,
+
+    // 自定义mask遮罩css样式
+    maskStyle: PropTypes.object,
+
+    // 自定义模态框主体区域css样式
+    bodyStyle: PropTypes.object,
+
     // 记录确认按钮被点击的次数
     okCounts: PropTypes.number,
 

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

@@ -2,6 +2,8 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Card, Button, ConfigProvider, Image as Image_ } from 'antd';
 import zhCN from 'antd/lib/locale/zh_CN';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import { Gluejar } from '@charliewilco/gluejar'
 import { DeleteOutlined } from '@ant-design/icons';
 import './styles.css'
@@ -73,7 +75,11 @@ const AntdPasteImage = (props) => {
 
     return (
         <div id={id}
-            className={className}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
             style={style}
             key={key}
             data-dash-is-loading={
@@ -125,7 +131,10 @@ AntdPasteImage.propTypes = {
     id: PropTypes.string,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,