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

package/src/components/calendar/index.tsx

@@ -1,7 +1,7 @@
-import { View, Text, ViewProps } from '@tarojs/components';
+import { View, ViewProps } from '@tarojs/components';
 import { Calendar, CalendarProps } from '@nutui/nutui-react-taro';
-import { useMemo, useState } from 'react';
-import clsx from 'clsx';
+import { useState } from 'react';
+import { FairysTaroTextClearBase } from 'components/clear';
 
 export interface FairysTaroCalendarProps extends Partial<CalendarProps> {
   placeholder?: string;
@@ -14,18 +14,17 @@ export interface FairysTaroCalendarProps extends Partial<CalendarProps> {
 export const FairysTaroCalendarBase = (props: FairysTaroCalendarProps) => {
   const { placeholder = '请选择', value, className, style, onChange, ...rest } = props;
   const [visible, setVisible] = useState(false);
-  const clsx_text = useMemo(() => {
-    return clsx('fairys-taro-calendar-text', {
-      'fairys-taro-calendar-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !value,
-      'fairys-taro-calendar-text-value fairystaroform__text-black': value,
-    });
-  }, [value]);
 
   return (
     <View className={`fairys-taro-calendar ${className || ''}`} style={style}>
-      <Text onClick={() => setVisible(true)} className={clsx_text}>
+      <FairysTaroTextClearBase
+        warpClassName="fairys-taro-calendar-text"
+        isValue={!!value}
+        onTextClick={() => setVisible(true)}
+        onClearClick={() => onChange?.(undefined, undefined)}
+      >
         {value || placeholder}
-      </Text>
+      </FairysTaroTextClearBase>
       <Calendar
         {...rest}
         visible={visible}

package/src/components/cascader/index.tsx

@@ -1,7 +1,7 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Cascader, CascaderProps, CascaderOption } from '@nutui/nutui-react-taro';
 import { useMemo, useState } from 'react';
-import clsx from 'clsx';
+import { FairysTaroTextClearBase } from 'components/clear';
 
 export interface FairysTaroCascaderProps
   extends Omit<Partial<CascaderProps>, 'visible' | 'onClose' | 'onChange' | 'value'> {
@@ -74,13 +74,6 @@ export const FairysTaroCascaderBase = (props: FairysTaroCascaderProps) => {
     return '';
   }, [value, labelInValue, valueKey, textKey]);
 
-  const clsx_text = useMemo(() => {
-    return clsx('fairys-taro-cascader-text', {
-      'fairys-taro-cascader-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !render,
-      'fairys-taro-cascader-text-value fairystaroform__text-black': render,
-    });
-  }, [render]);
-
   const _value = useMemo(() => {
     if (Array.isArray(value) && value.length) {
       return value
@@ -100,9 +93,14 @@ export const FairysTaroCascaderBase = (props: FairysTaroCascaderProps) => {
 
   return (
     <View className={`fairys-taro-cascader ${className || ''}`} style={style}>
-      <Text onClick={() => setVisible(true)} className={clsx_text}>
+      <FairysTaroTextClearBase
+        warpClassName="fairys-taro-cascader-text"
+        isValue={!!render}
+        onTextClick={() => setVisible(true)}
+        onClearClick={() => onChange?.(undefined, undefined)}
+      >
         {render || placeholder}
-      </Text>
+      </FairysTaroTextClearBase>
       <Cascader
         {...rest}
         className={`fairys-taro-cascader-body fairystaroform__text-left ${bodyClassName || ''}`}

package/src/components/clear/index.tsx

@@ -0,0 +1,49 @@
+import { Close2 } from '@nutui/icons-react-taro';
+import { View, Text, ITouchEvent } from '@tarojs/components';
+import clsx from 'clsx';
+import { Fragment, useMemo } from 'react';
+
+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 const FairysTaroTextClearBase = (props: SVG_IconProps) => {
+  const { isValue = true, children, warpClassName, warpStyle, onTextClick, onClearClick, ...rest } = props;
+
+  const clsx_text = useMemo(() => {
+    return 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 (
+    <View
+      className={`fairys-taro-clear fairystaroform__flex fairystaroform__items-center fairystaroform__gap-1 ${
+        warpClassName || ''
+      }`}
+      style={warpStyle}
+    >
+      <Text onClick={onTextClick} className={clsx_text}>
+        {children}
+      </Text>
+      {isValue ? <Close2 color="#c2c4cc" onClick={onClearClick} {...rest} /> : <Fragment />}
+    </View>
+  );
+};

package/src/components/date.picker/index.tsx

@@ -1,7 +1,8 @@
-import { View, Text } from '@tarojs/components';
-import { DatePicker, DatePickerProps, CascaderOption } from '@nutui/nutui-react-taro';
+import { View } from '@tarojs/components';
+import { DatePicker, DatePickerProps } from '@nutui/nutui-react-taro';
 import { useMemo, useState } from 'react';
 import clsx from 'clsx';
+import { FairysTaroTextClearBase } from 'components/clear';
 
 export interface FairysTaroDatePickerProps extends Omit<Partial<DatePickerProps>, 'value' | 'onChange'> {
   placeholder?: string;
@@ -131,22 +132,21 @@ export const FairysTaroDatePickerBase = (props: FairysTaroDatePickerProps) => {
   const { placeholder = '请选择', value, className, style, onChange, type = 'date', ...rest } = props;
   const [visible, setVisible] = useState(false);
 
-  const clsx_text = useMemo(() => {
-    return clsx('fairys-taro-date-picker-text', {
-      'fairys-taro-date-picker-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !value,
-      'fairys-taro-date-picker-text-value fairystaroform__text-black': value,
-    });
-  }, [value]);
-
   const render = useMemo(() => {
     return renderDate(value, type);
   }, [value, type]);
 
   return (
     <View className={`fairys-taro-date-picker ${className || ''}`} style={style}>
-      <Text onClick={() => setVisible(true)} className={clsx_text}>
+      <FairysTaroTextClearBase
+        warpClassName="fairys-taro-date-picker-text"
+        isValue={!!render.renderStr}
+        onTextClick={() => setVisible(true)}
+        onClearClick={() => onChange?.(undefined)}
+      >
         {render.renderStr || placeholder}
-      </Text>
+      </FairysTaroTextClearBase>
+
       <DatePicker
         type={type}
         showChinese

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './calendar';
+export * from './cascader';
+export * from './checkbox.group';
+export * from './clear';
+export * from './date.picker';
+export * from './picker';
+export * from './popup.search';
+export * from './radio.group';

package/src/components/picker/index.tsx

@@ -1,7 +1,7 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Picker, TaroPickerProps, PickerOptions } from '@nutui/nutui-react-taro';
 import { useMemo, useState } from 'react';
-import clsx from 'clsx';
+import { FairysTaroTextClearBase } from 'components/clear';
 
 export interface FairysTaroPickerProps extends Omit<Partial<TaroPickerProps>, 'value' | 'onChange'> {
   placeholder?: string;
@@ -23,13 +23,6 @@ export const FairysTaroPickerBase = (props: FairysTaroPickerProps) => {
     return undefined;
   }, [value]);
 
-  const clsx_text = useMemo(() => {
-    return clsx('fairys-taro-picker-text', {
-      'fairys-taro-picker-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !_renderValue,
-      'fairys-taro-picker-text-value fairystaroform__text-black': _renderValue,
-    });
-  }, [_renderValue]);
-
   const _value = useMemo(() => {
     if (Array.isArray(value)) {
       return value.map((item) => item.value);
@@ -39,9 +32,14 @@ export const FairysTaroPickerBase = (props: FairysTaroPickerProps) => {
 
   return (
     <View className={`fairys-taro-picker ${className || ''}`} style={style}>
-      <Text onClick={() => setVisible(true)} className={clsx_text}>
+      <FairysTaroTextClearBase
+        warpClassName="fairys-taro-picker-text"
+        isValue={!!_renderValue}
+        onTextClick={() => setVisible(true)}
+        onClearClick={() => onChange?.(undefined)}
+      >
         {_renderValue || placeholder}
-      </Text>
+      </FairysTaroTextClearBase>
       <Picker
         {...rest}
         className={`fairys-taro-picker-body fairystaroform__text-left ${bodyClassName || ''}`}

package/src/components/popup.search/index.tsx

@@ -1,12 +1,16 @@
 import { View, Text } from '@tarojs/components';
 import { Popup, TaroPopupProps } from '@nutui/nutui-react-taro';
-import { Fragment, useMemo } from 'react';
-import clsx from 'clsx';
-import { useFairysTaroPopupSearchBaseInstance, FairysTaroPopupSearchBaseInstanceContext } from './instance';
+import { Fragment, useEffect, useMemo } from 'react';
+import {
+  useFairysTaroPopupSearchBaseInstance,
+  FairysTaroPopupSearchBaseInstanceContext,
+  useFairysTaroPopupSearchBaseInstanceContext,
+} from './instance';
 import type { FairysTaroPopupSearchBaseInstanceMount } from './instance';
 import { FairysTaroPopupSearchFooterBase, FairysTaroPopupSearchInputBase } from './base';
 import { FairysTaroPopupSearchListVirtual } from './list.virtual';
 import { FairysTaroPopupSearchListTable } from './list.table';
+import { FairysTaroTextClearBase } from 'components/clear';
 
 /**
  * 如果是多选，怎么移除某几个选中项
@@ -16,22 +20,62 @@ export interface FairysTaroPopupSearchProps<T = any>
   extends Partial<TaroPopupProps>,
     FairysTaroPopupSearchBaseInstanceMount<T> {
   placeholder?: string;
-  /**是否显示删除按钮*/
-  showDeleteButton?: boolean;
-  /**是否显示搜索框*/
-  showSearch?: boolean;
-  /**选中项*/
-  value?: T | T[];
-  /**选择数据*/
-  options?: ({
-    label?: string;
-    value?: string | number;
-    [x: string]: any;
-  } & T)[];
-  /**
-   * 最大渲染个数数量
-   */
-  maxTagCount?: number;
+}
+
+function RenderList<T = any>() {
+  const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext<T>();
+  const renderList = instance.renderList;
+  const _tempFilterDataList = state._tempFilterDataList as T[];
+  const operationStatus = state.operationStatus;
+  return renderList?.(_tempFilterDataList || [], operationStatus, instance) || <Fragment />;
+}
+
+function FairysTaroPopupSearchBodyBase<T = any>() {
+  const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext<T>();
+  const renderType = instance.renderType;
+  const showSearch = instance.showSearch;
+  const mode = instance.mode;
+  const columns = instance.columns;
+  const options = instance.options;
+  const isNeedManage = instance.isNeedManage;
+  const value = instance.value;
+  const visible = state.visible;
+
+  useMemo(() => {
+    if (isNeedManage || instance.isUseOptions()) {
+      instance.updateState({ value, _tempValue: value });
+    } else {
+      instance.updateState({ value, _tempValue: undefined });
+    }
+  }, [value, isNeedManage, visible]);
+
+  useMemo(() => instance.updateState({ dataList: options || [], _tempFilterDataList: options || [] }), [options]);
+  useMemo(() => instance.updateState({ mode }), [mode]);
+  useMemo(() => instance.updateState({ columns }), [columns]);
+
+  useEffect(() => {
+    if (visible && typeof instance.onLoadData === 'function') {
+      instance.onSearch('');
+    }
+  }, [visible]);
+
+  return (
+    <View className="fairys-taro-popup-search-content-inner fairystaroform__flex  fairystaroform__flex-1  fairystaroform__flex-col fairystaroform__overflow-hidden">
+      {showSearch ? <FairysTaroPopupSearchInputBase /> : <Fragment />}
+      <View style={{ flex: 1, overflow: 'hidden' }}>
+        {renderType === 'list' ? (
+          <FairysTaroPopupSearchListVirtual<T> />
+        ) : renderType === 'table' ? (
+          <FairysTaroPopupSearchListTable<T> />
+        ) : renderType === 'custom' ? (
+          <RenderList<T> />
+        ) : (
+          <Fragment />
+        )}
+      </View>
+      {mode === 'multiple' ? <FairysTaroPopupSearchFooterBase<T> /> : <Fragment />}
+    </View>
+  );
 }
 
 export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchProps<T>) {
@@ -47,7 +91,7 @@ export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchP
     maxHeight,
     renderText,
     renderListItemText,
-    showDeleteButton = true,
+    showRowDeleteButton = true,
     showSearch = true,
     renderList,
     options,
@@ -59,14 +103,14 @@ export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchP
     displayField = 'label',
     /**渲染类型*/
     renderType = 'list',
-    maxTagCount = 5,
+    maxTagCount = 9,
     /**表格属性*/
     tableProps = {},
     useTableProps,
-    isReplace = false,
+    isNeedManage = false,
+    isUseOptionsChecked = true,
     ...rest
   } = props;
-
   const [state, instance] = useFairysTaroPopupSearchBaseInstance<T>();
 
   instance.maxWidth = maxWidth;
@@ -79,7 +123,8 @@ export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchP
   instance.renderListItemText = renderListItemText;
   instance.tableProps = tableProps;
   instance.useTableProps = useTableProps;
-  instance.isReplace = isReplace;
+  instance.isNeedManage = isNeedManage;
+  instance.isUseOptionsChecked = isUseOptionsChecked;
 
   instance.rowKey = rowKey;
   instance.displayField = displayField;
@@ -87,26 +132,20 @@ export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchP
   instance.columns = columns;
   instance.renderType = renderType;
 
+  instance.showRowDeleteButton = showRowDeleteButton;
+  instance.showSearch = showSearch;
+  instance.maxTagCount = maxTagCount;
+  instance.options = options;
+  instance.value = value;
+
   const operationStatus = state.operationStatus;
   const visible = state.visible;
 
   useMemo(() => instance.ctor(), [maxWidth, maxHeight]);
 
-  useMemo(() => {
-    if (!isReplace) {
-      instance.updateState({ value, _tempValue: value });
-    } else {
-      instance.updateState({ value, _tempValue: undefined });
-    }
-  }, [value, isReplace, visible]);
-
-  useMemo(() => instance.updateState({ dataList: options || [], _tempFilterDataList: options || [] }), [options]);
-  useMemo(() => instance.updateState({ mode }), [mode]);
-  useMemo(() => instance.updateState({ columns }), [columns]);
-
   const renderTextValue = useMemo(() => {
     if (instance.renderText) {
-      return instance.renderText(value);
+      return instance.renderText(value, instance);
     }
     if (instance.mode === 'multiple') {
       if (Array.isArray(value)) {
@@ -123,28 +162,23 @@ export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchP
     return value?.[instance.displayField];
   }, [value, mode, maxTagCount]);
 
-  const clsx_text = useMemo(() => {
-    // 文本溢出显示...
-    return clsx('fairys-taro-popup-search-text', {
-      'fairys-taro-popup-search-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !value,
-      'fairys-taro-popup-search-text-value fairystaroform__text-black': value,
-    });
-  }, [value]);
-
   return (
     <View className={`fairys-taro-popup-search ${className || ''}`} style={style}>
-      <View className="fairys-taro-popup-search-text-container fairystaroform__break-all">
-        <Text onClick={() => instance.updateState({ visible: true })} className={clsx_text}>
-          {renderTextValue || placeholder}
-        </Text>
-      </View>
+      <FairysTaroTextClearBase
+        warpClassName="fairys-taro-popup-search-text-container"
+        isValue={!!renderTextValue}
+        onTextClick={() => instance.updateState({ visible: true })}
+        onClearClick={() => onChange?.(undefined)}
+      >
+        {renderTextValue || placeholder}
+      </FairysTaroTextClearBase>
       <Popup
         lockScroll
         position="bottom"
         closeable
         {...rest}
         left={
-          mode === 'multiple' && !isReplace ? (
+          mode === 'multiple' && isNeedManage ? (
             <Text onClick={instance.updateOperationStatus}>{operationStatus == 'select' ? '管理' : '完成'}</Text>
           ) : (
             <Fragment />
@@ -156,19 +190,7 @@ export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchP
         className="fairys-taro-popup-search-content fairystaroform__flex fairystaroform__flex-col fairystaroform__overflow-hidden"
       >
         <FairysTaroPopupSearchBaseInstanceContext.Provider value={instance}>
-          <View className="fairys-taro-popup-search-content-inner fairystaroform__flex  fairystaroform__flex-1  fairystaroform__flex-col fairystaroform__overflow-hidden">
-            {showSearch ? <FairysTaroPopupSearchInputBase /> : <Fragment />}
-            <View style={{ flex: 1, overflow: 'hidden' }}>
-              {renderType === 'list' ? (
-                <FairysTaroPopupSearchListVirtual />
-              ) : renderType === 'table' ? (
-                <FairysTaroPopupSearchListTable />
-              ) : (
-                <Fragment />
-              )}
-            </View>
-            {mode === 'multiple' ? <FairysTaroPopupSearchFooterBase /> : <Fragment />}
-          </View>
+          {visible ? <FairysTaroPopupSearchBodyBase<T> /> : <Fragment />}
         </FairysTaroPopupSearchBaseInstanceContext.Provider>
       </Popup>
     </View>

package/src/components/popup.search/instance.ts

@@ -7,15 +7,19 @@ export class FairysTaroPopupSearchBaseInstanceMount<T = any> {
   /**选中项改变时触发*/
   onChange?: (value: T[] | T | undefined) => void;
   // 1. 直接传递值 ，2. 请求接口获取值
-  onLoadData?: (params: any) => Promise<T[]>;
+  onLoadData?: (params: any, instance: FairysTaroPopupSearchBaseInstanceMount<T>) => Promise<T[]>;
   /**其他请求参数*/
-  otherRequestParams?: (params: any) => any;
+  otherRequestParams?: (params: any, instance: FairysTaroPopupSearchBaseInstanceMount<T>) => any;
   /**自定义输入框显示文本*/
-  renderText?: (data: T | T[]) => React.ReactNode;
+  renderText?: (data: T | T[], instance: FairysTaroPopupSearchBaseInstanceMount<T>) => React.ReactNode;
   /**自定义渲染列表项文本*/
-  renderListItemText?: (data: T) => React.ReactNode;
+  renderListItemText?: (data: T, instance: FairysTaroPopupSearchBaseInstanceMount<T>) => React.ReactNode;
   /**自定义渲染列表数据*/
-  renderList?: (dataList: T[], type: 'select' | 'manage') => React.ReactNode;
+  renderList?: (
+    dataList: T[],
+    type: 'select' | 'manage',
+    instance: FairysTaroPopupSearchBaseInstanceMount<T>,
+  ) => React.ReactNode;
   /**选择模式*/
   mode?: 'multiple' | 'single' = 'single';
   /**列表项的唯一键值*/
@@ -28,13 +32,15 @@ export class FairysTaroPopupSearchBaseInstanceMount<T = any> {
   maxWidth?: number;
   /**最大弹窗高度*/
   maxHeight?: number;
-  /**直接替换已选择的数据*/
-  isReplace?: boolean = false;
+  /**是否需要管理已选择的数据*/
+  isNeedManage?: boolean = false;
+  /**是否选中状态，在使用 options 参数渲染固定列数据的时候是否需要选中状态*/
+  isUseOptionsChecked?: boolean = true;
   /**
    * 渲染类型
    * @default 'list'
    * */
-  renderType?: 'list' | 'table' = 'list';
+  renderType?: 'list' | 'table' | 'custom' = 'list';
   /**表格属性*/
   tableProps?: Partial<TaroTableProps> = {};
   /**自定义表格属性*/
@@ -42,6 +48,22 @@ export class FairysTaroPopupSearchBaseInstanceMount<T = any> {
     tableProps: Partial<TaroTableProps>,
     instance: FairysTaroPopupSearchBaseInstanceMount<T>,
   ) => Partial<TaroTableProps>;
+  /**是否显示删除按钮*/
+  showRowDeleteButton?: boolean;
+  /**是否显示搜索框*/
+  showSearch?: boolean;
+  /**选中项*/
+  value?: T | T[];
+  /**选择数据*/
+  options?: ({
+    label?: string;
+    value?: string | number;
+    [x: string]: any;
+  } & T)[];
+  /**
+   * 最大渲染个数数量
+   */
+  maxTagCount?: number;
 }
 
 export interface FairysTaroPopupSearchBaseInstanceState<T = any> {
@@ -152,16 +174,25 @@ export class FairysTaroPopupSearchBaseInstance<T = any> extends FairysTaroPopupS
     }
   };
 
+  /**判断是否使用 options 参数,并且不是管理模式*/
+  isUseOptions = () => {
+    if (Array.isArray(this.options) && !this.onLoadData && !this.isNeedManage) {
+      return this.isUseOptionsChecked;
+    }
+    return false;
+  };
+
   /**搜索*/
   onSearch = async (keyword: string) => {
     this.state.search = keyword;
+
     const _keyword = `${keyword || ''}`.trim();
     try {
       if (this.onLoadData && this.state.operationStatus === 'select') {
         // 延时 0.5s 搜索，避免用户输入过快导致请求次数过多
         await new Promise((resolve) => setTimeout(resolve, 500));
         const search = { keyword: _keyword };
-        const dataList = await this.onLoadData(this.otherRequestParams?.(search) || search);
+        const dataList = await this.onLoadData(this.otherRequestParams?.(search, this) || search, this);
         if (Array.isArray(dataList)) {
           this.updateState({ _tempFilterDataList: dataList || [], dataList: dataList || [] });
         } else {

package/src/components/popup.search/list.table.tsx

@@ -50,6 +50,7 @@ export function FairysTaroPopupSearchListTable<T = any>() {
   const operationStatus = state.operationStatus;
   const columns = (state.columns || []) as TableColumnProps[];
   const tableProps = instance.useTableProps?.(instance.tableProps || {}, instance) || instance.tableProps || {};
+  const showRowDeleteButton = instance.showRowDeleteButton;
 
   const _newColumns = useMemo(() => {
     const list = [
@@ -61,7 +62,7 @@ export function FairysTaroPopupSearchListTable<T = any>() {
         render: (rowData: T) => <TableItemCheckBox rowData={rowData} />,
       } as TableColumnProps,
     ].concat([...columns]);
-    if (operationStatus === 'manage' && instance.mode === 'multiple') {
+    if (operationStatus === 'manage' && instance.mode === 'multiple' && showRowDeleteButton) {
       return [
         ...list,
         {
@@ -74,7 +75,7 @@ export function FairysTaroPopupSearchListTable<T = any>() {
       ];
     }
     return list;
-  }, [columns, operationStatus]);
+  }, [columns, operationStatus, showRowDeleteButton]);
 
   return (
     <Table

package/src/components/popup.search/list.virtual.tsx

@@ -16,8 +16,9 @@ function VirtualListItem<T = any>(props: { rowData: T; dataIndex: number; index:
   const _tempValue = state._tempValue;
   const operationStatus = state.operationStatus;
   const manageSelectedDataList = state.manageSelectedDataList;
+  const showRowDeleteButton = instance.showRowDeleteButton;
   const renderText = useMemo(() => {
-    return renderListItemText?.(rowData) || rowData[instance.displayField];
+    return renderListItemText?.(rowData, instance) || rowData[instance.displayField];
   }, [rowData, instance.displayField, renderListItemText]);
 
   const checked = useMemo(
@@ -38,7 +39,7 @@ function VirtualListItem<T = any>(props: { rowData: T; dataIndex: number; index:
         </Checkbox>
       }
       extra={
-        operationStatus === 'manage' ? (
+        operationStatus === 'manage' && showRowDeleteButton ? (
           <Button
             size="mini"
             fill="none"

package/src/index.tsx

@@ -2,12 +2,15 @@
  * 简版表单
  * 用于快速创建表单，支持文本输入、选择框、单选框、复选框等常用表单元素。
  * */
-import { Form } from '@carefrees/form-utils-react-taro';
+import { Form, useForm, useWatch } from '@carefrees/form-utils-react-taro';
 import { FairysTaroSimpleFormProps } from './interface';
 import { ConfigListItem, ConfigItem, InputConfigType } from './item.config';
+export * from './components';
 
 export const FairysTaroSimpleForm = (props: FairysTaroSimpleFormProps) => {
   return <Form labelMode="between" colCount={1} inputBordered={false} {...props} />;
 };
 FairysTaroSimpleForm.Item = ConfigItem;
 FairysTaroSimpleForm.ListItem = ConfigListItem;
+FairysTaroSimpleForm.useForm = useForm;
+FairysTaroSimpleForm.useWatch = useWatch;