@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.2

package/dist/web/components/form/location/components/LocationPC/location.PC.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+import classNames from '../../../../../utils/classnames';
+import weui from '../../../../../utils/weui';
+import { renderDecorator } from '../../../renderDecorator';
+import MapView from '../../common/mapView';
+import SelectModal from '../../common/selectModal';
+import useLocationInfo from '../../common/useLocationInfo';
+import { propTypes, defaultProps } from '../../common/propsConfig';
+import { callDataSource } from '../../../../../utils/tcb';
+import Header from './Header';
+import { useRecycle } from '../../../../../utils/hooks/useRecycle';
+import { errorHandler } from '../../../../../utils/error';
+import './style';
+const { useState, useEffect, useRef } = React;
+export default function LocationPC(props) {
+    // 属性、变量
+    const { 
+    // 系统属性
+    id, className, style, events, 
+    // 组件属性
+    value, label, labelVisible, locationType, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, dataSource, layout, locationRange, customRange, onChange, readOnly, placeholder, } = props;
+    const cls = classNames({
+        'weda-ui': true,
+        cloudbase_standard: true,
+        [className]: className,
+    });
+    const { recycleBack } = useRecycle(); // 回调到最外层组件
+    const [isSelectMapVisible, setIsSelectMapVisible] = useState(false);
+    const [dataSourceStatus, setDataSourceStatus] = useState({
+        status: false,
+        message: '定位功能初始化中，请稍后重试',
+    });
+    const [userSelectStatus, setUserSelectStatus] = useState('');
+    const [APIKEY, setAPIKEY] = useState('');
+    const initRef = useRef(true); // 确保只执行一次；
+    const eventsChange = (value) => {
+        if (locationType !== 2 && initRef.current)
+            return;
+        initRef.current = false;
+        const { poiname, detailedAddress, latitude, longitude } = value;
+        const param = {
+            poiname,
+            detailedAddress,
+            latlng: { lng: longitude, lat: latitude },
+        };
+        onChangeLocation(param);
+        recycleBack(true);
+    };
+    const { location, setLocation, apiKeyStatus, setApiKeyStatus, currentLocStatus, currentLocations, customLocation, checkCustomLocation, } = useLocationInfo({
+        apiKey: APIKEY,
+        locationType,
+        dataSourceStatus,
+        eventsChange,
+    });
+    useEffect(() => {
+        if (checkCustomLocation(value)) {
+            // 表单为新增时回传点位信息
+            const { address, detailedAddress, geopoint } = value;
+            const coordinates = (geopoint === null || geopoint === void 0 ? void 0 : geopoint.coordinates) || [];
+            let loc = {
+                poiname: address,
+                detailedAddress: detailedAddress,
+                latlng: { lng: coordinates[0], lat: coordinates[1] },
+            };
+            customLocation.current = value;
+            setLocation(loc);
+            setUserSelectStatus('selected');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (value || !currentLocations.current)
+            return;
+        setUserSelectStatus('');
+        // 重置表单时
+        const { poiname, detailedAddress, latlng: { lat, lng }, } = currentLocations.current;
+        let location = {
+            poiname,
+            detailedAddress,
+            latlng: { lat, lng },
+        };
+        if (locationType === 1) {
+            location.locationType = 1;
+        }
+        setLocation(location);
+    }, [value, locationType]);
+    const showToast = (message) => {
+        weui.toast(message, {
+            duration: 3000,
+            className: 'weui-form-location_toast',
+        });
+    };
+    const handleChooseLocation = () => {
+        if (disabled)
+            return;
+        if (!dataSourceStatus.status)
+            return showToast(dataSourceStatus.message);
+        if (!apiKeyStatus.status)
+            return showToast(apiKeyStatus.message);
+        if (!currentLocStatus)
+            return showToast('获取位置信息中，请稍后重试');
+        setIsSelectMapVisible(true);
+    };
+    const onChangeLocation = (value) => {
+        var _a;
+        const { poiname, latlng, detailedAddress } = value;
+        const finalValue = {
+            address: poiname,
+            detailedAddress,
+            geopoint: {
+                coordinates: [latlng.lng, latlng.lat],
+                type: 'Point',
+            },
+        };
+        onChange === null || onChange === void 0 ? void 0 : onChange(finalValue);
+        setUserSelectStatus('selected');
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: finalValue });
+    };
+    useEffect(() => {
+        // 调用API数据源方法
+        if (dataSource.name) {
+            callDataSource({
+                dataSourceName: dataSource.name,
+                methodName: 'getApiKey',
+            })
+                .then((res) => {
+                if (res.apiKey) {
+                    setAPIKEY(res.apiKey);
+                    setDataSourceStatus({
+                        status: true,
+                        message: '',
+                    });
+                    setApiKeyStatus({ status: true, message: '' });
+                }
+            })
+                .catch((error) => {
+                const { comErrorInfo } = errorHandler({
+                    code: 'WdLocation.DatasourceError',
+                    id,
+                    error,
+                });
+                events === null || events === void 0 ? void 0 : events.error({ error: comErrorInfo });
+                setDataSourceStatus({
+                    status: false,
+                    message: error,
+                });
+            });
+        }
+        else {
+            setDataSourceStatus({
+                status: false,
+                message: '请在编辑器属性区配置地图APIs',
+            });
+        }
+    }, [dataSource]);
+    useEffect(() => {
+        let loc = {
+            latlng: {
+                lat: 39.98410411,
+                lng: 116.307503,
+            },
+            poiname: '',
+            detailedAddress: '',
+            locationType,
+        };
+        switch (locationType) {
+            case 2:
+                loc = {
+                    latlng: {
+                        lat: location.latlng.lat,
+                        lng: location.latlng.lng,
+                    },
+                    poiname: location.poiname,
+                    detailedAddress: location.detailedAddress,
+                };
+                break;
+        }
+        setLocation(loc);
+        // 暂不支持自定位置，初始化表单值都是{}
+    }, [locationType]);
+    const getIsShowMap = () => {
+        let status = showMap;
+        if (locationType === 1 && location.locationType === 1) {
+            status = false;
+        }
+        else if (locationType === 2 && !dataSourceStatus.status) {
+            status = false;
+        }
+        else if (locationType === 2 && !apiKeyStatus.status) {
+            status = false;
+        }
+        else if (!currentLocStatus) {
+            status = false;
+        }
+        return status;
+    };
+    const LocationEl = (_jsxs(ConfigProvider, { classPrefix: "wedatea2td", children: [_jsxs("div", { className: classNames('_weda-fn-map', className), "data-testid": "_weda-fn-map", style: style, children: [_jsx(Header, { placeholder: placeholder, isEdit: userSelectStatus === 'selected', info: location, onClick: handleChooseLocation, disabled: disabled, showLngLat: showLngLat, locationType: locationType, apiKeyStatus: apiKeyStatus, currentLocStatus: currentLocStatus, dataSourceStatus: dataSourceStatus.status, readOnly: readOnly }), getIsShowMap() ? (_jsx("div", { className: classNames('form-location-map-pc'), children: _jsx(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }) })) : null] }), _jsx(SelectModal, { readOnly: readOnly, currentLocations: currentLocations.current, isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, setLocation: setLocation, APIKEY: APIKEY, chooseLocation: onChangeLocation, locationRange: locationRange, customRange: customRange })] }));
+    return renderDecorator(LocationEl, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}
+LocationPC.propTypes = propTypes;
+LocationPC.defaultProps = defaultProps;

