feffery_antd_components 0.3.0-b2 → 0.3.0-b4

package/src/lib/components/dataDisplay/AntdTag.react.js

@@ -1,43 +1,13 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
-import useCss from '../../hooks/useCss';
-import { isString } from 'lodash';
-import { Tag } from 'antd';
 
+const LazyAntdTag = React.lazy(() => import(/* webpackChunkName: "data_display" */ '../../fragments/dataDisplay/AntdTag.react'));
 
-// 定义标签组件AntdTag，api参数参考https://ant.design/components/tag-cn/
 const AntdTag = (props) => {
-    // 取得必要属性或参数
-    let {
-        id,
-        className,
-        style,
-        key,
-        content,
-        color,
-        href,
-        target,
-        bordered,
-        setProps,
-        loading_state
-    } = props;
-
     return (
-        <Tag id={id}
-            key={key}
-            className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
-            }
-            style={style}
-            color={color}
-            bordered={bordered}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }>
-            {href ? <a href={href} target={target}>{content}</a> : content}
-        </Tag>
+        <Suspense fallback={null}>
+            <LazyAntdTag {...props} />
+        </Suspense>
     );
 }
 
@@ -101,4 +71,7 @@ AntdTag.defaultProps = {
     bordered: true
 }
 
-export default AntdTag;
+export default AntdTag;
+
+export const propTypes = AntdTag.propTypes;
+export const defaultProps = AntdTag.defaultProps;

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

@@ -265,8 +265,11 @@ AntdTree.propTypes = {
         offset: PropTypes.number
     }),
 
-    // 联动树搜索时使用，用于设置针对树节点title进行搜索的关键词
-    searchKeyword: PropTypes.string,
+    // 联动树搜索时使用，用于设置针对树节点title进行搜索的关键词，也可以传入由多个关键词构成的数组
+    searchKeyword: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+    ]),
 
     // 配合searchKeyword参数使用，用于设置树节点title命中关键词部分的高亮样式
     highlightStyle: PropTypes.object,

package/src/lib/components/dataEntry/AntdSelect.react.js

