feffery_antd_components 0.3.0-a0 → 0.3.0-a2

package/src/lib/components/navigation/AntdDropdown.react.js

@@ -1,12 +1,13 @@
 import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, Menu, Button } from 'antd';
+import { Dropdown, Button, Typography } from 'antd';
 import AntdIcon from '../general/AntdIcon.react';
 import { DownOutlined } from '@ant-design/icons';
 import { isString, isUndefined } from 'lodash';
 import useCss from '../../hooks/useCss';
 import PropsContext from '../../contexts/PropsContext';
 
+const { Link } = Typography;
 
 // 定义下拉菜单组件AntdDropdown，api参数参考https://ant.design/components/dropdown-cn/
 const AntdDropdown = (props) => {
@@ -28,6 +29,9 @@ const AntdDropdown = (props) => {
         visible,
         menuItems,
         nClicks,
+        selectable,
+        multiple,
+        selectedKeys,
         popupContainer,
         buttonProps,
         freePosition,
@@ -62,56 +66,55 @@ const AntdDropdown = (props) => {
             }
             style={style}
             key={key}
-            overlay={
-                <Menu onClick={(item, key, keyPath, domEvent) => (
-                    setProps({
-                        clickedKey: item.key,
-                        nClicks: nClicks + 1,
-                        ...(
-                            freePosition ?
-                                {
-                                    visible: false
-                                } :
-                                {}
+            menu={{
+                items: menuItems.map(
+                    (menuItem) => ({
+                        type: menuItem.isDivider ? 'divider' : undefined,
+                        disabled: menuItem.disabled,
+                        key: menuItem.key || menuItem.title,
+                        label: (
+                            <a href={menuItem.href}
+                                target={menuItem.target}>
+                                {menuItem.title}
+                            </a>
+                        ),
+                        icon: (
+                            menuItem.icon ?
+                                (
+                                    menuItem.iconRenderer === 'fontawesome' ?
+                                        (
+                                            React.createElement(
+                                                'i',
+                                                {
+                                                    className: menuItem.icon
+                                                }
+                                            )
+                                        ) :
+                                        (
+                                            <AntdIcon icon={menuItem.icon} />
+                                        )
+                                ) :
+                                null
                         )
                     })
-                )}>
-                    {
-                        menuItems.map(
-                            menuItem => (
-                                // 判断isDivider参数是否不为false
-                                menuItem.isDivider ?
-                                    <Menu.Divider /> :
-                                    <Menu.Item
-                                        icon={
-                                            menuItem.icon ?
-                                                (
-                                                    menuItem.iconRenderer === 'fontawesome' ?
-                                                        (
-                                                            React.createElement(
-                                                                'i',
-                                                                {
-                                                                    className: menuItem.icon
-                                                                }
-                                                            )
-                                                        ) :
-                                                        (
-                                                            <AntdIcon icon={menuItem.icon} />
-                                                        )
-                                                ) : null
-                                        }
-                                        disabled={menuItem.disabled}
-                                        key={menuItem.key ? menuItem.key : menuItem.title}>
-                                        <a href={menuItem.href}
-                                            target={menuItem.target}>
-                                            {menuItem.title}
-                                        </a>
-                                    </Menu.Item>
-                            )
-                        )
-                    }
-                </Menu>
-            }
+                ),
+                selectable: selectable,
+                multiple: multiple,
+                selectedKeys: selectedKeys,
+                onClick: (item, key, keyPath, e) => setProps({
+                    clickedKey: item.key,
+                    nClicks: nClicks + 1,
+                    ...(
+                        freePosition && !multiple ?
+                            {
+                                visible: false
+                            } :
+                            {}
+                    )
+                }),
+                onSelect: (e) => setProps({ selectedKeys: e.selectedKeys }),
+                onDeselect: (e) => setProps({ selectedKeys: e.selectedKeys })
+            }}
             arrow={arrow}
             disabled={
                 context && !isUndefined(context.componentDisabled) ?
@@ -128,9 +131,7 @@ const AntdDropdown = (props) => {
             trigger={[trigger]}
             autoAdjustOverflow={autoAdjustOverflow}
             open={visible}
-            onOpenChange={(v) => setProps({
-                visible: v
-            })}
+            onOpenChange={(e) => setProps({ visible: e })}
             getPopupContainer={
                 popupContainer === 'parent' ?
                     (triggerNode) => triggerNode.parentNode :
@@ -162,10 +163,9 @@ const AntdDropdown = (props) => {
                                 {title} <DownOutlined />
                             </Button>
                             :
-                            <a className="ant-dropdown-link"
-                                onClick={e => e.preventDefault()}>
+                            <Link onClick={e => e.preventDefault()}>
                                 {title} <DownOutlined />
-                            </a>
+                            </Link>
                     )
             }
         </Dropdown>
@@ -258,6 +258,23 @@ AntdDropdown.propTypes = {
         })
     ),
 
+    /**
+     * 设置菜单项是否可选中
+     * 默认：false
+     */
+    selectable: PropTypes.bool,
+
+    /**
+     * 设置菜单是否允许多选
+     * 默认：false
+     */
+    multiple: PropTypes.bool,
+
+    /**
+     * 设置或监听当前已选中菜单项key值数组
+     */
+    selectedKeys: PropTypes.arrayOf(PropTypes.string),
+
     // 设置下拉框是否显示连接箭头，默认为false
     arrow: PropTypes.bool,
 

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

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { QRCode, ConfigProvider } from 'antd';
+import useCss from '../../hooks/useCss';
+import { isString } from 'lodash';
+import { str2Locale } from '../../components/locales.react';
+import { propTypes, defaultProps } from '../../components/dataDisplay/AntdImage.react';
+
+
+// 定义二维码组件AntdQRCode，api参数参考https://ant.design/components/collapse/#components-collapse-demo-accordion
+const AntdQRCode = (props) => {
+    let {
+        id,
+        className,
+        style,
+        key,
+        locale,
+        value,
+        type,
+        icon,
+        size,
+        iconSize,
+        color,
+        bgColor,
+        bordered,
+        errorLevel,
+        status,
+        expires,
+        autoSpin,
+        refreshClicks,
+        setProps,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        if (value && expires) {
+            setTimeout(
+                () => {
+                    setProps({ status: 'expired' })
+                },
+                expires * 1000
+            )
+        }
+    }, [value])
+
+    return (
+        <ConfigProvider
+            locale={str2Locale.get(locale)}
+        >
+            <QRCode
+                id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                value={value}
+                type={type}
+                icon={icon}
+                size={size}
+                iconSize={iconSize}
+                color={color}
+                bgColor={bgColor}
+                bordered={bordered}
+                errorLevel={errorLevel}
+                status={autoSpin && loading_state?.prop_name?.startsWith('value') ? 'loading' : status}
+                onRefresh={() => setProps({ refreshClicks: refreshClicks + 1 })}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            />
+        </ConfigProvider>
+    );
+}
+
+export default AntdQRCode;
+
+AntdQRCode.defaultProps = defaultProps;
+AntdQRCode.propTypes = propTypes;

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

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import { ColorPicker } from 'antd';
+import { Color } from '@rc-component/color-picker';
+import useCss from '../../hooks/useCss';
+import { isString } from 'lodash';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdColorPicker.react';
+
+
+// 定义颜色选择器组件AntdColorPicker，api参数参考https://ant.design/components/color-picker-cn
+const AntdColorPicker = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        allowClear,
+        arrow,
+        value,
+        format,
+        disabled,
+        disabledAlpha,
+        open,
+        presets,
+        placement,
+        showText,
+        size,
+        trigger,
+        setProps,
+        loading_state
+    } = props;
+
+    // 每次format发生变更时，同步更新value值
+    useEffect(() => {
+        if (value) {
+            let _color = new Color(value)
+            setProps({
+                value: (
+                    format === 'hex' ?
+                        _color.toHexString() :
+                        (
+                            format === 'rgb' ?
+                                _color.toRgbString() :
+                                _color.toHsbString()
+                        )
+                )
+            })
+        }
+    }, [format])
+
+    return (
+        <ColorPicker id={id}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            key={key}
+            allowClear={allowClear}
+            arrow={arrow}
+            value={value}
+            format={format}
+            disabled={disabled}
+            disabledAlpha={disabledAlpha}
+            open={open}
+            presets={presets}
+            placement={placement}
+            showText={showText}
+            size={size}
+            trigger={trigger}
+            onFormatChange={(e) => setProps({ format: e })}
+            onOpenChange={(e) => setProps({ open: e })}
+            onChangeComplete={(e) => setProps({
+                value: (
+                    format === 'hex' ?
+                        e.toHexString() :
+                        (
+                            format === 'rgb' ?
+                                e.toRgbString() :
+                                e.toHsbString()
+                        )
+                )
+            })}
+            onClear={() => setProps({ value: null })}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
+}
+
+export default AntdColorPicker;
+
+AntdColorPicker.defaultProps = defaultProps;
+AntdColorPicker.propTypes = propTypes;

package/src/lib/index.js

@@ -61,6 +61,7 @@ import AntdTimeline from './components/dataDisplay/AntdTimeline.react';
 import AntdTooltip from './components/dataDisplay/AntdTooltip.react';
 import AntdTree from './components/dataDisplay/AntdTree.react';
 import AntdSpoiler from './components/dataDisplay/AntdSpoiler.react';
+import AntdQRCode from './components/dataDisplay/AntdQRCode.react';
 // 反馈
 import AntdAlert from './components/feedback/AntdAlert.react';
 import AntdDrawer from './components/feedback/AntdDrawer.react';
@@ -212,5 +213,6 @@ export {
     AntdSpoiler,
     AntdCompact,
     AntdTour,
-    AntdColorPicker
+    AntdColorPicker,
+    AntdQRCode
 };

package/usage.py

@@ -1,5 +1,7 @@
 import dash
+import uuid
 import json
+import time
 from dash import html
 import feffery_antd_components as fac
 from dash.dependencies import Input, Output
@@ -8,18 +10,35 @@ app = dash.Dash(__name__, compress=True)
 
 app.layout = html.Div(
     [
-        fac.AntdSpace(
-            [
-                html.Pre(
-                    id='output'
-                ),
-                fac.AntdColorPicker(
-                    id='color-picker',
-                    allowClear=True,
-                    disabledAlpha=False
-                )
+        fac.AntdDropdown(
+            id='dropdown-demo',
+            title='触发点',
+            menuItems=[
+                {
+                    'title': '选项1',
+                    'key': '选项1',
+                },
+                {
+                    'title': '选项2',
+                    'key': '选项2',
+                },
+                {
+                    'isDivider': True
+                },
+                {
+                    'title': '选项3-1',
+                    'key': '选项3-1',
+                },
+                {
+                    'title': '选项3-2',
+                    'key': '选项3-2',
+                }
             ],
-            direction='vertical'
+            selectable=True,
+            multiple=True
+        ),
+        html.Pre(
+            id='output'
         )
     ],
     style={
@@ -30,13 +49,17 @@ app.layout = html.Div(
 
 @app.callback(
     Output('output', 'children'),
-    Input('color-picker', 'value')
+    [Input('dropdown-demo', 'selectedKeys'),
+     Input('dropdown-demo', 'clickedKey'),
+     Input('dropdown-demo', 'nClicks')]
 )
-def demo(value):
+def demo(selectedKeys, clickedKey, nClicks):
 
     return json.dumps(
         dict(
-            value=value
+            selectedKeys=selectedKeys,
+            clickedKey=clickedKey,
+            nClicks=nClicks
         ),
         indent=4,
         ensure_ascii=False