@fairys/taro-tools-simple-form 0.0.2 → 0.0.4

package/esm/components/popup.search/instance.js

@@ -0,0 +1,319 @@
+import { createContext, useContext, useRef } from "react";
+import { proxy, ref, useSnapshot } from "valtio";
+import taro from "@tarojs/taro";
+class FairysTaroPopupSearchBaseInstanceMount {
+    onChange;
+    onLoadData;
+    otherRequestParams;
+    renderText;
+    renderListItemText;
+    renderList;
+    mode = 'single';
+    rowKey = 'value';
+    displayField = 'label';
+    columns = [];
+    maxWidth;
+    maxHeight;
+    isNeedManage = false;
+    isUseOptionsChecked = true;
+    renderType = 'list';
+    tableProps = {};
+    useTableProps;
+    showRowDeleteButton;
+    showSearch;
+    value;
+    options;
+    maxTagCount;
+}
+class FairysTaroPopupSearchBaseInstance extends FairysTaroPopupSearchBaseInstanceMount {
+    windowHeight = 0;
+    windowWidth = 0;
+    popupWidth = 0;
+    popupHeight = 0;
+    state = proxy({
+        mode: 'single',
+        columns: [],
+        __defaultValue: '',
+        visible: false,
+        value: void 0,
+        dataList: [],
+        _tempFilterDataList: [],
+        search: '',
+        _tempValue: void 0,
+        operationStatus: 'select',
+        manageSelectedDataList: [],
+        allChecked: false
+    });
+    ctor() {
+        const isWeb = taro.getEnv() === taro.ENV_TYPE.WEB;
+        if (isWeb) {
+            this.windowHeight = window.document.documentElement.clientHeight;
+            this.windowWidth = window.document.documentElement.clientWidth;
+        } else {
+            const windowInfo = taro.getWindowInfo();
+            this.windowHeight = windowInfo.windowHeight;
+            this.windowWidth = windowInfo.windowWidth;
+        }
+        this.popupHeight = 0.6 * this.windowHeight;
+        if (this.maxHeight) this.popupHeight = Math.min(this.popupHeight, this.maxHeight);
+        this.popupWidth = 0.8 * this.windowWidth;
+        if (this.maxWidth) this.popupWidth = Math.min(this.popupWidth, this.maxWidth);
+    }
+    updateState = (state)=>{
+        for(const key in state){
+            const value = state[key];
+            if (Array.isArray(value) || '[object Object]' === Object.prototype.toString.call(value)) this.state[key] = ref(value);
+            else this.state[key] = value;
+        }
+    };
+    isUseOptions = ()=>{
+        if (Array.isArray(this.options) && !this.onLoadData && !this.isNeedManage) return this.isUseOptionsChecked;
+        return false;
+    };
+    onSearch = async (keyword)=>{
+        this.state.search = keyword;
+        const _keyword = `${keyword || ''}`.trim();
+        try {
+            if (this.onLoadData && 'select' === this.state.operationStatus) {
+                await new Promise((resolve)=>setTimeout(resolve, 500));
+                const search = {
+                    keyword: _keyword
+                };
+                const dataList = await this.onLoadData(this.otherRequestParams?.(search, this) || search, this);
+                if (Array.isArray(dataList)) this.updateState({
+                    _tempFilterDataList: dataList || [],
+                    dataList: dataList || []
+                });
+                else this.updateState({
+                    _tempFilterDataList: []
+                });
+            } else if ('select' === this.state.operationStatus) {
+                if (!_keyword) return void this.updateState({
+                    _tempFilterDataList: this.state.dataList || []
+                });
+                const filterData = (this.state.dataList || []).filter((item)=>{
+                    const displayText = item[this.displayField]?.toString() || '';
+                    const valueText = item[this.rowKey]?.toString() || '';
+                    return displayText.includes(_keyword) || valueText.includes(_keyword);
+                });
+                this.updateState({
+                    _tempFilterDataList: filterData
+                });
+            } else if ('multiple' === this.mode) {
+                const v = this.state._tempValue;
+                if (Array.isArray(v)) {
+                    if (!_keyword) return void this.updateState({
+                        _tempFilterDataList: v || []
+                    });
+                    const filterData = v.filter((item)=>{
+                        const displayText = item[this.displayField]?.toString() || '';
+                        const valueText = item[this.rowKey]?.toString() || '';
+                        return displayText.includes(_keyword) || valueText.includes(_keyword);
+                    });
+                    this.updateState({
+                        _tempFilterDataList: filterData
+                    });
+                }
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+    onSave = ()=>{
+        if ('multiple' === this.mode) {
+            const dataList = this.state._tempValue || [];
+            this.updateState({
+                value: dataList,
+                _tempValue: dataList,
+                allChecked: false
+            });
+            this.onChange?.(dataList);
+            this.onClose();
+        }
+    };
+    onClear = ()=>{
+        this.state.value = void 0;
+        this.state._tempValue = void 0;
+        this.state.allChecked = false;
+        this.onChange?.(void 0);
+    };
+    isCheckedData = (data)=>{
+        if ('multiple' === this.mode) {
+            if ('manage' === this.state.operationStatus) return -1 !== (this.state.manageSelectedDataList || []).findIndex((item)=>item[this.rowKey] === data[this.rowKey]);
+            if (Array.isArray(this.state._tempValue)) {
+                const findx = this.state._tempValue.findIndex((item)=>item[this.rowKey] === data[this.rowKey]);
+                return -1 !== findx;
+            }
+        } else if (this.state._tempValue) return this.state._tempValue?.[this.rowKey] === data?.[this.rowKey];
+        return false;
+    };
+    onCheckedData = (data, checked)=>{
+        if ('multiple' === this.mode) {
+            if ('manage' === this.state.operationStatus) {
+                if (checked) {
+                    const newList = (this.state.manageSelectedDataList || []).filter((item)=>item[this.rowKey] !== data[this.rowKey]);
+                    this.updateState({
+                        manageSelectedDataList: [
+                            ...newList
+                        ]
+                    });
+                } else {
+                    const newList = [
+                        ...this.state.manageSelectedDataList || []
+                    ].concat([
+                        data
+                    ]);
+                    this.updateState({
+                        manageSelectedDataList: newList
+                    });
+                }
+                return;
+            }
+            const _tempValue = this.state._tempValue || [];
+            if (Array.isArray(_tempValue)) if (checked) {
+                const newList = _tempValue.filter((item)=>item[this.rowKey] !== data[this.rowKey]);
+                this.updateState({
+                    _tempValue: [
+                        ...newList
+                    ]
+                });
+            } else {
+                const findx = _tempValue.find((item)=>item[this.rowKey] === data[this.rowKey]);
+                if (!findx) {
+                    const newList = [
+                        ..._tempValue
+                    ].concat([
+                        data
+                    ]);
+                    this.updateState({
+                        _tempValue: newList
+                    });
+                }
+            }
+        } else {
+            this.updateState({
+                value: data,
+                _tempValue: data
+            });
+            this.onChange?.(data);
+            this.onClose();
+        }
+    };
+    onAllChecked = ()=>{
+        if ('multiple' === this.mode) if (this.state.allChecked) {
+            if ('manage' === this.state.operationStatus) {
+                const _tempFilterDataList = this.state._tempFilterDataList || [];
+                const manageSelectedDataList = this.state.manageSelectedDataList || [];
+                const selectedList = manageSelectedDataList.filter((item)=>!_tempFilterDataList.find((dataItem)=>dataItem[this.rowKey] === item[this.rowKey]));
+                this.updateState({
+                    manageSelectedDataList: [
+                        ...selectedList
+                    ],
+                    allChecked: false
+                });
+                return;
+            }
+            const _tempValue = this.state._tempValue || [];
+            const dataList = this.state.dataList || [];
+            const newList = _tempValue.filter((item)=>!dataList.find((dataItem)=>dataItem[this.rowKey] === item[this.rowKey]));
+            this.updateState({
+                _tempValue: newList,
+                allChecked: false
+            });
+        } else {
+            if ('manage' === this.state.operationStatus) {
+                console.log(this.state._tempFilterDataList);
+                this.updateState({
+                    manageSelectedDataList: this.state._tempFilterDataList || [],
+                    allChecked: true
+                });
+                return;
+            }
+            const _tempValue = this.state._tempValue || [];
+            const dataList = this.state.dataList || [];
+            const newList = [
+                ..._tempValue
+            ].concat(dataList);
+            this.updateState({
+                _tempValue: newList,
+                allChecked: true
+            });
+        }
+    };
+    onClose = ()=>{
+        this.updateState({
+            visible: false,
+            allChecked: false,
+            manageSelectedDataList: [],
+            search: '',
+            _tempValue: this.state.value,
+            operationStatus: 'select',
+            _tempFilterDataList: this.state.dataList || []
+        });
+    };
+    updateOperationStatus = ()=>{
+        if ('multiple' === this.mode) if ('manage' === this.state.operationStatus) this.updateState({
+            operationStatus: 'select',
+            manageSelectedDataList: [],
+            _tempFilterDataList: this.state.dataList || [],
+            allChecked: false,
+            search: ''
+        });
+        else this.updateState({
+            operationStatus: 'manage',
+            manageSelectedDataList: [],
+            _tempFilterDataList: this.state._tempValue || [],
+            allChecked: false,
+            search: ''
+        });
+    };
+    onDeleteData = (data)=>{
+        if ('multiple' === this.mode) if (data) {
+            const _newValue = this.state._tempValue || [];
+            const _tempFilterDataList = this.state._tempFilterDataList || [];
+            if (Array.isArray(_newValue)) {
+                const newList = _newValue.filter((item)=>item[this.rowKey] !== data[this.rowKey]);
+                const newFilterList = _tempFilterDataList.filter((item)=>item[this.rowKey] !== data[this.rowKey]);
+                this.updateState({
+                    _tempValue: newList,
+                    _tempFilterDataList: newFilterList
+                });
+            }
+        } else {
+            const manageSelectedDataList = this.state.manageSelectedDataList || [];
+            const _newValue = this.state._tempValue || [];
+            const _tempFilterDataList = this.state._tempFilterDataList || [];
+            if (Array.isArray(_newValue)) {
+                const newList = _newValue.filter((item)=>!manageSelectedDataList.find((manageItem)=>manageItem[this.rowKey] === item[this.rowKey]));
+                const newFilterList = _tempFilterDataList.filter((item)=>!manageSelectedDataList.find((manageItem)=>manageItem[this.rowKey] === item[this.rowKey]));
+                this.updateState({
+                    _tempValue: newList,
+                    _tempFilterDataList: newFilterList,
+                    manageSelectedDataList: []
+                });
+            }
+        }
+    };
+}
+function useFairysTaroPopupSearchBaseInstance() {
+    const instanceRef = useRef(new FairysTaroPopupSearchBaseInstance());
+    const state = useSnapshot(instanceRef.current.state);
+    const __defaultValue = state.__defaultValue;
+    return [
+        state,
+        instanceRef.current,
+        __defaultValue
+    ];
+}
+const FairysTaroPopupSearchBaseInstanceContext = createContext(new FairysTaroPopupSearchBaseInstance());
+function useFairysTaroPopupSearchBaseInstanceContext(options) {
+    const instance = useContext(FairysTaroPopupSearchBaseInstanceContext);
+    const state = useSnapshot(instance.state, options);
+    const __defaultValue = state.__defaultValue;
+    return [
+        state,
+        instance,
+        __defaultValue
+    ];
+}
+export { FairysTaroPopupSearchBaseInstance, FairysTaroPopupSearchBaseInstanceContext, FairysTaroPopupSearchBaseInstanceMount, useFairysTaroPopupSearchBaseInstance, useFairysTaroPopupSearchBaseInstanceContext };

package/esm/components/popup.search/list.table.d.ts

@@ -0,0 +1 @@
+export declare function FairysTaroPopupSearchListTable<T = any>(): import("react/jsx-runtime").JSX.Element;

package/esm/components/popup.search/list.table.js

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, Checkbox, Table } from "@nutui/nutui-react-taro";
+import { Del } from "@nutui/icons-react-taro";
+import { useFairysTaroPopupSearchBaseInstanceContext } from "./instance.js";
+import { useMemo } from "react";
+function TableItemCheckBox(props) {
+    const { rowData } = props;
+    const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext();
+    const _tempValue = state._tempValue;
+    const operationStatus = state.operationStatus;
+    const manageSelectedDataList = state.manageSelectedDataList;
+    const checked = useMemo(()=>instance.isCheckedData(rowData), [
+        rowData,
+        _tempValue,
+        operationStatus,
+        manageSelectedDataList
+    ]);
+    return /*#__PURE__*/ jsx(Checkbox, {
+        className: "fairys-taro-popup-search-list-virtual-checkbox fairystaroform__flex-1",
+        checked: checked,
+        onChange: ()=>instance.onCheckedData(rowData, checked)
+    });
+}
+function TableItemDelete(props) {
+    const { rowData } = props;
+    const [, instance] = useFairysTaroPopupSearchBaseInstanceContext();
+    return /*#__PURE__*/ jsx(Button, {
+        size: "mini",
+        fill: "none",
+        className: "fairys-taro-popup-search-list-virtual-delete-button",
+        onClick: ()=>instance.onDeleteData(rowData),
+        icon: /*#__PURE__*/ jsx(Del, {
+            color: "red"
+        })
+    });
+}
+function FairysTaroPopupSearchListTable() {
+    const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext();
+    const popupHeight = instance.popupHeight;
+    const data = state._tempFilterDataList || [];
+    const operationStatus = state.operationStatus;
+    const columns = state.columns || [];
+    const tableProps = instance.useTableProps?.(instance.tableProps || {}, instance) || instance.tableProps || {};
+    const showRowDeleteButton = instance.showRowDeleteButton;
+    const _newColumns = useMemo(()=>{
+        const list = [
+            {
+                key: '__checkbox',
+                width: 16,
+                align: 'center',
+                title: '',
+                render: (rowData)=>/*#__PURE__*/ jsx(TableItemCheckBox, {
+                        rowData: rowData
+                    })
+            }
+        ].concat([
+            ...columns
+        ]);
+        if ('manage' === operationStatus && 'multiple' === instance.mode && showRowDeleteButton) return [
+            ...list,
+            {
+                key: '__delete',
+                width: 16,
+                align: 'center',
+                title: '',
+                render: (rowData)=>/*#__PURE__*/ jsx(TableItemDelete, {
+                        rowData: rowData
+                    })
+            }
+        ];
+        return list;
+    }, [
+        columns,
+        operationStatus,
+        showRowDeleteButton
+    ]);
+    return /*#__PURE__*/ jsx(Table, {
+        bordered: true,
+        ...tableProps,
+        className: `fairys-taro-popup-search-list-table ${tableProps?.className || ''}`,
+        style: {
+            height: popupHeight,
+            ...tableProps?.style || {}
+        },
+        columns: _newColumns,
+        data: data
+    });
+}
+export { FairysTaroPopupSearchListTable };

package/esm/components/popup.search/list.virtual.d.ts

@@ -0,0 +1 @@
+export declare function FairysTaroPopupSearchListVirtual<T = any>(): import("react/jsx-runtime").JSX.Element;

package/esm/components/popup.search/list.virtual.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, Cell, Checkbox, VirtualList } from "@nutui/nutui-react-taro";
+import { Del } from "@nutui/icons-react-taro";
+import { useFairysTaroPopupSearchBaseInstanceContext } from "./instance.js";
+import { Fragment, useMemo } from "react";
+function VirtualListItem(props) {
+    const { rowData } = props;
+    const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext();
+    const renderListItemText = instance.renderListItemText;
+    const _tempValue = state._tempValue;
+    const operationStatus = state.operationStatus;
+    const manageSelectedDataList = state.manageSelectedDataList;
+    const showRowDeleteButton = instance.showRowDeleteButton;
+    const renderText = useMemo(()=>renderListItemText?.(rowData, instance) || rowData[instance.displayField], [
+        rowData,
+        instance.displayField,
+        renderListItemText
+    ]);
+    const checked = useMemo(()=>instance.isCheckedData(rowData), [
+        rowData,
+        _tempValue,
+        operationStatus,
+        manageSelectedDataList
+    ]);
+    return /*#__PURE__*/ jsx(Cell, {
+        className: "fairys-taro-popup-search-list-virtual-cell",
+        title: /*#__PURE__*/ jsx(Checkbox, {
+            className: "fairys-taro-popup-search-list-virtual-checkbox fairystaroform__flex-1",
+            checked: checked,
+            onChange: ()=>instance.onCheckedData(rowData, checked),
+            children: renderText
+        }),
+        extra: 'manage' === operationStatus && showRowDeleteButton ? /*#__PURE__*/ jsx(Button, {
+            size: "mini",
+            fill: "none",
+            className: "fairys-taro-popup-search-list-virtual-delete-button",
+            onClick: ()=>instance.onDeleteData(rowData),
+            icon: /*#__PURE__*/ jsx(Del, {
+                color: "red"
+            })
+        }) : /*#__PURE__*/ jsx(Fragment, {})
+    });
+}
+function FairysTaroPopupSearchListVirtual() {
+    const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext();
+    const popupHeight = instance.popupHeight;
+    const _tempFilterDataList = state._tempFilterDataList;
+    return /*#__PURE__*/ jsx(VirtualList, {
+        containerHeight: popupHeight,
+        itemHeight: 46,
+        list: _tempFilterDataList,
+        itemRender: (item, dataIndex, index)=>/*#__PURE__*/ jsx(VirtualListItem, {
+                rowData: item,
+                dataIndex: dataIndex,
+                index: index
+            }),
+        itemEqual: false
+    });
+}
+export { FairysTaroPopupSearchListVirtual };

package/esm/components/radio.group/index.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroupProps, RadioProps } from '@nutui/nutui-react-taro';
+export interface FairysTaroRadioGroupProps extends Partial<RadioGroupProps> {
+    items?: RadioProps[];
+}
+export declare const FairysTaroRadioGroupBase: (props: FairysTaroRadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/radio.group/index.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Radio, RadioGroup } from "@nutui/nutui-react-taro";
+const FairysTaroRadioGroupBase = (props)=>{
+    const { items, className, ...rest } = props;
+    return /*#__PURE__*/ jsx(RadioGroup, {
+        className: `fairys-taro-radio-group ${className || ''}`,
+        ...rest,
+        children: items?.map((item)=>/*#__PURE__*/ jsx(Radio, {
+                ...item
+            }, item.value))
+    });
+};
+export { FairysTaroRadioGroupBase };

