feat(range-input): support borderless mode (#3015)

* feat(range-input): support borderless mode

* fix: type.ts

* chore: update _common

* feat(range-input): update usage

script/generate-usage/config.js

@@ -531,6 +531,31 @@ module.exports = {
       }, [changedProps]);
     `,
   },
+  'time-picker': {
+    importStr: `
+      import TimePickerConfigProps from './time-picker-props.json';\n
+      import TimeRangePickerConfigProps from './time-range-picker-props.json';\n
+      import { TimePicker, TimeRangePicker } from 'tdesign-react';\n`,
+    configStr: `
+      const [configList, setConfigList] = useState(TimePickerConfigProps);
+    `,
+    panelStr: `
+      const panelList = [
+        { label: 'timePicker', value: 'timePicker', config: TimePickerConfigProps },
+        { label: 'timeRangePicker', value: 'timeRangePicker', config: TimeRangePickerConfigProps }
+      ];
+
+      const panelMap = {
+        timePicker: <TimePicker {...changedProps} />,
+        timeRangePicker: <TimeRangePicker {...changedProps} />
+      };
+    `,
+    usageStr: `
+      useEffect(() => {
+        setRenderComp(panelMap[panel]);
+      }, [changedProps, panel]);
+    `,
+  },
   'tree-select': {
     importStr: `
       import configProps from './props.json';\n
@@ -595,26 +620,6 @@ module.exports = {
       }, [changedProps]);
     `,
   },
-  'time-picker': {
-    importStr: `
-      import configProps from './props.json';\n
-      import { TimePicker } from 'tdesign-react';\n`,
-    configStr: `
-      const [configList, setConfigList] = useState(configProps);
-    `,
-    panelStr: `
-      const panelList = [{ label: 'timePicker', value: 'timePicker' }, { label: 'timeRangePicker', value: 'timeRangePicker' }];
-      const panelMap = {
-        timePicker: <TimePicker {...changedProps} />,
-        timeRangePicker: <TimePicker.TimeRangePicker {...changedProps} />
-      };
-    `,
-    usageStr: `
-      useEffect(() => {
-        setRenderComp(panelMap[panel]);
-      }, [changedProps, panel]);
-    `,
-  },
   upload: {
     importStr: `
       import configProps from './props.json';\n