@@ -196,6 +196,12 @@ AntdSelect.propTypes = {
     // 用于设置是否自动获取焦点，默认为false
     autoFocus: PropTypes.bool,
 
+    /**
+     * 设置下拉菜单是否与选择框同款，设置为false时将关闭虚拟滚动功能
+     * 默认：true
+     */
+    popupMatchSelectWidth: PropTypes.bool,
+
     // 设置是否以只读模式进行渲染，底层利用Select的open参数
     // 默认为false
     readOnly: PropTypes.bool,
@@ -281,6 +287,7 @@ AntdSelect.defaultProps = {
     optionFilterMode: 'case-insensitive',
     autoSpin: false,
     debounceWait: 200,
+    popupMatchSelectWidth: true,
     popupContainer: 'body',
     loadingEmptyContent: (
         <div style={{ display: 'flex', 'justifyContent': 'center' }}>

package/src/lib/fragments/dataDisplay/AntdDraggablePanel.react.js

@@ -23,7 +23,6 @@ const AntdDraggablePanel = (props) => {
         maxHeight,
         resize,
         expandable,
-        isExpand,
         setProps,
         loading_state
     } = props;
@@ -47,7 +46,6 @@ const AntdDraggablePanel = (props) => {
             maxHeight={maxHeight}
             resize={resize}
             expandable={expandable}
-            isExpand={isExpand}
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             } >

package/src/lib/fragments/dataDisplay/AntdTag.react.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import useCss from '../../hooks/useCss';
+import { isString } from 'lodash';
+import { Tag } from 'antd';
+import { propTypes, defaultProps } from '../../components/dataDisplay/AntdTag.react';
+
+// 定义标签组件AntdTag，api参数参考https://ant.design/components/tag-cn/
+const AntdTag = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        content,
+        color,
+        href,
+        target,
+        bordered,
+        setProps,
+        loading_state
+    } = props;
+
+    return (
+        <Tag id={id}
+            key={key}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            color={color}
+            bordered={bordered}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {href ? <a href={href} target={target}>{content}</a> : content}
+        </Tag>
+    );
+}
+
+export default AntdTag;
+
+AntdTag.defaultProps = defaultProps;
+AntdTag.propTypes = propTypes;

package/src/lib/fragments/dataDisplay/AntdTree.react.js

@@ -27,7 +27,12 @@ const isSameParent = (a, b) => {
 const filterTree = (toFilterData, keyword) => {
     return toFilterData.filter(node => {
         // 首先检查当前节点是否匹配关键字
-        const isMatch = node.title.includes(keyword);
+        let isMatch = false;
+        if (Array.isArray(keyword)) {
+            isMatch = keyword.some(s => node.title.includes(s));
+        } else {
+            isMatch = node.title.includes(keyword);
+        }
 
         // 如果当前节点匹配关键字，但不是根节点，才保留它及其全部后代节点信息
         if (isMatch) {
@@ -383,7 +388,7 @@ const AntdTree = (props) => {
                                     searchKeyword ?
                                         <Highlighter
                                             highlightStyle={highlightStyle}
-                                            searchWords={[searchKeyword]}
+                                            searchWords={Array.isArray(searchKeyword) ? searchKeyword : [searchKeyword]}
                                             autoEscape
                                             textToHighlight={nodeData.title}
                                         /> :
@@ -427,7 +432,7 @@ const AntdTree = (props) => {
                                 searchKeyword ?
                                     <Highlighter
                                         highlightStyle={highlightStyle}
-                                        searchWords={[searchKeyword]}
+                                        searchWords={Array.isArray(searchKeyword) ? searchKeyword : [searchKeyword]}
                                         autoEscape
                                         textToHighlight={nodeData.title}
                                     /> :

package/src/lib/fragments/dataEntry/AntdSelect.react.js

@@ -48,6 +48,7 @@ const AntdSelect = (props) => {
         dropdownAfter,
         popupContainer,
         readOnly,
+        popupMatchSelectWidth,
         loading_state,
         persistence,
         persisted_props,
@@ -289,6 +290,7 @@ const AntdSelect = (props) => {
                         undefined
                 }
                 open={isUndefined(readOnly) || !readOnly ? undefined : false}
+                popupMatchSelectWidth={popupMatchSelectWidth}
             >
                 {optionsJsx}
             </Select>

package/usage.py

@@ -7,57 +7,50 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        fac.AntdTable(
-            columns=[
+        fac.AntdTree(
+            id='tree-search-demo',
+            treeData=[
                 {
-                    'title': '字段1-1-1',
-                    'dataIndex': '字段1-1-1',
-                    'group': ['字段1', '字段1-1']
+                    'title': '四川省',
+                    'key': '四川省',
+                    'children': [
+                        {
+                            'title': '成都市',
+                            'key': '成都市'
+                        },
+                        {
+                            'title': '广安市',
+                            'key': '广安市'
+                        }
+                    ]
                 },
                 {
-                    'title': '字段1-1-2',
-                    'dataIndex': '字段1-1-2',
-                    'group': ['字段1', '字段1-1']
-                },
-                {
-                    'title': '字段1-2',
-                    'dataIndex': '字段1-2',
-                    'group': '字段1'
-                },
-                {
-                    'title': '字段2',
-                    'dataIndex': '字段2'
+                    'title': '重庆市',
+                    'key': '重庆市',
+                    'children': [
+                        {
+                            'title': '渝中区',
+                            'key': '渝中区',
+                            'children': [
+                                {
+                                    'title': '解放碑街道',
+                                    'key': '解放碑街道'
+                                }
+                            ]
+                        },
+                        {
+                            'title': '渝北区',
+                            'key': '渝北区'
+                        }
+                    ]
                 }
             ],
-            data=[
-                {
-                    '字段1-1-1': 1,
-                    '字段1-1-2': 1,
-                    '字段1-2': 1,
-                    '字段2': 1
-                }
-            ] * 3,
-            filterOptions={
-                '字段1-1-1': {}
-            },
-            sortOptions={
-                'sortDataIndexes': ['字段1-1-1']
+            defaultExpandAll=True,
+            highlightStyle={
+                'background': '#ffffb8',
+                'padding': 0
             },
-            bordered=True,
-            conditionalStyleFuncs={
-                '字段1-1-1': '''
-(record, index) => {
-    console.log(record)
-    if ( index % 2 === 1 ) {
-        return {
-            style: {
-                backgroundColor: "#ebfbee"
-            }
-        }
-    }
-}
-'''
-            }
+            searchKeyword=['省', '市', '区', '街道']
         )
     ],
     style={
@@ -65,6 +58,5 @@ app.layout = html.Div(
     }
 )
 
-
 if __name__ == '__main__':
     app.run(debug=True)

package/webpack.config.js

@@ -139,6 +139,12 @@ module.exports = (env, argv) => {
                         name(module, chunks, cacheGroupKey) {
                             return `${cacheGroupKey}-${chunks[0].name}`;
                         }
+                    },
+                    shared: {
+                        chunks: 'all',
+                        minSize: 0,
+                        minChunks: 2,
+                        name: 'async-fac-shared'
                     }
                 }
             }