From a7c6e7bbdec19873df69addb101a93eef87d8153 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 2 May 2017 11:31:42 +0800 Subject: Add popupClassName --- HISTORY.md | 5 +++++ README.md | 2 ++ package.json | 2 +- src/TimePicker.jsx | 35 ++++++++++++++++++++++++++++------- 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 2436cb8..e18638c 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,6 +2,11 @@ --- +2.4.0 / 2017-05-02 +--------------------------- + +Add `popupClassName` prop. + 2.3.0 / 2017-03-08 --------------------------- diff --git a/README.md b/README.md index 1c44e76..a2758b9 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ API | defaultOpenValue | moment | moment() | default open panel value, used to set utcOffset,locale if value/defaultValue absent | | value | moment | null | current value | | placeholder | String | '' | time input's placeholder | +| className | String | '' | time picker className | +| popupClassName | String | '' | time panel className | | showHour | Boolean | true | whether show hour | | | showMinute | Boolean | true | whether show minute | | showSecond | Boolean | true | whether show second | diff --git a/package.json b/package.json index fa956bf..d219fab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "2.3.5", + "version": "2.4.0", "description": "React TimePicker", "keywords": [ "react", diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 1a3516e..91745c6 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -34,6 +34,7 @@ class Picker extends Component { showSecond: PropTypes.bool, style: PropTypes.object, className: PropTypes.string, + popupClassName: PropTypes.string, disabledHours: PropTypes.func, disabledMinutes: PropTypes.func, disabledSeconds: PropTypes.func, @@ -53,6 +54,7 @@ class Picker extends Component { defaultOpen: false, style: {}, className: '', + popupClassName: '', align: {}, defaultOpenValue: moment(), allowEmpty: true, @@ -183,6 +185,30 @@ class Picker extends Component { ); } + getPopupClassName() { + const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this.props; + let popupClassName = this.props.popupClassName; + // Keep it for old compatibility + if ((!showHour || !showMinute || !showSecond) && !use12Hours) { + popupClassName += ` ${prefixCls}-panel-narrow`; + } + let selectColumnCount = 0; + if (showHour) { + selectColumnCount += 1; + } + if (showMinute) { + selectColumnCount += 1; + } + if (showSecond) { + selectColumnCount += 1; + } + if (use12Hours) { + selectColumnCount += 1; + } + popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`; + return popupClassName; + } + setOpen(open) { const { onOpen, onClose } = this.props; if (this.state.open !== open) { @@ -204,15 +230,10 @@ class Picker extends Component { render() { const { prefixCls, placeholder, placement, align, - disabled, transitionName, style, className, showHour, - showMinute, showSecond, getPopupContainer, name, autoComplete, - use12Hours, + disabled, transitionName, style, className, getPopupContainer, name, autoComplete, } = this.props; const { open, value } = this.state; - let popupClassName; - if ((!showHour || !showMinute || !showSecond) && !use12Hours) { - popupClassName = `${prefixCls}-panel-narrow`; - } + const popupClassName = this.getPopupClassName(); return (