package/dist/web/components/form/location/components/LocationPC/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../../../style';

package/dist/web/components/form/location/components/LocationPC/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../../../style';

package/dist/web/components/form/location/constants.d.ts

@@ -0,0 +1,2 @@
+export const KEY: "XX5BZ-UJLKR-B7WWP-WURRR-UYBGS-4VBMM";
+export const tmapApiUrl: "https://map.qq.com/api/gljs";

package/dist/web/components/form/location/constants.js

@@ -0,0 +1,3 @@
+const KEY = 'XX5BZ-UJLKR-B7WWP-WURRR-UYBGS-4VBMM';
+const tmapApiUrl = 'https://map.qq.com/api/gljs';
+export { KEY, tmapApiUrl };

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

@@ -0,0 +1,13 @@
+.rotate-circle {
+  display: none;
+}
+.tmap-zoom-control {
+  display: none;
+}
+.tmap-zoom-control {
+  display: none !important;
+}
+
+.weui-form-location_toast .weui-icon_toast {
+  display: none !important;
+}

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

@@ -0,0 +1 @@
+export default function Location(props: any): JSX.Element;

package/dist/web/components/form/location/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import LocationH5 from './components/LocationH5/location.h5';
+import LocationPC from './components/LocationPC/location.PC';
+import { CommonErrorBoundary } from '../../common/error-boundary';
+import { useLoopRenderDetect } from '../../common/use-loop-render-detect';
+import './style';
+export default function Location(props) {
+    return (_jsx(CommonErrorBoundary, { children: _jsx(LocationImpl, { ...props }) }));
+}
+function LocationImpl(props) {
+    const platform = usePlatform();
+    useLoopRenderDetect();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return _jsx(LocationPC, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return _jsx(LocationH5, { ...props });
+    }
+    return platform === 'h5' ? (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(LocationH5, { ...props }) })) : (_jsx(LocationPC, { ...props }));
+}

