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

package/README.md

@@ -1 +1,320 @@
-# 框架 ui 组件库
+# 快捷表单
+
+**引入**
+
+```ts
+import { FairysTaroSimpleForm } from '@fairys/taro-tools-simple-form';
+```
+
+## 组件参数
+
+```ts
+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;
+/**
+ * 简版表单
+ * 用于快速创建表单，支持文本输入、选择框、单选框、复选框等常用表单元素。
+ * */
+import { useForm } from '@carefrees/form-utils-react-taro';
+import { FormProps } from '@carefrees/form-utils-react-taro';
+export interface FairysTaroSimpleFormProps extends FormProps {
+}
+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];
+};
+
+```
+
+其他请参考[@carefrees/form-utils-react-taro](https://sunlxy.github.io/carefrees-form-utils/react/taro.html)
+
+## 案例
+
+```tsx
+import { View, Text } from '@tarojs/components';
+import {
+  connectToastMessage,
+  FairysTaroMainPage,
+  FairysTaroMainPageSearch,
+  FairysTaroMainPageBody,
+  FairysTaroMainPageFooter,
+  globalDataInstance,
+} from '@fairys/taro-tools-react';
+import { Button } from '@nutui/nutui-react-taro';
+import { FairysTaroSimpleForm } from '@fairys/taro-tools-simple-form';
+
+function Index() {
+  const form = FairysTaroSimpleForm.useForm();
+
+  const onSubmit = () => {
+    form
+      .validate()
+      .then((values) => {
+        console.log(values);
+        globalDataInstance.showMessage({
+          type: 'success',
+          content: '表单成功',
+        });
+      })
+      .catch((error) => {
+        globalDataInstance.showMessage({
+          type: 'error',
+          content: error.message || '表单校验失败',
+        });
+      });
+  };
+
+  return (
+    <FairysTaroMainPage>
+      <FairysTaroMainPageSearch>
+        <FairysTaroSimpleForm form={form}>
+          <FairysTaroSimpleForm.Item label="用户名" name="username" type="fairysCalendar" />
+          <FairysTaroSimpleForm.Item
+            label="级联选择器"
+            name="cascader"
+            type="fairysCascader"
+            rules={[{ required: true, message: '请选择级联选择器' }]}
+            attr={{
+              options: [
+                { value: 'A0', text: 'A0_1' },
+                {
+                  value: 'B0',
+                  text: 'B0_1',
+                  children: [
+                    { value: 'B11', text: 'B11_1', leaf: true },
+                    { value: 'B12', text: 'B12_1' },
+                  ],
+                },
+                { value: 'C0', text: 'C0_1' },
+              ],
+            }}
+          />
+          <FairysTaroSimpleForm.Item
+            label="复选框组"
+            name="checkboxGroup"
+            type="fairysCheckboxGroup"
+            rules={[{ required: true, message: '请选择复选框组' }]}
+            attr={{
+              items: [
+                { value: 'A0', label: 'A0_1' },
+                { value: 'B0', label: 'B0_1' },
+                { value: 'C0', label: 'C0_1' },
+              ],
+            }}
+          />
+          <FairysTaroSimpleForm.Item
+            label="日期选择器"
+            name="datePicker"
+            type="fairysDatePicker"
+            rules={[{ required: true, message: '请选择日期选择器' }]}
+            attr={{
+              type: 'datetime',
+            }}
+          />
+          <FairysTaroSimpleForm.Item
+            label="选择器"
+            name="picker"
+            type="fairysPicker"
+            attr={{
+              options: [
+                // 第一列
+                [
+                  { label: '周一', value: 'Monday' },
+                  { label: '周二', value: 'Tuesday' },
+                  { label: '周三', value: 'Wednesday' },
+                  { label: '周四', value: 'Thursday' },
+                  { label: '周五', value: 'Friday' },
+                ],
+                // 第二列
+                [
+                  { label: '上午', value: 'Morning' },
+                  { label: '下午', value: 'Afternoon' },
+                  { label: '晚上', value: 'Evening' },
+                ],
+              ],
+            }}
+          />
+          <FairysTaroSimpleForm.Item
+            label="搜索选择器"
+            name="popupSearch"
+            type="fairysPopupSearch"
+            attr={{
+              placeholder: '请选择',
+              mode: 'single',
+              options: [
+                { value: 'A0', label: 'A0_1' },
+                { value: 'B0', label: 'B0_1' },
+                { value: 'C0', label: 'C0_1' },
+                { value: 'D0', label: 'D0_1' },
+                { value: 'E0', label: 'E0_1' },
+                { value: 'F0', label: 'F0_1' },
+                { value: 'G0', label: 'G0_1' },
+                { value: 'H0', label: 'H0_1' },
+                { value: 'I0', label: 'I0_1' },
+                { value: 'J0', label: 'J0_1' },
+                { value: 'K0', label: 'K0_1' },
+                { value: 'L0', label: 'L0_1' },
+                { value: 'M0', label: 'M0_1' },
+              ],
+            }}
+          />
+          <FairysTaroSimpleForm.Item
+            label="搜索选择器(表格)"
+            name="popupSearch-table"
+            type="fairysPopupSearch"
+            attr={{
+              placeholder: '请选择',
+              mode: 'single',
+              renderType: 'table',
+              columns: [
+                { title: '选项值', key: 'value' },
+                { title: '选项标签', key: 'label' },
+              ],
+              options: [
+                { value: 'A0', label: 'A0_1' },
+                { value: 'B0', label: 'B0_1' },
+                { value: 'C0', label: 'C0_1' },
+                { value: 'D0', label: 'D0_1' },
+                { value: 'E0', label: 'E0_1' },
+                { value: 'F0', label: 'F0_1' },
+                { value: 'G0', label: 'G0_1' },
+                { value: 'H0', label: 'H0_1' },
+                { value: 'I0', label: 'I0_1' },
+                { value: 'J0', label: 'J0_1' },
+                { value: 'K0', label: 'K0_1' },
+                { value: 'L0', label: 'L0_1' },
+                { value: 'M0', label: 'M0_1' },
+              ],
+            }}
+          />
+
+          <FairysTaroSimpleForm.Item
+            label="多选搜索选择器"
+            name="m-popupSearch"
+            type="fairysPopupSearch"
+            attr={{
+              placeholder: '请选择',
+              mode: 'multiple',
+              options: [
+                { value: 'A0', label: 'A0_1' },
+                { value: 'B0', label: 'B0_1' },
+                { value: 'C0', label: 'C0_1' },
+                { value: 'D0', label: 'D0_1' },
+                { value: 'E0', label: 'E0_1' },
+                { value: 'F0', label: 'F0_1' },
+                { value: 'G0', label: 'G0_1' },
+                { value: 'H0', label: 'H0_1' },
+                { value: 'I0', label: 'I0_1' },
+                { value: 'J0', label: 'J0_1' },
+                { value: 'K0', label: 'K0_1' },
+                { value: 'L0', label: 'L0_1' },
+                { value: 'M0', label: 'M0_1' },
+              ],
+            }}
+          />
+          <FairysTaroSimpleForm.Item
+            label="多选搜索选择器(表格)"
+            name="m-popupSearch-table"
+            type="fairysPopupSearch"
+            attr={{
+              placeholder: '请选择',
+              mode: 'multiple',
+              renderType: 'table',
+              isNeedManage: true,
+              columns: [
+                { title: '选项值', key: 'value' },
+                { title: '选项标签', key: 'label' },
+              ],
+              options: [
+                { value: 'A0', label: 'A0_1' },
+                { value: 'B0', label: 'B0_1' },
+                { value: 'C0', label: 'C0_1' },
+                { value: 'D0', label: 'D0_1' },
+                { value: 'E0', label: 'E0_1' },
+                { value: 'F0', label: 'F0_1' },
+                { value: 'G0', label: 'G0_1' },
+                { value: 'H0', label: 'H0_1' },
+                { value: 'I0', label: 'I0_1' },
+                { value: 'J0', label: 'J0_1' },
+                { value: 'K0', label: 'K0_1' },
+                { value: 'L0', label: 'L0_1' },
+                { value: 'M0', label: 'M0_1' },
+              ],
+            }}
+          />
+        </FairysTaroSimpleForm>
+      </FairysTaroMainPageSearch>
+      <FairysTaroMainPageBody>
+       
+      </FairysTaroMainPageBody>
+      <FairysTaroMainPageFooter
+        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '0.3rem 0.5rem' }}
+      >
+        <Button block type="primary" onClick={onSubmit}>
+          提交
+        </Button>
+      </FairysTaroMainPageFooter>
+    </FairysTaroMainPage>
+  );
+}
+export default connectToastMessage(Index);
+```

package/esm/components/calendar/index.d.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from '@tarojs/components';
+import { CalendarProps } from '@nutui/nutui-react-taro';
+export interface FairysTaroCalendarProps extends Partial<CalendarProps> {
+    placeholder?: string;
+    value?: string;
+    className?: string;
+    style?: ViewProps['style'];
+    onChange?: (value: string, date: string | string[]) => void;
+}
+export declare const FairysTaroCalendarBase: (props: FairysTaroCalendarProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/calendar/index.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Calendar } from "@nutui/nutui-react-taro";
+import { useState } from "react";
+import { FairysTaroTextClearBase } from "../clear/index.js";
+const FairysTaroCalendarBase = (props)=>{
+    const { placeholder = "\u8BF7\u9009\u62E9", value, className, style, onChange, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-calendar ${className || ''}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(FairysTaroTextClearBase, {
+                warpClassName: "fairys-taro-calendar-text",
+                isValue: !!value,
+                onTextClick: ()=>setVisible(true),
+                onClearClick: ()=>onChange?.(void 0, void 0),
+                children: value || placeholder
+            }),
+            /*#__PURE__*/ jsx(Calendar, {
+                ...rest,
+                visible: visible,
+                defaultValue: value,
+                onClose: ()=>setVisible(false),
+                onConfirm: (date)=>{
+                    const [year, month, day] = date;
+                    if (year) onChange?.(`${year}-${month}-${day}`, date);
+                    else onChange?.(void 0, date);
+                    setVisible(false);
+                }
+            })
+        ]
+    });
+};
+export { FairysTaroCalendarBase };

