feffery_antd_components 0.2.10-rc15 → 0.2.10-rc16

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

@@ -0,0 +1,333 @@
+import React, { useEffect, useContext } from 'react';
+import { Input } from 'antd';
+import md5 from 'md5';
+import { useRequest } from 'ahooks';
+import { isString, isUndefined } from 'lodash';
+import useCss from '../../hooks/useCss';
+import PropsContext from '../../contexts/PropsContext';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdInput.react';
+
+const { Search, TextArea } = Input;
+
+// 定义输入框组件AntdInput，api参数参考https://ant.design/components/input-cn/
+const AntdInput = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        mode,
+        passwordUseMd5,
+        autoComplete,
+        placeholder,
+        value,
+        size,
+        addonBefore,
+        addonAfter,
+        prefix,
+        suffix,
+        allowClear,
+        bordered,
+        defaultValue,
+        disabled,
+        maxLength,
+        showCount,
+        countFormat,
+        nClicksSearch,
+        nSubmit,
+        status,
+        autoSize,
+        debounceWait,
+        readOnly,
+        emptyAsNone,
+        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为空时，为value初始化defaultValue对应的value值
+            setProps({
+                value: defaultValue,
+                md5Value: md5(defaultValue)
+            })
+        }
+        // 在value存在时，初始化md5Value
+        if (value) {
+            setProps({
+                md5Value: md5(value)
+            })
+        }
+    }, [])
+
+    // 监听输入内容变化事件
+    const onChange = e => {
+        // 若启用md5加密且为密码模式
+        if (passwordUseMd5 && mode === 'password') {
+            setProps({
+                md5Value: md5(e.target.value),
+                value: (
+                    emptyAsNone ?
+                        (
+                            e.target.value === '' ?
+                                null :
+                                e.target.value
+                        ) :
+                        e.target.value
+                )
+            })
+        } else {
+            setProps({
+                value: (
+                    emptyAsNone ?
+                        (
+                            e.target.value === '' ?
+                                null :
+                                e.target.value
+                        ) :
+                        e.target.value
+                )
+            })
+        }
+    }
+
+    const { run: onDebounceChange } = useRequest(
+        (e) => {
+            setProps({
+                debounceValue: (
+                    emptyAsNone ?
+                        (
+                            e === '' ?
+                                null :
+                                e
+                        ) :
+                        e
+                )
+            })
+        },
+        {
+            debounceWait: Math.max(debounceWait, 200),
+            manual: true
+        }
+    )
+
+    // 监听聚焦到输入框时enter键点按次数
+    const onPressEnter = e => {
+        setProps({ nSubmit: nSubmit + 1 })
+    }
+
+    // 监听搜索按钮点按事件
+    const onSearch = e => {
+        setProps({ nClicksSearch: nClicksSearch + 1 })
+    }
+
+    // 不同的mode模式下渲染不同的组件
+    if (mode === 'default') {
+        return (
+            <Input id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                value={value}
+                size={
+                    context && !isUndefined(context.componentSize) ?
+                        context.componentSize :
+                        size
+                }
+                addonBefore={addonBefore}
+                addonAfter={addonAfter}
+                prefix={prefix}
+                suffix={suffix}
+                allowClear={allowClear}
+                bordered={bordered}
+                defaultValue={defaultValue}
+                disabled={
+                    context && !isUndefined(context.componentDisabled) ?
+                        context.componentDisabled :
+                        disabled
+                }
+                maxLength={maxLength}
+                status={status}
+                readOnly={readOnly}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    } else if (mode === 'search') {
+        return (
+            <Search id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                size={
+                    context && !isUndefined(context.componentSize) ?
+                        context.componentSize :
+                        size
+                }
+                allowClear={allowClear}
+                bordered={bordered}
+                value={value}
+                defaultValue={defaultValue}
+                disabled={
+                    context && !isUndefined(context.componentDisabled) ?
+                        context.componentDisabled :
+                        disabled
+                }
+                maxLength={maxLength}
+                status={status}
+                readOnly={readOnly}
+                onSearch={onSearch}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    } else if (mode === 'text-area') {
+        return (
+            <TextArea id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                size={
+                    context && !isUndefined(context.componentSize) ?
+                        context.componentSize :
+                        size
+                }
+                allowClear={allowClear}
+                bordered={bordered}
+                value={value}
+                defaultValue={defaultValue}
+                disabled={
+                    context && !isUndefined(context.componentDisabled) ?
+                        context.componentDisabled :
+                        disabled
+                }
+                maxLength={maxLength}
+                showCount={
+                    showCount && countFormat && !maxLength ?
+                        {
+                            // 基于countFormat所定义的正则规则来自定义计算字符数
+                            formatter: ({ value }) => {
+                                return value.match(eval(`/${countFormat}/g`))?.length || 0;
+                            }
+                        } :
+                        showCount
+                }
+                status={status}
+                autoSize={autoSize}
+                readOnly={readOnly}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    } else if (mode === 'password') {
+        return (
+            <Input.Password id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                placeholder={placeholder}
+                autoComplete={autoComplete}
+                size={
+                    context && !isUndefined(context.componentSize) ?
+                        context.componentSize :
+                        size
+                }
+                bordered={bordered}
+                disabled={
+                    context && !isUndefined(context.componentDisabled) ?
+                        context.componentDisabled :
+                        disabled
+                }
+                value={value}
+                defaultValue={defaultValue}
+                maxLength={maxLength}
+                status={status}
+                prefix={prefix}
+                suffix={suffix}
+                readOnly={readOnly}
+                onChange={(e) => {
+                    onChange(e)
+                    onDebounceChange(e.target.value)
+                }}
+                onPressEnter={onPressEnter}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    }
+}
+
+export default AntdInput;
+
+AntdInput.defaultProps = defaultProps;
+AntdInput.propTypes = propTypes;

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

@@ -0,0 +1,145 @@
+import React, { useEffect, useContext } from 'react';
+import { InputNumber } from 'antd';
+import { useRequest } from 'ahooks';
+import { isString, isUndefined } from 'lodash';
+import useCss from '../../hooks/useCss';
+import PropsContext from '../../contexts/PropsContext';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdInputNumber.react';
+
+
+// 定义数字输入框组件AntdInputNumber，api参数参考https://ant.design/components/input-number-cn/
+const AntdInputNumber = (props) => {
+
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        size,
+        addonBefore,
+        addonAfter,
+        prefix,
+        bordered,
+        controls,
+        value,
+        defaultValue,
+        disabled,
+        placeholder,
+        keyboard,
+        min,
+        max,
+        step,
+        precision,
+        readOnly,
+        stringMode,
+        nSubmit,
+        status,
+        debounceWait,
+        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(() => {
+        // 初始化value
+        if (defaultValue && !value) {
+            // 当defaultValue不为空且value为空时，为value初始化defaultValue对应的value值
+            setProps({
+                value: defaultValue,
+                debounceValue: defaultValue
+            })
+        }
+    }, [])
+
+    // 监听输入内容变化事件
+    const onChange = e => {
+        setProps({ value: e })
+    }
+
+    const { run: onDebounceChange } = useRequest(
+        (e) => {
+            setProps({ debounceValue: e })
+        },
+        {
+            debounceWait: Math.max(debounceWait, 200),
+            manual: true
+        }
+    )
+
+    // 监听聚焦到输入框时enter键点按次数
+    const onPressEnter = e => {
+        setProps({ nSubmit: nSubmit + 1 })
+    }
+
+    return (
+        <InputNumber id={id}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            key={key}
+            size={
+                context && !isUndefined(context.componentSize) ?
+                    context.componentSize :
+                    size
+            }
+            addonBefore={addonBefore}
+            addonAfter={addonAfter}
+            prefix={prefix}
+            placeholder={placeholder}
+            bordered={bordered}
+            controls={controls}
+            value={value}
+            defaultValue={defaultValue}
+            disabled={
+                context && !isUndefined(context.componentDisabled) ?
+                    context.componentDisabled :
+                    disabled
+            }
+            keyboard={keyboard}
+            min={min}
+            max={max}
+            step={step}
+            precision={precision}
+            readOnly={readOnly}
+            stringMode={stringMode}
+            status={status}
+            onChange={(e) => {
+                onChange(e)
+                onDebounceChange(e)
+            }}
+            onPressEnter={onPressEnter}
+            persistence={persistence}
+            persisted_props={persisted_props}
+            persistence_type={persistence_type}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
+}
+
+export default AntdInputNumber;
+
+AntdInputNumber.defaultProps = defaultProps;
+AntdInputNumber.propTypes = propTypes;

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

@@ -0,0 +1,124 @@
+import React, { useContext, useEffect } from 'react';
+import { Mentions } from 'antd';
+import { isString, isUndefined } from 'lodash';
+import useCss from '../../hooks/useCss';
+import PropsContext from '../../contexts/PropsContext';
+import { propTypes, defaultProps } from '../../components/dataEntry/AntdMentions.react';
+
+const { Option } = Mentions;
+
+// 定义提及组件AntdMentions，api参数参考https://ant.design/components/mentions-cn/
+const AntdMentions = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        key,
+        autoSize,
+        prefix,
+        value,
+        defaultValue,
+        placement,
+        options,
+        disabled,
+        status,
+        popupContainer,
+        readOnly,
+        setProps,
+        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)
+
+    const onChange = (e) => {
+        if (!readOnly) {
+            setProps({ value: e })
+        }
+    }
+
+    const onSelect = (e) => {
+        // 获取最新一次被选中的子项value值
+        let latestSelectedOption = e.value
+
+        // 计算当前options中value值数组
+        let optionValues = options.map(item => item.value)
+
+        // 抽取已输入内容中的已选择子项内容
+        let presentSelectedOptions = (
+            (
+                (value || '')
+                    .match(eval(`/${prefix || '@'}\\S{1,}\\s/g`))
+                || []
+            )
+                .map(
+                    s => s.slice(1, s.length).trim()
+                )
+                .concat([latestSelectedOption])
+                // 处理latestSelectedOption与options中value值的存在性问题
+                .filter(s => optionValues.indexOf(s) !== -1)
+        )
+
+        // 更新输入框中已标记子项value值列表
+        setProps({
+            selectedOptions: presentSelectedOptions
+        })
+    }
+
+    return (
+        <Mentions id={id}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            key={key}
+            autoSize={autoSize}
+            prefix={prefix}
+            defaultValue={defaultValue}
+            placement={placement}
+            disabled={
+                context && !isUndefined(context.componentDisabled) ?
+                    context.componentDisabled :
+                    disabled
+            }
+            status={status}
+            onChange={onChange}
+            onSelect={onSelect}
+            getPopupContainer={
+                popupContainer === 'parent' ?
+                    (triggerNode) => triggerNode.parentNode :
+                    undefined
+            }
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        >
+            {
+                options.map(
+                    (item, idx) => <Option value={item.value} key={idx}>{item.label}</Option>
+                )
+            }
+        </Mentions>
+    );
+}
+
+export default AntdMentions;
+
+AntdMentions.defaultProps = defaultProps;
+AntdMentions.propTypes = propTypes;