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

package/dist/web/components/form/select/dropdown-select/pc.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useRef, useCallback, } from 'react';
+import { useDeepCompareEffect } from '@react-hookz/web';
+import { Select, ConfigProvider } from 'tea-component';
+import Loading from '../status/loading';
+import Retry from '../status/retry';
+import { Status } from '../status';
+import Empty from '../status/empty';
+import { WdFormItemReadOnly } from '../../../wd-form-item';
+import lodashGet from 'lodash.get';
+import './style';
+export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, onSearchValue, defaultSearchValue, findData, onSearchValueInput, footer, }) {
+    const [showDelete, setShowDelete] = useState(false);
+    const [optList, setOptList] = useState(options);
+    const [readValue, setReadValue] = useState('');
+    const findDataRef = useRef(undefined);
+    const previousValueRef = useRef(selectedValue);
+    const updateValue = useCallback((v, trigger = false) => {
+        const option = Array.isArray(optList)
+            ? optList.find((item) => item.value === v)
+            : null;
+        const text = lodashGet(option, 'text', v);
+        setReadValue(text);
+        if (previousValueRef.current != v) {
+            _updateValue === null || _updateValue === void 0 ? void 0 : _updateValue(v, trigger);
+            previousValueRef.current = v;
+        }
+    }, [_updateValue, optList]);
+    useEffect(() => {
+        if (findDataRef.current && findDataRef.current.value) {
+            const opt = options.filter((item, index) => {
+                if (index === 0) {
+                    // 有回显的数据，回显数据通过findData插入在第一个，所以第一个不能过滤掉
+                    return true;
+                }
+                else {
+                    // 如果是第一个后面的数据，发现和选中项的 value 一样，则忽略，因为index === 0已经加进去了
+                    return item.value !== findDataRef.current.value;
+                }
+            });
+            setOptList(opt);
+        }
+        else {
+            setOptList(options);
+        }
+    }, [options]);
+    useDeepCompareEffect(() => {
+        if (status === Status.ALl_EMPTY) {
+            return;
+        }
+        if (selectedValue && Array.isArray(optList) && optList.length > 0) {
+            const index = optList.findIndex((item) => item.value === selectedValue);
+            if (index === -1) {
+                findData === null || findData === void 0 ? void 0 : findData().then((value) => {
+                    if (value) {
+                        findDataRef.current = value;
+                    }
+                    else {
+                        updateValue(selectedValue, false);
+                    }
+                });
+            }
+            else {
+                const value = optList[index].value;
+                updateValue(value, false);
+            }
+        }
+        else {
+            // 用户自动输入 '' ， undefined , null三种状态清空
+            updateValue(selectedValue, false);
+        }
+    }, [optList, selectedValue, status]);
+    const isShowBottomTips = useMemo(() => {
+        if (status === Status.LOADING) {
+            return _jsx(Loading, {});
+        }
+        else if (status === Status.ERROR) {
+            return _jsx(Retry, { reTry: reTry });
+        }
+        else if (status === Status.EMPTY) {
+            return _jsx(Empty, {});
+        }
+        else {
+            return '';
+        }
+    }, [format, status, optList]);
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(WdFormItemReadOnly, { readValue: readValue, format: format, value: selectedValue, children: _jsx("div", { "data-testid": "form-select", className: 'form-select-pc', onMouseEnter: () => {
+                    setShowDelete(true);
+                }, onMouseLeave: () => {
+                    setShowDelete(false);
+                }, children: _jsx(Select, { footer: footer, searchable: true, matchButtonWidth: true, defaultSearchValue: defaultSearchValue, placeholder: placeholder, appearance: 'button', size: size, tips: "", disabled: disabled, autoClearSearchValue: true, options: optList, value: selectedValue, bottomTips: isShowBottomTips, onChange: (value) => updateValue(value, true), onScrollBottom: loadMore, onOpen: () => {
+                        onSearchValue('');
+                    }, onSearch: (value, context) => {
+                        const tValue = value.trim();
+                        if (context.event.type === 'click') {
+                            if (tValue !== '') {
+                                // 手动点击搜索
+                                onSearchValue(tValue);
+                            }
+                            else {
+                                // 清空
+                                onSearchValue('');
+                            }
+                        }
+                        else if (tValue !== '') {
+                            // 动态输入搜索
+                            onSearchValue(tValue);
+                        }
+                        else {
+                            // 逐个删除
+                            onSearchValue('');
+                        }
+                        onSearchValueInput === null || onSearchValueInput === void 0 ? void 0 : onSearchValueInput(tValue);
+                    }, clearable: showDelete && !disabled }) }) }) }));
+}

package/dist/web/components/form/select/dropdown-select/style.d.ts

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

package/dist/web/components/form/select/dropdown-select/style.js

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

package/dist/web/components/form/select/dropdown-select/ui.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { SelectProps } from 'tea-component';
+import { IUseoptionsParams } from '../request';
+interface IPureSelectProps extends Pick<SelectProps, 'size' | 'disabled' | 'value' | 'placeholder' | 'button'> {
+    name?: string;
+    onChange: (v: string, triggerEvent: boolean) => void;
+    layout?: 'horizontal' | 'vertical';
+    className?: string;
+    params: IUseoptionsParams;
+    readOnly?: boolean;
+    onSearchValueInput?: (value: string) => void;
+    ignoreCase?: boolean;
+    staticSearchable?: boolean;
+    childRef?: any;
+    enableAddRelationButton?: boolean;
+    addRelationButtonText?: string;
+    onAddRelationButtonClick?: () => void;
+    format?: boolean;
+}
+export declare function PureSelectPc(props: IPureSelectProps): JSX.Element;
+export declare function PureSelectH5(props: IPureSelectProps): JSX.Element;
+export {};