package/esm/components/cascader/index.d.ts

@@ -0,0 +1,10 @@
+import { CascaderProps, CascaderOption } from '@nutui/nutui-react-taro';
+export interface FairysTaroCascaderProps extends Omit<Partial<CascaderProps>, 'visible' | 'onClose' | 'onChange' | 'value'> {
+    placeholder?: string;
+    labelInValue?: boolean;
+    value?: (string | number | CascaderOption)[];
+    onChange?: (value: (string | number | CascaderOption)[], pathNodes: CascaderOption[]) => void;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+}
+export declare const FairysTaroCascaderBase: (props: FairysTaroCascaderProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/cascader/index.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Cascader } from "@nutui/nutui-react-taro";
+import { useMemo, useState } from "react";
+import { FairysTaroTextClearBase } from "../clear/index.js";
+const FairysTaroCascaderBase = (props)=>{
+    const { placeholder = "\u8BF7\u9009\u62E9", value, className, style, onChange, labelInValue = true, options, optionKey, bodyClassName, bodyStyle, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    const valueKey = optionKey?.valueKey || 'value';
+    const textKey = optionKey?.textKey || 'text';
+    const childrenKey = optionKey?.childrenKey || 'children';
+    const render = useMemo(()=>{
+        if (Array.isArray(value) && value.length) if (labelInValue) return value.map((it)=>{
+            if ('string' == typeof it || 'number' == typeof it) return it;
+            if (labelInValue) return it?.[textKey] || '';
+            return '';
+        }).filter(Boolean).join('/');
+        else {
+            const _value = [];
+            let _options = options || [];
+            while(_options.length){
+                const it = _options.shift();
+                if ('string' == typeof it || 'number' == typeof it) {
+                    const findx = _options.findIndex((it)=>it[valueKey] === it);
+                    if (findx) {
+                        _value.push(it?.[textKey]);
+                        _options = it?.[childrenKey] || [];
+                    } else break;
+                } else break;
+            }
+            return _value.join('/');
+        }
+        return '';
+    }, [
+        value,
+        labelInValue,
+        valueKey,
+        textKey
+    ]);
+    const _value = useMemo(()=>{
+        if (Array.isArray(value) && value.length) return value.map((it)=>{
+            if ('string' == typeof it || 'number' == typeof it) return it;
+            if (labelInValue) return it[valueKey];
+            return '';
+        }).filter((it)=>'' !== it);
+        return [];
+    }, [
+        value,
+        labelInValue,
+        valueKey
+    ]);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-cascader ${className || ''}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(FairysTaroTextClearBase, {
+                warpClassName: "fairys-taro-cascader-text",
+                isValue: !!render,
+                onTextClick: ()=>setVisible(true),
+                onClearClick: ()=>onChange?.(void 0, void 0),
+                children: render || placeholder
+            }),
+            /*#__PURE__*/ jsx(Cascader, {
+                ...rest,
+                className: `fairys-taro-cascader-body fairystaroform__text-left ${bodyClassName || ''}`,
+                style: bodyStyle,
+                optionKey: optionKey,
+                options: options,
+                value: _value,
+                visible: visible,
+                onChange: (value, pathNodes)=>{
+                    if (labelInValue) {
+                        const _value = pathNodes.map((it)=>{
+                            const { children, ...rest } = it;
+                            return rest;
+                        });
+                        onChange?.(_value, pathNodes);
+                    } else onChange?.(value, pathNodes);
+                },
+                onClose: ()=>setVisible(false)
+            })
+        ]
+    });
+};
+export { FairysTaroCascaderBase };

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

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

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox, CheckboxGroup } from "@nutui/nutui-react-taro";
+const FairysTaroCheckboxGroupBase = (props)=>{
+    const { items, className, ...rest } = props;
+    return /*#__PURE__*/ jsx(CheckboxGroup, {
+        className: `fairys-taro-checkbox-group ${className || ''}`,
+        direction: "horizontal",
+        ...rest,
+        children: items?.map((item)=>/*#__PURE__*/ jsx(Checkbox, {
+                ...item
+            }, item.value))
+    });
+};
+export { FairysTaroCheckboxGroupBase };

