From 8f55816af5f3746ede3110b8b42535df6a8b724d Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Mon, 29 Jul 2024 20:18:23 +0800 Subject: [PATCH] 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 | 61 ++++++++++----- src/_common | 2 +- src/date-picker/date-picker.en-US.md | 21 ++++-- src/date-picker/date-picker.md | 12 ++- src/date-picker/defaultProps.ts | 1 + src/date-picker/hooks/useRange.tsx | 1 + src/date-picker/type.ts | 5 ++ src/range-input/RangeInput.tsx | 2 + src/range-input/_usage/index.jsx | 48 ++++++++++++ src/range-input/_usage/props.json | 29 ++++++++ src/range-input/defaultProps.ts | 1 + src/range-input/range-input.en-US.md | 21 +++--- src/range-input/range-input.md | 7 +- src/range-input/type.ts | 5 ++ src/time-picker/TimeRangePicker.tsx | 2 + src/time-picker/_usage/index.jsx | 19 +++-- .../{props.json => time-picker-props.json} | 35 +++++++-- .../_usage/time-range-picker-props.json | 74 +++++++++++++++++++ src/time-picker/defaultProps.ts | 1 + src/time-picker/time-picker.en-US.md | 11 ++- src/time-picker/time-picker.md | 7 +- src/time-picker/type.ts | 5 ++ 22 files changed, 308 insertions(+), 62 deletions(-) create mode 100644 src/range-input/_usage/index.jsx rename src/time-picker/_usage/{props.json => time-picker-props.json} (60%) create mode 100644 src/time-picker/_usage/time-range-picker-props.json diff --git a/script/generate-usage/config.js b/script/generate-usage/config.js index 3e3db105f1..d14adbe5f8 100644 --- a/script/generate-usage/config.js +++ b/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: , + timeRangePicker: + }; + `, + 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: , - timeRangePicker: - }; - `, - 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(); + }, [changedProps]); + `, + }, }; diff --git a/src/_common b/src/_common index 71b5441951..1878b0313f 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 71b5441951541dbd2566864dac41b5dedaf214e0 +Subproject commit 1878b0313fa7dcdf5486f5adb7d2581c1c0d1c27 diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index c2c149d63c..57ac517180 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/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`
| N onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`
| 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`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`
| 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` | \- | - | extends `Pick` | N onCellClick | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| 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`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`
| N onYearChange | Function | | Typescript：`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| 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` | \- | - | extends `Pick` | N onCellClick | Function | | Typescript：`(context: { date: Date[], partial: DateRangePickerPartial, e: MouseEvent }) => void`
| N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 4a144290d8..6dca90d4fb 100644 --- a/src/date-picker/date-picker.md +++ b/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`
面板选中值后触发 | N onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | 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`
选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | 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`
时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`
| N onYearChange | Function | | TS 类型：`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`
年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
| N + ### DateRangePickerPanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N diff --git a/src/date-picker/defaultProps.ts b/src/date-picker/defaultProps.ts index 4755dd77d5..bb653c3c90 100644 --- a/src/date-picker/defaultProps.ts +++ b/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'], diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx index d94f16b13d..948cc43a79 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/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, diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 61e75da189..9e2dd90eed 100644 --- a/src/date-picker/type.ts +++ b/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 diff --git a/src/range-input/RangeInput.tsx b/src/range-input/RangeInput.tsx index dc5eb76632..b0c838bf14 100644 --- a/src/range-input/RangeInput.tsx +++ b/src/range-input/RangeInput.tsx @@ -42,6 +42,7 @@ const RangeInput = React.forwardRef { + setRenderComp(); + }, [changedProps]); + + const jsxStr = useMemo(() => { + if (!renderComp) return ""; + return jsxToString(renderComp); + }, [renderComp]); + + return ( + + {renderComp} + + ); +} diff --git a/src/range-input/_usage/props.json b/src/range-input/_usage/props.json index 842ecc26db..4aaf12a971 100644 --- a/src/range-input/_usage/props.json +++ b/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" + } + ] } ] \ No newline at end of file diff --git a/src/range-input/defaultProps.ts b/src/range-input/defaultProps.ts index 1fb76f00cc..994e81e71a 100644 --- a/src/range-input/defaultProps.ts +++ b/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: '-', diff --git a/src/range-input/range-input.en-US.md b/src/range-input/range-input.en-US.md index 3751a0daaf..bd25a643ee 100644 --- a/src/range-input/range-input.en-US.md +++ b/src/range-input/range-input.en-US.md @@ -1,13 +1,15 @@ :: BASE_DOC :: ## API + ### RangeInput 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 activeIndex | Number | - | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disabled | Boolean | - | \- | N format | Array / Function | - | Typescript：`InputFormatType \| Array` | N @@ -18,8 +20,8 @@ prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](http readonly | Boolean | false | \- | N separator | TNode | '-' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N showClearIconOnEmpty | Boolean | false | \- | N -size | String | medium | options：small/medium/large | N -status | String | default | options：default/success/warning/error | N +size | String | medium | options: small/medium/large | N +status | String | default | options: default/success/warning/error | N suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -38,18 +40,19 @@ onMouseleave | Function | | Typescript：`(context: { e: MouseEvent }) => void` name | params | return | description -- | -- | -- | -- -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 blur | `(options?: {position?: RangeInputPosition})` | \- | \- focus | `(options?: {position?: RangeInputPosition})` | \- | \- select | `(options?: {position?: RangeInputPosition})` | \- | \- + ### RangeInputPopup 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 autoWidth | Boolean | false | \- | N disabled | Boolean | - | \- | N inputValue | Array | - | Typescript：`RangeInputValue` | N @@ -59,7 +62,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po popupVisible | Boolean | - | \- | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N readonly | Boolean | false | \- | N -status | String | default | options：default/success/warning/error | N +status | String | default | options: default/success/warning/error | N tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N onInputChange | Function | | Typescript：`(value: RangeInputValue, context?: RangeInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts)。
`type RangeInputValueChangeContext = { e?: InputEvent \| MouseEvent; trigger?: 'input' \| 'clear', position?: RangeInputPosition }`
| N onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N diff --git a/src/range-input/range-input.md b/src/range-input/range-input.md index 4a468b7e89..0578042467 100644 --- a/src/range-input/range-input.md +++ b/src/range-input/range-input.md @@ -1,13 +1,15 @@ :: BASE_DOC :: ## API + ### RangeInput Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N activeIndex | Number | - | 输入框高亮状态序号 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | - | 是否禁用范围输入框 | N format | Array / Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType \| Array` | N @@ -44,9 +46,10 @@ blur | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输 focus | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输入框获得焦点 select | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输入框选中内容 + ### RangeInputPopup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N diff --git a/src/range-input/type.ts b/src/range-input/type.ts index a61e8ee0b9..5e6b2f37b5 100644 --- a/src/range-input/type.ts +++ b/src/range-input/type.ts @@ -16,6 +16,11 @@ export interface TdRangeInputProps { * 输入框高亮状态序号 */ activeIndex?: number; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false diff --git a/src/time-picker/TimeRangePicker.tsx b/src/time-picker/TimeRangePicker.tsx index b92d26264d..0930e11533 100644 --- a/src/time-picker/TimeRangePicker.tsx +++ b/src/time-picker/TimeRangePicker.tsx @@ -32,6 +32,7 @@ const TimeRangePicker: FC = (originalProps) => { const { allowInput, + borderless, clearable, disabled, format, @@ -167,6 +168,7 @@ const TimeRangePicker: FC = (originalProps) => { inputValue={isPanelShowed ? currentValue : value ?? TIME_PICKER_EMPTY} rangeInputProps={{ size, + borderless, clearable, className: inputClasses, value: isPanelShowed ? currentValue : value ?? undefined, diff --git a/src/time-picker/_usage/index.jsx b/src/time-picker/_usage/index.jsx index c4fa58f086..6629ede1f4 100644 --- a/src/time-picker/_usage/index.jsx +++ b/src/time-picker/_usage/index.jsx @@ -10,22 +10,29 @@ import BaseUsage, { } from "@site/src/components/BaseUsage"; import jsxToString from "react-element-to-jsx-string"; -import configProps from "./props.json"; +import TimePickerConfigProps from "./time-picker-props.json"; -import { TimePicker } from "tdesign-react"; +import TimeRangePickerConfigProps from "./time-range-picker-props.json"; + +import { TimePicker, TimeRangePicker } from "tdesign-react"; export default function Usage() { - const [configList, setConfigList] = useState(configProps); + const [configList, setConfigList] = useState(TimePickerConfigProps); const { changedProps, onConfigChange } = useConfigChange(configList); const panelList = [ - { label: "timePicker", value: "timePicker" }, - { label: "timeRangePicker", value: "timeRangePicker" }, + { label: "timePicker", value: "timePicker", config: TimePickerConfigProps }, + { + label: "timeRangePicker", + value: "timeRangePicker", + config: TimeRangePickerConfigProps, + }, ]; + const panelMap = { timePicker: , - timeRangePicker: , + timeRangePicker: , }; const { panel, onPanelChange } = usePanelChange(panelList); diff --git a/src/time-picker/_usage/props.json b/src/time-picker/_usage/time-picker-props.json similarity index 60% rename from src/time-picker/_usage/props.json rename to src/time-picker/_usage/time-picker-props.json index 856511e6cb..4aaf12a971 100644 --- a/src/time-picker/_usage/props.json +++ b/src/time-picker/_usage/time-picker-props.json @@ -1,32 +1,32 @@ [ { - "name": "allowInput", + "name": "borderless", "type": "Boolean", "defaultValue": false, "options": [] }, { - "name": "borderless", + "name": "clearable", "type": "Boolean", "defaultValue": false, "options": [] }, { - "name": "clearable", + "name": "disabled", "type": "Boolean", "defaultValue": false, "options": [] }, { - "name": "disabled", + "name": "readonly", "type": "Boolean", "defaultValue": false, "options": [] }, { - "name": "hideDisabledTime", + "name": "showClearIconOnEmpty", "type": "Boolean", - "defaultValue": true, + "defaultValue": false, "options": [] }, { @@ -47,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" + } + ] } ] \ No newline at end of file diff --git a/src/time-picker/_usage/time-range-picker-props.json b/src/time-picker/_usage/time-range-picker-props.json new file mode 100644 index 0000000000..4aaf12a971 --- /dev/null +++ b/src/time-picker/_usage/time-range-picker-props.json @@ -0,0 +1,74 @@ +[ + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "showClearIconOnEmpty", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "size", + "type": "enum", + "defaultValue": "medium", + "options": [ + { + "label": "small", + "value": "small" + }, + { + "label": "medium", + "value": "medium" + }, + { + "label": "large", + "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" + } + ] + } +] \ No newline at end of file diff --git a/src/time-picker/defaultProps.ts b/src/time-picker/defaultProps.ts index ecde3d1ce1..42e5f840b5 100644 --- a/src/time-picker/defaultProps.ts +++ b/src/time-picker/defaultProps.ts @@ -16,6 +16,7 @@ export const timePickerDefaultProps: TdTimePickerProps = { export const timeRangePickerDefaultProps: TdTimeRangePickerProps = { allowInput: false, + borderless: false, clearable: false, format: 'HH:mm:ss', hideDisabledTime: true, diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index 9dff5180fc..91f908422a 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -1,12 +1,13 @@ :: BASE_DOC :: ## API + ### TimePicker 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 @@ -32,13 +33,15 @@ onInput | Function | | Typescript：`(context: { value: TimePickerValue; e: Inp onOpen | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onPick | Function | | Typescript：`(value: TimePickerValue, context: { e: MouseEvent }) => void`
| N + ### TimeRangePicker 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 disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | false | Typescript：`boolean \| Array` | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index ad24e65d8b..879a85ae11 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### TimePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -32,13 +33,15 @@ onInput | Function | | TS 类型：`(context: { value: TimePickerValue; e: Inpu onOpen | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
面板打开时触发 | N onPick | Function | | TS 类型：`(value: TimePickerValue, context: { e: MouseEvent }) => void`
面板选中值后触发 | N + ### TimeRangePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowInput | Boolean | false | 是否允许直接输入时间 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index dacb770565..b91767f6f5 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -131,6 +131,11 @@ export interface TdTimeRangePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否允许清除选中值 * @default false