package/dist/web/components/form/location/style.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/components/form/location/style.js

@@ -0,0 +1 @@
+import './index.css';

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+import './style';
+export default function Radio({ id, className, style, events, label, labelVisible, format, enumName, name, range, layout, disabled, requiredFlag, decorator, onChange: outerOnChange, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    range?: Readonly<({
+        label: string;
+    } & Record<string, any>)[]>;
+    format?: string;
+    enumName?: string;
+    onChange: (val: string) => void;
+}

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { renderDecorator } from '../renderDecorator';
+import destr from 'destr';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+import './style';
+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, onChange: outerOnChange, }) {
+    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);
+        }
+    });
+    useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, []);
+    useEffect(() => {
+        if (format !== 'x-enum') {
+            setOption(range);
+        }
+    }, [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);
+                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(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 (_jsxs("div", { className: subCls, onClickCapture: getChangeHandler(value), children: [_jsxs("div", { className: "weui-cell__hd", children: [_jsx("input", { type: "radio", className: "weui-check", value: value, name: _name, id: _id, checked: checkedItemValue === value, disabled: disabled, onClick: (e) => e.stopPropagation() }), _jsx("i", { className: "weui-icon-checked" })] }), _jsx("div", { className: "weui-cell__bd", children: _jsx("p", { children: label }) })] }, _id));
+        });
+    }
+    else {
+        // pc
+        radioElement = (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(TeaRadio.Group, { disabled: disabled, value: checkedItemValue, onChange: (value, { event }) => getChangeHandler(value)(event), children: option.map(({ value, label }, index) => {
+                    const _id = `radio-${hashcode}-${index}`;
+                    return (_jsx(TeaRadio, { name: value, id: _id, children: label }, _id));
+                }) }) }));
+    }
+    return renderDecorator(radioElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: true,
+        requiredFlag,
+    });
+}

package/dist/web/components/form/radio/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/radio/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/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/web/components/form/renderDecorator.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(React.Fragment, { children: filedNode });
+        };
+    }
+    return function WedaFormFiled(decoratorProps) {
+        if (Array.isArray(DecoratorComponent) && DecoratorComponent.length === 2) {
+            decoratorProps = DecoratorComponent[1];
+            DecoratorComponent = DecoratorComponent[0];
+        }
+        return (_jsx(DecoratorComponent, { ...decoratorProps, children: filedNode }));
+    };
+}

package/dist/web/components/form/select/allTimePicker/calendar.css

