Merge pull request #802 from thundersdata-frontend/form-issue

refactor: 全面优化组件在表单下使用时的样式
thundersdata-frontend · Dec 29, 2023 · bce7009 · bce7009
2 parents ff71041 + e81ddb0
commit bce7009
Show file tree

Hide file tree

Showing 36 changed files with 648 additions and 632 deletions.
diff --git a/.changeset/good-rings-hunt.md b/.changeset/good-rings-hunt.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': minor
+---
+
+refactor: 全面优化组件在表单下使用时的样式
diff --git a/.changeset/ten-parents-protect.md b/.changeset/ten-parents-protect.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': minor
+---
+
+refactor: 全面优化组件在表单下使用时的样式
diff --git a/packages/react-native-picker/src/components/Label/index.tsx b/packages/react-native-picker/src/components/Label/index.tsx
diff --git a/packages/react-native-picker/src/date-period-input/index.md b/packages/react-native-picker/src/date-period-input/index.md
@@ -30,24 +30,27 @@ group:
 
 ## API
 
-| 属性                     | 必填    | 说明             | 类型           | 默认值                 |
-| ------------------------ | ------- | ---------------- | -------------- | ---------------------- | -------------------- | --- |
-| indicatorBackgroundColor | `false` | 指示器背景色     | `string`       |                        |
-| itemTextStyle            | `false` | 数据行文字样式   | `TextStyle`    |                        |
-| itemHeight               | `false` | 数据行高度       | `number`       |                        |
-| itemStyle                | `false` | 数据行样式       | `ViewStyle`    |                        |
-| containerStyle           | `false` | 选择器容器样式   | `ViewStyle`    |                        |
-| mode                     | `false` | 显示模式         | `DateMode`     |                        |
-| labelUnit                | `false` | 单位文字         | `LabelUnit`    |                        |
-| format                   | `false` | 日期格式化       | `string`       | `YYYY-MM-DD`           |
-| title                    | `false` | 选择器标题       | `string`       |                        |
-| onClose                  | `false` | 弹窗关闭事件     | `() => void`   |                        |
-| cancelText               | `false` | 取消按钮文本     | `string`       | `取消`                 |
-| okText                   | `false` | 确认按钮文本     | `string`       | `确定`                 |
-| activeOpacity            | `false` | 按下时的不透明度 | `number`       | `0.6`                  |
-| label                    | `false` | 标签文本         | `ReactNode`    |                        |
-| placeholders             | `false` | 默认提示语       | `string[]`     | `['请选择', '请选择']` |
-| value                    | `false` | 当前日期         | `[Date         | undefined, Date        | undefined]`          |     |
-| onChange                 | `false` | 修改日期事件     | `(value: [Date | undefined, Date        | undefined]) => void` |     |
-| allowClear               | `false` | 是否允许清除     | `boolean`      | `true`                 |
-| disabled                 | `false` | 是否禁用         | `boolean`      | `false`                |
+| 属性                     | 必填    | 说明                         | 类型            | 默认值                 |
+| ------------------------ | ------- | ---------------------------- | --------------- | ---------------------- | -------------------- | --- |
+| indicatorBackgroundColor | `false` | 指示器背景色                 | `string`        |                        |
+| itemTextStyle            | `false` | 数据行文字样式               | `TextStyle`     |                        |
+| itemHeight               | `false` | 数据行高度                   | `number`        |                        |
+| itemStyle                | `false` | 数据行样式                   | `ViewStyle`     |                        |
+| containerStyle           | `false` | 选择器容器样式               | `ViewStyle`     |                        |
+| mode                     | `false` | 显示模式                     | `DateMode`      |                        |
+| labelUnit                | `false` | 单位文字                     | `LabelUnit`     |                        |
+| format                   | `false` | 日期格式化                   | `string`        | `YYYY-MM-DD`           |
+| title                    | `false` | 选择器标题                   | `string`        |                        |
+| onClose                  | `false` | 弹窗关闭事件                 | `() => void`    |                        |
+| cancelText               | `false` | 取消按钮文本                 | `string`        | `取消`                 |
+| okText                   | `false` | 确认按钮文本                 | `string`        | `确定`                 |
+| activeOpacity            | `false` | 按下时的不透明度             | `number`        | `0.6`                  |
+| label                    | `false` | 标签文本                     | `ReactNode`     |                        |
+| labelPosition            | `false` | 标签位置。输入框左侧或者顶部 | `left` \| `top` | `left`                 |
+| colon                    | `false` | 是否在标签后显示冒号         | `boolean`       | `false`                |
+| required                 | `false` | 是否在标签前显示必填标识     | `boolean`       | `false`                |
+| placeholders             | `false` | 默认提示语                   | `string[]`      | `['请选择', '请选择']` |
+| value                    | `false` | 当前日期                     | `[Date          | undefined, Date        | undefined]`          |     |
+| onChange                 | `false` | 修改日期事件                 | `(value: [Date  | undefined, Date        | undefined]) => void` |     |
+| allowClear               | `false` | 是否允许清除                 | `boolean`       | `true`                 |
+| disabled                 | `false` | 是否禁用                     | `boolean`       | `false`                |
diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx
@@ -1,8 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
 
