@cloudbase/weda-ui 3.2.0 → 3.3.0

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

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Radio as TeaRadio } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import classNames from '../../../utils/classnames';
+import getLocalCounter from '../../../utils/getLocalCounter';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { callWedaApi } from '../../../utils/tcb';
+import './index.css';
+import { renderDecorator } from '../renderDecorator';
+import destr from 'destr';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+export default function Radio({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+label = '标题', labelVisible = true, format = '', enumName = '', name = 'formRadio', range = emptyArray, layout = 'horizontal', disabled = false, requiredFlag = false, decorator, }) {
+    var _a;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-radio': true,
+        [className]: className,
+    });
+    const subCls = classNames({
+        'weui-cell': isH5,
+        'weui-cell_active': isH5,
+        'weui-check__label': isH5,
+        'weui-cell_disabled': isH5 && disabled,
+    });
+    const [option, setOption] = useState(range);
+    const [checkedItemValue, setCheckedItemValue] = React.useState((_a = option.find((item) => item.checked)) === null || _a === void 0 ? void 0 : _a.value);
+    // 两次range不同时, 需要刷新checkedItemValue
+    const prevRangeRef = React.useRef();
+    React.useEffect(() => {
+        var _a;
+        if (!isObjectEqual(prevRangeRef.current, option)) {
+            prevRangeRef.current = option;
+            setCheckedItemValue((_a = option.find((item) => item.checked)) === null || _a === void 0 ? void 0 : _a.value);
+        }
+    }, [option]);
+    useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, [enumName, format]);
+    useEffect(() => {
+        if (format !== 'x-enum') {
+            setOption(range);
+        }
+    }, [format, range]);
+    const fetchData = async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+                checked: false,
+            };
+        });
+        setOption(enumOption);
+    };
+    /**
+     * 在ios h5端, label和input的绑定不生效
+     * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
+     */
+    const getChangeHandler = function (value) {
+        const onChange = function (e) {
+            e.stopPropagation();
+            if (!disabled) {
+                setCheckedItemValue(value);
+                events.change({ value }, { originEvent: e });
+            }
+        };
+        return onChange;
+    };
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = React.useMemo(() => getLocalCounter(), []);
+    let radioElement;
+    if (isH5) {
+        radioElement = option.map(({ label, value }, index) => {
+            const _id = `radio-${hashcode}-${index}`;
+            const _name = `radio-${hashcode}-${name}`;
+            return (React.createElement("div", { className: subCls, key: _id, onClickCapture: getChangeHandler(value) },
+                React.createElement("div", { className: "weui-cell__hd" },
+                    React.createElement("input", { type: "radio", className: "weui-check", value: value, name: _name, id: _id, checked: checkedItemValue === value, disabled: disabled, onClick: (e) => e.stopPropagation() }),
+                    React.createElement("i", { className: "weui-icon-checked" })),
+                React.createElement("div", { className: "weui-cell__bd" },
+                    React.createElement("p", null, label))));
+        });
+    }
+    else {
+        // pc
+        radioElement = (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(TeaRadio.Group, { disabled: disabled, value: checkedItemValue, onChange: (value, { event }) => getChangeHandler(value)(event) }, option.map(({ value, label }, index) => {
+                const _id = `radio-${hashcode}-${index}`;
+                return (React.createElement(TeaRadio, { key: _id, name: value, id: _id }, label));
+            }))));
+    }
+    return renderDecorator(radioElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: true,
+        requiredFlag,
+    });
+}

package/dist/src/web/components/form/renderDecorator.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ *
+ * @returns {(props: any) => JSX.Element}
+ */
+export declare function renderDecorator<D = any>(filedNode: React.ReactNode, DecoratorComponent?: React.FC<D>): (decoratorProps: any) => JSX.Element;

package/dist/src/web/components/form/renderDecorator.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import FormCell from './formcell';
+/**
+ *
+ * @returns {(props: any) => JSX.Element}
+ */
+export function renderDecorator(filedNode, DecoratorComponent = FormCell) {
+    if (!DecoratorComponent) {
+        return function WedaFormField() {
+            return React.createElement(React.Fragment, null, filedNode);
+        };
+    }
+    return function WedaFormFiled(decoratorProps) {
+        if (Array.isArray(DecoratorComponent) && DecoratorComponent.length === 2) {
+            decoratorProps = DecoratorComponent[1];
+            DecoratorComponent = DecoratorComponent[0];
+        }
+        return (React.createElement(DecoratorComponent, { ...decoratorProps }, filedNode));
+    };
+}

