From 8054abe81f00d3b02bb774c627ffa2f3bd247722 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 16 Feb 2022 21:14:51 +0800 Subject: [PATCH] feat: DatePicker and TimePicker support status (#34073) * feat: DatePicker and TimePicker support status * docs: demo add version * chore: code clean --- .../__snapshots__/demo-extend.test.ts.snap | 1205 +++++++ .../__tests__/__snapshots__/demo.test.js.snap | 97 + components/date-picker/demo/status.md | 28 + .../generatePicker/generateSinglePicker.tsx | 96 +- components/date-picker/index.en-US.md | 1 + components/date-picker/index.zh-CN.md | 1 + components/date-picker/style/index.less | 7 + components/date-picker/style/index.tsx | 2 + components/date-picker/style/status.less | 52 + .../__snapshots__/demo-extend.test.ts.snap | 52 +- .../__tests__/__snapshots__/demo.test.js.snap | 52 +- components/input-number/demo/status.md | 5 +- components/input/demo/status.md | 5 +- .../__snapshots__/demo-extend.test.ts.snap | 2830 +++++++++++++++++ .../__tests__/__snapshots__/demo.test.js.snap | 100 + components/time-picker/demo/status.md | 28 + components/time-picker/index.en-US.md | 1 + components/time-picker/index.tsx | 2 + components/time-picker/index.zh-CN.md | 1 + 19 files changed, 4524 insertions(+), 41 deletions(-) create mode 100644 components/date-picker/demo/status.md create mode 100644 components/date-picker/style/status.less create mode 100644 components/time-picker/demo/status.md diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index f0456a20b3..bce2bbe7c4 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -46905,6 +46905,1211 @@ exports[`renders ./components/date-picker/demo/start-end.md extend context corre `; +exports[`renders ./components/date-picker/demo/status.md extend context correctly 1`] = ` +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+`; + exports[`renders ./components/date-picker/demo/suffix.md extend context correctly 1`] = `
`; +exports[`renders ./components/date-picker/demo/status.md correctly 1`] = ` +
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+`; + exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
( + + + + +); + +ReactDOM.render(, mountNode); +``` diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index af208611ab..852e62145a 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -21,9 +21,18 @@ import { Components, } from '.'; import { PickerComponentClass } from './interface'; +import { FormItemStatusContext } from '../../form/context'; +import { + getFeedbackIcon, + getMergedStatus, + getStatusClassNames, + InputStatus, +} from '../../_util/statusUtils'; export default function generatePicker(generateConfig: GenerateConfig) { - type DatePickerProps = PickerProps; + type DatePickerProps = PickerProps & { + status?: InputStatus; + }; function getPicker( picker?: PickerMode, @@ -59,6 +68,23 @@ export default function generatePicker(generateConfig: GenerateConfig< } }; + renderFeedback = (prefixCls: string) => ( + + {({ hasFeedback, status: contextStatus }) => { + const { status: customStatus } = this.props; + const status = getMergedStatus(contextStatus, customStatus); + return hasFeedback && getFeedbackIcon(prefixCls, status); + }} + + ); + + renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => ( + <> + {mergedPicker === 'time' ? : } + {this.renderFeedback(prefixCls)} + + ); + renderPicker = (contextLocale: PickerLocale) => { const locale = { ...contextLocale, ...this.props.locale }; const { getPrefixCls, direction, getPopupContainer } = this.context; @@ -70,6 +96,7 @@ export default function generatePicker(generateConfig: GenerateConfig< bordered = true, placement, placeholder, + status: customStatus, ...restProps } = this.props; const { format, showTime } = this.props as any; @@ -100,37 +127,44 @@ export default function generatePicker(generateConfig: GenerateConfig< const mergedSize = customizeSize || size; return ( - - ref={this.pickerRef} - placeholder={getPlaceholder(mergedPicker, locale, placeholder)} - suffixIcon={ - mergedPicker === 'time' ? : - } - dropdownAlign={transPlacement2DropdownAlign(direction, placement)} - clearIcon={} - prevIcon={} - nextIcon={} - superPrevIcon={} - superNextIcon={} - allowClear - transitionName={`${rootPrefixCls}-slide-up`} - {...additionalProps} - {...restProps} - {...additionalOverrideProps} - locale={locale!.lang} - className={classNames( - { - [`${prefixCls}-${mergedSize}`]: mergedSize, - [`${prefixCls}-borderless`]: !bordered, - }, - className, + + {({ hasFeedback, status: contextStatus }) => ( + + ref={this.pickerRef} + placeholder={getPlaceholder(mergedPicker, locale, placeholder)} + suffixIcon={this.renderSuffix(prefixCls, mergedPicker)} + dropdownAlign={transPlacement2DropdownAlign(direction, placement)} + clearIcon={} + prevIcon={} + nextIcon={} + superPrevIcon={} + superNextIcon={} + allowClear + transitionName={`${rootPrefixCls}-slide-up`} + {...additionalProps} + {...restProps} + {...additionalOverrideProps} + locale={locale!.lang} + className={classNames( + { + [`${prefixCls}-${mergedSize}`]: mergedSize, + [`${prefixCls}-borderless`]: !bordered, + }, + getStatusClassNames( + prefixCls, + getMergedStatus(contextStatus, customStatus), + hasFeedback, + ), + className, + )} + prefixCls={prefixCls} + getPopupContainer={customizeGetPopupContainer || getPopupContainer} + generateConfig={generateConfig} + components={Components} + direction={direction} + /> )} - prefixCls={prefixCls} - getPopupContainer={customizeGetPopupContainer || getPopupContainer} - generateConfig={generateConfig} - components={Components} - direction={direction} - /> + ); }} diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index b20a3333fc..48e299d6b9 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -73,6 +73,7 @@ The following APIs are shared by DatePicker, RangePicker. | popupStyle | To customize the style of the popup calendar | CSSProperties | {} | | | prevIcon | The custom prev icon | ReactNode | - | 4.17.0 | | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | | style | To customize the style of the input box | CSSProperties | {} | | | suffixIcon | The custom suffix icon | ReactNode | - | | | superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index fd7294a8d3..3e718c202c 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -74,6 +74,7 @@ import locale from 'antd/lib/locale/zh_CN'; | popupStyle | 额外的弹出日历样式 | CSSProperties | {} | | | prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 | | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | style | 自定义输入框样式 | CSSProperties | {} | | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 2aa5e92531..3b6d3a08e4 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -1,6 +1,7 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; +@import './status'; @picker-prefix-cls: ~'@{ant-prefix}-picker'; @@ -106,6 +107,8 @@ } &-suffix { + display: flex; + flex: none; align-self: center; margin-left: (@padding-xs / 2); color: @disabled-color; @@ -114,6 +117,10 @@ > * { vertical-align: top; + + &:not(:last-child) { + margin-right: 8px; + } } } diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index cc4424295a..18447e360f 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -3,3 +3,5 @@ import './index.less'; // style dependencies import '../../tag/style'; import '../../button/style'; + +// deps-lint-skip: form diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less new file mode 100644 index 0000000000..35c3669535 --- /dev/null +++ b/components/date-picker/style/status.less @@ -0,0 +1,52 @@ +@import '../../input/style/mixin'; + +@picker-prefix-cls: ~'@{ant-prefix}-picker'; + +.status-color( + @text-color: @input-color; + @border-color: @input-border-color; + @background-color: @input-bg; + @hoverBorderColor: @primary-color-hover; + @outlineColor: @primary-color-outline; +) { + &.@{picker-prefix-cls} { + &, + &:not([disabled]):hover { + background-color: @background-color; + border-color: @border-color; + } + + &-focused, + &:focus { + .active(@text-color, @hoverBorderColor, @outlineColor); + } + } + + .@{picker-prefix-cls}-feedback-icon { + color: @text-color; + } +} + +.@{picker-prefix-cls} { + &-status-error { + .status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); + } + + &-status-warning { + .status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); + } + + &-status-validating { + .@{picker-prefix-cls}-feedback-icon { + display: inline-block; + color: @primary-color; + } + } + + &-status-success { + .@{picker-prefix-cls}-feedback-icon { + color: @success-color; + animation-name: diffZoomIn1 !important; + } + } +} diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index fa3a815190..31a59bacc1 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -16383,7 +16383,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc class="ant-form-item-control-input-content" >
+ + + + +
@@ -17003,7 +17026,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc class="ant-form-item-control-input-content" >
+ + + + +
@@ -18928,7 +18974,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc class="ant-form-item-control-input-content" >
+ + + + +
@@ -7674,7 +7697,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = ` class="ant-form-item-control-input-content" >
+ + + + +
@@ -8027,7 +8073,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = ` class="ant-form-item-control-input-content" >
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
  • +
    + 24 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 26 +
    +
    • +
  • +
    + 27 +
    +
    • +
  • +
    + 28 +
    +
    • +
  • +
    + 29 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 31 +
    +
    • +
  • +
    + 32 +
    +
    • +
  • +
    + 33 +
    +
    • +
  • +
    + 34 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 36 +
    +
    • +
  • +
    + 37 +
    +
    • +
  • +
    + 38 +
    +
    • +
  • +
    + 39 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 41 +
    +
    • +
  • +
    + 42 +
    +
    • +
  • +
    + 43 +
    +
    • +
  • +
    + 44 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 46 +
    +
    • +
  • +
    + 47 +
    +
    • +
  • +
    + 48 +
    +
    • +
  • +
    + 49 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 51 +
    +
    • +
  • +
    + 52 +
    +
    • +
  • +
    + 53 +
    +
    • +
  • +
    + 54 +
    +
    • +
  • +
    + 55 +
    +
    • +
  • +
    + 56 +
    +
    • +
  • +
    + 57 +
    +
    • +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
  • +
    + 24 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 26 +
    +
    • +
  • +
    + 27 +
    +
    • +
  • +
    + 28 +
    +
    • +
  • +
    + 29 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 31 +
    +
    • +
  • +
    + 32 +
    +
    • +
  • +
    + 33 +
    +
    • +
  • +
    + 34 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 36 +
    +
    • +
  • +
    + 37 +
    +
    • +
  • +
    + 38 +
    +
    • +
  • +
    + 39 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 41 +
    +
    • +
  • +
    + 42 +
    +
    • +
  • +
    + 43 +
    +
    • +
  • +
    + 44 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 46 +
    +
    • +
  • +
    + 47 +
    +
    • +
  • +
    + 48 +
    +
    • +
  • +
    + 49 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 51 +
    +
    • +
  • +
    + 52 +
    +
    • +
  • +
    + 53 +
    +
    • +
  • +
    + 54 +
    +
    • +
  • +
    + 55 +
    +
    • +
  • +
    + 56 +
    +
    • +
  • +
    + 57 +
    +
    • +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
  • +
    + 24 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 26 +
    +
    • +
  • +
    + 27 +
    +
    • +
  • +
    + 28 +
    +
    • +
  • +
    + 29 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 31 +
    +
    • +
  • +
    + 32 +
    +
    • +
  • +
    + 33 +
    +
    • +
  • +
    + 34 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 36 +
    +
    • +
  • +
    + 37 +
    +
    • +
  • +
    + 38 +
    +
    • +
  • +
    + 39 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 41 +
    +
    • +
  • +
    + 42 +
    +
    • +
  • +
    + 43 +
    +
    • +
  • +
    + 44 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 46 +
    +
    • +
  • +
    + 47 +
    +
    • +
  • +
    + 48 +
    +
    • +
  • +
    + 49 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 51 +
    +
    • +
  • +
    + 52 +
    +
    • +
  • +
    + 53 +
    +
    • +
  • +
    + 54 +
    +
    • +
  • +
    + 55 +
    +
    • +
  • +
    + 56 +
    +
    • +
  • +
    + 57 +
    +
    • +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
  • +
    + 24 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 26 +
    +
    • +
  • +
    + 27 +
    +
    • +
  • +
    + 28 +
    +
    • +
  • +
    + 29 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 31 +
    +
    • +
  • +
    + 32 +
    +
    • +
  • +
    + 33 +
    +
    • +
  • +
    + 34 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 36 +
    +
    • +
  • +
    + 37 +
    +
    • +
  • +
    + 38 +
    +
    • +
  • +
    + 39 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 41 +
    +
    • +
  • +
    + 42 +
    +
    • +
  • +
    + 43 +
    +
    • +
  • +
    + 44 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 46 +
    +
    • +
  • +
    + 47 +
    +
    • +
  • +
    + 48 +
    +
    • +
  • +
    + 49 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 51 +
    +
    • +
  • +
    + 52 +
    +
    • +
  • +
    + 53 +
    +
    • +
  • +
    + 54 +
    +
    • +
  • +
    + 55 +
    +
    • +
  • +
    + 56 +
    +
    • +
  • +
    + 57 +
    +
    • +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
+
+
+ +
+
+
+
+
+
+
+`; + exports[`renders ./components/time-picker/demo/suffix.md extend context correctly 1`] = ` Array [
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+`; + exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `
( + + + + +); + +ReactDOM.render(, mountNode); +``` diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index ca3367f702..a3b8742ed3 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -48,6 +48,7 @@ import moment from 'moment'; | renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - | | | secondStep | Interval between seconds in picker | number | 1 | | | showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 | +| status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | 4.19.0 | | suffixIcon | The custom suffix icon | ReactNode | - | | | use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false | | | value | To set time | [moment](http://momentjs.com/) | - | | diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 8c6ae2379f..737916d5ac 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import DatePicker from '../date-picker'; import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker'; import devWarning from '../_util/devWarning'; +import { InputStatus } from '../_util/statusUtils'; const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker; @@ -28,6 +29,7 @@ const RangePicker = React.forwardRef((props, ref) => export interface TimePickerProps extends Omit, 'picker'> { addon?: () => React.ReactNode; popupClassName?: string; + status?: InputStatus; } const TimePicker = React.forwardRef( diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 1cf7df1d8a..dcb90c8d1e 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -48,6 +48,7 @@ import moment from 'moment'; | renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | | | secondStep | 秒选项间隔 | number | 1 | | | showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | | | value | 当前时间 | [moment](http://momentjs.com/) | - | |