@cloudbase/weda-ui 3.2.0 → 3.3.0

package/dist/src/web/components/form/select/index.js

@@ -0,0 +1,255 @@
+import * as React from 'react';
+import * as _moment from 'moment';
+import 'moment/locale/zh-cn';
+import { usePlatform } from '../../../utils/platform';
+import SelectH5, { decodeIsoDatetime } from './h5';
+import classNames from '../../../utils/classnames';
+import { DatePicker, TimePicker, Cascader, ConfigProvider, } from 'tea-component';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { renderDecorator } from '../renderDecorator';
+import YearPicker from './year';
+import { emptyObject } from '../../../utils/constant';
+import { PureSelectPc } from './dropdown-select/ui';
+import { useOptions } from './use-options';
+import { getRegionTree, getAreaCode } from './region';
+import { CommonErrorBoundary } from '../../common/error-boundary';
+import { useLoopRenderDetect } from '../../common/use-loop-render-detect';
+// @ts-ignore TODO: fix 与plugin构建阶段效果不同
+export const moment = (typeof _moment === 'function' ? _moment : _moment.default);
+export default function Select(props) {
+    return (React.createElement(CommonErrorBoundary, null,
+        React.createElement(SelectImpl, { ...props })));
+}
+function SelectImpl(props) {
+    const { id, style, className, label = '标题', labelVisible = true, layout = 'horizontal', requiredFlag = false, size = 'l', decorator, } = props;
+    const platform = usePlatform();
+    useLoopRenderDetect();
+    let selectEl;
+    if (platform === 'h5') {
+        selectEl = React.createElement(SelectH5, { ...props });
+    }
+    else {
+        selectEl = React.createElement(SelectPc, { ...props });
+    }
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-select': true,
+        [className]: className,
+    });
+    return renderDecorator(selectEl, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+        size,
+    });
+}
+export const defaultProps = {
+    // 系统属性
+    events: {},
+    // 组件属性
+    label: '标题',
+    size: 'l',
+    labelVisible: true,
+    name: 'formSelect',
+    placeholder: '请选择',
+    layout: 'horizontal',
+    mode: 'selector',
+    disabled: false,
+    requiredFlag: false,
+    // selector mode
+    range: [
+        { name: '选项1', value: '1' },
+        { name: '选项2', value: '2' },
+    ],
+    // region mode
+    separator: ',',
+};
+function SelectPc({ where, dataSourceName, viewId, format, primaryField, enumName, defaultValue, placeholder = '请选择', mode = 'selector', dateMode = 'day', events = emptyObject, disabled = false, range = defaultProps.range, startDate, endDate, defaultDate, defaultTime, startTime, endTime, defaultRegion, defaultMutiRegion, regionType, separator = defaultProps.separator, size = defaultProps.size, onChange, }) {
+    // 两次默认值不同, 需要刷新
+    const prevDefaultRef = React.useRef();
+    const [date, setDate] = React.useState(decodeIsoDatetime(defaultDate, 'date'));
+    const [time, setTime] = React.useState(decodeIsoDatetime(defaultTime, 'time'));
+    const [regionTree, setRegionTree] = React.useState([]);
+    const [regionData, setRegionData] = React.useState([]);
+    const [region, setRegion] = React.useState(defaultRegion || undefined);
+    const [mutiRegion, setMutiRegion] = React.useState(defaultMutiRegion != null ? defaultMutiRegion.split(',') : []);
+    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+    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,
+        };
+    }
+    const [options] = useOptions(params);
+    React.useEffect(() => {
+        var _a, _b, _c, _d, _e;
+        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) {
+            const ts = decodeIsoDatetime(defaultTime, 'time');
+            setTime(ts);
+            hasChange = true;
+        }
+        if (!isObjectEqual((_d = prevDefaultRef.current) === null || _d === void 0 ? void 0 : _d.defaultRegion, defaultRegion)) {
+            setRegion(defaultRegion || []); // region 有可能是空串
+            hasChange = true;
+        }
+        if (!isObjectEqual((_e = prevDefaultRef.current) === null || _e === void 0 ? void 0 : _e.defaultMutiRegion, defaultMutiRegion)) {
+            setMutiRegion(defaultMutiRegion ? defaultMutiRegion.split(',') : []);
+            hasChange = true;
+        }
+        if (hasChange) {
+            prevDefaultRef.current = {
+                defaultValue,
+                defaultDate,
+                defaultTime,
+                defaultRegion,
+                defaultMutiRegion,
+            };
+        }
+    }, [
+        defaultValue,
+        defaultDate,
+        defaultTime,
+        defaultRegion,
+        defaultMutiRegion,
+        dateMode,
+    ]);
+    React.useEffect(() => {
+        if (mode == 'region' || mode == 'mutiRegion') {
+            if (regionData.length < 1) {
+                getAreaCode().then((value) => {
+                    setRegionData(value);
+                    getRegionTree(value, regionType, mode).then((tree) => {
+                        setRegionTree(tree);
+                    });
+                });
+            }
+            else {
+                getRegionTree(regionData, regionType, mode).then((tree) => {
+                    setRegionTree(tree);
+                });
+            }
+        }
+        getRegionTree(regionData, regionType, mode).then((value) => {
+            setRegionTree(value);
+        });
+    }, [regionType, mode, regionData]);
+    const onDataChange = (value) => {
+        var _a;
+        let finalVal;
+        if (mode === 'date') {
+            finalVal = value.valueOf();
+        }
+        else if (mode === 'time') {
+            finalVal = (value.hour() * 60 * 60 + value.minute() * 60) * 1000;
+        }
+        else if (mode === 'region') {
+            finalVal = value !== null && value !== void 0 ? value : [];
+            setRegion(value);
+        }
+        else if (mode === 'mutiRegion') {
+            finalVal = value.join(',');
+            setMutiRegion(value);
+        }
+        else {
+            finalVal = value;
+        }
+        onChange && onChange(finalVal);
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: finalVal });
+    };
+    const sizeClassName = classNames({
+        [`size-${size}`]: size,
+    });
+    const createDropdown = () => {
+        switch (mode) {
+            case 'selector':
+                return (React.createElement(PureSelectPc, { disabled: disabled, size: size, onChange: (value) => {
+                        var _a;
+                        onChange && onChange(value);
+                        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
+                        setSelectedValue(value);
+                    }, value: selectedValue, placeholder: placeholder, options: options }));
+            case 'date': {
+                const now = moment();
+                const start = startDate
+                    ? decodeIsoDatetime(startDate, 'date')
+                    : `${now.year() - 20}-01-01`;
+                const end = endDate
+                    ? decodeIsoDatetime(endDate, 'date')
+                    : `${now.year() + 20}-12-31`;
+                const dateProps = {
+                    range: [moment(start), moment(end)],
+                    onChange: onDataChange,
+                    disabled,
+                    placeholder,
+                    value: date ? moment(date) : undefined,
+                    'data-testid': 'form-item-select',
+                    size,
+                };
+                if (dateMode === 'year') {
+                    return (React.createElement(YearPicker, { ...dateProps, range: [
+                            startDate && dateProps.range[0],
+                            endDate && dateProps.range[1],
+                        ] }));
+                }
+                else if (dateMode === 'month') {
+                    return (React.createElement(DatePicker.MonthPicker, { className: sizeClassName, ...dateProps }));
+                }
+                else if (dateMode === 'datetime') {
+                    const startFormat = decodeIsoDatetime(startDate, 'date', 'datetime');
+                    const endFormat = decodeIsoDatetime(endDate, 'date', 'datetime');
+                    return (React.createElement(DatePicker, { showTime: true, className: sizeClassName, ...dateProps, range: [
+                            moment(startFormat, 'YYYY-MM-DD HH:mm:ss'),
+                            moment(endFormat, 'YYYY-MM-DD HH:mm:ss'),
+                        ] }));
+                }
+                else {
+                    return React.createElement(DatePicker, { className: sizeClassName, ...dateProps });
+                }
+            }
+            case 'time': {
+                const start = startTime
+                    ? decodeIsoDatetime(startTime, 'time')
+                    : '00:00';
+                const end = endTime ? decodeIsoDatetime(endTime, 'time') : '23:59';
+                return (React.createElement(TimePicker, { className: sizeClassName, onChange: onDataChange, disabled: disabled, placeholder: placeholder, value: time ? moment(time, 'HH:mm') : undefined, range: [moment(start, 'HH:mm'), moment(end, 'HH:mm')], format: "HH:mm" }));
+            }
+            case 'region':
+                return (React.createElement(Cascader, { clearable: true, searchable: true, type: "menu", disabled: disabled, data: regionTree, multiple: false, onChange: onDataChange, className: sizeClassName, valueRender: (options) => options.map(({ label, value }, index) => (React.createElement(React.Fragment, { key: `${value}-${index}` },
+                        index !== 0 && `${separator}`,
+                        label || value))), value: region }));
+            case 'mutiRegion':
+                return (React.createElement(Cascader, { clearable: true, searchable: true, className: sizeClassName, type: "menu", disabled: disabled, data: regionTree, multiple: false, onChange: onDataChange, valueRender: (options) => options.map(({ label, value }, index) => (React.createElement(React.Fragment, { key: `${value}-${index}` },
+                        index !== 0 && ',',
+                        label || value))), value: mutiRegion }));
+        }
+    };
+    const dropdown = createDropdown();
+    return React.createElement(ConfigProvider, { classPrefix: "wedatea2td" }, dropdown);
+}

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

