deps: upgrade dependencies, close: #3161 (#3162)

* deps: upgrade dependencies, close: #3161 * css: update style for DatePicker[showTime]
2025-06-11 11:32:52 +08:00 · 2016-09-27 13:42:30 +08:00 · 2016-09-27 13:42:30 +08:00 · d8e9fff5ba
commit d8e9fff5ba
parent a7ba9004e1
8 changed files with 56 additions and 45 deletions
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@ -45,10 +45,7 @@ export default class RangePicker extends React.Component<any, any> {

  render() {
    const props = this.props;
-    const locale = props.locale;
-
-    const { disabledDate, showTime, getCalendarContainer, prefixCls,
-      transitionName, disabled, popupStyle, align, style, onOk } = this.props;
+    const { disabledDate, showTime, prefixCls, popupStyle, style, onOk, locale } = props;
    const state = this.state;

    const calendarClassName = classNames({
@ -63,9 +60,7 @@ export default class RangePicker extends React.Component<any, any> {
      onOk: this.handleChange,
    };
    if (props.timePicker) {
-      pickerChangeHandler.onChange = (value) => {
-        this.handleChange(value);
-      };
+      pickerChangeHandler.onChange = value => this.handleChange(value);
    } else {
      calendarHandler = {};
    }
@ -98,26 +93,21 @@ export default class RangePicker extends React.Component<any, any> {

    return (<span className={props.pickerClass} style={style}>
      <RcDatePicker
+        {...props}
        {...pickerChangeHandler}
-        transitionName={transitionName}
-        disabled={disabled}
        calendar={calendar}
        value={state.value}
        prefixCls={`${prefixCls}-picker-container`}
        style={popupStyle}
-        align={align}
-        getCalendarContainer={getCalendarContainer}
-        onOpen={props.toggleOpen}
-        onClose={props.toggleOpen}
      >
        {
          ({ value }) => {
            const start = value[0];
            const end = value[1];
            return (
-              <span className={props.pickerInputClass} disabled={disabled}>
+              <span className={props.pickerInputClass} disabled={props.disabled}>
                <input
-                  disabled={disabled}
+                  disabled={props.disabled}
                  readOnly
                  value={(start && start.format(props.format)) || ''}
                  placeholder={startPlaceholder}
@ -125,7 +115,7 @@ export default class RangePicker extends React.Component<any, any> {
                />
                <span className={`${prefixCls}-range-picker-separator`}> ~ </span>
                <input
-                  disabled={disabled}
+                  disabled={props.disabled}
                  readOnly
                  value={(end && end.format(props.format)) || ''}
                  placeholder={endPlaceholder}
--- a/components/date-picker/createPicker.tsx
+++ b/components/date-picker/createPicker.tsx
@ -72,11 +72,7 @@ export default function createPicker(TheCalendar) {
      let calendarHandler: Object = {
        onOk: this.handleChange,
        // fix https://github.com/ant-design/ant-design/issues/1902
-        onSelect: (value, cause) => {
-          if (cause && cause.source === 'todayButton') {
-            this.handleChange(value);
-          }
-        },
+        onSelect: value => this.handleChange(value),
      };
      if (props.showTime) {
        pickerChangeHandler = {};
@ -113,18 +109,12 @@ export default function createPicker(TheCalendar) {
      return (
        <span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
          <RcDatePicker
+            {...props}
            {...pickerChangeHandler}
-            transitionName={props.transitionName}
-            disabled={props.disabled}
            calendar={calendar}
            value={this.state.value}
            prefixCls={`${prefixCls}-picker-container`}
            style={props.popupStyle}
-            align={props.align}
-            getCalendarContainer={props.getCalendarContainer}
-            open={props.open}
-            onOpen={props.toggleOpen}
-            onClose={props.toggleOpen}
          >
            {
              ({ value }) => {
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -48,12 +48,12 @@ const DateRange = React.createClass({
  onEndChange(value) {
    this.onChange('endValue', value);
  },
-  handleStartToggle({ open }) {
+  handleStartOpenChange(open) {
    if (!open) {
      this.setState({ endOpen: true });
    }
  },
-  handleEndToggle({ open }) {
+  handleEndOpenChange(open) {
    this.setState({ endOpen: open });
  },
  render() {
@ -66,7 +66,7 @@ const DateRange = React.createClass({
          value={this.state.startValue}
          placeholder="开始日期"
          onChange={this.onStartChange}
-          toggleOpen={this.handleStartToggle}
+          onOpenChange={this.handleStartOpenChange}
        />
        <DatePicker
          disabledDate={this.disabledEndDate}
@ -76,7 +76,7 @@ const DateRange = React.createClass({
          placeholder="结束日期"
          onChange={this.onEndChange}
          open={this.state.endOpen}
-          toggleOpen={this.handleEndToggle}
+          onOpenChange={this.handleEndOpenChange}
        />
      </div>
    );
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -41,7 +41,7 @@ moment.tz.setDefault('Asia/Shanghai')
 | locale       | localization configuration | Object   | [default](https://github.com/ant-design/ant-design/issues/424)  |
 | onOk         | a callback function, can be executed when OK-button is clicked | function(Date value) | - |
 | open | open state of picker | bool | - |
-| toggleOpen   | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - |
+| onOpenChange   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
 | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
 | showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |

--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -41,7 +41,7 @@ moment.tz.setDefault('Asia/Shanghai')
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
 | open | 控制弹层是否展开 | bool | - |
-| toggleOpen   | 弹出日历和关闭日历的回调 | function(open) | 无 |
+| onOpenChange   | 弹出日历和关闭日历的回调 | function(status) | 无 |
 | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 | showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |

--- a/components/date-picker/style/TimePicker.less
+++ b/components/date-picker/style/TimePicker.less
@ -24,6 +24,21 @@
    overflow: hidden;
  }

+  &-1-column,
+  &-1-column &-select {
+    width: 100%;
+  }
+  &-2-columns &-select {
+    width: 115px;
+  }
+  &-1-column &-select,
+  &-2-columns &-select {
+    li {
+      padding: 0;
+      text-align: center;
+    }
+  }
+
  &-input {
    margin: 0;
    padding: 0;
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@ -4,6 +4,7 @@ import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
 import defaultLocale from './locale/zh_CN';
 import assign from 'object-assign';
+import warning from 'warning';

 export default function wrapPicker(Picker, defaultFormat?) {
  const PickerWrapper = React.createClass({
@ -16,7 +17,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
        },
        onOk() {
        },
-        toggleOpen() {
+        onOpenChange() {
        },
        locale: {},
        align: {
@ -44,8 +45,18 @@ export default function wrapPicker(Picker, defaultFormat?) {
      return result;
    },

-    toggleOpen ({open}) {
-      this.props.toggleOpen({open});
+    handleOpenChange(open) {
+      const { onOpenChange, toggleOpen } = this.props;
+      onOpenChange(open);
+
+      if (toggleOpen) {
+        warning(
+          false,
+          '`toggleOpen` is deprecated and will be removed in the future, ' +
+          'please use `onOpenChange` instead'
+        );
+        toggleOpen({open});
+      }
    },

    render() {
@ -63,17 +74,22 @@ export default function wrapPicker(Picker, defaultFormat?) {

      const locale = this.getLocale();

-      const timeFormat = props.showTime && props.showTime.format;
+      const timeFormat = (props.showTime && props.showTime.format) || 'HH:mm:ss';
      const rcTimePickerProps = {
-        format: timeFormat || 'HH:mm:ss',
-        showSecond: timeFormat && timeFormat.indexOf('ss') >= 0,
-        showHour: timeFormat && timeFormat.indexOf('HH') >= 0,
+        format: timeFormat,
+        showSecond: timeFormat.indexOf('ss') >= 0,
+        showHour: timeFormat.indexOf('HH') >= 0,
      };
+      const timePickerCls = classNames({
+        [`${prefixCls}-time-picker-1-column`]: !(rcTimePickerProps.showSecond || rcTimePickerProps.showHour),
+        [`${prefixCls}-time-picker-2-columns`]: rcTimePickerProps.showSecond !== rcTimePickerProps.showHour,
+      });
      const timePicker = props.showTime ? (
        <TimePickerPanel
          {...rcTimePickerProps}
          {...props.showTime}
          prefixCls={`${prefixCls}-time-picker`}
+          className={timePickerCls}
          placeholder={locale.timePickerLocale.placeholder}
          transitionName="slide-up"
        />
@ -86,7 +102,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
          pickerInputClass={pickerInputClass}
          locale={locale}
          timePicker={timePicker}
-          toggleOpen={this.toggleOpen}
+          onOpenChange={this.handleOpenChange}
        />
      );
    },
--- a/package.json
+++ b/package.json
@ -42,11 +42,11 @@
    "object-assign": "~4.1.0",
    "omit.js": "^0.1.0",
    "rc-animate": "~2.3.0",
-    "rc-calendar": "~7.1.0",
+    "rc-calendar": "~7.2.0",
    "rc-cascader": "~0.10.1",
    "rc-checkbox": "~1.4.0",
    "rc-collapse": "~1.6.4",
-    "rc-dialog": "~6.3.0",
+    "rc-dialog": "~6.4.0",
    "rc-dropdown": "~1.4.8",
    "rc-editor-mention": "~0.2.2",
    "rc-form": "~1.0.0",
@ -69,7 +69,7 @@
    "rc-tree": "~1.3.6",
    "rc-tree-select": "~1.8.0",
    "rc-upload": "~2.1.0",
-    "rc-util": "^3.3.0",
+    "rc-util": "^4.0.0",
    "react-addons-pure-render-mixin": "^15.0.0",
    "react-slick": "~0.14.2",
    "shallowequal": "^0.2.2",