diff --git a/dist/npm/src/date-picker/BasePicker.js b/dist/npm/src/date-picker/BasePicker.js index 5cf1019d62e..46599276e96 100644 --- a/dist/npm/src/date-picker/BasePicker.js +++ b/dist/npm/src/date-picker/BasePicker.js @@ -212,49 +212,10 @@ var BasePicker = function (_Component) { }, { key: 'handleKeydown', value: function handleKeydown(evt) { - var _this3 = this; - var keyCode = evt.keyCode; - var target = evt.target; - var selectionStart = target.selectionStart; - var selectionEnd = target.selectionEnd; - var length = target.value.length; - - var hidePicker = function hidePicker() { - _this3.setState({ pickerVisible: false }); - }; - // tab if (keyCode === 9) { - hidePicker(); - - // enter - } else if (keyCode === 13) { - hidePicker(); - evt.target.blur(); //this trigger's handleBlur func - // left - } else if (keyCode === 37) { - evt.preventDefault(); - - if (selectionEnd === length && selectionStart === length) { - target.selectionStart = length - 2; - } else if (selectionStart >= 3) { - target.selectionStart -= 3; - } else { - target.selectionStart = 0; - } - target.selectionEnd = target.selectionStart + 2; - // right - } else if (keyCode === 39) { - evt.preventDefault(); - if (selectionEnd === 0 && selectionStart === 0) { - target.selectionEnd = 2; - } else if (selectionEnd <= length - 3) { - target.selectionEnd += 3; - } else { - target.selectionEnd = length; - } - target.selectionStart = target.selectionEnd - 2; + this.setState({ pickerVisible: false }); } } }, { @@ -337,7 +298,7 @@ var BasePicker = function (_Component) { }, { key: 'render', value: function render() { - var _this4 = this; + var _this3 = this; var _props2 = this.props, isReadOnly = _props2.isReadOnly, @@ -351,19 +312,19 @@ var BasePicker = function (_Component) { var createIconSlot = function createIconSlot() { - if (_this4.calcIsShowTrigger()) { - var cls = isShowClose ? 'el-icon-close' : _this4.triggerClass(); + if (_this3.calcIsShowTrigger()) { + var cls = isShowClose ? 'el-icon-close' : _this3.triggerClass(); return _react2.default.createElement('i', { - className: _this4.classNames('el-input__icon', cls), - onClick: _this4.handleClickIcon.bind(_this4), + className: _this3.classNames('el-input__icon', cls), + onClick: _this3.handleClickIcon.bind(_this3), onMouseEnter: function onMouseEnter() { if (isReadOnly || isDisabled) return; if (text) { - _this4.setState({ isShowClose: true }); + _this3.setState({ isShowClose: true }); } }, onMouseLeave: function onMouseLeave() { - _this4.setState({ isShowClose: false }); + _this3.setState({ isShowClose: false }); } }); } else { @@ -373,12 +334,12 @@ var BasePicker = function (_Component) { var createPickerPanel = function createPickerPanel() { if (pickerVisible) { - return _this4.pickerPanel(_this4.state, Object.assign({}, _this4.props, { + return _this3.pickerPanel(_this3.state, Object.assign({}, _this3.props, { getPopperRefElement: function getPopperRefElement() { - return _reactDom2.default.findDOMNode(_this4.refs.inputRoot); + return _reactDom2.default.findDOMNode(_this3.refs.inputRoot); }, popperMixinOption: { - placement: _constants.PLACEMENT_MAP[_this4.props.align] || _constants.PLACEMENT_MAP.left + placement: _constants.PLACEMENT_MAP[_this3.props.align] || _constants.PLACEMENT_MAP.left } })); } else { @@ -406,7 +367,7 @@ var BasePicker = function (_Component) { eventName: 'click', func: this.handleClickOutside.bind(this) }), _react2.default.createElement(_input2.default, { - className: 'el-date-editor', + className: this.classNames('el-date-editor el-date-editor--' + this.type), readOnly: isReadOnly, disabled: isDisabled, type: 'text', @@ -419,11 +380,11 @@ var BasePicker = function (_Component) { var nstate = { text: iptxt }; if (iptxt.trim() === '') { nstate.value = null; - } else if (_this4.isInputValid(iptxt)) { + } else if (_this3.isInputValid(iptxt)) { //only set value on a valid date input - nstate.value = _this4.parseDate(iptxt); + nstate.value = _this3.parseDate(iptxt); } - _this4.setState(nstate); + _this3.setState(nstate); }, ref: 'inputRoot', value: text, diff --git a/dist/npm/src/date-picker/DateRangePicker.js b/dist/npm/src/date-picker/DateRangePicker.js index afaf5a2a1d2..894ede6b1cf 100644 --- a/dist/npm/src/date-picker/DateRangePicker.js +++ b/dist/npm/src/date-picker/DateRangePicker.js @@ -36,7 +36,7 @@ var DateRangePicker = function (_BasePicker) { _createClass(DateRangePicker, null, [{ key: 'propTypes', get: function get() { - return Object.assign({}, _BasePicker3.default.propTypes, (0, _utils.pick)(_DateRangePanel2.default.propTypes, ['value', 'showTime', 'shortcuts', 'showWeekNumber'])); + return Object.assign({}, _BasePicker3.default.propTypes, (0, _utils.pick)(_DateRangePanel2.default.propTypes, ['value', 'showTime', 'shortcuts'])); } }, { key: 'defaultProps', @@ -54,8 +54,12 @@ var DateRangePicker = function (_BasePicker) { _createClass(DateRangePicker, [{ key: 'pickerPanel', value: function pickerPanel(state, props) { + var value = state.value; + if (value instanceof Date) { + value = [value, null]; + } return _react2.default.createElement(_DateRangePanel2.default, _extends({}, props, { - value: state.value, + value: value, onPick: this.onPicked.bind(this) })); } diff --git a/dist/npm/src/date-picker/basic/DateTable.js b/dist/npm/src/date-picker/basic/DateTable.js index 409d5d95617..470047a8670 100644 --- a/dist/npm/src/date-picker/basic/DateTable.js +++ b/dist/npm/src/date-picker/basic/DateTable.js @@ -40,6 +40,8 @@ var clearHours = function clearHours(time) { return cloneDate.getTime(); }; +var _WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; + var DateTable = function (_Component) { _inherits(DateTable, _Component); @@ -55,10 +57,22 @@ var DateTable = function (_Component) { } _createClass(DateTable, [{ + key: 'WEEKS', + value: function WEEKS() { + // 0-6 + var week = this.getOffsetWeek(); + return _WEEKS.slice(week).concat(_WEEKS.slice(0, week)); + } + }, { + key: 'getOffsetWeek', + value: function getOffsetWeek() { + return this.props.firstDayOfWeek % 7; + } + }, { key: 'getStartDate', value: function getStartDate() { var ds = (0, _utils.deconstructDate)(this.props.date); - return (0, _utils.getStartDateOfMonth)(ds.year, ds.month); + return (0, _utils.getStartDateOfMonth)(ds.year, ds.month, this.getOffsetWeek()); } }, { key: 'getRows', @@ -69,7 +83,8 @@ var DateTable = function (_Component) { showWeekNumber = _props.showWeekNumber, minDate = _props.minDate, maxDate = _props.maxDate, - selectionMode = _props.selectionMode; + selectionMode = _props.selectionMode, + firstDayOfWeek = _props.firstDayOfWeek; var tableRows = this.state.tableRows; @@ -79,7 +94,8 @@ var DateTable = function (_Component) { // dates count in december is always 31, so offset year is not neccessary var dateCountOfLastMonth = (0, _utils.getDayCountOfMonth)(ndate.getFullYear(), ndate.getMonth() === 0 ? 11 : ndate.getMonth() - 1); - day = day === 0 ? 7 : day; + var offsetDaysToWeekOrigin = (0, _utils.getOffsetToWeekOrigin)(day, firstDayOfWeek); + //tableRows: [ [], [], [], [], [], [] ] var rows = tableRows; var count = 1; @@ -130,13 +146,13 @@ var DateTable = function (_Component) { if (i === 0) { //handle first row of date, this row only contains all or some pre-month dates - if (j >= day) { + if (j >= (offsetDaysToWeekOrigin === 0 ? 7 : offsetDaysToWeekOrigin)) { cell.text = count++; if (count === 2) { firstDayPosition = i * 7 + j; } } else { - cell.text = dateCountOfLastMonth - (day - j % 7) + 1; + cell.text = dateCountOfLastMonth - offsetDaysToWeekOrigin + j + 1; cell.type = 'prev-month'; } } else { @@ -278,7 +294,8 @@ var DateTable = function (_Component) { var _props4 = this.props, showWeekNumber = _props4.showWeekNumber, onChangeRange = _props4.onChangeRange, - rangeState = _props4.rangeState; + rangeState = _props4.rangeState, + selectionMode = _props4.selectionMode; var getDateOfCell = function getDateOfCell(row, column, showWeekNumber) { @@ -286,7 +303,7 @@ var DateTable = function (_Component) { return new Date(startDate.getTime() + (row * 7 + (column - (showWeekNumber ? 1 : 0))) * _utils.DAY_DURATION); }; - if (!rangeState.selecting) return; + if (!(selectionMode === _utils.SELECTION_MODES.RANGE && rangeState.selecting)) return; var target = event.target; if (target.tagName !== 'TD') return; @@ -330,8 +347,6 @@ var DateTable = function (_Component) { var newDate = new Date(year, month, 1); - var clickNormalCell = className.indexOf('prev') === -1 && className.indexOf('next') === -1; - if (className.indexOf('prev') !== -1) { if (month === 0) { newDate.setFullYear(year - 1); @@ -349,7 +364,7 @@ var DateTable = function (_Component) { } newDate.setDate(parseInt(text, 10)); - if (clickNormalCell && selectionMode === 'range') { + if (selectionMode === _utils.SELECTION_MODES.RANGE) { if (rangeState.selecting) { if (newDate < minDate) { rangeState.selecting = true; @@ -368,9 +383,7 @@ var DateTable = function (_Component) { onPick({ minDate: (0, _utils.toDate)(newDate), maxDate: null }, false); } } - } - - if (selectionMode === 'day' || selectionMode === 'week') { + } else if (selectionMode === _utils.SELECTION_MODES.DAY || selectionMode === _utils.SELECTION_MODES.WEEK) { onPick({ date: newDate }); } } @@ -404,41 +417,13 @@ var DateTable = function (_Component) { null, $t('el.datepicker.week') ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.sun') - ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.mon') - ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.tue') - ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.wed') - ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.thu') - ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.fri') - ), - _react2.default.createElement( - 'th', - null, - $t('el.datepicker.weeks.sat') - ) + this.WEEKS().map(function (e, idx) { + return _react2.default.createElement( + 'th', + { key: idx }, + $t('el.datepicker.weeks.' + e) + ); + }) ), this.getMarkedRangeRows().map(function (row, idx) { return _react2.default.createElement( @@ -508,15 +493,13 @@ DateTable.propTypes = { rangeState: _libs.PropTypes.shape({ endDate: _libs.PropTypes.date, selecting: _libs.PropTypes.bool - }) + }), + firstDayOfWeek: _libs.PropTypes.range(0, 6) }; -//todo: remove redundant DateTable.defaultProps = { - selectionMode: "day", - showWeekNumber: false, - - value: {} + selectionMode: 'day', + firstDayOfWeek: 0 }; ; @@ -529,6 +512,8 @@ var _temp = function () { __REACT_HOT_LOADER__.register(clearHours, 'clearHours', 'src/date-picker/basic/DateTable.jsx'); + __REACT_HOT_LOADER__.register(_WEEKS, 'WEEKS', 'src/date-picker/basic/DateTable.jsx'); + __REACT_HOT_LOADER__.register(DateTable, 'DateTable', 'src/date-picker/basic/DateTable.jsx'); __REACT_HOT_LOADER__.register(_default, 'default', 'src/date-picker/basic/DateTable.jsx'); diff --git a/dist/npm/src/date-picker/basic/TimeSpinner.js b/dist/npm/src/date-picker/basic/TimeSpinner.js index c541b01a2d9..4a8cc22d9ea 100644 --- a/dist/npm/src/date-picker/basic/TimeSpinner.js +++ b/dist/npm/src/date-picker/basic/TimeSpinner.js @@ -16,6 +16,8 @@ var _utils = require('../../../libs/utils'); var _utils2 = require('../utils'); +var _scrollbar = require('../../scrollbar'); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -73,6 +75,8 @@ function propsToState(props) { return state; } +var SCROLL_AJUST_VALUE = 85; + var TimeSpinner = function (_Component) { _inherits(TimeSpinner, _Component); @@ -153,7 +157,7 @@ var TimeSpinner = function (_Component) { }, { key: '_handleScroll', value: function _handleScroll(type) { - var value = Math.min(Math.floor((this.refs[type].scrollTop - 80) / 32 + 3), 59); + var value = Math.min(Math.floor((this.refs[type].refs.wrap.scrollTop - SCROLL_AJUST_VALUE) / 32 + 3), 59); this.handleChange(type, value); } @@ -181,13 +185,13 @@ var TimeSpinner = function (_Component) { seconds = _ref.seconds; if (hours != null) { - this.refs.hours.scrollTop = Math.max(0, (hours - 2.5) * 32 + 80); + this.refs.hours.refs.wrap.scrollTop = Math.max(0, (hours - 2.5) * 32 + SCROLL_AJUST_VALUE); } if (minutes != null) { - this.refs.minutes.scrollTop = Math.max(0, (minutes - 2.5) * 32 + 80); + this.refs.minutes.refs.wrap.scrollTop = Math.max(0, (minutes - 2.5) * 32 + SCROLL_AJUST_VALUE); } if (seconds != null) { - this.refs.seconds.scrollTop = Math.max(0, (seconds - 2.5) * 32 + 80); + this.refs.seconds.refs.wrap.scrollTop = Math.max(0, (seconds - 2.5) * 32 + SCROLL_AJUST_VALUE); } } }, { @@ -209,40 +213,40 @@ var TimeSpinner = function (_Component) { 'div', { className: this.classNames('el-time-spinner', { 'has-seconds': isShowSeconds }) }, _react2.default.createElement( - 'div', + _scrollbar.Scrollbar, { onMouseEnter: function onMouseEnter() { return _this4.emitSelectRange('hours'); }, onWheel: function onWheel() { - return _this4.handleScroll('hours'); + _this4.handleScroll('hours'); }, + ref: 'hours', className: 'el-time-spinner__wrapper', - ref: 'hours' }, - _react2.default.createElement( - 'ul', - { className: 'el-time-spinner__list' }, - hoursList.map(function (disabled, idx) { - - return _react2.default.createElement( - 'li', - { - key: idx, - onClick: function onClick() { - return _this4.handleChange('hours', idx, disabled); - }, - className: _this4.classNames('el-time-spinner__item', { - 'active': idx === hours, - 'disabled': disabled - }) + wrapStyle: { maxHeight: 'inherit' }, + viewClass: 'el-time-spinner__list', + viewComponent: 'ul' + }, + hoursList.map(function (disabled, idx) { + + return _react2.default.createElement( + 'li', + { + key: idx, + onClick: function onClick() { + return _this4.handleChange('hours', idx, disabled); }, - idx - ); - }) - ) + className: _this4.classNames('el-time-spinner__item', { + 'active': idx === hours, + 'disabled': disabled + }) + }, + idx + ); + }) ), _react2.default.createElement( - 'div', + _scrollbar.Scrollbar, { onMouseEnter: function onMouseEnter() { return _this4.emitSelectRange('minutes'); @@ -250,30 +254,30 @@ var TimeSpinner = function (_Component) { onWheel: function onWheel() { return _this4.handleScroll('minutes'); }, + ref: 'minutes', className: 'el-time-spinner__wrapper', - ref: 'minutes' }, - _react2.default.createElement( - 'ul', - { className: 'el-time-spinner__list' }, - minutesLisit.map(function (disabled, idx) { - return _react2.default.createElement( - 'li', - { - key: idx, - onClick: function onClick() { - return _this4.handleChange('minutes', idx); - }, - className: _this4.classNames('el-time-spinner__item', { - 'active': idx === minutes - }) + wrapStyle: { maxHeight: 'inherit' }, + viewClass: 'el-time-spinner__list', + viewComponent: 'ul' + }, + minutesLisit.map(function (disabled, idx) { + return _react2.default.createElement( + 'li', + { + key: idx, + onClick: function onClick() { + return _this4.handleChange('minutes', idx); }, - idx - ); - }) - ) + className: _this4.classNames('el-time-spinner__item', { + 'active': idx === minutes + }) + }, + idx + ); + }) ), isShowSeconds && _react2.default.createElement( - 'div', + _scrollbar.Scrollbar, { onMouseEnter: function onMouseEnter() { return _this4.emitSelectRange('seconds'); @@ -281,8 +285,12 @@ var TimeSpinner = function (_Component) { onWheel: function onWheel() { return _this4.handleScroll('seconds'); }, + ref: 'seconds', className: 'el-time-spinner__wrapper', - ref: 'seconds' }, + wrapStyle: { maxHeight: 'inherit' }, + viewClass: 'el-time-spinner__list', + viewComponent: 'ul' + }, _react2.default.createElement( 'ul', { className: 'el-time-spinner__list' }, @@ -331,6 +339,8 @@ var _temp = function () { __REACT_HOT_LOADER__.register(propsToState, 'propsToState', 'src/date-picker/basic/TimeSpinner.jsx'); + __REACT_HOT_LOADER__.register(SCROLL_AJUST_VALUE, 'SCROLL_AJUST_VALUE', 'src/date-picker/basic/TimeSpinner.jsx'); + __REACT_HOT_LOADER__.register(TimeSpinner, 'TimeSpinner', 'src/date-picker/basic/TimeSpinner.jsx'); __REACT_HOT_LOADER__.register(_default, 'default', 'src/date-picker/basic/TimeSpinner.jsx'); diff --git a/dist/npm/src/date-picker/basic/YearTable.js b/dist/npm/src/date-picker/basic/YearTable.js index 261c10131b0..9e10c3814b5 100644 --- a/dist/npm/src/date-picker/basic/YearTable.js +++ b/dist/npm/src/date-picker/basic/YearTable.js @@ -48,16 +48,6 @@ var YearTable = function (_Component) { return style; } - - // todo: remove me - // nextTenYear() { - // this.$emit('pick', this.year + 10, false); - // } - - // prevTenYear() { - // this.$emit('pick', this.year - 10, false); - // } - }, { key: 'handleYearTableClick', value: function handleYearTableClick(event) { diff --git a/dist/npm/src/date-picker/constants.js b/dist/npm/src/date-picker/constants.js index 9beb987bc96..00614e8b6ad 100644 --- a/dist/npm/src/date-picker/constants.js +++ b/dist/npm/src/date-picker/constants.js @@ -25,12 +25,6 @@ var DATE_FORMATTER = exports.DATE_FORMATTER = function DATE_FORMATTER(value, for return (0, _utils.formatDate)(value, format); }; var DATE_PARSER = exports.DATE_PARSER = function DATE_PARSER(text, format) { - text = text.split(':'); - if (text.length > 1) text = text.map(function (item) { - return item.slice(-2); - }); - text = text.join(':'); - return (0, _utils.parseDate)(text, format); }; var RANGE_FORMATTER = exports.RANGE_FORMATTER = function RANGE_FORMATTER(value, format) { @@ -47,12 +41,8 @@ var RANGE_FORMATTER = exports.RANGE_FORMATTER = function RANGE_FORMATTER(value, var RANGE_PARSER = exports.RANGE_PARSER = function RANGE_PARSER(text, format) { var array = text.split(RANGE_SEPARATOR); if (array.length === 2) { - var range1 = array[0].split(':').map(function (item) { - return item.slice(-2); - }).join(':'); - var range2 = array[1].split(':').map(function (item) { - return item.slice(-2); - }).join(':'); + var range1 = array[0]; + var range2 = array[1]; return [(0, _utils.parseDate)(range1, format), (0, _utils.parseDate)(range2, format)]; } return []; diff --git a/dist/npm/src/date-picker/panel/DatePanel.js b/dist/npm/src/date-picker/panel/DatePanel.js index f6f6fcd9fff..d1f2863861e 100644 --- a/dist/npm/src/date-picker/panel/DatePanel.js +++ b/dist/npm/src/date-picker/panel/DatePanel.js @@ -320,7 +320,10 @@ var DatePanel = function (_Component) { var yearTranslation = _locale2.default.t('el.datepicker.year'); if (currentView === 'year') { var startYear = Math.floor(year / 10) * 10; - return startYear + ' ' + yearTranslation + '-' + (startYear + 9) + ' ' + yearTranslation; + if (yearTranslation) { + return startYear + ' ' + yearTranslation + '-' + (startYear + 9) + ' ' + yearTranslation; + } + return startYear + ' - ' + (startYear + 9); } return year + ' ' + yearTranslation; } diff --git a/dist/npm/src/date-picker/panel/DateRangePanel.js b/dist/npm/src/date-picker/panel/DateRangePanel.js index ffe09c284c2..c935beaa8f0 100644 --- a/dist/npm/src/date-picker/panel/DateRangePanel.js +++ b/dist/npm/src/date-picker/panel/DateRangePanel.js @@ -45,25 +45,25 @@ var _nextYear = function _nextYear(date) { var mapPropsToState = function mapPropsToState(props) { var value = props.value; - var state = {}; + var state = { + rangeState: { + endDate: null, + selecting: false + } + }; if (!value) { state = { minDate: null, maxDate: null, - rangeState: { - endDate: null, - selecting: false - }, date: new Date() }; } else { - state = { - minDate: value[0] ? (0, _utils.toDate)(value[0]) : null, - maxDate: value[1] ? (0, _utils.toDate)(value[1]) : null, - rangeState: {} - }; - if (state.minDate) { - state.date = (0, _utils.toDate)(state.minDate); + if (value[0] && value[1]) { + state.minDate = (0, _utils.toDate)(value[0]); + state.maxDate = (0, _utils.toDate)(value[1]); + } + if (value[0]) { + state.date = (0, _utils.toDate)(value[0]); } else { state.date = new Date(); } @@ -101,8 +101,6 @@ var DateRangePanel = function (_Component) { value: function handleRangePick(_ref, isClose) { var minDate = _ref.minDate, maxDate = _ref.maxDate; - - console.debug('handleRangePick', minDate, maxDate, isClose); var _props = this.props, showTime = _props.showTime, onPick = _props.onPick; diff --git a/dist/npm/src/date-picker/panel/TimePanel.js b/dist/npm/src/date-picker/panel/TimePanel.js index 7b08adcbc3e..e0058b4b354 100644 --- a/dist/npm/src/date-picker/panel/TimePanel.js +++ b/dist/npm/src/date-picker/panel/TimePanel.js @@ -35,7 +35,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" var mapPropsToState = function mapPropsToState(props) { var state = { format: props.format || 'HH:mm:ss', - currentDate: props.currentDate || Date() //todo: handle update. + currentDate: props.currentDate || Date() }; state.isShowSeconds = (state.format || '').indexOf('ss') !== -1; return state; diff --git a/dist/npm/src/date-picker/panel/TimeRangePanel.js b/dist/npm/src/date-picker/panel/TimeRangePanel.js index e522ce4f76c..3b579b2ddfc 100644 --- a/dist/npm/src/date-picker/panel/TimeRangePanel.js +++ b/dist/npm/src/date-picker/panel/TimeRangePanel.js @@ -97,7 +97,7 @@ var TimeRangePanel = function (_Component) { // (start, end)=>(), index range indicate which field [hours, minutes, seconds] changes onSelectRangeChange: _TimeSpinner2.default.propTypes.onSelectRangeChange, //()=>HtmlElement - getPopperRefElement: _libs.PropTypes.func, //todo: make this dry + getPopperRefElement: _libs.PropTypes.func, popperMixinOption: _libs.PropTypes.object }); } diff --git a/dist/npm/src/date-picker/panel/TimeSelectPanel.js b/dist/npm/src/date-picker/panel/TimeSelectPanel.js index 9ee981f9f9f..837b35ad2e2 100644 --- a/dist/npm/src/date-picker/panel/TimeSelectPanel.js +++ b/dist/npm/src/date-picker/panel/TimeSelectPanel.js @@ -14,6 +14,8 @@ var _libs = require('../../../libs'); var _utils = require('../../../libs/utils'); +var _scrollbar = require('../../scrollbar'); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -69,8 +71,8 @@ var TimeSelectPanel = function (_Component) { ref: 'root', className: 'el-picker-panel time-select' }, _react2.default.createElement( - 'div', - { className: 'el-picker-panel__content' }, + _scrollbar.Scrollbar, + { wrapClass: 'el-picker-panel__content', noresize: true }, this.items().map(function (item, idx) { return _react2.default.createElement( 'div', @@ -99,9 +101,10 @@ TimeSelectPanel.isValid = function (value, _ref) { var start = _ref.start, end = _ref.end, step = _ref.step, - minTime = _ref.minTime; + minTime = _ref.minTime, + maxTime = _ref.maxTime; - var items = TimeSelectPanel.items({ start: start, end: end, step: step, minTime: minTime }); + var items = TimeSelectPanel.items({ start: start, end: end, step: step, minTime: minTime, maxTime: maxTime }); return !!items.filter(function (e) { return !e.disabled; }).find(function (e) { @@ -113,7 +116,8 @@ TimeSelectPanel.items = function (_ref2) { var start = _ref2.start, end = _ref2.end, step = _ref2.step, - minTime = _ref2.minTime; + minTime = _ref2.minTime, + maxTime = _ref2.maxTime; var result = []; @@ -122,7 +126,7 @@ TimeSelectPanel.items = function (_ref2) { while (compareTime(current, end) <= 0) { result.push({ value: current, - disabled: compareTime(current, minTime || '00:00') <= 0 + disabled: compareTime(current, minTime || '00:00') <= 0 || compareTime(current, maxTime || '100:100') >= 0 }); current = nextTime(current, step); @@ -136,6 +140,7 @@ TimeSelectPanel.propTypes = { end: _libs.PropTypes.string, step: _libs.PropTypes.string, minTime: _libs.PropTypes.string, + maxTime: _libs.PropTypes.string, value: _libs.PropTypes.string, onPicked: _libs.PropTypes.func, //(string)=>date diff --git a/dist/npm/src/date-picker/utils/index.js b/dist/npm/src/date-picker/utils/index.js index 8458f7f2fb0..97306e59d2f 100644 --- a/dist/npm/src/date-picker/utils/index.js +++ b/dist/npm/src/date-picker/utils/index.js @@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.SELECTION_MODES = exports.limitRange = exports.getRangeHours = exports.nextMonth = exports.prevMonth = exports.getWeekNumber = exports.getStartDateOfMonth = exports.DAY_DURATION = exports.getFirstDayOfMonth = exports.getDayCountOfMonth = exports.parseDate = exports.formatDate = exports.toDate = undefined; +exports.SELECTION_MODES = exports.limitRange = exports.getRangeHours = exports.nextMonth = exports.prevMonth = exports.getWeekNumber = exports.getStartDateOfMonth = exports.DAY_DURATION = exports.getFirstDayOfMonth = exports.getDayCountOfMonth = exports.parseDate = exports.formatDate = exports.isDate = exports.toDate = exports.equalDate = undefined; +exports.getOffsetToWeekOrigin = getOffsetToWeekOrigin; exports.getDateOfISOWeek = getDateOfISOWeek; exports.hasClass = hasClass; exports.deconstructDate = deconstructDate; @@ -18,10 +19,18 @@ var newArray = function newArray(start, end) { return result; }; +var equalDate = exports.equalDate = function equalDate(dateA, dateB) { + return dateA === dateB || new Date(dateA).getTime() === new Date(dateB).getTime(); +}; + var toDate = exports.toDate = function toDate(date) { + return isDate(date) ? new Date(date) : null; +}; + +var isDate = exports.isDate = function isDate(date) { date = new Date(date); - if (isNaN(date.getTime())) return null; - return date; + if (isNaN(date.getTime())) return false; + return true; }; var formatDate = exports.formatDate = function formatDate(date, format) { @@ -59,18 +68,27 @@ var getFirstDayOfMonth = exports.getFirstDayOfMonth = function getFirstDayOfMont var DAY_DURATION = exports.DAY_DURATION = 86400000; var getStartDateOfMonth = exports.getStartDateOfMonth = function getStartDateOfMonth(year, month) { + var offsetWeek = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; + var result = new Date(year, month, 1); var day = result.getDay(); - if (day === 0) { + if (day === offsetWeek) { result.setTime(result.getTime() - DAY_DURATION * 7); } else { - result.setTime(result.getTime() - DAY_DURATION * day); + var offset = getOffsetToWeekOrigin(day, offsetWeek); + result.setTime(result.getTime() - DAY_DURATION * offset); } return result; }; +function getOffsetToWeekOrigin(day) { + var offsetWeek = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + return day >= offsetWeek ? day - offsetWeek : 7 - offsetWeek + day; +} + var getWeekNumber = exports.getWeekNumber = function getWeekNumber(src) { var date = new Date(src.getTime()); date.setHours(0, 0, 0, 0); @@ -207,8 +225,12 @@ var _temp = function () { __REACT_HOT_LOADER__.register(newArray, 'newArray', 'src/date-picker/utils/index.js'); + __REACT_HOT_LOADER__.register(equalDate, 'equalDate', 'src/date-picker/utils/index.js'); + __REACT_HOT_LOADER__.register(toDate, 'toDate', 'src/date-picker/utils/index.js'); + __REACT_HOT_LOADER__.register(isDate, 'isDate', 'src/date-picker/utils/index.js'); + __REACT_HOT_LOADER__.register(formatDate, 'formatDate', 'src/date-picker/utils/index.js'); __REACT_HOT_LOADER__.register(parseDate, 'parseDate', 'src/date-picker/utils/index.js'); @@ -221,6 +243,8 @@ var _temp = function () { __REACT_HOT_LOADER__.register(getStartDateOfMonth, 'getStartDateOfMonth', 'src/date-picker/utils/index.js'); + __REACT_HOT_LOADER__.register(getOffsetToWeekOrigin, 'getOffsetToWeekOrigin', 'src/date-picker/utils/index.js'); + __REACT_HOT_LOADER__.register(getWeekNumber, 'getWeekNumber', 'src/date-picker/utils/index.js'); __REACT_HOT_LOADER__.register(getDateOfISOWeek, 'getDateOfISOWeek', 'src/date-picker/utils/index.js'); diff --git a/dist/npm/src/input/Input.js b/dist/npm/src/input/Input.js index 74d74d47342..85968735198 100644 --- a/dist/npm/src/input/Input.js +++ b/dist/npm/src/input/Input.js @@ -121,8 +121,7 @@ var Input = function (_Component) { rows = _props2.rows, onMouseEnter = _props2.onMouseEnter, onMouseLeave = _props2.onMouseLeave, - iconSlot = _props2.iconSlot, - otherProps = _objectWithoutProperties(_props2, ['type', 'size', 'prepend', 'append', 'icon', 'autoComplete', 'validating', 'rows', 'onMouseEnter', 'onMouseLeave', 'iconSlot']); + otherProps = _objectWithoutProperties(_props2, ['type', 'size', 'prepend', 'append', 'icon', 'autoComplete', 'validating', 'rows', 'onMouseEnter', 'onMouseLeave']); var classname = this.classNames(type === 'textarea' ? 'el-textarea' : 'el-input', size && 'el-input--' + size, { 'is-disabled': this.props.disabled, @@ -141,15 +140,6 @@ var Input = function (_Component) { delete otherProps.autosize; delete otherProps.onIconClick; - var createIconSlot = function createIconSlot() { - if (iconSlot) return iconSlot;else if (icon) return _react2.default.createElement( - 'i', - { className: 'el-input__icon el-icon-' + icon }, - prepend - ); - return null; - }; - if (type === 'textarea') { return _react2.default.createElement( 'div', @@ -173,7 +163,11 @@ var Input = function (_Component) { { className: 'el-input-group__prepend' }, prepend ), - createIconSlot(), + typeof icon != 'string' ? icon : _react2.default.createElement( + 'i', + { className: 'el-input__icon el-icon-' + icon, onClick: this.handleIconClick.bind(this) }, + prepend + ), _react2.default.createElement('input', _extends({}, otherProps, { ref: 'input', className: 'el-input__inner', @@ -203,8 +197,7 @@ exports.default = _default; Input.propTypes = { // base type: _libs.PropTypes.string, - icon: _libs.PropTypes.string, - iconSlot: _react2.default.PropTypes.element, + icon: _libs.PropTypes.oneOfType([_libs.PropTypes.element, _libs.PropTypes.string]), disabled: _libs.PropTypes.bool, name: _libs.PropTypes.string, placeholder: _libs.PropTypes.string, diff --git a/dist/npm/src/scrollbar/Scrollbar.js b/dist/npm/src/scrollbar/Scrollbar.js new file mode 100644 index 00000000000..fe5d7b1c6e0 --- /dev/null +++ b/dist/npm/src/scrollbar/Scrollbar.js @@ -0,0 +1,117 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Scrollbar = undefined; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _libs = require('../../libs'); + +var _scrollbarWidth = require('./scrollbar-width'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var Scrollbar = exports.Scrollbar = function (_Component) { + _inherits(Scrollbar, _Component); + + _createClass(Scrollbar, null, [{ + key: 'propTypes', + get: function get() { + return { + wrapStyle: _libs.PropTypes.object, + viewClass: _libs.PropTypes.oneOfType([_libs.PropTypes.string, _libs.PropTypes.object]), + wrapClass: _libs.PropTypes.oneOfType([_libs.PropTypes.string, _libs.PropTypes.object]), + className: _libs.PropTypes.string, + viewComponent: _libs.PropTypes.oneOfType([_libs.PropTypes.string, _libs.PropTypes.element]), + noresize: _libs.PropTypes.bool + }; + } + }, { + key: 'defaultProps', + get: function get() { + return { viewComponent: 'div' }; + } + }]); + + function Scrollbar(props) { + _classCallCheck(this, Scrollbar); + + return _possibleConstructorReturn(this, (Scrollbar.__proto__ || Object.getPrototypeOf(Scrollbar)).call(this, props)); + } + + _createClass(Scrollbar, [{ + key: 'render', + value: function render() { + + /* eslint-disable */ + var _props = this.props, + wrapStyle = _props.wrapStyle, + viewClass = _props.viewClass, + children = _props.children, + viewComponent = _props.viewComponent, + wrapClass = _props.wrapClass, + noresize = _props.noresize, + others = _objectWithoutProperties(_props, ['wrapStyle', 'viewClass', 'children', 'viewComponent', 'wrapClass', 'noresize']); + /* eslint-enable */ + + var gutter = (0, _scrollbarWidth.getScrollBarWidth)(); + if (gutter) { + var gutterWith = '-' + gutter + 'px'; + wrapStyle = Object.assign({}, wrapStyle, { + marginRight: gutterWith, + marginBottom: gutterWith + }); + } + + viewClass = this.classNames('el-scrollbar__view', viewClass); + + var wrapView = _react2.default.createElement(viewComponent, { + className: viewClass, + ref: 'resize' + }, children); + + return _react2.default.createElement( + 'div', + { className: this.classNames('el-scrollbar', this.props.className) }, + _react2.default.createElement( + 'div', + _extends({}, others, { + ref: 'wrap', + style: wrapStyle, + className: this.classNames(this.props.wrapClass, 'el-scrollbar__wrap el-scrollbar__wrap--hidden-default') }), + wrapView + ) + ); + } + }]); + + return Scrollbar; +}(_libs.Component); + +; + +var _temp = function () { + if (typeof __REACT_HOT_LOADER__ === 'undefined') { + return; + } + + __REACT_HOT_LOADER__.register(Scrollbar, 'Scrollbar', 'src/scrollbar/Scrollbar.jsx'); +}(); + +; \ No newline at end of file diff --git a/dist/npm/src/scrollbar/index.js b/dist/npm/src/scrollbar/index.js new file mode 100644 index 00000000000..2383c0035b9 --- /dev/null +++ b/dist/npm/src/scrollbar/index.js @@ -0,0 +1,23 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _Scrollbar = require('./Scrollbar'); + +Object.defineProperty(exports, 'Scrollbar', { + enumerable: true, + get: function get() { + return _Scrollbar.Scrollbar; + } +}); +; + +var _temp = function () { + if (typeof __REACT_HOT_LOADER__ === 'undefined') { + return; + } +}(); + +; \ No newline at end of file diff --git a/dist/npm/src/scrollbar/scrollbar-width.js b/dist/npm/src/scrollbar/scrollbar-width.js new file mode 100644 index 00000000000..c1338a3da48 --- /dev/null +++ b/dist/npm/src/scrollbar/scrollbar-width.js @@ -0,0 +1,45 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getScrollBarWidth = getScrollBarWidth; +var scrollBarWidth = void 0; + +function getScrollBarWidth() { + if (scrollBarWidth !== undefined) return scrollBarWidth; + + var outer = document.createElement('div'); + outer.className = 'el-scrollbar__wrap'; + outer.style.visibility = 'hidden'; + outer.style.width = '100px'; + outer.style.position = 'absolute'; + outer.style.top = '-9999px'; + document.body.appendChild(outer); + + var widthNoScroll = outer.offsetWidth; + outer.style.overflow = 'scroll'; + + var inner = document.createElement('div'); + inner.style.width = '100%'; + outer.appendChild(inner); + + var widthWithScroll = inner.offsetWidth; + scrollBarWidth = widthNoScroll - widthWithScroll; + outer.parentNode.removeChild(outer); + + return scrollBarWidth; +} +; + +var _temp = function () { + if (typeof __REACT_HOT_LOADER__ === 'undefined') { + return; + } + + __REACT_HOT_LOADER__.register(scrollBarWidth, 'scrollBarWidth', 'src/scrollbar/scrollbar-width.js'); + + __REACT_HOT_LOADER__.register(getScrollBarWidth, 'getScrollBarWidth', 'src/scrollbar/scrollbar-width.js'); +}(); + +; \ No newline at end of file diff --git a/dist/npm/src/select/Select.js b/dist/npm/src/select/Select.js index f7df1db4eaa..2de035de00d 100644 --- a/dist/npm/src/select/Select.js +++ b/dist/npm/src/select/Select.js @@ -177,7 +177,9 @@ var Select = function (_Component) { this.reference = _reactDom2.default.findDOMNode(this.refs.reference); this.popper = _reactDom2.default.findDOMNode(this.refs.popper); - this.popperJS = this.popperJS || new _popper2.default(this.reference, this.popper); + this.popperJS = this.popperJS || new _popper2.default(this.reference, this.popper, { + gpuAcceleration: false + }); } }, { key: 'debounce', @@ -486,7 +488,7 @@ var Select = function (_Component) { }, { key: 'iconClass', value: function iconClass() { - return this.showCloseIcon() ? 'circle-close' : this.props.remote && this.props.filterable ? '' : 'caret-top'; + return this.showCloseIcon() ? 'circle-close' : this.props.remote && this.props.filterable ? '' : 'caret-top ' + (this.state.visible ? 'is-reverse' : ''); } }, { key: 'showCloseIcon', diff --git a/package.json b/package.json index ed38356a444..b1dcea96e65 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "babel-standalone": "^6.21.1", "core-js": "^2.4.1", "css-loader": "^0.26.1", - "element-theme-default": "^1.1.4", + "element-theme-default": "^1.1.5", "eslint": "^3.13.1", "eslint-config-airbnb": "^14.0.0", "eslint-plugin-import": "^2.2.0", diff --git a/site/docs/zh-CN/breadcrumb.md b/site/docs/zh-CN/breadcrumb.md index cd1815805de..2de0ebc6f05 100644 --- a/site/docs/zh-CN/breadcrumb.md +++ b/site/docs/zh-CN/breadcrumb.md @@ -11,7 +11,7 @@ render() { return ( - 首页 + 首页 活动管理 活动列表 活动详情 diff --git a/site/docs/zh-CN/input.md b/site/docs/zh-CN/input.md index 3d18f94ab06..6be829e1441 100644 --- a/site/docs/zh-CN/input.md +++ b/site/docs/zh-CN/input.md @@ -38,7 +38,7 @@ render() { this.handleIconClick(e)} + onIconClick={e => this.handleIconClick(e)} /> ) } @@ -419,8 +419,7 @@ render() { | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | large, small, mini | — | -| icon | 输入框尾部图标 | string | — | — | -| iconSlot | 输入框尾部图标 | ReactElement | — | — | +| icon | 输入框尾部图标 | string/ReactElement | — | — | | rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 | | autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false | diff --git a/src/input/Input.jsx b/src/input/Input.jsx index ad06cebe325..4632369b172 100644 --- a/src/input/Input.jsx +++ b/src/input/Input.jsx @@ -64,7 +64,7 @@ export default class Input extends Component { } render() { - const { type, size, prepend, append, icon, autoComplete, validating, rows, onMouseEnter, onMouseLeave, iconSlot, + const { type, size, prepend, append, icon, autoComplete, validating, rows, onMouseEnter, onMouseLeave, ...otherProps } = this.props; @@ -88,12 +88,6 @@ export default class Input extends Component { delete otherProps.autosize; delete otherProps.onIconClick; - const createIconSlot = ()=>{ - if (iconSlot) return iconSlot - else if (icon) return {prepend} - return null - } - if (type === 'textarea') { return (
@@ -112,7 +106,7 @@ export default class Input extends Component { return (
{ prepend &&
{prepend}
} - { createIconSlot() } + { typeof icon != 'string' ? icon : {prepend} }