@@ -0,0 +1,6 @@
+export declare function getRegionTree(regionData: any, regionType: any, regionMode: any): Promise<any>;
+export declare function regionPicker(options: any, regionTree: any[]): void;
+/**
+ * 获取运行态地区数据
+ */
+export declare function getAreaCode(): Promise<any>;

package/dist/src/web/components/form/select/region/index.js

@@ -0,0 +1,147 @@
+import weui from '../../../../utils/weui';
+import { callWedaApi } from '../../../../utils/tcb';
+let tree;
+export async function getRegionTree(regionData, regionType, regionMode) {
+    tree = [];
+    tree = formatTreeData(regionData, regionType, regionMode);
+    return tree;
+}
+export function regionPicker(options, regionTree) {
+    const weRegionTree = regionTree.length == 0
+        ? [
+            {
+                label: '地区数据加载中，请关闭弹窗后重试',
+                value: null,
+                children: null,
+            },
+        ]
+        : regionTree;
+    weui.picker(weRegionTree, options);
+}
+/**
+ * 获取运行态地区数据
+ */
+export async function getAreaCode() {
+    try {
+        const res = await callWedaApi({
+            action: 'QueryRuntimeAreaCode',
+            data: { Mask: '11100' },
+        });
+        return res === null || res === void 0 ? void 0 : res.AreaCodeList;
+    }
+    catch (error) {
+        console.error('错误', error);
+        return {};
+    }
+}
+/**
+ * 构建树形结构
+ */
+function formatTreeData(arr, regionType, regionMode) {
+    const provicesData = [];
+    arr.forEach((item) => {
+        //省数据集合
+        if ((item === null || item === void 0 ? void 0 : item.Type) == 1 && (item === null || item === void 0 ? void 0 : item.Deprecated) == false) {
+            provicesData.push({
+                label: item.Value,
+                value: item.Value,
+                code: item.Code,
+                type: item.Type,
+                centralCity: item.CentralCity,
+                children: regionType != 'levelOne' || regionMode == 'region'
+                    ? [
+                        {
+                            label: item.Value,
+                            value: item.Value,
+                            code: item.Code,
+                            type: item.Type,
+                            children: regionType != 'levelTwo' || regionMode == 'region'
+                                ? [
+                                    {
+                                        label: item.Value,
+                                        value: item.Value,
+                                        code: item.Code,
+                                        type: item.Type,
+                                        centralCity: item.CentralCity,
+                                    },
+                                ]
+                                : null,
+                        },
+                    ]
+                    : null,
+            });
+        }
+    });
+    if (regionType != 'levelOne' || regionMode == 'region') {
+        arr.forEach((item) => {
+            //市数据集合
+            if ((item === null || item === void 0 ? void 0 : item.Type) == 2 && (item === null || item === void 0 ? void 0 : item.Deprecated) == false) {
+                provicesData.map((provice) => {
+                    if (provice.code.substr(0, 2) == item.Code.substr(0, 2)) {
+                        if (provice['children'][0].type == 1) {
+                            provice['children'] = [];
+                        }
+                        provice['children'].push({
+                            label: item.Value,
+                            value: item.Value,
+                            code: item.Code,
+                            type: item.Type,
+                            centralCity: item.CentralCity,
+                            children: regionType != 'levelTwo' || regionMode == 'region'
+                                ? [
+                                    {
+                                        label: item.Value,
+                                        value: item.Value,
+                                        code: item.Code,
+                                        type: item.Type,
+                                        centralCity: item.CentralCity,
+                                    },
+                                ]
+                                : null,
+                        });
+                    }
+                });
+            }
+        });
+        if (regionType != 'levelTwo' || regionMode == 'region') {
+            arr.forEach((item) => {
+                //区数据集合
+                if ((item === null || item === void 0 ? void 0 : item.Type) == 3 && (item === null || item === void 0 ? void 0 : item.Deprecated) == false) {
+                    provicesData.map((provice) => {
+                        if (provice.centralCity) {
+                            provice.children.map((city) => {
+                                if (city.code.substr(0, 2) == item.Code.substr(0, 2)) {
+                                    if (city['children'][0].type == 1) {
+                                        city['children'] = [];
+                                    }
+                                    city['children'].push({
+                                        label: item.Value,
+                                        value: item.Value,
+                                        code: item.Code,
+                                        //type:item.Type
+                                    });
+                                }
+                            });
+                        }
+                        else {
+                            provice.children.map((city) => {
+                                if (city.code.substr(0, 4) == item.Code.substr(0, 4)) {
+                                    if (city['children'][0].type == 2) {
+                                        city['children'] = [];
+                                    }
+                                    city['children'].push({
+                                        label: item.Value,
+                                        value: item.Value,
+                                        code: item.Code,
+                                        //type:item.Type
+                                    });
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
+    return provicesData;
+}

package/dist/src/web/components/form/select/time.d.ts

@@ -0,0 +1,9 @@
+export function timePicker(options: any): void;
+/**
+ * 年选择器
+ */
+export function yearPicker(options: any): void;
+/**
+ * 年月选择器
+ */
+export function monthPicker(options: any): void;

package/dist/src/web/components/form/select/time.js

@@ -0,0 +1,146 @@
+import weui from '../../../utils/weui';
+export function timePicker(options) {
+    const { start, end, defaultTime } = options;
+    // start time
+    const [startHour, startMin] = (start || '00:00').split(':');
+    const startTime = parseInt(startHour) * 60 + parseInt(startMin);
+    // end time
+    const [endHour, endMin] = (end || '23:59').split(':');
+    const endTime = parseInt(endHour) * 60 + parseInt(endMin);
+    if (startTime > endTime) {
+        throw 'startTime is bigger then endTime';
+    }
+    // init time
+    const nowTime = new Date();
+    const [initHour, initMin] = (defaultTime || `${nowTime.getHours()}:${nowTime.getMinutes()}`).split(':');
+    const initTime = parseInt(initHour) * 60 + parseInt(initMin);
+    const fixInitTime = Math.max(startTime, Math.min(endTime, initTime));
+    const fixInitHour = Math.floor(fixInitTime / 60);
+    const fixInitMin = Math.floor(fixInitTime % 60);
+    const hours = [];
+    for (let hour = 0; hour < 24; hour++) {
+        const mins = [];
+        for (let min = 0; min < 60; min++) {
+            const now = hour * 60 + min;
+            if (now >= startTime && now <= endTime) {
+                mins.push({
+                    value: min < 10 ? `0${min}` : `${min}`,
+                    label: min < 10 ? `0${min}` : `${min}`,
+                });
+            }
+        }
+        if (mins.length > 0) {
+            hours.push({
+                value: hour < 10 ? `0${hour}` : `${hour}`,
+                label: hour < 10 ? `0${hour}` : `${hour}`,
+                children: mins,
+            });
+        }
+    }
+    const defaultValue = [
+        fixInitHour < 10 ? `0${fixInitHour}` : `${fixInitHour}`,
+        fixInitMin < 10 ? `0${fixInitMin}` : `${fixInitMin}`,
+    ];
+    weui.picker(hours, {
+        ...options,
+        id: String(Date.now()),
+        start: [startHour, startMin],
+        end: [endHour, endMin],
+        defaultValue,
+    });
+}
+/**
+ * 年选择器
+ */
+export function yearPicker(options) {
+    const { startDate, endDate, defaultDate } = options;
+    if (startDate > endDate) {
+        throw 'startDate is bigger then endDate';
+    }
+    // 当前年
+    const currentYear = new Date().getFullYear();
+    // 默认传入年
+    const defaultYear = defaultDate
+        ? new Date(defaultDate).getFullYear()
+        : currentYear;
+    // 最小年份
+    const minYear = startDate
+        ? new Date(startDate).getFullYear()
+        : currentYear - 100;
+    // 最大年份
+    const maxYear = endDate ? new Date(endDate).getFullYear() : currentYear + 100;
+    const years = Array.from({ length: maxYear - minYear + 1 }).map((item, index) => ({
+        label: `${minYear + index}年`,
+        value: minYear + index,
+    }));
+    weui.picker(years, {
+        ...options,
+        defaultValue: [defaultYear],
+    });
+}
+/**
+ * 年月选择器
+ */
+export function monthPicker(options) {
+    const { startDate, endDate, defaultDate } = options;
+    if (startDate > endDate) {
+        throw 'startDate is bigger then endDate';
+    }
+    /**
+     *
+     * @param {Date} d
+     * @returns number
+     */
+    const _getYear = (d) => d.getFullYear();
+    /**
+     *
+     * @param {Date} d
+     * @returns number
+     */
+    const _getMonth = (d) => d.getMonth() + 1;
+    // 当前年月
+    const now = new Date();
+    const currentYear = _getYear(now);
+    // 默认传入年月
+    const def = defaultDate ? new Date(defaultDate) : now;
+    const [defaultYear, defaultMonth] = [_getYear(def), _getMonth(def)];
+    // 最小年月
+    const min = startDate && new Date(startDate);
+    const [minYear, minMonth] = [
+        min ? _getYear(min) : currentYear - 100,
+        min ? _getMonth(min) : 1,
+    ];
+    // 最大年月
+    const max = endDate && new Date(endDate);
+    const [maxYear, maxMonth] = [
+        max ? _getYear(max) : currentYear + 100,
+        max ? _getMonth(max) : 12,
+    ];
+    // 年份月份
+    const years = Array.from({ length: maxYear - minYear + 1 }).map((item, i) => {
+        const year = i + minYear;
+        let months = [];
+        let [minMonthWithYear, maxMonthWithYear] = [1, 12];
+        if (year === minYear) {
+            minMonthWithYear = Math.max(minMonth, 1);
+        }
+        if (year === maxYear) {
+            maxMonthWithYear = Math.min(maxMonth, 12);
+        }
+        months = Array.from({
+            length: maxMonthWithYear - minMonthWithYear + 1,
+        }).map((item, i) => ({
+            label: `${i + minMonthWithYear}月`,
+            value: i + minMonthWithYear,
+        }));
+        return {
+            label: `${i + minYear}年`,
+            value: i + minYear,
+            children: months,
+        };
+    });
+    weui.picker(years, {
+        ...options,
+        defaultValue: [defaultYear, defaultMonth],
+    });
+}

package/dist/src/web/components/form/select/use-options.d.ts

@@ -0,0 +1,26 @@
+declare type OptionItem = {
+    label: string;
+    value: string;
+};
+declare type IRelationFetchOptions = {
+    format: 'father-son' | 'related';
+    viewId: string;
+    dataSourceName: string;
+    where: unknown;
+    primaryField: string;
+    controlledValue: OptionItem[];
+};
+declare type IEnumFetchOptions = {
+    format: 'x-enum';
+    enumName: string;
+    controlledValue: OptionItem[];
+};
+export declare type IUseoptionsParams = (IRelationFetchOptions | IEnumFetchOptions | {
+    format?: string;
+    controlledValue: OptionItem[];
+}) & {
+    callWedaApi?: (params: any) => Promise<any> | any;
+    callDataSource?: (params: any) => Promise<any>;
+};
+export declare function useOptions(params: IUseoptionsParams): [options: OptionItem[]];
+export {};