feffery_antd_components 0.1.16 → 0.2.0-rc0

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

@@ -0,0 +1,241 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { str2Locale } from './locales.react';
+import { Modal, ConfigProvider } from 'antd';
+import {
+    CloseCircleFilled,
+    CloseCircleOutlined,
+    CloseCircleTwoTone
+} from "@ant-design/icons";
+import 'antd/dist/antd.css';
+import Draggable from "react-draggable";
+
+// 定义弹出卡片组件AntdPopupCard，api参数参考https://ant.design/components/modal-cn/
+const AntdPopupCard = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        children,
+        className,
+        key,
+        style,
+        locale,
+        visible,
+        title,
+        width,
+        transitionType,
+        closable,
+        closeIconType,
+        draggable,
+        zIndex,
+        bodyStyle,
+        setProps,
+        loading_state
+    } = props;
+
+    const [disabled, setDisabled] = useState(false);
+    const [bounds, setBounds] = useState({
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0
+    });
+    const draggleRef = useRef(null);
+
+    const onStart = (_event, uiData) => {
+        const { clientWidth, clientHeight } = window.document.documentElement;
+        const targetRect = draggleRef.current.getBoundingClientRect();
+
+        if (!targetRect) {
+            return;
+        }
+
+        setBounds({
+            left: -targetRect.left + uiData.x,
+            right: clientWidth - (targetRect.right - uiData.x),
+            top: -targetRect.top + uiData.y,
+            bottom: clientHeight - (targetRect.bottom - uiData.y)
+        });
+    };
+
+    // 返回定制化的前端组件
+    return (
+        <ConfigProvider locale={str2Locale.get(locale)}>
+            <Modal
+                id={id}
+                className={className}
+                style={style}
+                key={key}
+                title={
+                    <div
+                        style={{
+                            width: "100%",
+                            cursor: draggable ? "move" : 'inherit'
+                        }}
+                        onMouseOver={() => {
+                            if (disabled) {
+                                setDisabled(false);
+                            }
+                        }}
+                        onMouseOut={() => {
+                            setDisabled(true);
+                        }}
+                    >
+                        {title}
+                        {
+                            closable ?
+                                closeIconType === "outlined" ?
+                                    (<CloseCircleOutlined
+                                        style={{
+                                            position: "absolute",
+                                            top: -12,
+                                            right: -12,
+                                            fontSize: 24,
+                                            cursor: "pointer"
+                                        }}
+                                        onClick={() => setProps({ visible: false })}
+                                    />) :
+                                    (
+                                        closeIconType == 'two-tone' ?
+                                            ((<CloseCircleTwoTone
+                                                style={{
+                                                    position: "absolute",
+                                                    top: -12,
+                                                    right: -12,
+                                                    fontSize: 24,
+                                                    cursor: "pointer"
+                                                }}
+                                                onClick={() => setProps({ visible: false })}
+                                            />)) :
+                                            (<CloseCircleFilled
+                                                style={{
+                                                    position: "absolute",
+                                                    top: -12,
+                                                    right: -12,
+                                                    fontSize: 24,
+                                                    cursor: "pointer"
+                                                }}
+                                                onClick={() => setProps({ visible: false })}
+                                            />)
+                                    ) :
+                                null
+                        }
+                    </div>
+                }
+                transitionName={transitionType === 'none' ? '' : `ant-${transitionType}`}
+                width={width}
+                visible={visible}
+                zIndex={zIndex}
+                bodyStyle={bodyStyle}
+                mask={false}
+                maskClosable={false}
+                closable={false}
+                footer={false}
+                wrapClassName={'ant-modal-wrap-overwrite'}
+                modalRender={
+                    draggable ? (modal) => (
+                        <Draggable
+                            disabled={disabled}
+                            bounds={bounds}
+                            onStart={(event, uiData) => onStart(event, uiData)}
+                        >
+                            <div ref={draggleRef}>{modal}</div>
+                        </Draggable>
+                    ) : undefined}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            >{children}</Modal>
+        </ConfigProvider>
+    );
+}
+
+// 定义参数或属性
+AntdPopupCard.propTypes = {
+    // 组件id
+    id: PropTypes.string,
+
+    // 内嵌文字的文本内容
+    children: PropTypes.node,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 辅助刷新用唯一标识key值
+    key: PropTypes.string,
+
+    // 设置语言环境，可选的有'zh-cn'、'en-us'
+    locale: PropTypes.oneOf(['zh-cn', 'en-us']),
+
+    // 设置标题内容
+    title: PropTypes.node,
+
+    // 设置&记录当前弹出卡片是否可见，默认为true
+    visible: PropTypes.bool,
+
+    // 自定义对话框的像素宽度
+    width: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+
+    // 设置卡片显隐动画类型，可选的有'fade'、'zoom'、'zoom-big'、'zoom-big-fast'、'zoom-up'、
+    // 'zoom-down'、'zoom-left'、'zoom-right'、'slide-up'、'slide-down'、'slide-left'、
+    // 'slide-right'、'move-up'、'move-down'、'move-left'、'move-right'
+    transitionType: PropTypes.oneOf([
+        'none', 'fade', 'zoom', 'zoom-big', 'zoom-big-fast', 'zoom-up',
+        'zoom-down', 'zoom-left', 'zoom-right', 'slide-up', 'slide-down', 'slide-left',
+        'slide-right', 'move-up', 'move-down', 'move-left', 'move-right'
+    ]),
+
+    // 设置是否渲染关闭按钮，默认为true
+    closable: PropTypes.bool,
+
+    // 设置关闭按钮类型，可选的有'default'、'outlined'、'two-tone'
+    closeIconType: PropTypes.oneOf(['default', 'outlined', 'two-tone']),
+
+    // 设置是否可拖拽，默认为false
+    draggable: PropTypes.bool,
+
+    // 设置弹出卡片的zIndex，默认为1000
+    zIndex: PropTypes.number,
+
+    // 自定义弹出卡片主体区域css样式
+    bodyStyle: PropTypes.object,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    }),
+};
+
+// 设置默认参数
+AntdPopupCard.defaultProps = {
+    locale: 'zh-cn',
+    transitionType: 'fade',
+    closeIconType: 'default',
+    draggable: false,
+    visible: true,
+    closable: true
+}
+
+export default AntdPopupCard;

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