package/dist/src/web/components/form/select/allTimePicker/calendar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import './calendar.css';
+/**
+ * 日历组件
+ */
+export default function Calendar({ startTime, endTime, selectYear, selectMonth, setCurrentDay, defaultSelectDay, }: {
+    startTime: any;
+    endTime: any;
+    selectYear: any;
+    selectMonth: any;
+    setCurrentDay: any;
+    defaultSelectDay: any;
+}): JSX.Element;

package/dist/src/web/components/form/select/allTimePicker/calendar.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import './calendar.css';
+import { weeks } from './dataUtils';
+/**
+ * 日历组件
+ */
+export default function Calendar({ startTime, endTime, selectYear, selectMonth, setCurrentDay, defaultSelectDay, }) {
+    const [selectDay, setSelectDay] = React.useState(new Date().getDate());
+    /**
+     * 设置默认数据
+     */
+    const fnDaysSpliceWeeks = (number, len = 7) => {
+        const arrLen = Math.ceil(number.length / len);
+        const newArr = [];
+        for (let i = 0; i < arrLen; i++) {
+            newArr.push(number.slice(i * len, (i + 1) * len));
+        }
+        return newArr;
+    };
+    const days = () => {
+        const selectYearNumber = parseInt(selectYear);
+        const selectMonthNumber = parseInt(selectMonth);
+        const firstDay = new Date(selectYearNumber, selectMonthNumber - 1, 1);
+        const lastDay = new Date(selectYearNumber, selectMonthNumber, 0);
+        const arr = [];
+        for (let i = 1; i <= firstDay.getDay(); i++) {
+            arr.push('');
+        }
+        for (let i = 1; i <= lastDay.getDate(); i++) {
+            arr.push(i + '');
+        }
+        for (let i = 1; i <= 6 - lastDay.getDay(); i++) {
+            arr.push('');
+        }
+        return arr;
+    };
+    // 日历翻页触发改变
+    React.useEffect(() => {
+        setSelectDay(defaultSelectDay);
+    }, [defaultSelectDay]);
+    /**
+     * 选择天数
+     */
+    const dayClick = (item) => {
+        // 没有开始和结束时间
+        if (startTime.length === 0 && endTime.length === 0) {
+            setSelectDay(item);
+            setCurrentDay(item);
+            return;
+        }
+        const current = parseInt(item);
+        const year = parseInt(selectYear);
+        const month = parseInt(selectMonth);
+        // 匹配到开始时间
+        if (startTime.length > 0 &&
+            startTime[0] === year &&
+            startTime[1] === month) {
+            if (startTime[2] <= current) {
+                setSelectDay(item);
+                setCurrentDay(item);
+            }
+            return;
+        }
+        // 匹配到开结束时间
+        if (endTime.length > 0 && endTime[0] === year && endTime[1] === month) {
+            if (endTime[2] >= current) {
+                setSelectDay(item);
+                setCurrentDay(item);
+            }
+            return;
+        }
+        // 在开始时间和结束时间之间
+        setSelectDay(item);
+        setCurrentDay(item);
+    };
+    return (React.createElement("div", { className: "weda-ui-custom-calendar" },
+        React.createElement("div", { className: " weda-ui-custom-calendar__weeks" }, weeks.map((week, index) => (React.createElement("span", { key: index, className: "weda-ui-custom-calendar__weeks-item" }, week)))),
+        React.createElement("div", { className: "weda-ui-custom-calendar__days" }, fnDaysSpliceWeeks(days(), 7).map((day, index) => {
+            return (React.createElement("div", { key: index, className: "weda-ui-custom-calendar__days-row" }, day.map((item, index) => {
+                let canStartSelect = true;
+                let canEndSelect = true;
+                const selectYearNumber = parseInt(selectYear);
+                const selectMonthNumber = parseInt(selectMonth);
+                if (startTime.length > 0 && item !== '') {
+                    if (startTime[0] === selectYearNumber &&
+                        startTime[1] === selectMonthNumber) {
+                        canStartSelect = parseInt(item) >= startTime[2];
+                    }
+                }
+                if (endTime.length > 0 && item !== '') {
+                    if (endTime[0] === selectYearNumber &&
+                        endTime[1] === selectMonthNumber) {
+                        canEndSelect = parseInt(item) <= endTime[2];
+                    }
+                }
+                return (React.createElement("span", { key: index, "data-testid": "allTime-click-day", className: `weda-ui-custom-calendar__days-item ${item == selectDay ? 'is-current' : ''} ${!canEndSelect || !canStartSelect ? 'no-select' : ''}`, onClick: () => {
+                        if (item === '') {
+                            return;
+                        }
+                        dayClick(parseInt(item));
+                    } }, item));
+            })));
+        }))));
+}