@@ -0,0 +1,114 @@
+/* 几个图标 */
+.weda-ui-icon-arrow-right {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNjkwNTggMTguNjlMOC4zMTE3MiAxNy4zMTExTDEzLjYyMjMgMTIuMDAwNkw4LjMxMTcyIDYuNjlMOS42OTA1OCA1LjMxMTE0TDE2LjM4IDEyLjAwMDZMOS42OTA1OCAxOC42OVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNiIvPgo8L3N2Zz4K);
+}
+
+.weda-ui-icon-turn-pre {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Ljg3OTE3IDEyLjU3NjhMMTUuNTQwMSAyMEwxNi40Nzk3IDE5LjA4NzVMOS4xNjM3OCAxMS45OTg2TDE2LjQ3OTcgNC45MTI0OUwxNS41NDAxIDRMNy45MDQxMyAxMS4zOTYxQzcuODkzNjYgMTEuNDA0OCA3Ljg4MzQ2IDExLjQxMzkgNy44NzM1NiAxMS40MjM1TDcuNjUxNjYgMTEuNjM5QzcuNDQ5MjkgMTEuODM1NSA3LjQ0OTQ3IDEyLjE2MDUgNy42NTIwNiAxMi4zNTY4TDcuODU0NCAxMi41NTI4TDcuODc0NjQgMTIuNTcyNUM3Ljg3NjE0IDEyLjU3NCA3Ljg3NzY1IDEyLjU3NTQgNy44NzkxNyAxMi41NzY4WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+Cjwvc3ZnPgo=);
+}
+
+.weda-ui-icon-turn-next {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi4xMjA4IDEyLjU3NjhMOC40NTk5MiAyMEw3LjUyMDMxIDE5LjA4NzVMMTQuODM2MiAxMS45OTg2TDcuNTIwMzIgNC45MTI0OUw4LjQ1OTk0IDRMMTYuMDk1OSAxMS4zOTYxQzE2LjEwNjMgMTEuNDA0OCAxNi4xMTY1IDExLjQxMzkgMTYuMTI2NCAxMS40MjM1TDE2LjM0ODMgMTEuNjM5QzE2LjU1MDcgMTEuODM1NSAxNi41NTA1IDEyLjE2MDUgMTYuMzQ3OSAxMi4zNTY4TDE2LjE0NTYgMTIuNTUyOEwxNi4xMjU0IDEyLjU3MjVDMTYuMTIzOSAxMi41NzQgMTYuMTIyMyAxMi41NzU0IDE2LjEyMDggMTIuNTc2OFoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNiIvPgo8L3N2Zz4K);
+}
+
+/* 年/月份操作区的样式 */
+.weda-ui-custom-calendar-op {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 20px;
+}
+
+.weda-ui-custom-calendar-op__start {
+  display: flex;
+  align-items: center;
+}
+
+.weda-ui-custom-calendar-op__end {
+  display: flex;
+  align-items: center;
+}
+
+.weda-ui-custom-calendar-op__end .weda-ui-icon-turn-next {
+  margin-left: 8px;
+}
+
+.weda-ui-custom-calendar-op__select {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.weda-ui-custom-calendar-op__select.is-active {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+.weda-ui-custom-calendar-op__select.is-active .weda-ui-icon-arrow-right {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuMzEwMDYgOS42OTA1N0w2LjY4ODkyIDguMzExNzFMMTEuOTk5NSAxMy42MjIzTDE3LjMxMDEgOC4zMTE3MUwxOC42ODg5IDkuNjkwNTdMMTEuOTk5NSAxNi4zOEw1LjMxMDA2IDkuNjkwNTdaIiBmaWxsPSIjMDA1MkQ5Ii8+Cjwvc3ZnPgo=);
+}
+
+/* 日历展开模式 */
+.weda-ui-custom-calendar {
+  display: flex;
+  flex-direction: column;
+}
+
+.weda-ui-custom-calendar__weeks {
+  display: flex;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+
+.weda-ui-custom-calendar__weeks-item {
+  /* flex: 1; */
+  line-height: 30px;
+  min-width: 40px;
+  display: flex;
+  justify-content: center;
+}
+
+.weda-ui-custom-calendar__days-row {
+  display: flex;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.weda-ui-custom-calendar__days-item {
+  /* flex: 1; */
+  min-width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.weda-ui-custom-calendar__days-item:hover {
+  background-color: #f3f3f3;
+}
+
+.weda-ui-custom-calendar__days-item.is-current {
+  background-color: var(--wd-color-brand, #0052d9);
+  color: #fff;
+}
+
+.weda-ui-custom-calendar__days-item.no-select {
+  color: #c1c1c1;
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import './style';
+/**
+ * 日历组件
+ */
+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/web/components/form/select/allTimePicker/calendar.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { weeks } from './dataUtils';
+import './style';
+/**
+ * 日历组件
+ */
+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 (_jsxs("div", { className: "weda-ui-custom-calendar", children: [_jsx("div", { className: " weda-ui-custom-calendar__weeks", children: weeks.map((week, index) => (_jsx("span", { className: "weda-ui-custom-calendar__weeks-item", children: week }, index))) }), _jsx("div", { className: "weda-ui-custom-calendar__days", children: fnDaysSpliceWeeks(days(), 7).map((day, index) => {
+                    return (_jsx("div", { className: "weda-ui-custom-calendar__days-row", children: 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 (_jsx("span", { "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));
+                                }, children: item }, index));
+                        }) }, index));
+                }) })] }));
+}