package/esm/components/clear/index.d.ts

@@ -0,0 +1,21 @@
+import { ITouchEvent } from '@tarojs/components';
+export interface SVG_IconProps {
+    className?: string;
+    style?: React.CSSProperties;
+    viewBox?: string;
+    name?: string;
+    color?: string;
+    width?: string | number;
+    height?: string | number;
+    size?: string | number;
+    svg64?: string;
+    svgSrc?: string;
+    children?: React.ReactNode;
+    fallback?: boolean;
+    isValue?: boolean;
+    warpClassName?: string;
+    warpStyle?: React.CSSProperties;
+    onTextClick?: (event: ITouchEvent) => void;
+    onClearClick?: (event: React.MouseEvent) => void;
+}
+export declare const FairysTaroTextClearBase: (props: SVG_IconProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/clear/index.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close2 } from "@nutui/icons-react-taro";
+import { Text, View } from "@tarojs/components";
+import clsx from "clsx";
+import { Fragment, useMemo } from "react";
+const FairysTaroTextClearBase = (props)=>{
+    const { isValue = true, children, warpClassName, warpStyle, onTextClick, onClearClick, ...rest } = props;
+    const clsx_text = useMemo(()=>clsx('fairys-taro-text fairystaroform__flex-1', {
+            'fairys-taro-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !isValue,
+            'fairys-taro-text-value fairystaroform__text-black': isValue
+        }), [
+        isValue
+    ]);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-clear fairystaroform__flex fairystaroform__items-center fairystaroform__gap-1 ${warpClassName || ''}`,
+        style: warpStyle,
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                onClick: onTextClick,
+                className: clsx_text,
+                children: children
+            }),
+            isValue ? /*#__PURE__*/ jsx(Close2, {
+                color: "#c2c4cc",
+                onClick: onClearClick,
+                ...rest
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+};
+export { FairysTaroTextClearBase };

package/esm/components/date.picker/index.d.ts

@@ -0,0 +1,18 @@
+import { DatePickerProps } from '@nutui/nutui-react-taro';
+export interface FairysTaroDatePickerProps extends Omit<Partial<DatePickerProps>, 'value' | 'onChange'> {
+    placeholder?: string;
+    /**
+     * 日期格式
+     * @description
+     * 当 type 为 date 时，格式为 YYYY-MM-DD
+     * 当 type 为 time 时，格式为 HH:mm:ss
+     * 当 type 为 year-month 时，格式为 YYYY-MM
+     * 当 type 为 month-day 时，格式为 MM-DD
+     * 当 type 为 datehour 时，格式为 YYYY-MM-DD HH
+     * 当 type 为 datetime 时，格式为 YYYY-MM-DD HH:mm
+     * 当 type 为 hour-minutes 时，格式为 HH:mm
+     */
+    value?: string | Date;
+    onChange?: (value?: string) => void;
+}
+export declare const FairysTaroDatePickerBase: (props: FairysTaroDatePickerProps) => import("react/jsx-runtime").JSX.Element;