feffery_antd_components 0.1.16 → 0.2.0-rc0

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

@@ -1,6 +1,8 @@
 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/
@@ -24,7 +26,11 @@ export default class AntdCarousel extends Component {
         return (
             <Carousel
                 id={id}
-                className={className}
+                className={
+                    isString(className) ?
+                        className :
+                        useCss(className)
+                }
                 style={style}
                 key={key}
                 autoplay={autoplay}
@@ -48,7 +54,10 @@ AntdCarousel.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,

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

@@ -1,92 +1,107 @@
-import React, { Component } from 'react';
+import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Cascader, ConfigProvider } from 'antd';
 import { str2Locale } from './locales.react';
+import { flatToTree } from './utils';
 import 'antd/dist/antd.css';
 
-// 定义级联选择组件AntdCascader，api参数参考https://ant.design/components/cascader-cn/
-export default class AntdCascader extends Component {
+const { SHOW_CHILD, SHOW_PARENT } = Cascader;
 
-    constructor(props) {
-        super(props)
-        if (!props.value) {
-            props.setProps({ value: props.defaultValue })
-        }
-    }
+const str2ShowCheckedStrategy = new Map([
+    ['show-child', SHOW_CHILD],
+    ['show-parent', SHOW_PARENT]
+])
 
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            style,
-            className,
-            key,
-            locale,
-            options,
-            changeOnSelect,
-            size,
-            bordered,
-            disabled,
-            placeholder,
-            defaultValue,
-            value,
-            placement,
-            maxTagCount,
-            multiple,
-            expandTrigger,
-            status,
-            allowClear,
-            setProps,
-            persistence,
-            persisted_props,
-            persistence_type,
-            loading_state
-        } = this.props;
-
-
-        const filter = (inputValue, path) => {
-            return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+// 定义级联选择组件AntdCascader，api参数参考https://ant.design/components/cascader-cn/
+const AntdCascader = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        style,
+        className,
+        key,
+        locale,
+        options,
+        optionsMode,
+        changeOnSelect,
+        size,
+        bordered,
+        disabled,
+        placeholder,
+        defaultValue,
+        value,
+        placement,
+        maxTagCount,
+        multiple,
+        expandTrigger,
+        status,
+        allowClear,
+        showCheckedStrategy,
+        setProps,
+        persistence,
+        persisted_props,
+        persistence_type,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        if (!value) {
+            setProps({ value: defaultValue })
         }
+    }, [])
 
-        const onSelect = (e) => {
-            setProps({ value: e })
-        }
+    const flatToTreeOptions = useMemo(() => {
+        return flatToTree(options);
+    }, [options])
+
+    // 根据optionsMode对options进行预处理
+    if (optionsMode === 'flat') {
+        options = flatToTreeOptions
+    }
 
-        // 返回定制化的前端组件
-        return (
-            <ConfigProvider locale={str2Locale.get(locale)}>
-                <Cascader
-                    id={id}
-                    className={className}
-                    style={{ ...{ width: '100%' }, ...style }}
-                    key={key}
-                    options={options}
-                    changeOnSelect={changeOnSelect}
-                    size={size}
-                    bordered={bordered}
-                    disabled={disabled}
-                    placeholder={placeholder}
-                    defaultValue={defaultValue}
-                    value={value}
-                    placement={placement}
-                    maxTagCount={maxTagCount}
-                    multiple={multiple}
-                    persistence={persistence}
-                    persisted_props={persisted_props}
-                    persistence_type={persistence_type}
-                    expandTrigger={expandTrigger}
-                    status={status}
-                    allowClear={allowClear}
-                    showSearch={filter}
-                    onChange={onSelect}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }
-                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
-                />
-            </ConfigProvider>
-        );
+    const filter = (inputValue, path) => {
+        return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
     }
