@fairys/taro-tools-simple-form 0.0.1

package/README.md

@@ -0,0 +1 @@
+# 框架 ui 组件库

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@fairys/taro-tools-simple-form",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "框架组件库",
+  "homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build --config=./rslib.config.ts",
+    "watch": "carefrees-rslib build --watch --config=./rslib.config.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autumn-fairy-tales/fairys-taro-react.git",
+    "directory": "packages/simple-form"
+  },
+  "files": [
+    "src",
+    "esm"
+  ],
+  "dependencies": {
+    "@carefrees/form-utils-react-taro": "^0.0.16",
+    "@nutui/nutui-react-taro": "^3.0.18",
+    "clsx": "2.1.1",
+    "valtio": "~2.1.5"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.21",
+    "react": "^18.0.0"
+  }
+}

package/src/components/calendar/index.tsx

@@ -0,0 +1,46 @@
+import { View, Text, ViewProps } from '@tarojs/components';
+import { Calendar, CalendarProps } from '@nutui/nutui-react-taro';
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+
+export interface FairysTaroCalendarProps extends Partial<CalendarProps> {
+  placeholder?: string;
+  value?: string;
+  className?: string;
+  style?: ViewProps['style'];
+  onChange?: (value: string, date: string | string[]) => void;
+}
+
+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}>
+        {value || placeholder}
+      </Text>
+      <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?.(undefined, date);
+          }
+          setVisible(false);
+        }}
+      />
+    </View>
+  );
+};

package/src/components/cascader/index.tsx

@@ -0,0 +1,123 @@
+import { View, Text } from '@tarojs/components';
+import { Cascader, CascaderProps, CascaderOption } from '@nutui/nutui-react-taro';
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+
+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;
+}
+
+export const FairysTaroCascaderBase = (props: FairysTaroCascaderProps) => {
+  const {
+    placeholder = '请选择',
+    value,
+    className,
+    style,
+    onChange,
+    labelInValue = true,
+    options,
+    optionKey,
+    ...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 (typeof it === 'string' || typeof it === 'number') {
+              return it;
+            }
+            if (labelInValue) {
+              return it?.[textKey] || '';
+            }
+            return '';
+          })
+          .filter(Boolean)
+          .join('/');
+      } else {
+        // 通过 options 获取数据
+        const _value = [];
+        let _options = options || [];
+        while (_options.length) {
+          const it = _options.shift();
+          if (typeof it === 'string' || typeof it === 'number') {
+            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 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
+        .map((it) => {
+          if (typeof it === 'string' || typeof it === 'number') {
+            return it;
+          }
+          if (labelInValue) {
+            return it[valueKey];
+          }
+          return '';
+        })
+        .filter((it) => it !== '');
+    }
+    return [];
+  }, [value, labelInValue, valueKey]);
+
+  return (
+    <View className={`fairys-taro-cascader ${className || ''}`} style={style}>
+      <Text onClick={() => setVisible(true)} className={clsx_text}>
+        {render || placeholder}
+      </Text>
+      <Cascader
+        {...rest}
+        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)}
+      />
+    </View>
+  );
+};

package/src/components/checkbox.group/index.tsx

@@ -0,0 +1,16 @@
+import { CheckboxGroup, CheckboxGroupProps, Checkbox, CheckboxProps } from '@nutui/nutui-react-taro';
+
+export interface FairysTaroCheckboxGroupProps extends Partial<CheckboxGroupProps> {
+  items?: Partial<CheckboxProps>[];
+}
+
+export const FairysTaroCheckboxGroupBase = (props: FairysTaroCheckboxGroupProps) => {
+  const { items, className, ...rest } = props;
+  return (
+    <CheckboxGroup className={`fairys-taro-checkbox-group ${className || ''}`} direction="horizontal" {...rest}>
+      {items?.map((item) => (
+        <Checkbox key={item.value} {...item} />
+      ))}
+    </CheckboxGroup>
+  );
+};

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

