feat(antd/next): add NumberPicker PreviewText (#3237)

alibaba · Jun 28, 2022 · bfef03a · bfef03a
1 parent 8e8a661
commit bfef03a
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 35 deletions.
diff --git a/packages/antd/docs/components/PreviewText.md b/packages/antd/docs/components/PreviewText.md
@@ -239,6 +239,10 @@ Reference https://ant.design/components/time-picker-cn/
 
 Reference https://ant.design/components/time-picker-cn/
 
+### PreviewText.NumberPicker
+
+参考 https://ant.design/components/input-number-cn/
+
 ### PreviewText.Placeholder
 
 | Property name | Type   | Description         | Default value |

diff --git a/packages/antd/docs/components/PreviewText.zh-CN.md b/packages/antd/docs/components/PreviewText.zh-CN.md
@@ -238,6 +238,10 @@ export default () => {
 
 参考 https://ant.design/components/time-picker-cn/
 
+### PreviewText.NumberPicker
+
+参考 https://ant.design/components/input-number-cn/
+
 ### PreviewText.Placeholder
 
 | 属性名 | 类型   | 描述       | 默认值 |

diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -15,6 +15,9 @@
   &-label {
     line-height: @height-base;
     min-height: @height-base - 2;
+    label {
+      cursor: text;
+    }
   }
 
   textarea.@{ant-prefix}-input {

diff --git a/packages/antd/src/number-picker/index.tsx b/packages/antd/src/number-picker/index.tsx
@@ -4,7 +4,7 @@ import { PreviewText } from '../preview-text'
 
 export const NumberPicker = connect(
   InputNumber,
-  mapReadPretty(PreviewText.Input)
+  mapReadPretty(PreviewText.NumberPicker)
 )
 
 export default NumberPicker
diff --git a/packages/antd/src/preview-text/index.tsx b/packages/antd/src/preview-text/index.tsx
@@ -3,6 +3,7 @@ import { isArr, toArr, isValid } from '@formily/shared'
 import { Field } from '@formily/core'
 import { observer, useField } from '@formily/react'
 import { InputProps } from 'antd/lib/input'
+import { InputNumberProps } from 'antd/lib/input-number'
 import { SelectProps } from 'antd/lib/select'
 import { TreeSelectProps } from 'antd/lib/tree-select'
 import { CascaderProps } from 'antd/lib/cascader'
@@ -88,6 +89,28 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = (props) => {
   )
 }
 
+const NumberPicker: React.FC<React.PropsWithChildren<InputNumberProps>> = (
+  props
+) => {
+  const prefixCls = usePrefixCls('form-text', props)
+  return (
+    <Space className={cls(prefixCls, props.className)} style={props.style}>
+      {props.addonBefore}
+      {props.prefix}
+      {usePlaceholder(
+        props.formatter
+          ? props.formatter(String(props.value), {
+              userTyping: false,
+              input: '',
+            })
+          : props.value
+      )}
+      {props['suffix']}
+      {props.addonAfter}
+    </Space>
+  )
+}
+
 const Select: React.FC<React.PropsWithChildren<SelectProps<any>>> = observer(
   (props) => {
     const field = useField<Field>()
@@ -317,6 +340,7 @@ Text.TimePicker = TimePicker
 Text.TimeRangePicker = TimeRangePicker
 Text.Placeholder = Placeholder
 Text.usePlaceholder = usePlaceholder
+Text.NumberPicker = NumberPicker
 
 export const PreviewText = Text
 

diff --git a/packages/next/docs/components/PreviewText.md b/packages/next/docs/components/PreviewText.md
@@ -207,6 +207,10 @@ Reference https://fusion.design/pc/component/basic/date-picker
 
 Reference https://fusion.design/pc/component/basic/time-picker
 
+### PreviewText.NumberPicker
+
+Reference https://fusion.design/pc/component/basic/number-picker
+
 ### PreviewText.Placeholder
 
 | Property name | Type   | Description         | Default value |

diff --git a/packages/next/docs/components/PreviewText.zh-CN.md b/packages/next/docs/components/PreviewText.zh-CN.md
@@ -207,6 +207,10 @@ export default () => {
 
 参考 https://fusion.design/pc/component/basic/time-picker
 
+### PreviewText.NumberPicker
+
+参考 https://fusion.design/pc/component/basic/number-picker
+
 ### PreviewText.Placeholder
 
 | 属性名 | 类型   | 描述       | 默认值 |

diff --git a/packages/next/src/form-item/main.scss b/packages/next/src/form-item/main.scss
@@ -47,7 +47,6 @@
 .#{$form-item-cls}-label {
   position: relative;
   display: flex;
-
   &-content {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -76,6 +75,7 @@
 }
 
 .#{$form-item-cls}-label label {
+  cursor: text;
   color: rgba(0, 0, 0, 0.85);
 }
 

diff --git a/packages/next/src/number-picker/index.tsx b/packages/next/src/number-picker/index.tsx
@@ -5,7 +5,7 @@ import { mapSize, mapStatus } from '../__builtins__'
 export const NumberPicker = connect(
   InputNumber,
   mapProps(mapSize, mapStatus),
-  mapReadPretty(PreviewText.Input)
+  mapReadPretty(PreviewText.NumberPicker)
 )
 
 export default NumberPicker
diff --git a/packages/next/src/preview-text/index.tsx b/packages/next/src/preview-text/index.tsx
@@ -3,6 +3,7 @@ import { isArr, isEmpty, isValid, toArr } from '@formily/shared'
 import { Field } from '@formily/core'
 import { useField, observer } from '@formily/react'
 import { InputProps } from '@alifd/next/lib/input'
+import { NumberPickerProps } from '@alifd/next/lib/number-picker'
 import { SelectProps } from '@alifd/next/lib/select'
 import { TreeSelectProps } from '@alifd/next/lib/tree-select'
 import { CascaderProps } from '@alifd/next/lib/cascader'
@@ -15,7 +16,11 @@ import {
   TimePickerProps as TimePicker2Props,
   RangePickerProps as TimeRangePicker2Props,
 } from '@alifd/next/types/time-picker2'
-import { Tag } from '@alifd/next'
+import {
+  Tag,
+  Input as NextInput,
+  NumberPicker as NextNumberPicker,
+} from '@alifd/next'
 import cls from 'classnames'
 import { formatMomentValue, usePrefixCls } from '../__builtins__'
 
@@ -79,22 +84,19 @@ const getValueByValue: IGetValueByValue = (
 }
 
 const Input: React.FC<React.PropsWithChildren<InputProps>> = (props) => {
-  const prefixCls = usePrefixCls('form-text', props)
-  return (
-    <div className={cls(prefixCls, props.className)}>
-      {props.addonBefore}
-      {props.innerBefore}
-      {usePlaceholder(props.value)}
-      {props.innerAfter}
-      {props.addonAfter}
-    </div>
-  )
+  return <NextInput {...props} isPreview />
+}
+
+const NumberPicker: React.FC<React.PropsWithChildren<NumberPickerProps>> = (
+  props
+) => {
+  return <NextNumberPicker {...props} isPreview />
 }
 
 const Select: React.FC<React.PropsWithChildren<SelectProps>> = observer(
   (props) => {
     const field = useField<Field>()
-    const prefixCls = usePrefixCls('form-text', props)
+    const prefixCls = usePrefixCls('form-preview', props)
     const dataSource: any[] = field?.dataSource?.length
       ? field.dataSource
       : props?.dataSource?.length
@@ -149,7 +151,7 @@ const TreeSelect: React.FC<React.PropsWithChildren<TreeSelectProps>> = observer(
   (props) => {
     const field = useField<Field>()
     const placeholder = usePlaceholder()
-    const prefixCls = usePrefixCls('form-text', props)
+    const prefixCls = usePrefixCls('form-preview', props)
     const dataSource = field?.dataSource?.length
       ? field.dataSource
       : props?.dataSource?.length
@@ -210,7 +212,7 @@ const Cascader: React.FC<React.PropsWithChildren<CascaderProps>> = observer(
   (props) => {
     const field = useField<Field>()
     const placeholder = usePlaceholder()
-    const prefixCls = usePrefixCls('form-text', props)
+    const prefixCls = usePrefixCls('form-preview', props)
     const dataSource: any[] = field?.dataSource?.length
       ? field.dataSource
       : props?.dataSource?.length
@@ -235,30 +237,31 @@ const DatePicker: React.FC<React.PropsWithChildren<DatePickerProps>> = (
   props
 ) => {
   const placeholder = usePlaceholder()
-  const prefixCls = usePrefixCls('form-text', props)
+  const prefixCls = usePrefixCls('form-preview', props)
   const getLabels = () => {
     const labels = formatMomentValue(props.value, props.format, placeholder)
     return isArr(labels) ? labels.join('~') : labels
   }
   return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>
 }
 
-const DateRangePicker: React.FC<React.PropsWithChildren<DateRangePickerProps>> =
-  (props) => {
-    const placeholder = usePlaceholder()
-    const prefixCls = usePrefixCls('form-text', props)
-    const getLabels = () => {
-      const labels = formatMomentValue(props.value, props.format, placeholder)
-      return isArr(labels) ? labels.join('~') : labels
-    }
-    return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>
+const DateRangePicker: React.FC<
+  React.PropsWithChildren<DateRangePickerProps>
+> = (props) => {
+  const placeholder = usePlaceholder()
+  const prefixCls = usePrefixCls('form-preview', props)
+  const getLabels = () => {
+    const labels = formatMomentValue(props.value, props.format, placeholder)
+    return isArr(labels) ? labels.join('~') : labels
   }
+  return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>
+}
 
 const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>> = (
   props
 ) => {
   const placeholder = usePlaceholder()
-  const prefixCls = usePrefixCls('form-text', props)
+  const prefixCls = usePrefixCls('form-preview', props)
   const getLabels = () => {
     const labels = formatMomentValue(props.value, props.format, placeholder)
     return isArr(labels) ? labels.join('~') : labels
@@ -270,7 +273,7 @@ const TimePicker2: React.FC<React.PropsWithChildren<TimePicker2Props>> = (
   props
 ) => {
   const placeholder = usePlaceholder()
-  const prefixCls = usePrefixCls('form-text', props)
+  const prefixCls = usePrefixCls('form-preview', props)
   const getLabels = () => {
     const labels = formatMomentValue(props.value, props.format, placeholder)
     return isArr(labels) ? labels.join('~') : labels
@@ -282,7 +285,7 @@ const TimeRangePicker2: React.FC<
   React.PropsWithChildren<TimeRangePicker2Props>
 > = (props) => {
   const placeholder = usePlaceholder()
-  const prefixCls = usePrefixCls('form-text', props)
+  const prefixCls = usePrefixCls('form-preview', props)
   const getLabels = () => {
     const labels = formatMomentValue(props.value, props.format, placeholder)
     return isArr(labels) ? labels.join('~') : labels
@@ -291,7 +294,7 @@ const TimeRangePicker2: React.FC<
 }
 
 const Text = (props: React.PropsWithChildren<any>) => {
-  const prefixCls = usePrefixCls('form-text', props)
+  const prefixCls = usePrefixCls('form-preview', props)
 
   return (
     <div className={cls(prefixCls, props.className)} style={props.style}>
@@ -301,6 +304,7 @@ const Text = (props: React.PropsWithChildren<any>) => {
 }
 
 Text.Input = Input
+Text.NumberPicker = NumberPicker
 Text.Select = Select
 Text.TreeSelect = TreeSelect
 Text.Cascader = Cascader

diff --git a/packages/next/src/preview-text/main.scss b/packages/next/src/preview-text/main.scss
@@ -1,11 +1,10 @@
 @import '~@alifd/next/lib/core/index-noreset.scss';
 
-$form-text-prefix-cls: '#{$css-prefix}form-text';
+$form-preview-prefix-cls: '#{$css-prefix}form-preview';
 
-.#{$form-text-prefix-cls} {
-  font-size: 14px;
+.#{$form-preview-prefix-cls} {
   font-weight: 400;
-
+  word-break: break-all;
   .#{$css-prefix}tag {
     margin-right: 4px;
   }