+
+    const onSelect = (e) => {
+        setProps({ value: e })
+    }
+
+    // 返回定制化的前端组件
+    return (
+        <ConfigProvider locale={str2Locale.get(locale)}>
+            <Cascader
+                id={id}
+                className={className}
+                style={{ ...{ width: '100%' }, ...style }}
+                key={key}
+                options={options}
+                changeOnSelect={changeOnSelect}
+                size={size}
+                bordered={bordered}
+                disabled={disabled}
+                placeholder={placeholder}
+                defaultValue={defaultValue}
+                value={value}
+                placement={placement}
+                maxTagCount={maxTagCount}
+                multiple={multiple}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                expandTrigger={expandTrigger}
+                status={status}
+                allowClear={allowClear}
+                showCheckedStrategy={str2ShowCheckedStrategy.get(showCheckedStrategy)}
+                showSearch={filter}
+                onChange={onSelect}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+                getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            />
+        </ConfigProvider>
+    );
 }
 
 // 定义递归PropTypes
@@ -98,14 +113,31 @@ const PropOptionNodeShape = {
     label: PropTypes.string.isRequired,
 
     // 设置是否禁止选中
-    disabled: PropTypes.bool,
-
+    disabled: PropTypes.bool
 };
 
 const PropOptionNode = PropTypes.shape(PropOptionNodeShape);
 PropOptionNodeShape.children = PropTypes.arrayOf(PropOptionNode);
 const optionDataPropTypes = PropTypes.arrayOf(PropOptionNode);
 
