From d1fde3670c0cc765b5a02598e2e5cdb2e34b1e19 Mon Sep 17 00:00:00 2001 From: zombieJ Date: Fri, 25 Jan 2019 10:31:09 +0800 Subject: [PATCH] Time picker allow clear (#14490) close #14472 --- .../__snapshots__/components.test.js.snap | 75 -- .../__snapshots__/index.test.js.snap | 1100 ----------------- .../__tests__/__snapshots__/demo.test.js.snap | 95 ++ .../__snapshots__/index.test.js.snap | 39 + .../time-picker/__tests__/index.test.js | 25 + components/time-picker/index.en-US.md | 2 +- components/time-picker/index.tsx | 98 +- components/time-picker/index.zh-CN.md | 2 +- components/time-picker/style/index.less | 47 +- package.json | 2 +- 10 files changed, 237 insertions(+), 1248 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index 1baff0729a..933b165a3c 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -12446,31 +12446,6 @@ Array [ placeholder="Select time" value="" /> - - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
+ + + `; @@ -267,6 +286,25 @@ exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = ` + + + `; @@ -346,6 +384,25 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = ` + + + + + + + + +
`; diff --git a/components/time-picker/__tests__/__snapshots__/index.test.js.snap b/components/time-picker/__tests__/__snapshots__/index.test.js.snap index f35823cba9..33ed64b7c7 100644 --- a/components/time-picker/__tests__/__snapshots__/index.test.js.snap +++ b/components/time-picker/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,44 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`TimePicker not render clean icon when allowClear is false 1`] = ` + + + + + + + + +`; + exports[`TimePicker renders addon correctly 1`] = `
{ + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + afterEach(() => { + errorSpy.mockReset(); + }); + + afterAll(() => { + errorSpy.mockRestore(); + }); + focusTest(TimePicker); it('renders addon correctly', () => { @@ -15,4 +26,18 @@ describe('TimePicker', () => { expect(addonWrapper).toMatchSnapshot(); }); + + it('allowEmpty deprecated', () => { + mount(); + expect(errorSpy).toBeCalledWith( + 'Warning: `allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.', + ); + }); + + it('not render clean icon when allowClear is false', () => { + const wrapper = mount( + , + ); + expect(wrapper.render()).toMatchSnapshot(); + }); }); diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 7a05a0d969..304d9d9ff3 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -24,7 +24,7 @@ import moment from 'moment'; | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | addon | called from timepicker panel to render some addon to its bottom | function | - | -| allowEmpty | allow clearing text | boolean | true | +| allowClear | allow clearing text | boolean | true | | autoFocus | get focus when component mounted | boolean | false | | className | className of picker | string | '' | | clearText | clear tooltip of icon | string | clear | diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index d18e09ee86..6148ec0435 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import * as moment from 'moment'; +import omit from 'omit.js'; import { polyfill } from 'react-lifecycles-compat'; import RcTimePicker from 'rc-time-picker/lib/TimePicker'; import classNames from 'classnames'; +import warning from '../_util/warning'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import defaultLocale from './locale/en_US'; @@ -44,6 +46,7 @@ export interface TimePickerProps { minuteStep?: number; secondStep?: number; allowEmpty?: boolean; + allowClear?: boolean; inputReadOnly?: boolean; clearText?: string; defaultOpenValue?: moment.Moment; @@ -92,6 +95,11 @@ class TimePicker extends React.Component { this.state = { value, }; + + warning( + !('allowEmpty' in props), + '`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.', + ); } handleChange = (value: moment.Moment) => { @@ -133,65 +141,77 @@ class TimePicker extends React.Component { return 'HH:mm:ss'; } + getAllowClear() { + const { allowClear, allowEmpty } = this.props; + if ('allowClear' in this.props) { + return allowClear; + } + return allowEmpty; + } + + renderInputIcon(prefixCls: string) { + const { suffixIcon } = this.props; + const clockIcon = (suffixIcon && + (React.isValidElement<{ className?: string }>(suffixIcon) ? ( + React.cloneElement(suffixIcon, { + className: classNames(suffixIcon.props.className, `${prefixCls}-clock-icon`), + }) + ) : ( + {suffixIcon} + ))) || ; + + return {clockIcon}; + } + + renderClearIcon(prefixCls: string) { + const {} = this.props; + + const clearIcon = ; + + return clearIcon; + } + renderTimePicker = (locale: TimePickerLocale) => ( {({ getPopupContainer: getContextPopupContainer, getPrefixCls }: ConfigConsumerProps) => { - const { getPopupContainer, prefixCls: customizePrefixCls, ...props } = this.props; - delete props.defaultValue; + const { + getPopupContainer, + prefixCls: customizePrefixCls, + className, + addon, + placeholder, + ...props + } = this.props; + const { size } = props; + const pickerProps = omit(props, ['defaultValue', 'suffixIcon', 'allowEmpty', 'allowClear']); const format = this.getDefaultFormat(); const prefixCls = getPrefixCls('time-picker', customizePrefixCls); - const className = classNames(props.className, { - [`${prefixCls}-${props.size}`]: !!props.size, + const pickerClassName = classNames(className, { + [`${prefixCls}-${size}`]: !!size, }); - const addon = (panel: React.ReactElement) => - props.addon ? ( -
{props.addon(panel)}
- ) : null; - - const { suffixIcon } = props; - const clockIcon = (suffixIcon && - (React.isValidElement<{ className?: string }>(suffixIcon) ? ( - React.cloneElement(suffixIcon, { - className: classNames({ - [suffixIcon.props.className!]: suffixIcon.props.className, - [`${prefixCls}-clock-icon`]: true, - }), - }) - ) : ( - {suffixIcon} - ))) || ( - - ); - - const inputIcon = {clockIcon}; - - const clearIcon = ( - - ); + const pickerAddon = (panel: React.ReactElement) => + addon ?
{addon(panel)}
: null; return ( ); }} diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index fc9fd0e074..5ec41f60b8 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -25,7 +25,7 @@ import moment from 'moment'; | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | addon | 选择框底部显示自定义的内容 | function | 无 | -| allowEmpty | 是否展示清除按钮 | boolean | true | +| allowClear | 是否展示清除按钮 | boolean | true | | autoFocus | 自动获取焦点 | boolean | false | | className | 选择器类名 | string | '' | | clearText | 清除按钮的提示文案 | string | clear | diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 64925aefa7..afc9596fba 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -48,36 +48,6 @@ } } - &-clear-btn { - position: absolute; - right: 8px; - cursor: pointer; - overflow: hidden; - width: 20px; - height: 20px; - text-align: center; - line-height: 20px; - top: 7px; - margin: 0; - - &-icon svg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - font-size: @font-size-base; - color: @disabled-color; - display: inline-block; - transition: color 0.3s ease; - - &:hover { - color: @text-color-secondary; - } - } - } - &-narrow &-input-wrap { max-width: @time-picker-panel-column-width * 2; } @@ -205,7 +175,8 @@ opacity: 0; } - &-icon { + &-icon, + &-clear { position: absolute; z-index: 1; user-select: none; @@ -224,6 +195,20 @@ } } + &-clear { + opacity: 0; + z-index: 2; + background: @input-bg; + pointer-events: none; + &:hover { + color: @text-color-secondary; + } + } + &:hover &-clear { + opacity: 1; + pointer-events: auto; + } + &-large &-input { .input-lg; } diff --git a/package.json b/package.json index 80d3f2b58a..d55d4c018c 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "rc-switch": "~1.8.0", "rc-table": "~6.4.0", "rc-tabs": "~9.6.0", - "rc-time-picker": "~3.5.0", + "rc-time-picker": "~3.6.1", "rc-tooltip": "~3.7.3", "rc-tree": "~1.14.6", "rc-tree-select": "~2.5.0",