package/esm/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 简版表单
+ * 用于快速创建表单，支持文本输入、选择框、单选框、复选框等常用表单元素。
+ * */
+import { useForm } from '@carefrees/form-utils-react-taro';
+import { FairysTaroSimpleFormProps } from './interface';
+import { InputConfigType } from './item.config';
+export * from './components';
+export declare const FairysTaroSimpleForm: {
+    (props: FairysTaroSimpleFormProps): import("react/jsx-runtime").JSX.Element;
+    Item: (config: InputConfigType) => import("react/jsx-runtime").JSX.Element;
+    ListItem: (props: {
+        items: InputConfigType[];
+    }) => import("react/jsx-runtime").JSX.Element;
+    useForm: typeof useForm;
+    useWatch: (name: string, form?: import("@carefrees/form-utils").FormInstanceBase, callBack?: (value: any, form: import("@carefrees/form-utils").FormInstanceBase) => void) => [any, import("@carefrees/form-utils").FormInstanceBase, import("@carefrees/form-utils-react-taro").WatchInstanceBase];
+};

package/esm/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Form, useForm, useWatch } from "@carefrees/form-utils-react-taro";
+import { ConfigItem, ConfigListItem } from "./item.config.js";
+export * from "./components/index.js";
+const FairysTaroSimpleForm = (props)=>/*#__PURE__*/ jsx(Form, {
+        labelMode: "between",
+        colCount: 1,
+        inputBordered: false,
+        ...props
+    });
+FairysTaroSimpleForm.Item = ConfigItem;
+FairysTaroSimpleForm.ListItem = ConfigListItem;
+FairysTaroSimpleForm.useForm = useForm;
+FairysTaroSimpleForm.useWatch = useWatch;
+export { FairysTaroSimpleForm };