@@ -1121,4 +1126,20 @@ module.exports = {
     }, [changedProps]);
   `,
   },
+  'range-input': {
+    importStr: `
+      import configProps from './props.json';\n
+      import { RangeInput } from 'tdesign-react';\n`,
+    configStr: `
+      const [configList, setConfigList] = useState(configProps);
+    `,
+    panelStr: `
+      const panelList = [{ label: 'rangeInput', value: 'rangeInput' }];
+    `,
+    usageStr: `
+      useEffect(() => {
+        setRenderComp(<RangeInput {...changedProps} />);
+      }, [changedProps]);
+    `,
+  },
 };

src/date-picker/date-picker.en-US.md

@@ -1,12 +1,13 @@
 :: BASE_DOC ::
 
 ## API
+
 ### DatePicker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
@@ -39,13 +40,15 @@ onFocus | Function |  | Typescript：`(context: { value: DateValue; e: FocusEven
 onPick | Function |  | Typescript：`(value: DateValue) => void`<br/> | N
 onPresetClick | Function |  | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
 
+
 ### DateRangePicker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
 clearable | Boolean | false | \- | N
 defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
@@ -79,12 +82,13 @@ onInput | Function |  | Typescript：`(context: { input: string; value: DateRang
 onPick | Function |  | Typescript：`(value: DateValue, context: PickContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
 onPresetClick | Function |  | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
 
+
 ### DatePickerPanel Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 defaultTime | String | '00:00:00' | Time selector default value | N
 `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | extends `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | N
 onCellClick | Function |  | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N
@@ -96,12 +100,13 @@ onPresetClick | Function |  | Typescript：`(context: { preset: PresetDate, e: M
 onTimeChange | Function |  | Typescript：`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`<br/> | N
 onYearChange | Function |  | Typescript：`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`<br/> | N
 
+
 ### DateRangePickerPanel Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
 `Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | \- | - | extends `Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | N
 onCellClick | Function |  | Typescript：`(context: { date: Date[], partial: DateRangePickerPartial, e: MouseEvent }) => void`<br/> | N

src/date-picker/date-picker.md

@@ -4,7 +4,7 @@
 
 ### DatePicker Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -40,13 +40,15 @@ onFocus | Function |  | TS 类型：`(context: { value: DateValue; e: FocusEvent
 onPick | Function |  | TS 类型：`(value: DateValue) => void`<br/>面板选中值后触发 | N
 onPresetClick | Function |  | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
 
+
 ### DateRangePicker Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowInput | Boolean | false | 是否允许输入日期 | N
+borderless | Boolean | false | 无边框模式 | N
 cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
 clearable | Boolean | false | 是否显示清除按钮 | N
 defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N
@@ -80,9 +82,10 @@ onInput | Function |  | TS 类型：`(context: { input: string; value: DateRange
 onPick | Function |  | TS 类型：`(value: DateValue, context: PickContext) => void`<br/>选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
 onPresetClick | Function |  | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
 
+
 ### DatePickerPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -97,9 +100,10 @@ onPresetClick | Function |  | TS 类型：`(context: { preset: PresetDate, e: Mo
 onTimeChange | Function |  | TS 类型：`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`<br/>时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`<br/> | N
 onYearChange | Function |  | TS 类型：`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`<br/>年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`<br/> | N
 
+
 ### DateRangePickerPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N

src/date-picker/defaultProps.ts

@@ -22,6 +22,7 @@ export const datePickerDefaultProps: TdDatePickerProps = {
 
 export const dateRangePickerDefaultProps: TdDateRangePickerProps = {
   allowInput: false,
+  borderless: false,
   cancelRangeSelectLimit: false,
   clearable: false,
   defaultTime: ['00:00:00', '23:59:59'],

src/date-picker/hooks/useRange.tsx

@@ -51,6 +51,7 @@ export default function useRange(props: TdDateRangePickerProps) {
   const rangeInputProps = {
     ...props.rangeInputProps,
     ref: inputRef,
+    borderless: props.borderless,
     size: props.size,
     separator: props.separator ?? globalDatePickerConfig.rangeSeparator,
     clearable: props.clearable,

src/date-picker/type.ts

@@ -158,6 +158,11 @@ export interface TdDateRangePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。
    * @default false

src/range-input/RangeInput.tsx

@@ -42,6 +42,7 @@ const RangeInput = React.forwardRef<RangeInputInstanceFunctions, RangeInputProps
     className,
     style,
     activeIndex,
+    borderless,
     disabled,
     format,
     inputProps,
@@ -171,6 +172,7 @@ const RangeInput = React.forwardRef<RangeInputInstanceFunctions, RangeInputProps
         [`${classPrefix}-size-s`]: size === 'small',
         [`${name}--prefix`]: prefixIconContent || labelContent,
         [`${name}--suffix`]: suffixContent || suffixIconContent,
+        [`${name}--borderless`]: borderless,
       })}
       {...restProps}
       onMouseEnter={handleMouseEnter}

src/range-input/_usage/index.jsx

@@ -0,0 +1,48 @@
+/**
+ *  该脚本为自动生成，如有需要请在 /script/generate-usage.js 中调整
+ */
+
+// @ts-nocheck
+import React, { useState, useEffect, useMemo } from "react";
+import BaseUsage, {
+  useConfigChange,
+  usePanelChange,
+} from "@site/src/components/BaseUsage";
+import jsxToString from "react-element-to-jsx-string";
+
+import configProps from "./props.json";
+
+import { RangeInput } from "tdesign-react";
+
+export default function Usage() {
+  const [configList, setConfigList] = useState(configProps);
+
+  const { changedProps, onConfigChange } = useConfigChange(configList);
+
+  const panelList = [{ label: "rangeInput", value: "rangeInput" }];
+
+  const { panel, onPanelChange } = usePanelChange(panelList);
+
+  const [renderComp, setRenderComp] = useState();
+
+  useEffect(() => {
+    setRenderComp(<RangeInput {...changedProps} />);
+  }, [changedProps]);
+
+  const jsxStr = useMemo(() => {
+    if (!renderComp) return "";
+    return jsxToString(renderComp);
+  }, [renderComp]);
+
+  return (
+    <BaseUsage
+      code={jsxStr}
+      panelList={panelList}
+      configList={configList}
+      onPanelChange={onPanelChange}
+      onConfigChange={onConfigChange}
+    >
+      {renderComp}
+    </BaseUsage>
+  );
+}

src/range-input/_usage/props.json

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",
@@ -41,5 +47,28 @@
         "value": "large"
       }
     ]
+  },
+  {
+    "name": "status",
+    "type": "enum",
+    "defaultValue": "default",
+    "options": [
+      {
+        "label": "default",
+        "value": "default"
+      },
+      {
+        "label": "success",
+        "value": "success"
+      },
+      {
+        "label": "warning",
+        "value": "warning"
+      },
+      {
+        "label": "error",
+        "value": "error"
+      }
+    ]
   }
 ]

src/range-input/defaultProps.ts

@@ -5,6 +5,7 @@
 import { TdRangeInputProps, TdRangeInputPopupProps } from './type';
 
 export const rangeInputDefaultProps: TdRangeInputProps = {
+  borderless: false,
   clearable: false,
   readonly: false,
   separator: '-',