-import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
-import { useSafeState } from '@td-design/rn-hooks';
+import { Box, Brief, Flex, helpers, Label, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 import dayjs from 'dayjs';
 
 import { DatePickerPropsBase, ModalPickerProps } from '../components/DatePicker/type';
@@ -14,6 +13,12 @@ export interface DatePeriodInputProps
     Omit<ModalPickerProps, 'visible' | 'displayType'> {
   /** 标签文本 */
   label?: ReactNode;
+  /** 标签文本位置 */
+  labelPosition?: 'top' | 'left';
+  /** 是否显示冒号 */
+  colon?: boolean;
+  /** 是否必填 */
+  required?: boolean;
   /** 默认提示语 */
   placeholders?: string[];
   value?: [Date | undefined, Date | undefined];
@@ -22,20 +27,26 @@ export interface DatePeriodInputProps
   allowClear?: boolean;
   /** 是否禁用 */
   disabled?: boolean;
+  /** 额外内容 */
+  brief?: ReactNode;
 }
 
 const { ONE_PIXEL } = helpers;
 
 /** 适用于筛选条件下的日期区间选择 */
 const DatePeriodInput: FC<DatePeriodInputProps> = ({
   label,
+  labelPosition = 'left',
+  required = false,
+  colon = false,
   placeholders = ['请选择', '请选择'],
   format = 'YYYY-MM-DD',
   value,
   onChange,
   allowClear = true,
   disabled = false,
   activeOpacity = 0.6,
+  brief,
   ...restProps
 }) => {
   const theme = useTheme();
@@ -53,12 +64,8 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
     handleInputClear2,
   } = useDatePeriodInput({ value, onChange, format });
 
-  const [containerWidth, setContainerWidth] = useSafeState(0);
-  const [symbolWidth, setSymbolWidth] = useSafeState(0);
-
   const styles = StyleSheet.create({
     content: {
-      width: (containerWidth - symbolWidth) / 2,
       paddingVertical: theme.spacing.x2,
       paddingHorizontal: theme.spacing.x1,
       justifyContent: 'space-between',
@@ -68,73 +75,66 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
     icon: { alignItems: 'flex-end' },
   });
 
-  const BaseContent1 = (
-    <>
-      <Flex>
-        <SvgIcon name="date" color={theme.colors.icon} />
-        <Text variant="p1" color={disabled ? 'disabled' : dates[0] ? 'text' : 'gray300'} marginLeft="x2">
-          {dates[0] ? dayjs(dates[0]).format(format) : placeholders[0]}
-        </Text>
-      </Flex>
-      {!disabled && allowClear && dates[0] && (
-        <Pressable activeOpacity={1} onPress={handleInputClear1} hitOffset={10} style={styles.icon}>
-          <SvgIcon name="closecircleo" color={theme.colors.icon} />
-        </Pressable>
-      )}
-    </>
-  );
-
-  const BaseContent2 = (
-    <>
-      <Flex>
-        <SvgIcon name="date" color={theme.colors.icon} />
-        <Text variant="p1" color={disabled ? 'disabled' : dates[1] ? 'text' : 'gray300'} marginLeft="x2">
-          {dates[1] ? dayjs(dates[1]).format(format) : placeholders[1]}
+  const Content = (
+    <Flex
+      flex={1}
+      justifyContent="space-between"
+      alignItems="center"
+      borderWidth={ONE_PIXEL}
+      borderColor="border"
+      borderRadius="x1"
+    >
+      <Pressable disabled={disabled} onPress={handleStartPress} activeOpacity={activeOpacity} style={styles.content}>
+        <Flex>
+          <SvgIcon name="date" color={theme.colors.icon} />
+          <Text variant="p1" color={disabled ? 'disabled' : dates[0] ? 'text' : 'gray300'} marginLeft="x2">
+            {dates[0] ? dayjs(dates[0]).format(format) : placeholders[0]}
+          </Text>
+        </Flex>
+        {!disabled && allowClear && dates[0] && (
+          <Pressable activeOpacity={1} onPress={handleInputClear1} hitOffset={10} style={styles.icon}>
+            <SvgIcon name="closecircleo" color={theme.colors.icon} />
+          </Pressable>
+        )}
+      </Pressable>
+      <Box paddingHorizontal="x2">
+        <Text variant="p1" color="text">
+          ~
         </Text>
-      </Flex>
-      {!disabled && allowClear && dates[1] && (
-        <Pressable activeOpacity={1} onPress={handleInputClear2} hitOffset={10} style={styles.icon}>
-          <SvgIcon name="closecircleo" color={theme.colors.icon} />
-        </Pressable>
-      )}
-    </>
-  );
-
-  const Content1 = disabled ? (
-    <Box style={styles.content}>{BaseContent1}</Box>
-  ) : (
-    <Pressable onPress={handleStartPress} activeOpacity={activeOpacity} style={styles.content}>
-      {BaseContent1}
-    </Pressable>
-  );
-
-  const Content2 = disabled ? (
-    <Box style={styles.content}>{BaseContent2}</Box>
-  ) : (
-    <Pressable onPress={handleEndPress} activeOpacity={activeOpacity} style={styles.content}>
-      {BaseContent2}
-    </Pressable>
+      </Box>
+      <Pressable disabled={disabled} onPress={handleEndPress} activeOpacity={activeOpacity} style={styles.content}>
+        <Flex>
+          <SvgIcon name="date" color={theme.colors.icon} />
+          <Text variant="p1" color={disabled ? 'disabled' : dates[1] ? 'text' : 'gray300'} marginLeft="x2">
+            {dates[1] ? dayjs(dates[1]).format(format) : placeholders[1]}
+          </Text>
+        </Flex>
+        {!disabled && allowClear && dates[1] && (
+          <Pressable activeOpacity={1} onPress={handleInputClear2} hitOffset={10} style={styles.icon}>
+            <SvgIcon name="closecircleo" color={theme.colors.icon} />
+          </Pressable>
+        )}
+      </Pressable>
+    </Flex>
   );
 
   return (
-    <Box>
-      <Label label={label} />
-      <Flex
-        justifyContent="space-between"
-        alignItems="center"
-        borderWidth={ONE_PIXEL}
-        borderColor="border"
-        borderRadius="x1"
-        onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
-      >
-        {Content1}
-        <Box paddingHorizontal="x2" onLayout={e => setSymbolWidth(e.nativeEvent.layout.width)}>
-          <Text variant="p1" color="text">
-            ~
-          </Text>
+    <>
+      {labelPosition === 'top' ? (
+        <Box>
+          <Label {...{ label, colon, required }} />
+          {Content}
+          <Brief brief={brief} />
+        </Box>
+      ) : (
+        <Box>
+          <Flex>
+            <Label {...{ label, colon, required }} />
+            {Content}
+          </Flex>
+          <Brief brief={brief} />
         </Box>
-        {Content2}
-      </Flex>
+      )}
       <DatePicker
         {...restProps}
         {...{
@@ -147,24 +147,8 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
           value: dates[currentIndex],
         }}
       />
-    </Box>
+    </>
   );
 };
 
 export default DatePeriodInput;
-
-const Label = ({ label }: Pick<DatePeriodInputProps, 'label'>) => {
-  if (!!label)
-    return (
-      <Flex marginRight="x2" marginBottom="x1" alignItems="center">
-        {typeof label === 'string' ? (
-          <Text variant="p1" color="text">
-            {label}
-          </Text>
-        ) : (
-          label
-        )}
-      </Flex>
-    );
-  return null;
-};
diff --git a/packages/react-native-picker/src/date-picker-input/index.md b/packages/react-native-picker/src/date-picker-input/index.md
@@ -53,6 +53,7 @@ group:
 | label                    | `false` | 标签文本         | `ReactNode`                                  |              |
 | labelPosition            | `false` | 标签文本位置     | `top \| left`                                | `top`        |
 | required                 | `false` | 是否必填         | `boolean`                                    | `false`      |
+| colon                    | `false` | 是否显示冒号     | `boolean`                                    | `false`      |
 | placeholder              | `false` | 默认提示语       | `string`                                     | `请选择`     |
 | allowClear               | `false` | 是否允许清除     | `boolean`                                    | `true`       |
 | disabled                 | `false` | 是否禁用         | `boolean`                                    | `false`      |

diff --git a/packages/react-native-picker/src/date-picker-input/index.tsx b/packages/react-native-picker/src/date-picker-input/index.tsx
@@ -1,11 +1,9 @@
 import React, { forwardRef, ReactNode } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
+import { Box, Brief, Flex, helpers, Label, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 
-import { Brief } from '../components/Brief';
 import { DatePickerPropsBase } from '../components/DatePicker/type';
-import { Label } from '../components/Label';
 import DatePicker from '../date-picker';
 import { ModalPickerProps } from '../picker/type';
 import { PickerRef } from '../type';
@@ -16,6 +14,8 @@ export interface DatePickerInputProps extends DatePickerPropsBase, Omit<ModalPic
   label?: ReactNode;
   /** 标签文本位置 */
   labelPosition?: 'top' | 'left';
+  /** 是否显示冒号 */
+  colon?: boolean;
   /** 是否必填 */
   required?: boolean;
   /** 是否禁用 */
@@ -36,9 +36,10 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
   (
     {
       label,
-      labelPosition = 'top',
+      labelPosition = 'left',
       placeholder = '请选择',
       required = false,
+      colon = false,
       format = 'YYYY-MM-DD',
       value,
       onChange,
@@ -112,14 +113,14 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
       <>
         {labelPosition === 'top' ? (
           <Box>
-            <Label {...{ label, required }} />
+            <Label {...{ label, required, colon }} />
             {Content}
             <Brief brief={brief} />
           </Box>
         ) : (
           <Box>
             <Flex>
-              <Label {...{ label, required }} />
+              <Label {...{ label, required, colon }} />
               {Content}
             </Flex>
             <Brief brief={brief} />

diff --git a/packages/react-native-picker/src/picker-input/index.md b/packages/react-native-picker/src/picker-input/index.md
@@ -46,6 +46,7 @@ group:
 | label | `false` | 标签文本 | `ReactNode` |  |
 | labelPosition | `false` | 标签文本位置 | `top \| left` | `top` |
 | required | `false` | 是否必填 | `boolean` | `false` |
+| colon | `false` | 是否显示冒号 | `boolean` | `false` |
 | placeholder | `false` | 默认提示语 | `string` | `请选择` |
 | allowClear | `false` | 是否允许清除 | `boolean` | `true` |
 | disabled | `false` | 是否禁用 | `boolean` | `false` |