package/esm/interface.d.ts

@@ -0,0 +1,3 @@
+import { FormProps } from '@carefrees/form-utils-react-taro';
+export interface FairysTaroSimpleFormProps extends FormProps {
+}

package/esm/item.config.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import type { FormItemProps, FormListProps } from '@carefrees/form-utils-react-taro';
+import { FairysTaroRadioGroupProps } from './components/radio.group';
+import { FairysTaroCalendarProps } from './components/calendar';
+import { FairysTaroCascaderProps } from './components/cascader';
+import { FairysTaroCheckboxGroupProps } from './components/checkbox.group';
+import { FairysTaroDatePickerProps } from './components/date.picker';
+import { FairysTaroPickerProps } from './components/picker';
+import { FairysTaroPopupSearchProps } from './components/popup.search';
+import { TaroInputProps, TaroInputNumberProps, RadioGroupProps, RadioProps, RangeProps, RateProps, SignatureProps, SwitchProps, TextAreaProps, UploaderProps } from '@nutui/nutui-react-taro';
+export interface ItemType<T, K = TaroInputProps> extends FormItemProps {
+    /**输入框类型*/
+    type?: T;
+    /**输入框属性*/
+    attr?: K;
+    /**自定义渲染函数*/
+    render?: undefined;
+    /**是否添加隐藏组件*/
+    isHide?: boolean;
+    /**是否添加置空组件*/
+    isEmpty?: boolean;
+}
+type CustomType = {
+    isEmpty?: boolean;
+    type?: 'custom';
+    render?: any;
+    isHide?: boolean;
+    attr?: any;
+    label?: ReactNode | {
+        text?: string;
+    };
+} & FormItemProps;
+type CustomRenderType = {
+    isEmpty?: boolean;
+    type?: 'render';
+    render?: React.ReactNode;
+    isHide?: boolean;
+    attr?: any;
+    label?: ReactNode | {
+        text?: string;
+    };
+} & FormItemProps;
+type CustomFormListType = {
+    isEmpty?: boolean;
+    type?: 'formList';
+    isHide?: boolean;
+    attr?: any;
+    label?: ReactNode | {
+        text?: string;
+    };
+} & FormListProps;
+export type InputConfigType = ItemType<'input', TaroInputProps> | ItemType<'inputNumber', TaroInputNumberProps> | ItemType<'fairysRadioGroup', FairysTaroRadioGroupProps> | ItemType<'fairysCalendar', FairysTaroCalendarProps> | ItemType<'fairysCascader', FairysTaroCascaderProps> | ItemType<'fairysCheckboxGroup', FairysTaroCheckboxGroupProps> | ItemType<'fairysDatePicker', FairysTaroDatePickerProps> | ItemType<'fairysPicker', FairysTaroPickerProps> | ItemType<'fairysPopupSearch', FairysTaroPopupSearchProps> | ItemType<'radioGroup', RadioGroupProps> | ItemType<'radio', RadioProps> | ItemType<'range', RangeProps> | ItemType<'rate', RateProps> | ItemType<'signature', SignatureProps> | ItemType<'switch', SwitchProps> | ItemType<'textarea', TextAreaProps> | ItemType<'uploader', UploaderProps> | CustomType | CustomRenderType | CustomFormListType;
+export declare const ConfigListItem: (props: {
+    items: InputConfigType[];
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfigItem: (config: InputConfigType) => import("react/jsx-runtime").JSX.Element;
+export {};