package/dist/web/components/form/select/dropdown-select/ui.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import classNames from '../../../../utils/classnames';
+import { noop } from '../../../../utils/constant';
+import { useSyncValue } from '../../../../utils/hooks/useSyncValue';
+import { PureSelect } from './index';
+import { isNil } from '../../../../utils/lodash';
+import { WdFormItemReadOnly } from '../../../wd-form-item';
+import lodashGet from 'lodash.get';
+import Loading from '../status/loading';
+import { useRecycle } from '../../../../utils/hooks/useRecycle';
+export function PureSelectPc(props) {
+    const { size, onChange = noop, value, placeholder, params, disabled, onSearchValueInput, ignoreCase, staticSearchable, childRef, addRelationButtonText, enableAddRelationButton, onAddRelationButtonClick, } = props;
+    const previousValueRef = useRef();
+    return (_jsx(PureSelect, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, ignoreCase: ignoreCase, staticSearchable: staticSearchable, isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, onAddRelationButtonClick: onAddRelationButtonClick, onSearchValueInput: onSearchValueInput, updateValue: (value, triggerEvent) => {
+            if (previousValueRef.current !== value) {
+                onChange(value, triggerEvent);
+                previousValueRef.current = value;
+            }
+        } }));
+}
+export function PureSelectH5(props) {
+    const { placeholder, name, disabled, onChange = noop, layout, className, params, onSearchValueInput, ignoreCase, staticSearchable, childRef, addRelationButtonText, enableAddRelationButton, onAddRelationButtonClick, } = props;
+    const [value, setValue] = useSyncValue(props.value);
+    const [currentLabel, setCurrentLabel] = useState('');
+    const [isShow, setIsShow] = useState(false);
+    const [status, setStatus] = useState(false);
+    const previousValueRef = useRef(value);
+    const { format } = useRecycle();
+    useEffect(() => {
+        if (isNil(props.value)) {
+            setValue('');
+            setCurrentLabel('');
+            previousValueRef.current = null;
+        }
+    }, [props.value]);
+    const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_form': true,
+        'weui-flex__item': layout !== 'vertical',
+        'weui-cell_disabled': disabled,
+    }, className);
+    const onChooseCallback = (option, isUpdate, dismiss, triggerEvent) => {
+        if (dismiss) {
+            setIsShow(false);
+        }
+        if (dismiss === 'close')
+            return;
+        const newValue = lodashGet(option, 'value', null);
+        const text = lodashGet(option, 'label', newValue);
+        setCurrentLabel(text);
+        if (isUpdate && previousValueRef.current != newValue) {
+            setValue(newValue);
+            onChange(newValue, triggerEvent);
+            previousValueRef.current = newValue;
+        }
+    };
+    const onClick = () => {
+        setIsShow(true);
+    };
+    return (_jsxs(_Fragment, { children: [status ? (_jsx(Loading, {})) : (_jsx(WdFormItemReadOnly, { readValue: currentLabel, format: format, value: value, children: _jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", onClick: disabled ? null : onClick, children: [_jsx("input", { className: "weui-input", type: "select", name: name, placeholder: placeholder, value: currentLabel, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), _jsx("span", { className: 'weui-input-arrow' })] }) }) })), _jsx(PureSelect, { onAddRelationButtonClick: onAddRelationButtonClick, childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, staticSearchable: staticSearchable, ignoreCase: ignoreCase, params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, onSearchValueInput: onSearchValueInput, placeholder: undefined, updateStatus: setStatus })] }));
+}

package/dist/web/components/form/select/formats-util.d.ts

@@ -0,0 +1,6 @@
+declare const SINGLE_FOREIGN_FORMATS: readonly ["father-son", "related", "many-one", "one-one", "one-one-r"];
+export type TSingleForeignFormat = typeof SINGLE_FOREIGN_FORMATS[number];
+export declare function isSingleForeignFormat(format: string): format is TSingleForeignFormat;
+export declare function isFormatNeedFetch(format: string): boolean;
+export declare function isFormatWithRelation(format: string): boolean;
+export {};

package/dist/web/components/form/select/formats-util.js

@@ -0,0 +1,23 @@
+const SINGLE_FOREIGN_FORMATS = [
+    'father-son',
+    'related',
+    'many-one',
+    'one-one',
+    'one-one-r',
+];
+/** do NOT export this array */
+const formatNeedDataFetch = [...SINGLE_FOREIGN_FORMATS, 'x-enum'];
+export function isSingleForeignFormat(format) {
+    return SINGLE_FOREIGN_FORMATS.includes(format);
+}
+export function isFormatNeedFetch(format) {
+    return formatNeedDataFetch.includes(format);
+}
+const formatWithRelation = [
+    ...SINGLE_FOREIGN_FORMATS,
+    'x-enum',
+    'one-many',
+];
+export function isFormatWithRelation(format) {
+    return formatWithRelation.includes(format);
+}

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, enumName, dataSourceName, viewId, format, defaultValue, startDate, endDate, defaultDate, startTime, endTime, defaultTime, defaultRegion, defaultMutiRegion, separator, regionType, clearable, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, childRef, addRelationButtonText, enableAddRelationButton, }: 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-MM-DD" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM" | "YYYY";