Skip to content

Commit

Permalink
Merge pull request ElemeFE#215 from e1emeb0t/dev
Browse files Browse the repository at this point in the history 
Update Select & Input
  • Loading branch information
@Martin0809
Martin0809 authored Jan 18, 2017
2 parents 83051ed + 0275cf3 commit 9f6609a
Show file tree
Hide file tree
Showing 22 changed files with 386 additions and 242 deletions.
69 changes: 15 additions & 54 deletions dist/npm/src/date-picker/BasePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
}
}, {
Expand Down Expand Up @@ -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,
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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',
Expand All @@ -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,
Expand Down
8 changes: 6 additions & 2 deletions dist/npm/src/date-picker/DateRangePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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)
}));
}
Expand Down
93 changes: 39 additions & 54 deletions dist/npm/src/date-picker/basic/DateTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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',
Expand All @@ -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;


Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -278,15 +294,16 @@ 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) {
var startDate = _this2.getStartDate();
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;
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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 });
}
}
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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
};
;

Expand All @@ -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');
Expand Down
Loading

0 comments on commit 9f6609a

Please sign in to comment.