feat(antd/next): add NumberPicker PreviewText

Author: janryWang

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 {

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);
 }
 

packages/next/src/preview-text/index.tsx

@@ -96,7 +96,7 @@ const NumberPicker: React.FC<React.PropsWithChildren<NumberPickerProps>> = (
 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
@@ -151,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
@@ -212,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
@@ -237,7 +237,7 @@ 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
@@ -249,7 +249,7 @@ const DateRangePicker: React.FC<
   React.PropsWithChildren<DateRangePickerProps>
 > = (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
@@ -261,7 +261,7 @@ 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
@@ -273,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
@@ -285,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
@@ -294,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}>

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;
   }