Skip to content

Commit

Permalink
- allowPageClickToClose={true} // default is true
Browse files Browse the repository at this point in the history
  • Loading branch information
edwardxiao committed Jul 7, 2020
1 parent 3bcdc1f commit 20d9bdb
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 51 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
<CalendarPicker
locale={`en-us`} // 'en-us' or 'zh-cn'; default is en-us
show={showCalendarPicker} //default is false
allowPageClickToClose={true} // default is true
onClose={() => setShowCalendarPicker(false)}
defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "MM/DD/YYYY"
onYearPicked={res => console.log(res)}
Expand All @@ -56,6 +57,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
<RangePicker
locale={`en-us`} // default is en-us
show={false} // default is false
allowPageClickToClose={true} // default is true
placeholder={['Start Time', 'End Time']}
defaultDates={[`${yearS}-${monthS}-${dateS}`, `${yearE}-${monthE}-${dateE}`]} // ['YYYY-MM-DD', 'YYYY-MM-DD']
defaultTimes={[`${hourS}:${minuteS}`, `${hourE}:${minuteE}`]} // ['hh:mm', 'hh:mm']
Expand Down
4 changes: 4 additions & 0 deletions example/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const Component = () => {
locale={`en-us`} // 'en-us' or 'zh-cn'; default is en-us
show={showCalendarPicker} //default is false
onClose={() => setShowCalendarPicker(false)}
allowPageClickToClose={true} // default is true
defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "MM/DD/YYYY"
onYearPicked={res => console.log(res)}
onMonthPicked={res => console.log(res)}
Expand All @@ -77,6 +78,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
<CalendarPicker
locale="en-us" // default is en-us
show={showCalendarPicker} //default is false
allowPageClickToClose={true} // default is true
onClose={() => setShowCalendarPicker(false)}
defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "YYYY-MM-DD"
onYearPicked={res => console.log(res)}
Expand All @@ -101,6 +103,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
locale={`en-us`} // default is en-us
show={false} // default is false
disabled={false} // default is false
allowPageClickToClose={true} // default is true
placeholder={['Start Time', 'End Time']}
defaultDates={[year + '-' + month + '-' + date, year + '-' + month + '-' + date]} // ['YYYY-MM-DD', 'YYYY-MM-DD']
defaultTimes={[hour + ':' + minute, hour + ':' + minute]} // ['hh:mm', 'hh:mm']
Expand All @@ -118,6 +121,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
<RangePicker
locale="en-us" // default is en-us
show={false} // default is false
allowPageClickToClose={true} // default is true
placeholder={['Start Time', 'End Time']}
defaultDates={[year + '-' + month + '-' + date, year + '-' + month + '-' + date]}
// ['YYYY-MM-DD', 'YYYY-MM-DD']
Expand Down
80 changes: 70 additions & 10 deletions lib/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ try {
"react-minimal-datetime-range__close": "react-minimal-datetime-range__react-minimal-datetime-range__close",
"react-minimal-datetime-range__clear": "react-minimal-datetime-range__react-minimal-datetime-range__clear",
"disabled": "react-minimal-datetime-range__disabled",
"react-minimal-datetime-date-piker__divider": "react-minimal-datetime-range__react-minimal-datetime-date-piker__divider",
"react-minimal-datetime-range-dropdown": "react-minimal-datetime-range__react-minimal-datetime-range-dropdown",
"react-minimal-datetime-range-dropdown-calendar__menu": "react-minimal-datetime-range__react-minimal-datetime-range-dropdown-calendar__menu",
"react-minimal-datetime-range-dropdown-calendar__menu-no-effect": "react-minimal-datetime-range__react-minimal-datetime-range-dropdown-calendar__menu-no-effect",
Expand Down Expand Up @@ -130,10 +131,12 @@ try {
} catch (ex) {}

var CalendarPicker = (0, _react.memo)(function (_ref) {
var _ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? DEFAULT_LACALE : _ref$locale,
_ref$show = _ref.show,
var _ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? DEFAULT_LACALE : _ref$locale,
_ref$allowPageClickTo = _ref.allowPageClickToClose,
allowPageClickToClose = _ref$allowPageClickTo === void 0 ? true : _ref$allowPageClickTo,
_ref$onClose = _ref.onClose,
onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
_ref$defaultDate = _ref.defaultDate,
Expand Down Expand Up @@ -178,8 +181,31 @@ var CalendarPicker = (0, _react.memo)(function (_ref) {
(0, _react.useEffect)(function () {
setInternalShow(show);
}, [show]);
var $elWrapper = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (typeof window !== 'undefined') {
window.addEventListener('mousedown', pageClick);
window.addEventListener('touchstart', pageClick);
return function () {
window.removeEventListener('mousedown', pageClick);
window.removeEventListener('touchstart', pageClick);
};
}
}, []);
var pageClick = (0, _react.useCallback)(function (e) {
if (!allowPageClickToClose) {
return;
}

if ($elWrapper.current.contains(e.target)) {
return;
}

handleOnClose();
}, [allowPageClickToClose]);
return /*#__PURE__*/_react["default"].createElement("div", {
style: style
style: style,
ref: $elWrapper
}, internalShow && /*#__PURE__*/_react["default"].createElement(CalendarPickerComponent, {
show: internalShow,
defaultDate: defaultDate,
Expand Down Expand Up @@ -247,8 +273,12 @@ var CalendarPickerComponent = (0, _react.memo)(function (_ref2) {
});
var TYPES = ['date', 'time'];
var RangePicker = (0, _react.memo)(function (_ref3) {
var _ref3$disabled = _ref3.disabled,
var _ref3$show = _ref3.show,
show = _ref3$show === void 0 ? false : _ref3$show,
_ref3$disabled = _ref3.disabled,
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
_ref3$allowPageClickT = _ref3.allowPageClickToClose,
allowPageClickToClose = _ref3$allowPageClickT === void 0 ? true : _ref3$allowPageClickT,
_ref3$locale = _ref3.locale,
locale = _ref3$locale === void 0 ? DEFAULT_LACALE : _ref3$locale,
_ref3$placeholder = _ref3.placeholder,
Expand All @@ -257,8 +287,6 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
defaultDates = _ref3$defaultDates === void 0 ? ['', ''] : _ref3$defaultDates,
_ref3$defaultTimes = _ref3.defaultTimes,
defaultTimes = _ref3$defaultTimes === void 0 ? ['', ''] : _ref3$defaultTimes,
_ref3$show = _ref3.show,
show = _ref3$show === void 0 ? false : _ref3$show,
_ref3$onConfirm = _ref3.onConfirm,
onConfirm = _ref3$onConfirm === void 0 ? function () {} : _ref3$onConfirm,
_ref3$onClear = _ref3.onClear,
Expand Down Expand Up @@ -428,6 +456,34 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
setStart(defaultDates[0] ? "".concat(defaultDates[0], " ").concat(defaultTimes[0] ? defaultTimes[0] : '') : '');
setEnd(defaultDates[1] ? "".concat(defaultDates[1], " ").concat(defaultTimes[1] ? defaultTimes[1] : '') : '');
}, [defaultDates]);
var $elWrapper = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (typeof window !== 'undefined') {
window.addEventListener('mousedown', pageClick);
window.addEventListener('touchstart', pageClick);
return function () {
window.removeEventListener('mousedown', pageClick);
window.removeEventListener('touchstart', pageClick);
};
}
}, []);
var pageClick = (0, _react.useCallback)(function (e) {
if (!allowPageClickToClose) {
return;
}

if ($elWrapper.current.contains(e.target)) {
return;
}

setInternalShow(false);
}, [allowPageClickToClose]);
var isDefault = (0, _react.useMemo)(function () {
return start === "".concat(defaultDates[0], " ").concat(defaultTimes[0]) && end === "".concat(defaultDates[1], " ").concat(defaultTimes[1]);
}, [start, end]);
var isEmpty = (0, _react.useMemo)(function () {
return !start && !end;
}, [start, end]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: "react-minimal-datetime-range__range",
style: style
Expand All @@ -448,7 +504,7 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
placeholder: placeholder[1],
className: "react-minimal-datetime-range__range-input ".concat(disabled && 'disabled'),
value: end
}), start ? /*#__PURE__*/_react["default"].createElement("svg", {
}), !isDefault && !isEmpty ? /*#__PURE__*/_react["default"].createElement("svg", {
className: "react-minimal-datetime-range__clear ".concat(disabled && 'disabled'),
width: "15",
height: "15",
Expand All @@ -471,7 +527,9 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
}), /*#__PURE__*/_react["default"].createElement("path", {
fill: "none",
d: "M0 0h24v24H0z"
}))), internalShow && /*#__PURE__*/_react["default"].createElement(RangePickerComponent, {
}))), /*#__PURE__*/_react["default"].createElement("div", {
ref: $elWrapper
}, internalShow && /*#__PURE__*/_react["default"].createElement(RangePickerComponent, {
show: internalShow,
selected: selected,
setSelected: setSelected,
Expand All @@ -495,7 +553,7 @@ var RangePicker = (0, _react.memo)(function (_ref3) {
setCurrentDateObjStart: setCurrentDateObjStart,
currentDateObjEnd: currentDateObjEnd,
setCurrentDateObjEnd: setCurrentDateObjEnd
}));
})));
});
exports.RangePicker = RangePicker;
var RangePickerComponent = (0, _react.memo)(function (_ref6) {
Expand Down Expand Up @@ -558,6 +616,8 @@ var RangePickerComponent = (0, _react.memo)(function (_ref6) {
setCurrentDateObjStart: setCurrentDateObjStart,
currentDateObjEnd: currentDateObjEnd,
setCurrentDateObjEnd: setCurrentDateObjEnd
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "react-minimal-datetime-date-piker__divider"
}), /*#__PURE__*/_react["default"].createElement(_RangeDate["default"], {
selected: selected,
setSelected: setSelected,
Expand Down
Loading

0 comments on commit 20d9bdb

Please sign in to comment.