@@ -62,7 +62,7 @@ AntdRibbon.propTypes = {
     placement: PropTypes.oneOf(['start', 'end']),
 
     // 设置缎带中需要填入的文字
-    text: PropTypes.string,
+    text: PropTypes.node,
 
     loading_state: PropTypes.shape({
         /**

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

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Segmented } from 'antd';
 import 'antd/dist/antd.css';
+import AntdIcon from "./AntdIcon.react"
+import propTypes from 'prop-types';
 
 // 定义分段控制器组件AntdSegmented，api参数参考https://ant.design/components/segmented-cn/
 export default class AntdSegmented extends Component {
@@ -45,7 +47,14 @@ export default class AntdSegmented extends Component {
                 className={className}
                 style={style}
                 key={key}
-                options={options}
+                options={
+                    options.map(item => {
+                        return {
+                            ...item,
+                            icon: item.icon && <AntdIcon icon={item.icon} />
+                        }
+                    })
+                }
                 defaultValue={defaultValue}
                 value={value}
                 block={block}
@@ -82,16 +91,22 @@ AntdSegmented.propTypes = {
     options: PropTypes.arrayOf(
         PropTypes.exact({
             // 设置选项的标题内容
-            label: PropTypes.string,
+            label: propTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.node
+            ]).isRequired,
 
             // 设置选项的对应值
             value: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.number
-            ]),
+            ]).isRequired,
 
             // 设置是否禁用当前选项
-            disabled: PropTypes.bool
+            disabled: PropTypes.bool,
+
+            // 传入与AntdIcon相通的icon代号
+            icon: PropTypes.string
         })
     ),
 

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

@@ -2,9 +2,11 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputNumber, Space, message } from 'antd';
+import { InputNumber, Space, message, Typography } from 'antd';
 import 'antd/dist/antd.css';
 
+const { Text } = Typography;
+
 const size2size = new Map([
     ["small", "24px"],
     ["default", "32px"],
@@ -31,11 +33,13 @@ const AntdSegmentedColoring = (props) => {
         step,
         precision,
         readOnly,
+        pureLegend,
         breakpoints,
         colors,
         inputNumberStyle,
         colorBlockPosition,
         colorBlockStyle,
+        pureLegendLabelStyle,
         loading_state,
         setProps
     } = props;
@@ -45,7 +49,6 @@ const AntdSegmentedColoring = (props) => {
             id={id}
             key={key}
             style={{
-                border: bordered ? "1px solid #d9d9d9" : 'none',
                 borderRadius: "2px",
                 padding: "12px 20px",
                 ...style
@@ -58,7 +61,7 @@ const AntdSegmentedColoring = (props) => {
         >
             {breakpoints.slice(0, breakpoints.length - 1).map((v, i) => {
                 return (
-                    <Space key={`color-segment-${i}`}>
+                    <Space style={{ display: 'flex' }} size={"small"}>
                         {colorBlockPosition === 'left' ?
                             (<div
                                 style={{
@@ -67,83 +70,97 @@ const AntdSegmentedColoring = (props) => {
                                     width: size2size.get(size),
                                     ...colorBlockStyle
                                 }}
-                            />) : null}
-                        <InputNumber
-                            style={inputNumberStyle}
-                            size={size}
-                            bordered={bordered}
-                            controls={controls}
-                            disabled={disabled}
-                            keyboard={keyboard}
-                            placeholder={placeholder}
-                            min={min}
-                            max={max}
-                            step={step}
-                            precision={precision}
-                            readOnly={readOnly}
-                            value={breakpoints[i]}
-                            onChange={(e) => {
-                                if (e !== null && i === 0 && e < breakpoints[i + 1]) {
-                                    let _breakpoints = [...breakpoints];
-                                    _breakpoints[i] = e;
-                                    setProps({ breakpoints: _breakpoints });
-                                } else if (
-                                    e !== null &&
-                                    i > 0 &&
-                                    e > breakpoints[i - 1] &&
-                                    e < breakpoints[i + 1]
-                                ) {
-                                    let _breakpoints = [...breakpoints];
-                                    _breakpoints[i] = e;
-                                    setProps({ breakpoints: _breakpoints });
-                                } else if (e !== null) {
-                                    message.warning({
-                                        content: "数值超出相邻断点，请调整后再输入！",
-                                        duration: 1.5
-                                    });
-                                }
-                            }}
-                        />
-                        <span>~</span>
-                        <InputNumber
-                            style={inputNumberStyle}
-                            size={size}
-                            bordered={bordered}
-                            controls={controls}
-                            disabled={disabled}
-                            keyboard={keyboard}
-                            placeholder={placeholder}
-                            min={min}
-                            max={max}
-                            step={step}
-                            precision={precision}
-                            readOnly={readOnly}
-                            value={breakpoints[i + 1]}
-                            onChange={(e) => {
-                                if (
-                                    e !== null &&
-                                    i === breakpoints.length - 2 &&
-                                    e > breakpoints[i]
-                                ) {
-                                    let _breakpoints = [...breakpoints];
-                                    _breakpoints[i + 1] = e;
-                                    setProps({ breakpoints: _breakpoints });
-                                } else if (
-                                    e !== null &&
-                                    e > breakpoints[i] &&
-                                    e < breakpoints[i + 2]
-                                ) {
-                                    let _breakpoints = [...breakpoints];
-                                    _breakpoints[i + 1] = e;
-                                    setProps({ breakpoints: _breakpoints });
-                                } else if (e !== null) {
-                                    message.warning({
-                                        content: "数值超出相邻断点，请调整后再输入！",
-                                        duration: 1.5
-                                    });
-                                }
-                            }}
-                        />
+                            />) : null
+                        }
+                        {
+                            pureLegend ?
+                                (
+                                    <>
+                                        <Text style={pureLegendLabelStyle}>{breakpoints[i].toFixed(precision)}</Text>
+                                        <Text style={pureLegendLabelStyle}>~</Text>
+                                        <Text style={pureLegendLabelStyle}>{breakpoints[i + 1].toFixed(precision)}</Text>
+                                    </>
+                                ) : (
+                                    <>
+                                        <InputNumber
+                                            style={inputNumberStyle}
+                                            size={size}
+                                            bordered={bordered}
+                                            controls={controls}
+                                            disabled={disabled}
+                                            keyboard={keyboard}
+                                            placeholder={placeholder}
+                                            min={min}
+                                            max={max}
+                                            step={step}
+                                            precision={precision}
+                                            readOnly={readOnly}
+                                            value={breakpoints[i]}
+                                            onChange={(e) => {
+                                                if (e !== null && i === 0 && e < breakpoints[i + 1]) {
+                                                    let _breakpoints = [...breakpoints];
+                                                    _breakpoints[i] = e;
+                                                    setProps({ breakpoints: _breakpoints });
+                                                } else if (
+                                                    e !== null &&
+                                                    i > 0 &&
+                                                    e > breakpoints[i - 1] &&
+                                                    e < breakpoints[i + 1]
+                                                ) {
+                                                    let _breakpoints = [...breakpoints];
+                                                    _breakpoints[i] = e;
+                                                    setProps({ breakpoints: _breakpoints });
+                                                } else if (e !== null) {
+                                                    message.warning({
+                                                        content: "数值超出相邻断点，请调整后再输入！",
+                                                        duration: 1.5
+                                                    });
+                                                }
+                                            }}
+                                        />
+                                        <span>~</span>
+                                        <InputNumber
+                                            style={inputNumberStyle}
+                                            size={size}
+                                            bordered={bordered}
+                                            controls={controls}
+                                            disabled={disabled}
+                                            keyboard={keyboard}
+                                            placeholder={placeholder}
+                                            min={min}
+                                            max={max}
+                                            step={step}
+                                            precision={precision}
+                                            readOnly={readOnly}
+                                            value={breakpoints[i + 1]}
+                                            onChange={(e) => {
+                                                if (
+                                                    e !== null &&
+                                                    i === breakpoints.length - 2 &&
+                                                    e > breakpoints[i]
+                                                ) {
+                                                    let _breakpoints = [...breakpoints];
+                                                    _breakpoints[i + 1] = e;
+                                                    setProps({ breakpoints: _breakpoints });
+                                                } else if (
+                                                    e !== null &&
+                                                    e > breakpoints[i] &&
+                                                    e < breakpoints[i + 2]
+                                                ) {
+                                                    let _breakpoints = [...breakpoints];
+                                                    _breakpoints[i + 1] = e;
+                                                    setProps({ breakpoints: _breakpoints });
+                                                } else if (e !== null) {
+                                                    message.warning({
+                                                        content: "数值超出相邻断点，请调整后再输入！",
+                                                        duration: 1.5
+                                                    });
+                                                }
+                                            }}
+                                        />
+                                    </>
+                                )
+                        }
                         {colorBlockPosition === 'right' ?
                             (<div
                                 style={{
@@ -152,7 +169,8 @@ const AntdSegmentedColoring = (props) => {
                                     width: size2size.get(size),
                                     ...colorBlockStyle
                                 }}
-                            />) : null}
+                            />) : null
+                        }
                     </Space>
                 );
             })}
@@ -206,6 +224,9 @@ AntdSegmentedColoring.propTypes = {
     // 设置是否开启只读模式，默认为false
     readOnly: PropTypes.bool,
 
+    // 设置是否开启纯图例模式，默认为false
+    pureLegend: PropTypes.bool,
+
     // 设置&更新分段断点数组
     breakpoints: PropTypes.arrayOf(PropTypes.number).isRequired,
 
@@ -221,6 +242,9 @@ AntdSegmentedColoring.propTypes = {
     // 设置色块方位，可选的有'left'、'right'，默认为'right'
     colorBlockPosition: PropTypes.oneOf(['left', 'right']),
 
+    // pureLegend模式下，设置文字css样式
+    pureLegendLabelStyle: PropTypes.object,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -253,7 +277,8 @@ AntdSegmentedColoring.defaultProps = {
     step: 0.01,
     precision: 2,
     readOnly: false,
-    colorBlockPosition: 'right'
+    colorBlockPosition: 'right',
+    pureLegend: false
 }
 
 export default React.memo(AntdSegmentedColoring);

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

@@ -134,6 +134,11 @@ export default class AntdSelect extends Component {
             }
         }
 
+        // 处理optionFilterProp映射
+        if (optionFilterProp === 'label') {
+            optionFilterProp = 'children'
+        }
+
         // 返回定制化的前端组件
         return (
             <ConfigProvider locale={str2Locale.get(locale)}>

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

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Space, Divider } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from './utils';
 
@@ -30,7 +32,11 @@ export default class AntdSpace extends Component {
             if (direction === 'horizontal') {
                 return (
                     <Space id={id}
-                        className={className}
+                        className={
+                            isString(className) ?
+                                className :
+                                useCss(className)
+                        }
                         style={style}
                         key={key}
                         align={align}
@@ -47,7 +53,11 @@ export default class AntdSpace extends Component {
             }
             return (
                 <Space id={id}
-                    className={className}
+                    className={
+                        isString(className) ?
+                            className :
+                            useCss(className)
+                    }
                     style={style}
                     key={key}
                     align={align}
@@ -65,7 +75,11 @@ export default class AntdSpace extends Component {
 
         return (
             <Space id={id}
-                className={className}
+                className={
+                    isString(className) ?
+                        className :
+                        useCss(className)
+                }
                 style={style}
                 key={key}
                 align={align}
@@ -93,7 +107,10 @@ AntdSpace.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,