@cloudbase/weda-ui 3.1.0 → 3.1.3

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+import './index.css';
+import { usePlatform } from '../../../utils/platform';
+import LocationH5 from './components/LocationH5/location.h5';
+import LocationPC from './components/LocationPC/location.PC';
+export default function Location(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(LocationPC, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(LocationH5, { ...props });
+    }
+    return platform === 'h5' ? (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(LocationH5, { ...props }))) : (React.createElement(LocationPC, { ...props }));
+}

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

@@ -0,0 +1,12 @@
+@media (min-width: 1024px) {
+  .weda-ui .wedatea2td-radio:checked,
+  .weda-ui input[type='radio']:checked {
+    background-color: white;
+  }
+  .weda-ui .wedatea2td-radio:checked:focus,
+  .weda-ui .wedatea2td-radio:checked:hover,
+  .weda-ui input[type='radio']:checked:focus,
+  .weda-ui input[type='radio']:checked:hover {
+    background-color: white;
+  }
+}

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

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

package/dist/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);
+        }
+    });
+    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);
+                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/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,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/web/components/form/select/h5.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PropsType } from './index';
+export default function Select({ events, name, placeholder, layout, mode, dateMode, disabled, range, where, primaryField, tipBlock, enumName, dataSourceName, viewId, format, defaultValue, startDate, endDate, defaultDate, startTime, endTime, defaultTime, defaultRegion, defaultMutiRegion, regionType, separator, onChange, }: PropsType): JSX.Element;
+export declare function decodeIsoDatetime(isoStringOrTimesnap: any, type: any, dateMode?: string): any;
+/**
+ * 根据时间模式，构造 new Date()的传参格式单个日期和时间组件值
+ */
+export declare const getFormatNewDateParams: (type: string, timeStr: string) => any[];
+/**
+ * 根据时间模式，将 picker 返回的值转成对应的 年-月-日
+ */
+export declare const formatDateModeValue: (result?: any[], dateMode?: string) => any;
+/**
+ * 不同时间模式对应的展示格式
+ */
+export declare const getDateModeFormat: (dateMode?: string) => "YYYY" | "YYYY-MM" | "YYYY-MM-DD";