feffery_antd_components 0.2.10-rc15 → 0.2.10-rc16

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

@@ -0,0 +1,146 @@
+import React, { useEffect, useContext } from 'react';
+import { Radio, Space } from 'antd';
+import { isString, isUndefined } from 'lodash';
+import useCss from '../../hooks/useCss';
+import PropsContext from '../../contexts/PropsContext';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdRadioGroup.react';
+
+
+// 定义单选框组件AntdRadioGroup，api参数参考https://ant.design/components/radio-cn/
+const AntdRadioGroup = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        style,
+        className,
+        key,
+        options,
+        defaultValue,
+        value,
+        direction,
+        optionType,
+        buttonStyle,
+        disabled,
+        size,
+        readOnly,
+        setProps,
+        persistence,
+        persisted_props,
+        persistence_type,
+        loading_state,
+        batchPropsNames
+    } = props;
+
+    // 批属性监听
+    useEffect(() => {
+        if (batchPropsNames && batchPropsNames.length !== 0) {
+            let _batchPropsValues = {};
+            for (let propName of batchPropsNames) {
+                _batchPropsValues[propName] = props[propName];
+            }
+            setProps({
+                batchPropsValues: _batchPropsValues
+            })
+        }
+    })
+
+    const context = useContext(PropsContext)
+
+    useEffect(() => {
+        if (defaultValue && !value) {
+            setProps({ value: defaultValue })
+        }
+    }, [])
+
+    const onSelect = (e) => {
+        if (!readOnly) {
+            setProps({ value: e.target.value })
+        }
+    }
+
+    if (direction === 'vertical') {
+
+        // 返回定制化的前端组件
+        return (
+            <Radio.Group
+                id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                defaultValue={defaultValue}
+                value={value}
+                buttonStyle={buttonStyle}
+                disabled={
+                    context && !isUndefined(context.componentDisabled) ?
+                        context.componentDisabled :
+                        disabled
+                }
+                size={
+                    context && !isUndefined(context.componentSize) ?
+                        context.componentSize :
+                        size
+                }
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                onChange={onSelect}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            >
+                <Space direction='vertical'>
+                    {options.map(item => {
+                        return optionType !== 'button' ?
+                            <Radio value={item.value} disabled={item.disabled}>{item.label}</Radio> :
+                            <Radio.Button value={item.value} disabled={item.disabled}>{item.label}</Radio.Button>
+                    })}
+                </Space>
+            </Radio.Group>
+        );
+    }
+
+    // 返回定制化的前端组件
+    return (
+        <Radio.Group
+            id={id}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            key={key}
+            options={options}
+            defaultValue={defaultValue}
+            value={value}
+            optionType={optionType}
+            buttonStyle={buttonStyle}
+            disabled={
+                context && !isUndefined(context.componentDisabled) ?
+                    context.componentDisabled :
+                    disabled
+            }
+            size={
+                context && !isUndefined(context.componentSize) ?
+                    context.componentSize :
+                    size
+            }
+            persistence={persistence}
+            persisted_props={persisted_props}
+            persistence_type={persistence_type}
+            onChange={onSelect}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        />
+    );
+}
+
+export default AntdRadioGroup;
+
+AntdRadioGroup.defaultProps = defaultProps;
+AntdRadioGroup.propTypes = propTypes;

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

