@cloudbase/weda-ui 3.1.0 → 3.1.3

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

@@ -0,0 +1,504 @@
+import * as React from 'react';
+import weui from '../../../utils/weui';
+import classNames from '../../../utils/classnames';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { regionPicker, getRegionTree, getAreaCode } from './region/index';
+import { defaultProps, moment } from './index';
+import { timePicker, yearPicker, monthPicker } from './time';
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
+import { emptyObject } from '../../../utils/constant';
+import { getWhereList } from '../../../utils/platform';
+export default function Select({ 
+// 系统属性
+events = emptyObject, 
+// 组件属性
+name, placeholder, layout, mode, dateMode = 'day', disabled = false, 
+// selector mode
+range = defaultProps.range, where, primaryField, tipBlock, enumName, dataSourceName, viewId, format, defaultValue, 
+// date mode
+startDate, endDate, defaultDate, 
+// time mode
+startTime, endTime, defaultTime, 
+// region mode
+defaultRegion, defaultMutiRegion, regionType, separator, 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([]);
+    const [region, setRegion] = React.useState(defaultRegion);
+    const [mutiRegion, setMutiRegion] = React.useState([]);
+    const [typeRegion, setTypeRegion] = React.useState(regionType);
+    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+    const [option, setOption] = React.useState([{ label: '', value: '' }]);
+    const [records, setRecords] = React.useState([]);
+    // 两次默认值不同, 需要刷新
+    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 });
+        }
+    };
+    const regionTreeMode = React.useMemo(() => {
+        if (mode == 'region' || mode == 'mutiRegion') {
+            if (regionData.length < 1) {
+                getAreaCode().then((value) => {
+                    defaultMutiRegionChange(value, defaultMutiRegion);
+                    setRegionData(value);
+                    getRegionTree(value, regionType, mode).then((tree) => {
+                        setRegionTree(tree);
+                    });
+                });
+            }
+            else {
+                getRegionTree(regionData, regionType, mode).then((tree) => {
+                    setRegionTree(tree);
+                });
+            }
+        }
+        switch (regionType) {
+            case 'levelOne': {
+                setRegionDepth(1);
+                break;
+            }
+            case 'levelTwo': {
+                setRegionDepth(2);
+                break;
+            }
+            case 'levelThree': {
+                setRegionDepth(3);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }, [regionType, mode, regionData]);
+    React.useEffect(() => {
+        // tcb过滤参数
+        const whereEffected = [].concat(getWhereList(where));
+        if ((format === 'father-son' || format === 'related') &&
+            dataSourceName &&
+            viewId) {
+            fetchData({
+                dataSourceName: dataSourceName,
+                viewId: viewId,
+                methodName: 'wedaGetRecords',
+                params: whereEffected,
+            });
+        }
+    }, [where]);
+    // 获取数据列表中主列字段，将其作为选项
+    React.useEffect(() => {
+        var _a;
+        if (primaryField) {
+            if (records && records.length !== 0) {
+                const option = records.map((item) => {
+                    return {
+                        label: item[primaryField] || item._id,
+                        value: item._id,
+                    };
+                });
+                setOption(option);
+            }
+            else {
+                setOption([{ label: '', value: '' }]);
+                setSelectedValue('');
+                (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: '' });
+            }
+        }
+    }, [records]);
+    // 获取数据列表
+    const fetchData = async (param) => {
+        let pageNo = 1;
+        const pageSize = 200;
+        let records = [];
+        let total = 99999;
+        for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
+            const data = await callDataSource({
+                dataSourceName: param.dataSourceName,
+                viewId: param.viewId,
+                methodName: param.methodName,
+                params: {
+                    where: param.params,
+                    pageNo: pageNo,
+                    pageSize: pageSize,
+                },
+            });
+            pageNo = pageNo + 1;
+            if (data === null || data === void 0 ? void 0 : data.records) {
+                total = (data === null || data === void 0 ? void 0 : data.total) || 0;
+                records = records.concat(data === null || data === void 0 ? void 0 : data.records);
+            }
+        }
+        if (records) {
+            setRecords(records);
+        }
+    };
+    React.useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchEnumData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, [enumName]);
+    // 获取自定义选项集
+    const fetchEnumData = async (param) => {
+        var _a, _b;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        const config = (_b = destr((_a = data === null || data === void 0 ? void 0 : data.Items[0]) === null || _a === void 0 ? void 0 : _a.Config)) !== null && _b !== void 0 ? _b : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+            };
+        });
+        setOption(enumOption);
+    };
+    const isFlex = layout !== 'vertical';
+    const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_form': true,
+        'weui-flex__item': isFlex,
+        'weui-cell_disabled': disabled,
+    });
+    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);
+            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
+                value: new Date(...formatNewDateValue).getTime(),
+            });
+        };
+        if (dateMode === 'year') {
+            // 年，1 列
+            yearPicker({ ...options });
+        }
+        else if (dateMode === 'month') {
+            // 年月，2 列
+            monthPicker({ ...options });
+        }
+        else {
+            // 年月日，3 列
+            weui.datePicker({ id: String(Date.now()), ...options });
+        }
+    };
+    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,
+                });
+            },
+        });
+    };
+    const onSelect = function () {
+        if (format === 'father-son' ||
+            format === 'related' ||
+            format === 'x-enum') {
+            weui.picker(option, {
+                id: String(Date.now()),
+                defaultValue: [selectedValue || option[0].value],
+                onConfirm(result) {
+                    var _a;
+                    const item = result[0];
+                    setSelectedValue(item === null || item === void 0 ? void 0 : item.value);
+                    (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: item === null || item === void 0 ? void 0 : item.value });
+                },
+                className: 'weda-ui weda-picker',
+            });
+        }
+        else {
+            weui.picker(range, {
+                id: String(Date.now()),
+                defaultValue: [selectedValue || range[0].value],
+                onConfirm(result) {
+                    var _a;
+                    const item = result[0];
+                    setSelectedValue(item === null || item === void 0 ? void 0 : item.value);
+                    (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: item === null || item === void 0 ? void 0 : item.value });
+                },
+                className: 'weda-ui weda-picker',
+            });
+        }
+    };
+    let regionTimer;
+    const momentClick = async () => {
+        regionTimer = setInterval(() => {
+            setTimeout(() => {
+                if (regionTree.length != 0) {
+                    onRegionClick();
+                }
+            }, 0);
+        }, regionTree.length == 0 ? 500 : 0);
+    };
+    const onRegionClick = function () {
+        clearInterval(regionTimer);
+        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);
+                //const value=regionValueSplit(typeRegion,defaultvalue);
+                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(result) { },
+            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 'selector': {
+                onSelect();
+                break;
+            }
+            case 'region': {
+                momentClick();
+                break;
+            }
+            case 'mutiRegion': {
+                momentClick();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+    const result = React.useMemo(() => {
+        var _a, _b;
+        let selectLabel = '';
+        if (format === 'father-son' ||
+            format === 'related' ||
+            format === 'x-enum') {
+            selectLabel = (_a = (option !== null && option !== void 0 ? option : []).find((item) => item.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label;
+        }
+        else {
+            selectLabel = (_b = (range !== null && range !== void 0 ? range : []).find((item) => item.value === selectedValue)) === null || _b === void 0 ? void 0 : _b.label;
+        }
+        return {
+            selector: selectLabel,
+            date: date,
+            time: time,
+            region: (region || []).join(separator),
+            mutiRegion: mutiRegion,
+        };
+    }, [range, selectedValue, date, time, region, separator, mutiRegion, option]);
+    return (React.createElement("div", { className: subCls },
+        React.createElement("div", { className: "weui-cell__bd weui-flex" },
+            React.createElement("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 {
+        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';
+        default:
+            return 'YYYY-MM-DD';
+    }
+};

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

@@ -0,0 +1,27 @@
+.weda-ui .weui-cell.weui-check__label {
+  padding: 1.14286rem;
+}
+
+.weda-ui .weui-flex__item .weui-cell.weui-check__label {
+  padding-left: 0;
+}
+
+.year-picker__overlay {
+  width: 21.42857rem;
+}
+
+.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 1.14286rem;
+}
+
+.weda-ui.weda-select .weui-flex__item .weui-cell_form {
+  padding: 0;
+  padding-right: 1.14286rem;
+}

package/dist/web/components/form/select/index.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+export declare const moment: any;
+export default function Select(props: any): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    size: 's' | 'm' | 'l' | 'full';
+    placeholder: string;
+    mode: 'selector' | 'date' | 'time' | 'region' | 'mutiRegion';
+    dateMode: 'day' | 'month' | 'year';
+    range?: any[];
+    defaultValue?: string;
+    dataSourceName?: string;
+    viewId?: string;
+    enumName?: string;
+    format?: string;
+    primaryField?: string;
+    tipBlock?: any;
+    where?: {
+        groupLogic?: null | 'or' | 'and';
+        logicData?: {
+            keyType?: 'field' | 'var-font';
+            key: string;
+            rel: 'eq' | 'neq' | 'lt' | 'gt' | 'gte' | 'lte' | 'in' | 'nin' | 'search';
+            value: any;
+            valueType?: 'const' | 'var-font' | 'relative-amount' | 'field';
+            expression?: string | boolean;
+            logic?: null | 'or' | 'and' | string;
+            extra?: {
+                type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | string;
+                format?: string | null;
+                isExpression?: boolean;
+            };
+        }[];
+    }[];
+    startDate?: string;
+    endDate?: string;
+    defaultDate?: string;
+    startTime?: string;
+    endTime?: string;
+    defaultTime?: string | number;
+    defaultRegion?: any[];
+    regionType?: 'levelOne' | 'levelTwo' | 'levelThree';
+    separator?: string;
+    requiredFlag?: boolean;
+    regionTree?: any[];
+    defaultMutiRegion?: string;
+    onChange?: (v: any) => void;
+}
+export declare const defaultProps: {
+    events: {};
+    label: string;
+    size: "l";
+    labelVisible: boolean;
+    name: string;
+    placeholder: string;
+    layout: string;
+    mode: string;
+    disabled: boolean;
+    requiredFlag: boolean;
+    range: {
+        name: string;
+        value: string;
+    }[];
+    separator: string;
+};