@@ -0,0 +1,168 @@
+import { View, Text } from '@tarojs/components';
+import { DatePicker, DatePickerProps, CascaderOption } from '@nutui/nutui-react-taro';
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+
+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;
+}
+
+const getDate = (selectedValue: (string | number)[], type: DatePickerProps['type']) => {
+  if (Array.isArray(selectedValue) && selectedValue.length) {
+    const [year, month, day, hour, minute, second] = selectedValue;
+    //  "date" | "time" | "year-month" | "month-day" | "datehour" | "datetime" | "hour-minutes"
+    let date = `${year}-${month}-${day} ${hour}:${minute}`;
+    if (type === 'date') {
+      date = `${year}-${month}-${day}`;
+    } else if (type === 'time') {
+      date = `${hour}:${minute}:${second}`;
+    } else if (type === 'year-month') {
+      date = `${year}-${month}`;
+    } else if (type === 'month-day') {
+      date = `${month}-${day}`;
+    } else if (type === 'datehour') {
+      date = `${year}-${month}-${day} ${hour}`;
+    } else if (type === 'datetime') {
+      date = `${year}-${month}-${day} ${hour}:${minute}`;
+    } else if (type === 'hour-minutes') {
+      date = `${hour}:${minute}`;
+    }
+    return date;
+  }
+  return undefined;
+};
+
+const renderDate = (date: string | undefined | Date, type: DatePickerProps['type']) => {
+  let renderStr = undefined;
+  let _value = undefined;
+  const defaultValue = new Date();
+  if (date) {
+    const isDate = date instanceof Date;
+    if (type === 'date') {
+      if (isDate) {
+        renderStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+        _value = date;
+      } else {
+        const [year, month, day] = date.split(/[-|\s]/);
+        renderStr = `${year}-${month}-${day}`;
+        _value = new Date(`${year}-${month}-${day}`);
+      }
+    } else if (type === 'time') {
+      if (isDate) {
+        renderStr = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+        _value = date;
+      } else {
+        const [hour, minute, second] = date.split(/[:|]/);
+        renderStr = `${hour}:${minute}:${second}`;
+        _value = new Date(
+          `${defaultValue.getFullYear()}-${
+            defaultValue.getMonth() + 1
+          }-${defaultValue.getDate()} ${hour}:${minute}:${second}`,
+        );
+      }
+    } else if (type === 'year-month') {
+      if (isDate) {
+        renderStr = `${date.getFullYear()}-${date.getMonth() + 1}`;
+        _value = date;
+      } else {
+        const [year, month] = date.split(/[-|\s]/);
+        renderStr = `${year}-${month}`;
+        _value = new Date(`${year}-${month}-01`);
+      }
+    } else if (type === 'month-day') {
+      if (isDate) {
+        renderStr = `${date.getMonth() + 1}-${date.getDate()}`;
+        _value = date;
+      } else {
+        const [month, day] = date.split(/[-|\s]/);
+        renderStr = `${month}-${day}`;
+        _value = new Date(`${defaultValue.getFullYear()}-${month}-${day}`);
+      }
+    } else if (type === 'datehour') {
+      if (isDate) {
+        renderStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}`;
+        _value = date;
+      } else {
+        const [year, month, day, hour] = date.split(/[-|\s|:]/);
+        renderStr = `${year}-${month}-${day} ${hour}`;
+        _value = new Date(`${year}-${month}-${day} ${hour}:00:00`);
+      }
+    } else if (type === 'datetime') {
+      if (isDate) {
+        renderStr = `${date.getFullYear()}-${
+          date.getMonth() + 1
+        }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
+        _value = date;
+      } else {
+        const [year, month, day, hour, minute] = date.split(/[-|\s|:]/);
+        renderStr = `${year}-${month}-${day} ${hour}:${minute}`;
+        _value = new Date(`${year}-${month}-${day} ${hour}:${minute}:00`);
+      }
+    } else if (type === 'hour-minutes') {
+      if (isDate) {
+        renderStr = `${date.getHours()}:${date.getMinutes()}`;
+        _value = date;
+      } else {
+        const [hour, minute] = date.split(/[:|]/);
+        renderStr = `${hour}:${minute}`;
+        _value = new Date(
+          `${defaultValue.getFullYear()}-${defaultValue.getMonth() + 1}-${defaultValue.getDate()} ${hour}:${minute}:00`,
+        );
+      }
+    }
+  }
+  return { renderStr, _value };
+};
+
+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}>
+        {render.renderStr || placeholder}
+      </Text>
+      <DatePicker
+        type={type}
+        showChinese
+        {...rest}
+        value={render._value}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={(_, selectedValue) => {
+          if (Array.isArray(selectedValue) && selectedValue.length) {
+            onChange?.(getDate(selectedValue, type));
+          } else {
+            onChange?.(undefined);
+          }
+          setVisible(false);
+        }}
+      />
+    </View>
+  );
+};

package/src/components/picker/index.tsx