@@ -0,0 +1,87 @@
+import React, { useEffect, useContext } from 'react';
+import { Rate } from 'antd';
+import { isString, isUndefined } from 'lodash';
+import useCss from '../../hooks/useCss';
+import PropsContext from '../../contexts/PropsContext';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdRate.react';
+
+
+// 定义评分组件AntdRate，api参数参考https://ant.design/components/rate-cn/
+const AntdRate = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        allowClear,
+        allowHalf,
+        count,
+        disabled,
+        tooltips,
+        defaultValue,
+        value,
+        setProps,
+        loading_state,
+        persistence,
+        persisted_props,
+        persistence_type,
+        batchPropsNames
+    } = props;
+
+    // 批属性监听
+    useEffect(() => {
+        if (batchPropsNames && batchPropsNames.length !== 0) {
+            let _batchPropsValues = {};
+            for (let propName of batchPropsNames) {
+                _batchPropsValues[propName] = props[propName];
+            }
+            setProps({
+                batchPropsValues: _batchPropsValues
+            })
+        }
+    })
+
+    const context = useContext(PropsContext)
+
+    useEffect(() => {
+        // 初始化value
+        if (defaultValue && !value) {
+            // 当defaultValue不为空时，为value初始化defaultValue对应的value值
+            setProps({ value: defaultValue })
+        }
+    }, [])
+
+    return (
+        <Rate id={id}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            key={key}
+            allowClear={allowClear}
+            allowHalf={allowHalf}
+            count={count}
+            disabled={
+                context && !isUndefined(context.componentDisabled) ?
+                    context.componentDisabled :
+                    disabled
+            }
+            tooltips={tooltips}
+            value={value}
+            onChange={v => setProps({ value: v })}
+            persistence={persistence}
+            persisted_props={persisted_props}
+            persistence_type={persistence_type}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
+}
+
+export default AntdRate;
+
+AntdRate.defaultProps = defaultProps;
+AntdRate.propTypes = propTypes;

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

@@ -0,0 +1,219 @@
+/* eslint-disable no-undefined */
+/* eslint-disable no-unused-vars */
+import React, { useContext, useEffect } from 'react';
+import { InputNumber, Space, message, Typography } from 'antd';
+import { isString, isUndefined } from 'lodash';
+import useCss from '../../hooks/useCss';
+import PropsContext from '../../contexts/PropsContext';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdSegmentedColoring.react';
+
+
+const { Text } = Typography;
+
+const size2size = new Map([
+    ["small", "24px"],
+    ["middle", "32px"],
+    ["large", "40px"]
+]);
+
+// 定义分段着色组件AntdSegmentedColoring
+const AntdSegmentedColoring = (props) => {
+
+    // 取得必要属性或参数
+    let {
+        id,
+        key,
+        className,
+        style,
+        size,
+        bordered,
+        controls,
+        disabled,
+        keyboard,
+        placeholder,
+        min,
+        max,
+        step,
+        precision,
+        readOnly,
+        pureLegend,
+        breakpoints,
+        colors,
+        inputNumberStyle,
+        colorBlockPosition,
+        colorBlockStyle,
+        pureLegendLabelStyle,
+        loading_state,
+        setProps,
+        batchPropsNames
+    } = props;
+
+    // 批属性监听
+    useEffect(() => {
+        if (batchPropsNames && batchPropsNames.length !== 0) {
+            let _batchPropsValues = {};
+            for (let propName of batchPropsNames) {
+                _batchPropsValues[propName] = props[propName];
+            }
+            setProps({
+                batchPropsValues: _batchPropsValues
+            })
+        }
+    })
+
+    const context = useContext(PropsContext)
+
+    disabled = (
+        context && !isUndefined(context.componentDisabled) ?
+            context.componentDisabled :
+            disabled
+    )
+
+    size = (
+        context && !isUndefined(context.componentSize) ?
+            context.componentSize :
+            size
+    )
+
+    return (
+        <Space
+            id={id}
+            key={key}
+            style={{
+                borderRadius: "2px",
+                padding: "12px 20px",
+                ...style
+            }}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            direction={"vertical"}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        >
+            {breakpoints.slice(0, breakpoints.length - 1).map((v, i) => {
+                return (
+                    <Space style={{ display: 'flex' }} size={"small"}>
+                        {colorBlockPosition === 'left' ?
+                            (<div
+                                style={{
+                                    height: size2size.get(size),
+                                    backgroundColor: colors[i],
+                                    width: size2size.get(size),
+                                    ...colorBlockStyle
+                                }}
+                            />) : 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={{
+                                    height: size2size.get(size),
+                                    backgroundColor: colors[i],
+                                    width: size2size.get(size),
+                                    ...colorBlockStyle
+                                }}
+                            />) : null
+                        }
+                    </Space>
+                );
+            })}
+        </Space>
+    );
+}
+
+export default AntdSegmentedColoring;
+
+AntdSegmentedColoring.defaultProps = defaultProps;
+AntdSegmentedColoring.propTypes = propTypes;