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

package/esm/item.config.js

@@ -0,0 +1,125 @@
+import { jsx } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Fragment } from "react";
+import { FormHideItem, FormHideList, FormItem, FormList } from "@carefrees/form-utils-react-taro";
+import { FairysTaroRadioGroupBase } from "./components/radio.group/index.js";
+import { FairysTaroCalendarBase } from "./components/calendar/index.js";
+import { FairysTaroCascaderBase } from "./components/cascader/index.js";
+import { FairysTaroCheckboxGroupBase } from "./components/checkbox.group/index.js";
+import { FairysTaroDatePickerBase } from "./components/date.picker/index.js";
+import { FairysTaroPickerBase } from "./components/picker/index.js";
+import { FairysTaroPopupSearchBase } from "./components/popup.search/index.js";
+import { Input, InputNumber, Radio, RadioGroup, Range, Rate, Signature, Switch, TextArea, Uploader } from "@nutui/nutui-react-taro";
+const create_itemConfig = (configList)=>/*#__PURE__*/ jsx(Fragment, {
+        children: configList.map((item, index)=>{
+            const { type, isHide, attr = {}, isEmpty, ...rest } = item;
+            const newItem = {
+                attr,
+                ...rest
+            };
+            if ('custom' === type) newItem.children = item.render || /*#__PURE__*/ jsx(Fragment, {});
+            else if ('render' === type) return /*#__PURE__*/ jsx(Fragment, {
+                children: item.render
+            }, index);
+            else if ('formList' === type) {
+                if ('function' == typeof item.children) {
+                    if (isHide) return /*#__PURE__*/ jsx(FormHideList, {
+                        sort: `${index}`,
+                        ...rest,
+                        children: item.children,
+                        name: item.name
+                    }, index);
+                    return /*#__PURE__*/ jsx(FormList, {
+                        sort: `${index}`,
+                        ...rest,
+                        children: item.children,
+                        name: item.name
+                    }, index);
+                }
+                return /*#__PURE__*/ jsx(Fragment, {}, index);
+            } else if ('input' === type) newItem.children = /*#__PURE__*/ jsx(Input, {
+                align: "right",
+                clearable: true,
+                ...attr
+            });
+            else if ('inputNumber' === type) newItem.children = /*#__PURE__*/ jsx(InputNumber, {
+                align: "right",
+                clearable: true,
+                ...attr
+            });
+            else if ('fairysRadioGroup' === type) newItem.children = /*#__PURE__*/ jsx(FairysTaroRadioGroupBase, {
+                ...attr
+            });
+            else if ('radioGroup' === type) newItem.children = /*#__PURE__*/ jsx(RadioGroup, {
+                ...attr
+            });
+            else if ('radio' === type) newItem.children = /*#__PURE__*/ jsx(Radio, {
+                ...attr
+            });
+            else if ('range' === type) newItem.children = /*#__PURE__*/ jsx(Range, {
+                ...attr
+            });
+            else if ('rate' === type) newItem.children = /*#__PURE__*/ jsx(Rate, {
+                ...attr
+            });
+            else if ('signature' === type) newItem.children = /*#__PURE__*/ jsx(Signature, {
+                ...attr
+            });
+            else if ('switch' === type) newItem.children = /*#__PURE__*/ jsx(Switch, {
+                ...attr
+            });
+            else if ('textarea' === type) newItem.children = /*#__PURE__*/ jsx(TextArea, {
+                ...attr
+            });
+            else if ('uploader' === type) newItem.children = /*#__PURE__*/ jsx(Uploader, {
+                ...attr
+            });
+            else if ('fairysCalendar' === type) newItem.children = /*#__PURE__*/ jsx(FairysTaroCalendarBase, {
+                ...attr
+            });
+            else if ('fairysCascader' === type) {
+                const title = attr.title || ('string' == typeof item.label ? item.label : '') || "\u8BF7\u9009\u62E9";
+                newItem.children = /*#__PURE__*/ jsx(FairysTaroCascaderBase, {
+                    ...attr,
+                    title: title
+                });
+            } else if ('fairysCheckboxGroup' === type) newItem.children = /*#__PURE__*/ jsx(FairysTaroCheckboxGroupBase, {
+                ...attr
+            });
+            else if ('fairysDatePicker' === type) {
+                const title = attr.title || ('string' == typeof item.label ? item.label : '') || "\u8BF7\u9009\u62E9";
+                newItem.children = /*#__PURE__*/ jsx(FairysTaroDatePickerBase, {
+                    ...attr,
+                    title: title
+                });
+            } else if ('fairysPicker' === type) {
+                const title = attr.title || ('string' == typeof item.label ? item.label : '') || "\u8BF7\u9009\u62E9";
+                newItem.children = /*#__PURE__*/ jsx(FairysTaroPickerBase, {
+                    ...attr,
+                    title: title
+                });
+            } else if ('fairysPopupSearch' === type) {
+                const title = attr.title || ('string' == typeof item.label ? item.label : '') || "\u8BF7\u9009\u62E9";
+                newItem.children = /*#__PURE__*/ jsx(FairysTaroPopupSearchBase, {
+                    ...attr,
+                    title: title
+                });
+            }
+            if (isEmpty) return /*#__PURE__*/ jsx(View, {
+                className: "fairys-taro-simple-form-item-empty"
+            }, index);
+            if (isHide) return /*#__PURE__*/ jsx(FormHideItem, {
+                sort: `${index}`,
+                ...newItem
+            }, index);
+            return /*#__PURE__*/ jsx(FormItem, {
+                sort: `${index}`,
+                ...newItem
+            }, index);
+        })
+    });
+const ConfigListItem = (props)=>create_itemConfig(props.items);
+const ConfigItem = (config)=>create_itemConfig([
+        config
+    ]);
+export { ConfigItem, ConfigListItem };

