@@ -2,11 +2,11 @@ import * as moment from 'moment';
22import omit from 'omit.js' ;
33import VcTimePicker from '../vc-time-picker' ;
44import LocaleReceiver from '../locale-provider/LocaleReceiver' ;
5- import defaultLocale from './locale/en_US' ;
65import BaseMixin from '../_util/BaseMixin' ;
76import PropTypes from '../_util/vue-types' ;
87import warning from '../_util/warning' ;
98import Icon from '../icon' ;
9+ import enUS from './locale/en_US' ;
1010import interopDefault from '../_util/interopDefault' ;
1111import {
1212 initDefaultProps ,
@@ -70,6 +70,8 @@ export const TimePickerProps = () => ({
7070 transitionName : PropTypes . string ,
7171 autoFocus : PropTypes . bool ,
7272 addon : PropTypes . any ,
73+ clearIcon : PropTypes . any ,
74+ locale : PropTypes . object ,
7375} ) ;
7476
7577const TimePicker = {
@@ -87,6 +89,7 @@ const TimePicker = {
8789 placement : 'bottomLeft' ,
8890 transitionName : 'slide-up' ,
8991 focusOnOpen : true ,
92+ allowClear : true ,
9093 } ) ,
9194 model : {
9295 prop : 'value' ,
@@ -107,7 +110,8 @@ const TimePicker = {
107110 }
108111 warning (
109112 ! hasProp ( this , 'allowEmpty' ) ,
110- '`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.' ,
113+ 'TimePicker' ,
114+ '`allowEmpty` is deprecated. Please use `allowClear` instead.' ,
111115 ) ;
112116 return {
113117 sValue : value ,
@@ -119,6 +123,30 @@ const TimePicker = {
119123 } ,
120124 } ,
121125 methods : {
126+ getDefaultFormat ( ) {
127+ const { format, use12Hours } = this ;
128+ if ( format ) {
129+ return format ;
130+ } else if ( use12Hours ) {
131+ return 'h:mm:ss a' ;
132+ }
133+ return 'HH:mm:ss' ;
134+ } ,
135+
136+ getAllowClear ( ) {
137+ const { allowClear, allowEmpty } = this . $props ;
138+ if ( hasProp ( this , 'allowClear' ) ) {
139+ return allowClear ;
140+ }
141+ return allowEmpty ;
142+ } ,
143+ getDefaultLocale ( ) {
144+ const defaultLocale = {
145+ ...enUS ,
146+ ...this . $props . locale ,
147+ } ;
148+ return defaultLocale ;
149+ } ,
122150 savePopupRef ( ref ) {
123151 this . popupRef = ref ;
124152 } ,
@@ -143,42 +171,29 @@ const TimePicker = {
143171 this . $refs . timePicker . blur ( ) ;
144172 } ,
145173
146- getDefaultFormat ( ) {
147- const { format, use12Hours } = this ;
148- if ( format ) {
149- return format ;
150- } else if ( use12Hours ) {
151- return 'h:mm:ss a' ;
152- }
153- return 'HH:mm:ss' ;
154- } ,
155-
156- getAllowClear ( ) {
157- const { allowClear, allowEmpty } = this . $props ;
158- if ( hasProp ( this , 'allowClear' ) ) {
159- return allowClear ;
160- }
161- return allowEmpty ;
162- } ,
163-
164174 renderInputIcon ( prefixCls ) {
165175 let suffixIcon = getComponentFromProp ( this , 'suffixIcon' ) ;
166176 suffixIcon = Array . isArray ( suffixIcon ) ? suffixIcon [ 0 ] : suffixIcon ;
167177 const clockIcon = ( suffixIcon &&
168- ( isValidElement ( suffixIcon ) ? (
169- cloneElement ( suffixIcon , {
170- class : `${ prefixCls } ,
171- } )
172- ) : (
173- < span class = { `${ prefixCls } } > { suffixIcon } </ span >
174- ) ) ) || < Icon type = "clock-circle" class = { `${ prefixCls } } theme = "outlined" /> ;
178+ isValidElement ( suffixIcon ) &&
179+ cloneElement ( suffixIcon , {
180+ class : `${ prefixCls } ,
181+ } ) ) || < Icon type = "clock-circle" class = { `${ prefixCls } } /> ;
175182
176183 return < span class = { `${ prefixCls } } > { clockIcon } </ span > ;
177184 } ,
178185
179186 renderClearIcon ( prefixCls ) {
180- const clearIcon = < Icon type = "close-circle" class = { `${ prefixCls } } theme = "filled" /> ;
181- return clearIcon ;
187+ const clearIcon = getComponentFromProp ( this , 'clearIcon' ) ;
188+ const clearIconPrefixCls = `${ prefixCls } ;
189+
190+ if ( clearIcon && isValidElement ( clearIcon ) ) {
191+ return cloneElement ( clearIcon , {
192+ class : clearIconPrefixCls ,
193+ } ) ;
194+ }
195+
196+ return < Icon type = "close-circle" class = { clearIconPrefixCls } theme = "filled" /> ;
182197 } ,
183198
184199 renderTimePicker ( locale ) {
@@ -235,7 +250,7 @@ const TimePicker = {
235250 return (
236251 < LocaleReceiver
237252 componentName = "TimePicker"
238- defaultLocale = { defaultLocale }
253+ defaultLocale = { this . getDefaultLocale ( ) }
239254 scopedSlots = { { default : this . renderTimePicker } }
240255 />
241256 ) ;
0 commit comments