feffery_antd_components 0.1.16 → 0.2.0-rc1

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

@@ -1,165 +1,168 @@
-import React, { Component } from 'react';
+import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Tree } from 'antd';
 import AntdIcon from './AntdIcon.react';
 import { omitBy, isUndefined } from 'lodash';
+import { flatToTree } from './utils';
 import 'antd/dist/antd.css';
 import './styles.css'
 
-// 定义树形控件AntdTree，api参数参考https://ant.design/components/tree-cn/
-export default class AntdTree extends Component {
-
-    constructor(props) {
-        super(props)
-        // 初始化expandedKeys
-        if (props.defaultExpandedKeys && !props.expandedKeys) {
-            // 当defaultExpandedKeys不为空时，为expandedKeys初始化defaultExpandedKeys对应的expandedKeys值
-            props.setProps({ expandedKeys: props.defaultExpandedKeys })
-        }
-
-        // 初始化selectedKeys
-        if (props.defaultSelectedKeys && !props.selectedKeys) {
-            // 当defaultSelectedKeys不为空时，为selectedKeys初始化defaultSelectedKeys对应的selectedKeys值
-            props.setProps({ selectedKeys: props.defaultSelectedKeys })
-        }
 
-        // 初始化selectedKeys
-        if (props.defaultCheckedKeys && !props.checkedKeys) {
-            // 当defaultCheckedKeys不为空时，为checkedKeys初始化defaultCheckedKeys对应的checkedKeys值
-            props.setProps({ checkedKeys: props.defaultCheckedKeys })
-        }
+// 定义树形控件AntdTree，api参数参考https://ant.design/components/tree-cn/
+const AntdTree = (props) => {
+
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        setProps,
+        style,
+        key,
+        checkable,
+        selectable,
+        selectedKeys,
+        expandedKeys,
+        checkedKeys,
+        defaultExpandAll,
+        defaultExpandedKeys,
+        defaultExpandParent,
+        checkStrictly,
+        defaultCheckedKeys,
+        defaultSelectedKeys,
+        multiple,
+        showLine,
+        showIcon,
+        height,
+        persistence,
+        persisted_props,
+        persistence_type,
+        loading_state
+    } = props;
+
+    if (showLine) {
+        showLine = { 'showLeafIcon': false }
     }
 
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            className,
-            setProps,
-            style,
-            key,
-            checkable,
-            selectable,
-            selectedKeys,
-            expandedKeys,
-            checkedKeys,
-            defaultExpandAll,
-            defaultExpandedKeys,
-            defaultExpandParent,
-            checkStrictly,
-            defaultCheckedKeys,
-            defaultSelectedKeys,
-            multiple,
-            showLine,
-            showIcon,
-            height,
-            persistence,
-            persisted_props,
-            persistence_type,
-            loading_state
-        } = this.props;
-
-        if (showLine) {
-            showLine = { 'showLeafIcon': false }
-        }
+    let { treeData, treeDataMode } = props;
 
-        let { treeData } = this.props;
+    useEffect(() => {
+        setProps({
+            expandedKeys: defaultExpandedKeys && !expandedKeys ? defaultExpandedKeys : expandedKeys,
+            selectedKeys: defaultSelectedKeys && !selectedKeys ? defaultSelectedKeys : selectedKeys,
+            checkedKeys: defaultCheckedKeys && !checkedKeys ? defaultCheckedKeys : checkedKeys
+        })
+    }, [])
 
-        // 用于以递归的方式将节点icon属性替换成相应的icon对象
-        const add_leaf_node_icon = (inputTreeData) => {
-            if (typeof inputTreeData === typeof {}) {
+    const flatToTreeData = useMemo(() => {
+        return flatToTree(treeData);
+    }, [treeData])
 
-                if (inputTreeData.hasOwnProperty('children')) {
-                    if (typeof inputTreeData.icon === typeof "") {
-                        inputTreeData.icon = <AntdIcon icon={inputTreeData.icon} />
-                    }
+    // 根据treeDataMode对treeData进行预处理
+    if (treeDataMode === 'flat') {
+        treeData = flatToTreeData
+    }
 
-                    for (var i = 0; i < inputTreeData.children.length; i++) {
-                        inputTreeData.children[i] = add_leaf_node_icon(inputTreeData.children[i])
-                    }
+    // 用于以递归的方式将节点icon属性替换成相应的icon对象
+    const add_leaf_node_icon = (inputTreeData) => {
+        if (typeof inputTreeData === typeof {}) {
 
-                } else {
-                    if (typeof inputTreeData.icon === typeof "") {
-                        inputTreeData.icon = <AntdIcon icon={inputTreeData.icon} />
-                    }
+            if (inputTreeData.hasOwnProperty('children')) {
+                if (typeof inputTreeData.icon === typeof "") {
+                    inputTreeData.icon = <AntdIcon icon={inputTreeData.icon} />
                 }
-            }
 
-            if (typeof inputTreeData == typeof []) {
-                for (var i = 0; i < inputTreeData.length; i++) {
-                    inputTreeData[i] = add_leaf_node_icon(inputTreeData[i])
+                for (var i = 0; i < inputTreeData.children.length; i++) {
+                    inputTreeData.children[i] = add_leaf_node_icon(inputTreeData.children[i])
+                }
+
+            } else {
+                if (typeof inputTreeData.icon === typeof "") {
+                    inputTreeData.icon = <AntdIcon icon={inputTreeData.icon} />
                 }
             }
+        }
 
-            return inputTreeData;
+        if (typeof inputTreeData == typeof []) {
+            for (var i = 0; i < inputTreeData.length; i++) {
+                inputTreeData[i] = add_leaf_node_icon(inputTreeData[i])
+            }
         }
 
-        treeData = add_leaf_node_icon(treeData)
+        return inputTreeData;
+    }
 
-        const listenSelect = (e) => {
-            setProps({ selectedKeys: e })
-        }
+    treeData = add_leaf_node_icon(treeData)
 
-        const listenCheck = (checkedKeys, e) => {
-            console.log({ checkedKeys, e })
-            if (checkStrictly) {
-                setProps({
-                    checkedKeys: checkedKeys.checked,
-                    halfCheckedKeys: checkedKeys.halfChecked
-                })
-            } else {
-                setProps({
-                    checkedKeys: checkedKeys,
-                    halfCheckedKeys: e.halfCheckedKeys
-                })
-            }
-        }
+    const listenSelect = (e) => {
+        setProps({ selectedKeys: e })
+    }
 
-        const listenExpand = (e) => {
-            setProps({ expandedKeys: e })
+    const listenCheck = (checkedKeys, e) => {
+        if (checkStrictly) {
+            setProps({
+                checkedKeys: checkedKeys.checked,
+                halfCheckedKeys: checkedKeys.halfChecked
+            })
+        } else {
+            setProps({
+                checkedKeys: checkedKeys,
+                halfCheckedKeys: e.halfCheckedKeys
+            })
         }
+    }
 
-        let config = {
-            expandedKeys
-        }
+    const listenExpand = (e) => {
+        setProps({ expandedKeys: e })
+    }
 
-        config = omitBy(config, isUndefined)
-
-        return (
-            <Tree
-                id={id}
-                className={className}
-                style={style}
-                key={key}
-                treeData={add_leaf_node_icon(treeData)}
-                selectedKeys={selectedKeys}
-                checkedKeys={checkedKeys}
-                selectable={selectable}
-                checkable={checkable}
-                defaultExpandAll={defaultExpandAll}
-                defaultExpandedKeys={defaultExpandedKeys}
-                defaultExpandParent={defaultExpandParent}
-                defaultCheckedKeys={defaultCheckedKeys}
-                defaultSelectedKeys={defaultSelectedKeys}
-                checkStrictly={checkStrictly}
-                multiple={multiple}
-                showLine={showLine}
-                onSelect={listenSelect}
-                onCheck={listenCheck}
-                onExpand={listenExpand}
-                showIcon={showIcon}
-                height={height}
-                showLeafIcon={false}
-                persistence={persistence}
-                persisted_props={persisted_props}
-                persistence_type={persistence_type}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-                {...config}
-            />
-        );
+    let config = {
+        expandedKeys
     }
+
+    config = omitBy(config, isUndefined)
+
+    return (
+        <Tree
+            id={id}
+            className={className}
+            style={style}
+            key={key}
+            treeData={add_leaf_node_icon(treeData)}
+            selectedKeys={selectedKeys}
+            checkedKeys={checkedKeys}
+            selectable={selectable}
+            checkable={checkable}
+            defaultExpandAll={defaultExpandAll}
+            defaultExpandedKeys={defaultExpandedKeys}
+            defaultExpandParent={defaultExpandParent}
+            defaultCheckedKeys={defaultCheckedKeys}
+            defaultSelectedKeys={defaultSelectedKeys}
+            checkStrictly={checkStrictly}
+            multiple={multiple}
+            showLine={showLine}
+            onSelect={listenSelect}
+            onCheck={listenCheck}
+            onExpand={listenExpand}
+            showIcon={showIcon}
+            height={height}
+            titleRender={(nodeData) => {
+                return (
+                    <span className={"ant-tree-title"}
+                        style={nodeData.style}>
+                        {nodeData.title}
+                    </span>
+                );
+            }}
+            showLeafIcon={false}
+            persistence={persistence}
+            persisted_props={persisted_props}
+            persistence_type={persistence_type}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+            {...config}
+        />
+    );
 }
 
 // 定义递归PropTypes
@@ -185,12 +188,44 @@ const PropTreeNodeShape = {
     // 可选，设置对应节点是否可选
     selectable: PropTypes.bool,
 
+    // 设置当前节点css样式
+    style: PropTypes.object
 };
 
 const PropTreeNode = PropTypes.shape(PropTreeNodeShape);
 PropTreeNodeShape.children = PropTypes.arrayOf(PropTreeNode);
 const treeDataPropTypes = PropTypes.arrayOf(PropTreeNode);
 
+// 定义偏平结构节点类型
+const PropFlatNodeShape = {
+    // 标题
+    title: PropTypes.string.isRequired,
+
+    // 唯一识别id
+    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+
+    // 可选，设置是否禁用
+    disabled: PropTypes.bool,
+
+    // 可选，设置节点对应icon
+    icon: PropTypes.node,
+
+    // 可选，当树为checkable时，设置对应节点是否展示checkbox
+    checkable: PropTypes.bool,
+
+    // 可选，设置是否禁用checkbox
+    disableCheckbox: PropTypes.bool,
+
+    // 可选，设置对应节点是否可选
+    selectable: PropTypes.bool,
+
+    // 可选，设置对应节点的父节点key值
+    parent: PropTypes.string,
+
+    // 设置当前节点css样式
+    style: PropTypes.object
+};
+
 // 定义参数或属性
 AntdTree.propTypes = {
     // 组件id
@@ -206,7 +241,15 @@ AntdTree.propTypes = {
     key: PropTypes.string,
 
     // 组织树形结构的json结构数据
-    treeData: treeDataPropTypes.isRequired,
+    treeData: PropTypes.oneOfType([
+        // 树结构
+        treeDataPropTypes,
+        // 偏平结构
+        PropTypes.arrayOf(PropFlatNodeShape)
+    ]),
+
+    // 设置treeData模式，可选的有'tree'、'flat'，默认为'tree'
+    treeDataMode: PropTypes.oneOf(['tree', 'flat']),
 
     // 设置是否渲染icon，默认为true
     showIcon: PropTypes.bool,
@@ -312,5 +355,8 @@ AntdTree.defaultProps = {
     showLine: { 'showLeafIcon': false },
     showIcon: true,
     persisted_props: ['selectedKeys', 'checkedKeys', 'expandedKeys'],
-    persistence_type: 'local'
-}
+    persistence_type: 'local',
+    treeDataMode: 'tree'
+}
+
+export default AntdTree;

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

@@ -1,126 +1,128 @@
-import React, { Component } from 'react';
+import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { TreeSelect, ConfigProvider } from 'antd';
 import { str2Locale } from './locales.react';
+import { flatToTree } from './utils';
 import 'antd/dist/antd.css';
 
 const { SHOW_ALL } = TreeSelect;
 
 // 定义树选择组件AntdTreeSelect，api参数参考https://ant.design/components/tree-select-cn/
-export default class AntdTreeSelect extends Component {
-
-    constructor(props) {
-        super(props)
-        if (!props.value) {
-            props.setProps({ value: props.defaultValue })
+const AntdTreeSelect = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        style,
+        className,
+        key,
+        locale,
+        treeData,
+        treeDataMode,
+        allowClear,
+        bordered,
+        treeLine,
+        listHeight,
+        placeholder,
+        value,
+        defaultValue,
+        maxTagCount,
+        multiple,
+        size,
+        treeCheckable,
+        treeCheckStrictly,
+        treeDefaultExpandAll,
+        treeDefaultExpandedKeys,
+        treeExpandedKeys,
+        virtual,
+        disabled,
+        placement,
+        status,
+        treeNodeFilterProp,
+        setProps,
+        persistence,
+        persisted_props,
+        persistence_type,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        if (!value && defaultValue) {
+            setProps({ value: defaultValue })
         }
-    }
+    }, [])
 
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            style,
-            className,
-            key,
-            locale,
-            treeData,
-            allowClear,
-            bordered,
-            treeLine,
-            listHeight,
-            placeholder,
-            value,
-            defaultValue,
-            maxTagCount,
-            multiple,
-            size,
-            treeCheckable,
-            treeCheckStrictly,
-            treeDefaultExpandAll,
-            treeDefaultExpandedKeys,
-            treeExpandedKeys,
-            virtual,
-            disabled,
-            placement,
-            status,
-            treeNodeFilterProp,
-            setProps,
-            persistence,
-            persisted_props,
-            persistence_type,
-            loading_state
-        } = this.props;
-
-        // 用于获取用户已选择值的回调函数
-        const updateSelectedValue = (value) => {
-
-            if (treeCheckStrictly) {
-                setProps({ value: value.map(item => item.value) })
-            } else {
-                setProps({ value: value })
-            }
+    const flatToTreeData = useMemo(() => {
+        return flatToTree(treeData);
+    }, [treeData])
 
+    // 用于获取用户已选择值的回调函数
+    const updateSelectedValue = (value) => {
+
+        if (treeCheckStrictly) {
+            setProps({ value: value.map(item => item.value) })
+        } else {
+            setProps({ value: value })
         }
 
-        // 返回定制化的前端组件
-        return (
-            <ConfigProvider locale={str2Locale.get(locale)}>
-                <TreeSelect
-                    id={id}
-                    className={className}
-                    style={{ ...{ width: '100%' }, ...style }}
-                    key={key}
-                    treeData={treeData}
-                    allowClear={allowClear}
-                    bordered={bordered}
-                    treeLine={treeLine}
-                    listHeight={listHeight}
-                    placeholder={placeholder}
-                    value={value}
-                    defaultValue={defaultValue}
-                    maxTagCount={maxTagCount}
-                    multiple={multiple}
-                    size={size}
-                    treeCheckable={treeCheckable}
-                    showCheckedStrategy={SHOW_ALL}
-                    treeCheckStrictly={treeCheckStrictly}
-                    treeDefaultExpandAll={treeDefaultExpandAll}
-                    treeDefaultExpandedKeys={treeDefaultExpandedKeys}
-                    treeExpandedKeys={treeExpandedKeys}
-                    onChange={updateSelectedValue}
-                    showSearch={true}
-                    virtual={virtual}
-                    disabled={disabled}
-                    placement={placement}
-                    status={status}
-                    treeNodeFilterProp={treeNodeFilterProp}
-                    persistence={persistence}
-                    persisted_props={persisted_props}
-                    persistence_type={persistence_type}
-                    data-dash-is-loading={
-                        (loading_state && loading_state.is_loading) || undefined
-                    }
-                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
-                />
-            </ConfigProvider>
-        );
     }
+
+    // 返回定制化的前端组件
+    return (
+        <ConfigProvider locale={str2Locale.get(locale)}>
+            <TreeSelect
+                id={id}
+                className={className}
+                style={{ ...{ width: '100%' }, ...style }}
+                key={key}
+                treeData={treeDataMode === 'flat' ? flatToTreeData : treeData}
+                allowClear={allowClear}
+                bordered={bordered}
+                treeLine={treeLine}
+                listHeight={listHeight}
+                placeholder={placeholder}
+                value={value}
+                defaultValue={defaultValue}
+                maxTagCount={maxTagCount}
+                multiple={multiple}
+                size={size}
+                treeCheckable={treeCheckable}
+                showCheckedStrategy={SHOW_ALL}
+                treeCheckStrictly={treeCheckStrictly}
+                treeDefaultExpandAll={treeDefaultExpandAll}
+                treeDefaultExpandedKeys={treeDefaultExpandedKeys}
+                treeExpandedKeys={treeExpandedKeys}
+                onChange={updateSelectedValue}
+                showSearch={true}
+                virtual={virtual}
+                disabled={disabled}
+                placement={placement}
+                status={status}
+                treeNodeFilterProp={treeNodeFilterProp}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+                getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            />
+        </ConfigProvider>
+    );
 }
 
 // 定义递归PropTypes
 const PropTreeNodeShape = {
     // 标题
-    title: PropTypes.string,
+    title: PropTypes.string.isRequired,
 
     // 唯一识别id
-    key: PropTypes.string,
+    key: PropTypes.string.isRequired,
 
     // 节点对应的值，供搜索筛选时进行匹配使用（具有唯一性）
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number
-    ]),
+    ]).isRequired,
 
     // 可选，设置是否禁用
     disabled: PropTypes.bool,
@@ -132,13 +134,43 @@ const PropTreeNodeShape = {
     disableCheckbox: PropTypes.bool,
 
     // 可选，设置对应节点是否可选
-    selectable: PropTypes.bool,
+    selectable: PropTypes.bool
 };
 
 const PropTreeNode = PropTypes.shape(PropTreeNodeShape);
 PropTreeNodeShape.children = PropTypes.arrayOf(PropTreeNode);
 const treeDataPropTypes = PropTypes.arrayOf(PropTreeNode);
 
+// 定义扁平结构节点类型
+const PropFlatNodeShape = {
+    // 标题
+    title: PropTypes.string.isRequired,
+
+    // 唯一识别id
+    key: PropTypes.string.isRequired,
+
+    // 节点对应的值，供搜索筛选时进行匹配使用（具有唯一性）
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]).isRequired,
+
+    // 可选，设置是否禁用
+    disabled: PropTypes.bool,
+
+    // 可选，当树为treeCheckable时，设置对应节点是否展示checkbox
+    checkable: PropTypes.bool,
+
+    // 可选，设置是否禁用checkbox
+    disableCheckbox: PropTypes.bool,
+
+    // 可选，设置对应节点是否可选
+    selectable: PropTypes.bool,
+
+    // 可选，设置对应节点的父节点key值
+    parent: PropTypes.string
+};
+
 // 定义参数或属性
 AntdTreeSelect.propTypes = {
     // 组件id
@@ -157,7 +189,15 @@ AntdTreeSelect.propTypes = {
     locale: PropTypes.oneOf(['zh-cn', 'en-us']),
 
     // 组织树形结构的json结构数据
-    treeData: treeDataPropTypes,
+    treeData: PropTypes.oneOfType([
+        // 树形结构
+        treeDataPropTypes,
+        // 扁平结构
+        PropTypes.arrayOf(PropFlatNodeShape)
+    ]).isRequired,
+
+    // 设置treeData模式，可选的有'tree'、'flat'，默认为'tree'
+    treeDataMode: PropTypes.oneOf(['tree', 'flat']),
 
     // 设置是否渲染内容清空按钮，默认为true
     allowClear: PropTypes.bool,
@@ -292,10 +332,13 @@ AntdTreeSelect.propTypes = {
 // 设置默认参数
 AntdTreeSelect.defaultProps = {
     listHeight: 256,
-    virtual: false,
+    virtual: true,
     allowClear: true,
     persisted_props: ['value'],
     persistence_type: 'local',
     locale: 'zh-cn',
-    treeNodeFilterProp: 'value'
+    treeNodeFilterProp: 'value',
+    treeDataMode: 'tree'
 }
+
+export default AntdTreeSelect;