package/dist/src/web/components/form/select/allTimePicker/dataUtils.d.ts

@@ -0,0 +1,24 @@
+export declare const weeks: string[];
+export declare const defaultData: () => {
+    id: string;
+    value: any[];
+}[];
+export declare const defaultDateTime: {
+    id: string;
+    value: string[];
+}[];
+export declare const getIndex: (index: any) => any;
+export declare const getLast: (index: any, array: any) => any;
+export declare const getFormatData: (data: any) => any;
+/**
+ * 动态获取日期时间数组的下标
+ */
+export declare const getCurrentYearIndex: () => any;
+export declare const getCurrentMonthIndex: () => any;
+export declare const getCurrentHoursIndex: () => any;
+export declare const getCurrentMinutesIndex: () => any;
+export declare const getCurrentSecondsIndex: () => number;
+export declare const isSpace: (str: any) => boolean;
+export declare const getIOSNotNaNDate: (data: any) => any;
+export declare const getLastDate: () => string;
+export declare const getStartDate: () => string;

package/dist/src/web/components/form/select/allTimePicker/dataUtils.js

@@ -0,0 +1,265 @@
+export const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+export const defaultData = () => {
+    const year = [];
+    for (let i = 0; i < 500; i++) {
+        year.push(1900 + i + '年');
+    }
+    return [
+        {
+            id: 'column1',
+            value: [' ', ' ', ...year, ' ', ' '],
+        },
+        {
+            id: 'column2',
+            value: [
+                ' ',
+                ' ',
+                '01月',
+                '02月',
+                '03月',
+                '04月',
+                '05月',
+                '06月',
+                '07月',
+                '08月',
+                '09月',
+                '10月',
+                '11月',
+                '12月',
+                ' ',
+                ' ',
+            ],
+        },
+    ];
+};
+export const defaultDateTime = [
+    {
+        id: 'column1',
+        value: [
+            ' ',
+            ' ',
+            '00时',
+            '01时',
+            '02时',
+            '03时',
+            '04时',
+            '05时',
+            '06时',
+            '07时',
+            '08时',
+            '09时',
+            '10时',
+            '11时',
+            '12时',
+            '13时',
+            '14时',
+            '15时',
+            '16时',
+            '17时',
+            '18时',
+            '19时',
+            '20时',
+            '21时',
+            '22时',
+            '23时',
+            ' ',
+            ' ',
+        ],
+    },
+    {
+        id: 'column2',
+        value: [
+            ' ',
+            ' ',
+            '00分',
+            '01分',
+            '02分',
+            '03分',
+            '04分',
+            '05分',
+            '06分',
+            '07分',
+            '08分',
+            '09分',
+            '10分',
+            '11分',
+            '12分',
+            '13分',
+            '14分',
+            '15分',
+            '16分',
+            '17分',
+            '18分',
+            '19分',
+            '20分',
+            '21分',
+            '22分',
+            '23分',
+            '24分',
+            '25分',
+            '26分',
+            '27分',
+            '28分',
+            '29分',
+            '30分',
+            '31分',
+            '32分',
+            '33分',
+            '34分',
+            '35分',
+            '36分',
+            '37分',
+            '38分',
+            '39分',
+            '40分',
+            '41分',
+            '42分',
+            '43分',
+            '44分',
+            '45分',
+            '46分',
+            '47分',
+            '48分',
+            '49分',
+            '50分',
+            '51分',
+            '52分',
+            '53分',
+            '54分',
+            '55分',
+            '56分',
+            '57分',
+            '58分',
+            '59分',
+            ' ',
+            ' ',
+        ],
+    },
+    {
+        id: 'column3',
+        value: [
+            ' ',
+            ' ',
+            '00秒',
+            '01秒',
+            '02秒',
+            '03秒',
+            '04秒',
+            '05秒',
+            '06秒',
+            '07秒',
+            '08秒',
+            '09秒',
+            '10秒',
+            '11秒',
+            '12秒',
+            '13秒',
+            '14秒',
+            '15秒',
+            '16秒',
+            '17秒',
+            '18秒',
+            '19秒',
+            '20秒',
+            '21秒',
+            '22秒',
+            '23秒',
+            '24秒',
+            '25秒',
+            '26秒',
+            '27秒',
+            '28秒',
+            '29秒',
+            '30秒',
+            '31秒',
+            '32秒',
+            '33秒',
+            '34秒',
+            '35秒',
+            '36秒',
+            '37秒',
+            '38秒',
+            '39秒',
+            '40秒',
+            '41秒',
+            '42秒',
+            '43秒',
+            '44秒',
+            '45秒',
+            '46秒',
+            '47秒',
+            '48秒',
+            '49秒',
+            '50秒',
+            '51秒',
+            '52秒',
+            '53秒',
+            '54秒',
+            '55秒',
+            '56秒',
+            '57秒',
+            '58秒',
+            '59秒',
+            ' ',
+            ' ',
+        ],
+    },
+];
+const currentData = new Date();
+export const getIndex = (index) => {
+    return index < 2 ? 2 : index;
+};
+export const getLast = (index, array) => {
+    return index < 0 ? array.length - 1 : index;
+};
+export const getFormatData = (data) => {
+    return data < 10 ? '0' + data : data;
+};
+/**
+ * 动态获取日期时间数组的下标
+ */
+export const getCurrentYearIndex = () => {
+    const year = currentData.getFullYear();
+    return getIndex(defaultData()[0].value.indexOf(getFormatData(year) + '年'));
+};
+export const getCurrentMonthIndex = () => {
+    const month = currentData.getMonth() + 1;
+    return getIndex(defaultData()[1].value.indexOf(getFormatData(month) + '月'));
+};
+export const getCurrentHoursIndex = () => {
+    const hours = currentData.getHours();
+    return getIndex(defaultDateTime[0].value.indexOf(getFormatData(hours) + '时'));
+};
+export const getCurrentMinutesIndex = () => {
+    const minutes = currentData.getMinutes();
+    return getIndex(defaultDateTime[1].value.indexOf(getFormatData(minutes) + '分'));
+};
+export const getCurrentSecondsIndex = () => {
+    const seconds = currentData.getSeconds();
+    return defaultDateTime[2].value.indexOf(getFormatData(seconds) + '秒');
+};
+export const isSpace = (str) => {
+    const reg = /^\s+$/g;
+    const re = new RegExp(reg);
+    return re.test(str);
+};
+export const getIOSNotNaNDate = (data) => {
+    if (!data || typeof data === 'number') {
+        return data;
+    }
+    return data.replace(/-/g, '/');
+};
+export const getLastDate = () => {
+    const date = defaultData();
+    const year = date[0].value[date[0].value.length - 3].replace('年', '');
+    const month = 12;
+    const day = new Date(year, 11, 0).getDate();
+    return year + '-' + month + '-' + day + ' ' + '59:59:59';
+};
+export const getStartDate = () => {
+    const date = defaultData();
+    const year = date[0].value[2].replace('年', '');
+    const month = '01';
+    const day = '01';
+    return year + '-' + month + '-' + day + ' ' + '00:00:00';
+};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../../types';
+import './index.css';
+/**
+ *  年月日时分秒日期选择器
+ */
+export default function AllTimePicker({ startDate, endDate, defaultDate, title, onAllTimeCallback, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    title?: string;
+    startDate?: string;
+    endDate?: string;
+    defaultDate?: string;
+    onAllTimeCallback: (val: string[]) => void;
+}