package/esm/styles/index.css

@@ -0,0 +1,167 @@
+@import "@carefrees/form-utils-react-taro/assets/index.css";
+
+*, :before, :after, ::backdrop {
+  --un-rotate: 0;
+  --un-rotate-x: 0;
+  --un-rotate-y: 0;
+  --un-rotate-z: 0;
+  --un-scale-x: 1;
+  --un-scale-y: 1;
+  --un-scale-z: 1;
+  --un-skew-x: 0;
+  --un-skew-y: 0;
+  --un-translate-x: 0;
+  --un-translate-y: 0;
+  --un-translate-z: 0;
+  --un-pan-x: ;
+  --un-pan-y: ;
+  --un-pinch-zoom: ;
+  --un-scroll-snap-strictness: proximity;
+  --un-ordinal: ;
+  --un-slashed-zero: ;
+  --un-numeric-figure: ;
+  --un-numeric-spacing: ;
+  --un-numeric-fraction: ;
+  --un-border-spacing-x: 0;
+  --un-border-spacing-y: 0;
+  --un-ring-offset-shadow: 0 0 #0000;
+  --un-ring-shadow: 0 0 #0000;
+  --un-shadow-inset: ;
+  --un-shadow: 0 0 #0000;
+  --un-ring-inset: ;
+  --un-ring-offset-width: 0px;
+  --un-ring-offset-color: #fff;
+  --un-ring-width: 0px;
+  --un-ring-color: #93c5fd80;
+  --un-blur: ;
+  --un-brightness: ;
+  --un-contrast: ;
+  --un-drop-shadow: ;
+  --un-grayscale: ;
+  --un-hue-rotate: ;
+  --un-invert: ;
+  --un-saturate: ;
+  --un-sepia: ;
+  --un-backdrop-blur: ;
+  --un-backdrop-brightness: ;
+  --un-backdrop-contrast: ;
+  --un-backdrop-grayscale: ;
+  --un-backdrop-hue-rotate: ;
+  --un-backdrop-invert: ;
+  --un-backdrop-opacity: ;
+  --un-backdrop-saturate: ;
+  --un-backdrop-sepia: ;
+}
+
+.fairystaroform__box-border {
+  box-sizing: border-box;
+}
+
+.fairystaroform__flex {
+  display: flex;
+}
+
+.fairystaroform__flex-1 {
+  flex: 1;
+}
+
+.fairystaroform__flex-row {
+  flex-direction: row;
+}
+
+.fairystaroform__flex-col {
+  flex-direction: column;
+}
+
+.fairystaroform__flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.fairystaroform__cursor-pointer {
+  cursor: pointer;
+}
+
+.fairystaroform__items-center {
+  align-items: center;
+}
+
+.fairystaroform__justify-end {
+  justify-content: flex-end;
+}
+
+.fairystaroform__justify-between {
+  justify-content: space-between;
+}
+
+.fairystaroform__gap-1 {
+  gap: .25rem;
+}
+
+.fairystaroform__overflow-hidden {
+  overflow: hidden;
+}
+
+.fairystaroform__border-b-1 {
+  border-bottom-width: 1px;
+}
+
+.fairystaroform__border-b-gray-200 {
+  --un-border-opacity: 1;
+  --un-border-bottom-opacity: var(--un-border-opacity);
+  border-bottom-color: rgb(229 231 235 / var(--un-border-bottom-opacity));
+}
+
+.fairystaroform__border-b-solid {
+  border-bottom-style: solid;
+}
+
+.fairystaroform__px-1 {
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.fairystaroform__px-2 {
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+.fairystaroform__py-2 {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.fairystaroform__pr-4 {
+  padding-right: 1rem;
+}
+
+.fairystaroform__text-left {
+  text-align: left;
+}
+
+.fairystaroform__text-black {
+  --un-text-opacity: 1;
+  color: rgb(0 0 0 / var(--un-text-opacity));
+}
+
+.fairystaroform__text-gray-600 {
+  --un-text-opacity: 1;
+  color: rgb(75 85 99 / var(--un-text-opacity));
+}
+
+.fairystaroform__font-normal {
+  font-weight: 400;
+}
+
+.nut-cell.fairys-taro-popup-search-list-virtual-cell > .nut-cell-left > .nut-cell-title {
+  width: 100%;
+}
+
+.nut-cell.fairys-taro-popup-search-list-virtual-cell > .nut-cell-extra {
+  flex: none;
+}
+
+.fairys-taro-popup-search-list-table .nut-table-main-head-tr {
+  z-index: 10;
+  position: relative;
+}
+

package/lib/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __webpack_modules__ = {
+    "./components": function(module) {
+        module.exports = require("./components/index.js");
+    },
+    "./item.config": function(module) {
+        module.exports = require("./item.config.js");
+    },
+    "@carefrees/form-utils-react-taro": function(module) {
+        module.exports = require("@carefrees/form-utils-react-taro");
+    },
+    "react/jsx-runtime": function(module) {
+        module.exports = require("react/jsx-runtime");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        FairysTaroSimpleForm: ()=>FairysTaroSimpleForm
+    });
+    var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("react/jsx-runtime");
+    var _carefrees_form_utils_react_taro__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("@carefrees/form-utils-react-taro");
+    var _item_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./item.config");
+    var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./components");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _components__WEBPACK_IMPORTED_MODULE_3__)if ([
+        "default",
+        "FairysTaroSimpleForm"
+    ].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components__WEBPACK_IMPORTED_MODULE_3__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    const FairysTaroSimpleForm = (props)=>/*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_carefrees_form_utils_react_taro__WEBPACK_IMPORTED_MODULE_1__.Form, {
+            labelMode: "between",
+            colCount: 1,
+            inputBordered: false,
+            ...props
+        });
+    FairysTaroSimpleForm.Item = _item_config__WEBPACK_IMPORTED_MODULE_2__.ConfigItem;
+    FairysTaroSimpleForm.ListItem = _item_config__WEBPACK_IMPORTED_MODULE_2__.ConfigListItem;
+    FairysTaroSimpleForm.useForm = _carefrees_form_utils_react_taro__WEBPACK_IMPORTED_MODULE_1__.useForm;
+    FairysTaroSimpleForm.useWatch = _carefrees_form_utils_react_taro__WEBPACK_IMPORTED_MODULE_1__.useWatch;
+})();
+exports.FairysTaroSimpleForm = __webpack_exports__.FairysTaroSimpleForm;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FairysTaroSimpleForm"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/package.json

@@ -3,7 +3,7 @@
   "author": "SunLxy <1011771396@qq.com>",
   "description": "框架组件库",
   "homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "lib/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",
@@ -25,7 +25,7 @@
     "esm"
   ],
   "dependencies": {
-    "@carefrees/form-utils-react-taro": "^0.0.16",
+    "@carefrees/form-utils-react-taro": "^0.0.17",
     "@nutui/nutui-react-taro": "^3.0.18",
     "clsx": "2.1.1",
     "valtio": "~2.1.5"

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 || ''}`}