+// 定义扁平节点PropTypes
+const PropFlatOptionNodeShape = {
+    // 选项对应的值
+    value: PropTypes.string.isRequired,
+
+    // 选项对应显示的文字标题
+    label: PropTypes.string.isRequired,
+
+    // 设置是否禁止选中
+    disabled: PropTypes.bool,
+
+    // 对应当前节点唯一key值
+    key: PropTypes.string,
+
+    // 可选，设置对应节点的父节点key值
+    parent: PropTypes.string
+};
+
 // 定义参数或属性
 AntdCascader.propTypes = {
     // 组件id
@@ -124,7 +156,13 @@ AntdCascader.propTypes = {
     locale: PropTypes.oneOf(['zh-cn', 'en-us']),
 
     // 组织选项层级结构对应的json数据
-    options: optionDataPropTypes.isRequired,
+    options: PropTypes.oneOfType([
+        optionDataPropTypes,
+        PropTypes.arrayOf(PropFlatOptionNodeShape)
+    ]).isRequired,
+
+    // 设置options模式，可选的有'tree'、'flat'，默认为'tree'
+    optionsMode: PropTypes.oneOf(['tree', 'flat']),
 
     // 设置是否禁用组件
     disabled: PropTypes.bool,
@@ -184,6 +222,10 @@ AntdCascader.propTypes = {
     // 设置是否添加内容清除按钮，默认true
     allowClear: PropTypes.bool,
 
+    // 设置已选项回填策略，可选的有'show-parent'、'show-children'
+    // 默认为'show-parent'
+    showCheckedStrategy: PropTypes.oneOf(['show-parent', 'show-children']),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -240,5 +282,9 @@ AntdCascader.defaultProps = {
     changeOnSelect: false,
     persisted_props: ['value'],
     persistence_type: 'local',
-    locale: 'zh-cn'
+    locale: 'zh-cn',
+    optionsMode: 'tree',
+    showCheckedStrategy: 'show-parent'
 }
+
+export default AntdCascader;

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

@@ -22,6 +22,7 @@ export default class AntdCheckboxGroup extends Component {
             key,
             options,
             value,
+            disabled,
             setProps,
             persistence,
             persisted_props,
@@ -42,6 +43,7 @@ export default class AntdCheckboxGroup extends Component {
                 key={key}
                 options={options}
                 value={value}
+                disabled={disabled}
                 onChange={onChange}
                 persistence={persistence}
                 persisted_props={persisted_props}

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

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import zhCN from 'antd/lib/locale/zh_CN';
 import { Drawer, ConfigProvider } from 'antd';
 import 'antd/dist/antd.css';
@@ -39,7 +41,11 @@ export default class AntdDrawer extends Component {
             <ConfigProvider locale={zhCN}>
                 <Drawer
                     id={id}
-                    className={className}
+                    className={
+                        isString(className) ?
+                            className :
+                            useCss(className)
+                    }
                     style={containerId ? { ...style, ...{ position: 'absolute' } } : style}
                     key={key}
                     visible={visible}
@@ -74,7 +80,10 @@ AntdDrawer.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,

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

@@ -1,47 +1,67 @@
 import { str2Icon } from './icons.react';
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
+import { useRequest } from 'ahooks';
 
 // 定义图标组件AntdIcon
-export default class AntdIcon extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            className,
-            icon,
-            style,
-            key,
-            loading_state
-        } = this.props;
+const AntdIcon = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        icon,
+        style,
+        key,
+        nClicks,
+        debounceWait,
+        loading_state,
+        setProps
+    } = props;
 
-        if (icon) {
-            return (
-                <span id={id}
-                    className={className}
-                    style={
-                        (
-                            icon.startsWith('fc-') ||
-                            icon.startsWith('md-') ||
-                            icon.startsWith('di-') ||
-                            icon.startsWith('bi-') ||
-                            icon.startsWith('bs-') ||
-                            icon.startsWith('gi-')
-                        ) ?
-                            { ...{ verticalAlign: 'middle' }, ...style } :
-                            style
-                    }
-                    key={key}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }>
-                    {str2Icon.get(icon)}
-                </span>
-            );
+    const { run: onClick } = useRequest(
+        () => {
+            // 更新nClicks
+            setProps({ nClicks: nClicks + 1 })
+        },
+        {
+            debounceWait: debounceWait,
+            debounceLeading: true,
+            manual: true
         }
-        return <span />;
+    )
+
+    if (icon) {
+        return (
+            <span id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        useCss(className)
+                }
+                style={
+                    (
+                        icon.startsWith('fc-') ||
+                        icon.startsWith('md-') ||
+                        icon.startsWith('di-') ||
+                        icon.startsWith('bi-') ||
+                        icon.startsWith('bs-') ||
+                        icon.startsWith('gi-')
+                    ) ?
+                        { ...{ verticalAlign: 'middle' }, ...style } :
+                        style
+                }
+                key={key}
+                onClick={onClick}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }>
+                {str2Icon.get(icon)}
+            </span>
+        );
     }
+    return null;
 }
 
 // 定义参数或属性
@@ -50,7 +70,10 @@ AntdIcon.propTypes = {
     id: PropTypes.string,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 用于指定icon类型,
     icon: PropTypes.string,
@@ -61,6 +84,12 @@ AntdIcon.propTypes = {
     // 辅助刷新用唯一标识key值
     key: PropTypes.string,
 
+    // 记录按钮从渲染后开始被点击的次数，默认为0
+    nClicks: PropTypes.number,
+
+    // 用于配置value变化更新的防抖等待时长（单位：毫秒），默认为0
+    debounceWait: PropTypes.number,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -85,4 +114,8 @@ AntdIcon.propTypes = {
 
 // 设置默认参数
 AntdIcon.defaultProps = {
+    nClicks: 0,
+    debounceWait: 0
 }
+
+export default AntdIcon;

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

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import { Image, ConfigProvider } from 'antd';
 import { str2Locale } from './locales.react';
 import 'antd/dist/antd.css';
@@ -33,7 +35,11 @@ const AntdImage = (props) => {
                     <Image
                         id={id}
                         style={style}
-                        className={className}
+                        className={
+                            isString(className) ?
+                                className :
+                                useCss(className)
+                        }
                         key={key}
                         preview={{ visible: false }}
                         width={width}
@@ -56,7 +62,11 @@ const AntdImage = (props) => {
                 <ConfigProvider locale={str2Locale.get(locale)}>
                     <Image.PreviewGroup id={id}
                         style={style}
-                        className={className}
+                        className={
+                            isString(className) ?
+                                className :
+                                useCss(className)
+                        }
                         key={key}>
                         {src.map(
                             src_ => <Image src={src_} fallback={fallback} width={width} height={height} />
@@ -90,7 +100,10 @@ AntdImage.propTypes = {
     id: PropTypes.string,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,