@@ -0,0 +1,55 @@
+import { View, Text } from '@tarojs/components';
+import { Picker, TaroPickerProps, PickerOptions } from '@nutui/nutui-react-taro';
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+
+export interface FairysTaroPickerProps extends Omit<Partial<TaroPickerProps>, 'value' | 'onChange'> {
+  placeholder?: string;
+  value?: PickerOptions;
+  onChange?: (value: PickerOptions) => void;
+}
+
+export const FairysTaroPickerBase = (props: FairysTaroPickerProps) => {
+  const { placeholder = '请选择', className, style, value, onChange, ...rest } = props;
+
+  const [visible, setVisible] = useState(false);
+
+  const _renderValue = useMemo(() => {
+    if (Array.isArray(value)) {
+      return value.map((item) => item.label).join(' / ');
+    }
+    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);
+    }
+    return undefined;
+  }, [value]);
+
+  return (
+    <View className={`fairys-taro-picker ${className || ''}`} style={style}>
+      <Text onClick={() => setVisible(true)} className={clsx_text}>
+        {_renderValue || placeholder}
+      </Text>
+      <Picker
+        {...rest}
+        value={_value}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={(selectedOptions) => {
+          setVisible(false);
+          onChange?.(selectedOptions);
+        }}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { View } from '@tarojs/components';
+import { Button, Checkbox, Input } from '@nutui/nutui-react-taro';
+import { Fragment } from 'react';
+import { useFairysTaroPopupSearchBaseInstanceContext } from './instance';
+import { Del, Search } from '@nutui/icons-react-taro';
+
+export function FairysTaroPopupSearchFooterBase<T = any>() {
+  const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext<T>();
+  const operationStatus = state.operationStatus;
+  return (
+    <View className="fairys-taro-popup-search-content-footer fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__py-2 fairystaroform__box-border  fairystaroform__px-2">
+      <View className="fairystaroform__flex-1 fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__justify-between">
+        <View className="fairystaroform__flex-1">
+          <Checkbox checked={state.allChecked} onChange={instance.onAllChecked} label="全选" />
+        </View>
+        {operationStatus === 'manage' ? (
+          <View className="fairystaroform__flex-1 fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__justify-end">
+            <Button icon={<Del color="#fff" />} type="danger" onClick={() => instance.onDeleteData()}>
+              删除
+            </Button>
+          </View>
+        ) : (
+          <Fragment />
+        )}
+      </View>
+      {operationStatus === 'select' ? (
+        <View className="fairystaroform__flex-1">
+          <Button onClick={instance.onSave} block type="primary">
+            确定
+          </Button>
+        </View>
+      ) : (
+        <Fragment />
+      )}
+    </View>
+  );
+}
+
+export function FairysTaroPopupSearchInputBase<T = any>() {
+  const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext<T>({ sync: true });
+  const search = state.search || '';
+
+  return (
+    <View className="fairys-taro-popup-search-content-header fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__px-1 fairystaroform__box-border fairystaroform__pr-4 fairystaroform__border-b-1 fairystaroform__border-b-solid fairystaroform__border-b-gray-200">
+      <Input placeholder="请输入" value={search} onChange={instance.onSearch} />
+      <View>
+        <Search className="fairys-taro-popup-search-content-header-search fairystaroform__text-gray-600 fairystaroform__cursor-pointer" />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,176 @@
+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 type { FairysTaroPopupSearchBaseInstanceMount } from './instance';
+import { FairysTaroPopupSearchFooterBase, FairysTaroPopupSearchInputBase } from './base';
+import { FairysTaroPopupSearchListVirtual } from './list.virtual';
+import { FairysTaroPopupSearchListTable } from './list.table';
+
+/**
+ * 如果是多选，怎么移除某几个选中项
+ * */
+
+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;
+}
+
+export function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchProps<T>) {
+  const {
+    placeholder = '请选择',
+    className,
+    style,
+    value,
+    onChange,
+    onLoadData,
+    otherRequestParams,
+    maxWidth,
+    maxHeight,
+    renderText,
+    renderListItemText,
+    showDeleteButton = true,
+    showSearch = true,
+    renderList,
+    options,
+    columns,
+    mode = 'single',
+    /**列表项的唯一键值*/
+    rowKey = 'value',
+    /**提示框 显示字段*/
+    displayField = 'label',
+    /**渲染类型*/
+    renderType = 'list',
+    maxTagCount = 5,
+    /**表格属性*/
+    tableProps = {},
+    useTableProps,
+    isReplace = false,
+    ...rest
+  } = props;
+
+  const [state, instance] = useFairysTaroPopupSearchBaseInstance<T>();
+
+  instance.maxWidth = maxWidth;
+  instance.maxHeight = maxHeight;
+  instance.renderText = renderText;
+  instance.renderList = renderList;
+  instance.onLoadData = onLoadData;
+  instance.otherRequestParams = otherRequestParams;
+  instance.onChange = onChange;
+  instance.renderListItemText = renderListItemText;
+  instance.tableProps = tableProps;
+  instance.useTableProps = useTableProps;
+  instance.isReplace = isReplace;
+
+  instance.rowKey = rowKey;
+  instance.displayField = displayField;
+  instance.mode = mode;
+  instance.columns = columns;
+  instance.renderType = renderType;
+
+  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);
+    }
+    if (instance.mode === 'multiple') {
+      if (Array.isArray(value)) {
+        if (value.length > maxTagCount) {
+          return `${value
+            .slice(0, maxTagCount)
+            .map((item) => item[instance.displayField])
+            .join(',')}...`;
+        }
+        return value.map((item) => item[instance.displayField]).join(',');
+      }
+      return '';
+    }
+    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>
+      <Popup
+        lockScroll
+        position="bottom"
+        closeable
+        {...rest}
+        left={
+          mode === 'multiple' && !isReplace ? (
+            <Text onClick={instance.updateOperationStatus}>{operationStatus == 'select' ? '管理' : '完成'}</Text>
+          ) : (
+            <Fragment />
+          )
+        }
+        visible={visible}
+        onClose={instance.onClose}
+        overlayClassName="fairys-taro-popup-search-overlay"
+        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>
+        </FairysTaroPopupSearchBaseInstanceContext.Provider>
+      </Popup>
+    </View>
+  );
+}