@cloudbase/weda-ui 3.5.0 → 3.5.2-mp

package/dist/web/components/form/select/dropdown-select/ui.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import classNames from '../../../../utils/classnames';
-import { noop } from '../../../../utils/constant';
-import { useSyncValue } from '../../../../utils/hooks/useSyncValue';
-import { PureSelect } from './index';
-const transformValue = (value) => {
-    return value ? value : null;
-};
-export function PureSelectPc(props) {
-    const { size, onChange = noop, value, placeholder, params, disabled } = props;
-    const previousValueRef = useRef();
-    return (_jsx(PureSelect, { isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, updateValue: (value) => {
-            if (previousValueRef.current != transformValue(value)) {
-                onChange(value);
-                previousValueRef.current = value;
-            }
-        } }));
-}
-export function PureSelectH5(props) {
-    const { placeholder, name, disabled, onChange = noop, layout, className, params, } = props;
-    const [value, setValue] = useSyncValue(props.value);
-    const [currentLabel, setCurrentLabel] = useState('');
-    const [isShow, setIsShow] = useState(false);
-    const previousValueRef = useRef();
-    const subCls = classNames({
-        'weui-cell': true,
-        'weui-cell_active': true,
-        'weui-cell_form': true,
-        'weui-flex__item': layout !== 'vertical',
-        'weui-cell_disabled': disabled,
-    }, className);
-    // 选择回调
-    const onChooseCallback = (option, isUpdate, dismiss) => {
-        if (dismiss) {
-            setIsShow(false);
-        }
-        if (isUpdate && previousValueRef.current != transformValue(option === null || option === void 0 ? void 0 : option.value)) {
-            if (!option || Object.keys(option).length === 0) {
-                setValue('');
-                onChange('');
-                setCurrentLabel('');
-            }
-            else {
-                setValue(option.value);
-                onChange(option.value);
-                setCurrentLabel(option.label);
-            }
-            previousValueRef.current = option === null || option === void 0 ? void 0 : option.value;
-        }
-    };
-    const onClick = () => {
-        setIsShow(true);
-    };
-    return (_jsxs("div", { children: [_jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", onClick: disabled ? null : onClick, children: [_jsx("input", { className: "weui-input", type: "select", name: name, placeholder: placeholder, value: currentLabel, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), _jsx("span", { className: 'weui-input-arrow' })] }) }), _jsx(PureSelect, { params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, placeholder: undefined })] }));
-}

package/dist/web/components/form/select/h5.js

@@ -1,474 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import weui from '../../../utils/weui';
-import classNames from '../../../utils/classnames';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { getAreaCode, getRegionTree, regionPicker } from './region/index';
-import { defaultProps, moment } from './index';
-import { monthPicker, timePicker, yearPicker } from './time';
-import { emptyObject } from '../../../utils/constant';
-import { PureSelectH5 } from './dropdown-select/ui';
-import AllTimePicker from './allTimePicker';
-import { getIOSNotNaNDate, isTime } from './allTimePicker/dataUtils';
-export default function Select({ 
-// 系统属性
-events = emptyObject, 
-// 组件属性
-name, placeholder, layout, mode, dateMode = 'day', disabled = false, 
-// selector mode
-range = defaultProps.range, where, primaryField, enumName, dataSourceName, viewId, format, defaultValue, 
-// date mode
-startDate, endDate, defaultDate, 
-// time mode
-startTime, endTime, defaultTime, 
-// region mode
-defaultRegion, defaultMutiRegion, separator, regionType, onChange, }) {
-    var _a;
-    const [date, setDate] = React.useState(decodeIsoDatetime(defaultDate, 'date', dateMode));
-    const [time, setTime] = React.useState(decodeIsoDatetime(defaultTime, 'time'));
-    const [regioDepth, setRegionDepth] = React.useState(3);
-    const [regionData, setRegionData] = React.useState([]);
-    const [regionTree, setRegionTree] = React.useState([]);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [typeRegion, setTypeRegion] = React.useState(regionType);
-    const [region, setRegion] = React.useState(defaultRegion);
-    const [mutiRegion, setMutiRegion] = React.useState([]);
-    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
-    const allTime = React.useRef();
-    // 两次默认值不同, 需要刷新
-    const prevDefaultRef = React.useRef({});
-    React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
-        let hasChange = false;
-        if (((_a = prevDefaultRef.current) === null || _a === void 0 ? void 0 : _a.defaultValue) !== defaultValue) {
-            setSelectedValue(defaultValue);
-            hasChange = true;
-        }
-        if (((_b = prevDefaultRef.current) === null || _b === void 0 ? void 0 : _b.defaultDate) !== defaultDate) {
-            setDate(decodeIsoDatetime(defaultDate, 'date', dateMode));
-            hasChange = true;
-        }
-        if (((_c = prevDefaultRef.current) === null || _c === void 0 ? void 0 : _c.defaultTime) !== defaultTime) {
-            setTime(decodeIsoDatetime(defaultTime, 'time'));
-            hasChange = true;
-        }
-        if (!isObjectEqual((_d = prevDefaultRef.current) === null || _d === void 0 ? void 0 : _d.defaultRegion, defaultRegion)) {
-            setRegion(defaultRegion);
-            hasChange = true;
-        }
-        if (!isObjectEqual((_e = prevDefaultRef.current) === null || _e === void 0 ? void 0 : _e.defaultMutiRegion, defaultMutiRegion)) {
-            //setMutiRegion((defaultMutiRegion || ".").split(','));
-            setMutiRegion(defaultMutiRegion ? defaultMutiRegion.split(',') : []);
-            hasChange = true;
-        }
-        if (((_f = prevDefaultRef.current) === null || _f === void 0 ? void 0 : _f.regionType) !== regionType) {
-            setTypeRegion(regionType);
-            hasChange = true;
-        }
-        if (hasChange) {
-            prevDefaultRef.current = {
-                defaultValue,
-                defaultDate,
-                defaultTime,
-                defaultRegion,
-                defaultMutiRegion,
-            };
-        }
-    });
-    //实现初始值触发change事件
-    const defaultMutiRegionChange = function (treeValue, defaultMutiRegion) {
-        var _a;
-        const defaultValue = defaultMutiRegion
-            ? defaultMutiRegion.split(',')
-            : null;
-        const changeValue = [];
-        if (Array.isArray(defaultValue) && defaultValue.length > 0) {
-            defaultValue.forEach((element) => {
-                treeValue.map((item) => {
-                    if ((item === null || item === void 0 ? void 0 : item.Value) == element) {
-                        changeValue.push({
-                            value: item === null || item === void 0 ? void 0 : item.Value,
-                            code: item === null || item === void 0 ? void 0 : item.Code,
-                        });
-                    }
-                });
-            });
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: defaultMutiRegion, result: changeValue });
-        }
-    };
-    React.useEffect(() => {
-        if (mode == 'region' || mode == 'mutiRegion') {
-            if (regionData.length < 1) {
-                getAreaCode().then((value) => {
-                    var _a;
-                    if (((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0) > 0) {
-                        defaultMutiRegionChange(value, defaultMutiRegion);
-                        setRegionData(value);
-                        const tree = getRegionTree(value, regionType, mode);
-                        setRegionTree(tree);
-                    }
-                });
-            }
-            else {
-                const tree = getRegionTree(regionData, regionType, mode);
-                setRegionTree(tree);
-            }
-        }
-        switch (regionType) {
-            case 'levelOne': {
-                setRegionDepth(1);
-                break;
-            }
-            case 'levelTwo': {
-                setRegionDepth(2);
-                break;
-            }
-            case 'levelThree': {
-                setRegionDepth(3);
-                break;
-            }
-            default: {
-                break;
-            }
-        }
-    }, [regionType, mode, regionData]);
-    const onDateclick = function () {
-        const options = {
-            className: 'weda-ui weda-picker',
-        };
-        !!date && (options.defaultDate = date);
-        !!startDate && (options.start = decodeIsoDatetime(startDate, 'date'));
-        !!endDate && (options.end = decodeIsoDatetime(endDate, 'date'));
-        if (['year', 'month'].includes(dateMode)) {
-            !!startDate && (options.startDate = startDate);
-            !!endDate && (options.endDate = endDate);
-        }
-        options.onConfirm = (result) => {
-            var _a;
-            const value = formatDateModeValue(result, dateMode);
-            const formatNewDateValue = getFormatNewDateParams(dateMode, value);
-            setDate(value);
-            const finalValue = new Date(...formatNewDateValue).getTime();
-            onChange === null || onChange === void 0 ? void 0 : onChange(finalValue);
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
-                value: finalValue,
-            });
-        };
-        if (dateMode === 'year') {
-            // 年，1 列
-            yearPicker({ ...options });
-        }
-        else if (dateMode === 'month') {
-            // 年月，2 列
-            monthPicker({ ...options });
-        }
-        else if (dateMode === 'day') {
-            // 年月日，3 列
-            let defaultValue = null;
-            if (date) {
-                const dayDate = new Date(getIOSNotNaNDate(date));
-                defaultValue = [
-                    dayDate.getFullYear(),
-                    dayDate.getMonth() + 1,
-                    dayDate.getDate(),
-                ];
-            }
-            weui.datePicker({ id: String(Date.now()), ...options, defaultValue });
-        }
-        else {
-            // 年月日时分秒，4列
-            const div = document.createElement('div');
-            div.className = options.className;
-            ReactDOM.render(_jsx(AllTimePicker, { startDate: startDate, endDate: endDate, defaultDate: defaultDate, onAllTimeCallback: onAllTimeCallback }), div);
-            allTime.current = div;
-        }
-    };
-    const onAllTimeCallback = (result) => {
-        var _a;
-        const div = allTime.current;
-        const unmountResult = ReactDOM.unmountComponentAtNode(div);
-        if (unmountResult && div.parentNode) {
-            div.parentNode.removeChild(div);
-        }
-        if (result !== undefined && result.length > 0) {
-            const time = result[0] +
-                '-' +
-                result[1] +
-                '-' +
-                result[2] +
-                ' ' +
-                result[3] +
-                ':' +
-                result[4] +
-                ':' +
-                result[5];
-            setDate(time);
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
-                value: new Date(getIOSNotNaNDate(time)).getTime(),
-            });
-        }
-    };
-    // 默认日期设置表单事件，否则无法提交默认数据
-    React.useEffect(() => {
-        var _a;
-        if (isTime(defaultDate)) {
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
-                value: new Date(getIOSNotNaNDate(defaultDate)).getTime(),
-            });
-        }
-    }, [defaultDate]);
-    const onTimeClick = function () {
-        const options = {
-            className: 'weda-ui weda-picker',
-        };
-        !!time && (options.defaultTime = time);
-        !!startTime && (options.start = decodeIsoDatetime(startTime, 'time'));
-        !!endTime && (options.end = decodeIsoDatetime(endTime, 'time'));
-        timePicker({
-            ...options,
-            onConfirm(result) {
-                var _a;
-                const date = moment().hour(result[0].value).minute(result[1].value);
-                const value = date.format('HH:mm');
-                setTime(value);
-                (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
-                    value: (date.hour() * 60 * 60 + date.minute() * 60) * 1000,
-                });
-            },
-        });
-    };
-    let regionTimer;
-    const momentClick = async () => {
-        const cb = () => {
-            clearTimeout(regionTimer);
-            if (regionTree.length > 0) {
-                onRegionClick();
-            }
-            else {
-                // 轮询直到他不为空
-                // eslint-disable-next-line rulesdir/no-timer
-                setTimeout(cb, 200);
-            }
-        };
-        // 轮询直到他不为空
-        // eslint-disable-next-line rulesdir/no-timer
-        regionTimer = setTimeout(cb, 200);
-    };
-    const onRegionClick = function () {
-        let defaultValue = [];
-        if (mode == 'region') {
-            defaultRegion && defaultRegion.length <= 0
-                ? (defaultValue = ['北京市', '北京市', '东城区'])
-                : (defaultValue = defaultRegion);
-        }
-        else {
-            mutiRegion && mutiRegion.length <= 0
-                ? (defaultValue = ['北京市', '北京市', '东城区'])
-                : (defaultValue = mutiRegion);
-        }
-        regionPicker({
-            defaultValue: defaultValue,
-            depth: regioDepth,
-            onConfirm(result) {
-                var _a;
-                const value = result.map((item) => item.value);
-                mode == 'region' ? setRegion(value) : setMutiRegion(value);
-                const changeValue = mode == 'region' ? value : value.join(',');
-                onChange && onChange(changeValue);
-                (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
-                    value: changeValue,
-                    result: result.map((item) => {
-                        return {
-                            value: item === null || item === void 0 ? void 0 : item.value,
-                            code: item === null || item === void 0 ? void 0 : item.code,
-                        };
-                    }),
-                });
-            },
-            onChange() { },
-            className: 'weda-ui weda-picker',
-            id: new Date().valueOf(),
-        }, regionTree);
-    };
-    const onClick = async function () {
-        if (disabled) {
-            return;
-        }
-        switch (mode) {
-            case 'date': {
-                onDateclick();
-                break;
-            }
-            case 'time': {
-                onTimeClick();
-                break;
-            }
-            case 'region': {
-                momentClick();
-                break;
-            }
-            case 'mutiRegion': {
-                momentClick();
-                break;
-            }
-            default: {
-                break;
-            }
-        }
-    };
-    const result = React.useMemo(() => {
-        var _a;
-        let selectLabel = '';
-        selectLabel = (_a = (range !== null && range !== void 0 ? range : []).find((item) => item.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label;
-        return {
-            selector: selectLabel,
-            date: date,
-            time: time,
-            region: (region || []).join(separator),
-            mutiRegion: mutiRegion,
-        };
-    }, [range, selectedValue, date, time, region, separator, mutiRegion]);
-    const subCls = classNames({
-        'weui-cell': true,
-        'weui-cell_active': true,
-        'weui-cell_form': true,
-        'weui-flex__item': layout !== 'vertical',
-        'weui-cell_disabled': disabled,
-    });
-    let params = {
-        controlledValue: range,
-    };
-    if (format === 'father-son' || format === 'related') {
-        params = {
-            format,
-            dataSourceName,
-            viewId,
-            where,
-            primaryField,
-            controlledValue: range,
-        };
-    }
-    else if (format === 'x-enum') {
-        params = {
-            format,
-            enumName,
-            controlledValue: range,
-        };
-    }
-    if (mode === 'selector') {
-        return (_jsx(PureSelectH5, { className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, params: params, onChange: (value) => {
-                var _a;
-                setSelectedValue(value);
-                (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
-                onChange === null || onChange === void 0 ? void 0 : onChange(value);
-            } }));
-    }
-    return (_jsx("div", { className: subCls, children: _jsx("div", { className: "weui-cell__bd weui-flex", children: _jsx("input", { onClick: onClick, className: "weui-input", type: "select", name: name, placeholder: placeholder, value: (_a = result[mode]) !== null && _a !== void 0 ? _a : '', disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }) }) }));
-}
-export function decodeIsoDatetime(isoStringOrTimesnap, type, dateMode = 'day') {
-    if (!isoStringOrTimesnap) {
-        return null;
-    }
-    if (typeof isoStringOrTimesnap === 'string' &&
-        /^-?[0-9]*$/.test(isoStringOrTimesnap)) {
-        const timeSnap = Number(isoStringOrTimesnap);
-        if (!isNaN(timeSnap)) {
-            isoStringOrTimesnap = timeSnap;
-        }
-    }
-    if (type === 'time') {
-        const time = isoStringOrTimesnap.match &&
-            isoStringOrTimesnap.match(/^(\d{2}):(\d{2})$/);
-        if (time && time[1] < 24 && time[2] < 60) {
-            return moment().hour(time[1]).minute(time[2]).format('HH:mm');
-        }
-        else if (typeof isoStringOrTimesnap === 'number') {
-            const timeSnap = Number(isoStringOrTimesnap);
-            let day;
-            try {
-                day = moment()
-                    .hour(Math.floor(timeSnap / 3600000) % 24)
-                    .minute(Math.floor((timeSnap % 3600000) / 60000));
-            }
-            catch (e) {
-                day = moment(timeSnap);
-            }
-            return day.format('HH:mm');
-        }
-        else {
-            return moment(isoStringOrTimesnap).format('HH:mm');
-        }
-    }
-    else {
-        if (isoStringOrTimesnap.toString().length === 4) {
-            // 添加默认的日期，防止格式化日期异常
-            isoStringOrTimesnap = isoStringOrTimesnap + '-01-01 08:00:00';
-        }
-        if (!isTime(isoStringOrTimesnap)) {
-            return null;
-        }
-        return moment(isoStringOrTimesnap).format(getDateModeFormat(dateMode));
-    }
-}
-/**
- * 根据时间模式，构造 new Date()的传参格式单个日期和时间组件值
- */
-export const getFormatNewDateParams = (type, timeStr) => {
-    let value = [];
-    const time = timeStr.split('-');
-    switch (type) {
-        case 'year':
-            value = [time[0], 0, 1];
-            break;
-        case 'month':
-            value = [time[0], Number(time[1]) - 1, 1];
-            break;
-        case 'day':
-            value = [time[0], Number(time[1]) - 1, time[2]];
-            break;
-    }
-    return value;
-};
-/**
- * 根据时间模式，将 picker 返回的值转成对应的 年-月-日
- */
-export const formatDateModeValue = (result = [], dateMode = 'day') => {
-    var _a, _b, _c;
-    // eslint-disable-next-line prefer-const
-    let [year, month, day] = [
-        (_a = result[0]) === null || _a === void 0 ? void 0 : _a.value,
-        ((_b = result[1]) === null || _b === void 0 ? void 0 : _b.value) || 1,
-        ((_c = result[2]) === null || _c === void 0 ? void 0 : _c.value) || 1,
-    ];
-    if (dateMode === 'year') {
-        month = 1;
-        day = 1;
-    }
-    if (dateMode === 'month') {
-        day = 1;
-    }
-    const value = moment()
-        .year(year)
-        .month(month - 1)
-        .date(day)
-        .format(getDateModeFormat(dateMode));
-    return value;
-};
-/**
- * 不同时间模式对应的展示格式
- */
-export const getDateModeFormat = (dateMode = 'day') => {
-    switch (dateMode) {
-        case 'year':
-            return 'YYYY';
-        case 'month':
-            return 'YYYY-MM';
-        case 'day':
-            return 'YYYY-MM-DD';
-        case 'datetime':
-            return 'YYYY-MM-DD HH:mm:ss';
-        default:
-            return 'YYYY-MM-DD';
-    }
-};

package/dist/web/components/form/select/index.css

@@ -1,41 +0,0 @@
-.weda-ui .weui-cell.weui-check__label {
-  padding: 16px;
-}
-
-.weda-ui .weui-flex__item .weui-cell.weui-check__label {
-  padding-left: 0;
-}
-
-.year-picker__overlay {
-  width: 300px;
-}
-
-.year-picker__overlay .year-picker__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 700;
-}
-
-.weda-ui.weda-select .weui-cell_form {
-  padding: 0 16px;
-}
-
-.weda-ui.weda-select .weui-flex__item .weui-cell_form {
-  padding: 0;
-  padding-right: 16px;
-}
-
-.select-picker .weui-input-arrow {
-  margin: auto 0;
-  width: 24px;
-  height: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect opacity='0.01' width='24' height='24' fill='%23D8D8D8'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6003 12.5769L7.93943 20L6.99981 19.0875L14.3157 11.9986L6.99983 4.91249L7.93945 4L15.5754 11.3961C15.5858 11.4048 15.596 11.4139 15.6059 11.4235L15.8278 11.639C16.0302 11.8355 16.03 12.1605 15.8274 12.3568L15.6253 12.5526L15.6049 12.5725C15.6034 12.574 15.6018 12.5754 15.6003 12.5769Z' fill='black' fill-opacity='0.4'/%3E %3C/svg%3E ");
-}
-
-.weda-ui .wedatea2td-input:disabled {
-  background-color: inherit;
-}
-.select-region-pc .wedatea2td-cascader-menu--thin .wedatea2td-list > li {
-  padding: 10px 24px 10px 8px;
-}