chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
305 lines (302 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _dateTimeHelper = require("../../utils/dateTimeHelper");
var _debounce = _interopRequireDefault(require("../../utils/debounce"));
var _validateOpeningTimes = _interopRequireDefault(require("../utils/validateOpeningTimes"));
var _Day = _interopRequireDefault(require("./Day"));
require("./OpeningTimes.css");
var _OpeningTimesHint = _interopRequireWildcard(require("./OpeningTimesHint"));
var _TimeSpan = _interopRequireDefault(require("./TimeSpan"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* An input for opening times.
*/
class OpeningTimes extends _react.Component {
constructor(props) {
super(props);
this.onAdd = this.onAdd.bind(this);
this.onRemove = this.onRemove.bind(this);
this.onChange = this.onChange.bind(this);
this.onDayActivation = this.onDayActivation.bind(this);
this.validateState = this.validateState.bind(this);
this.onValidateStateDebounce = (0, _debounce.default)(this.onValidateState.bind(this), 1000);
const {
times
} = this.props;
for (let i = 0; i < times.length; i += 1) {
const current = times[i];
if (current && (current.disabled === null || current.disabled === undefined)) current.disabled = false;
}
for (let i = 0; i < OpeningTimes.weekdays.length; i += 1) {
if (times.findIndex(element => element.weekDay === i) < 0) {
times.push({
weekDay: i,
start: _TimeSpan.default.defaultStart,
end: _TimeSpan.default.defaultEnd,
disabled: true
});
}
}
this.state = {
times,
timesValid: (0, _validateOpeningTimes.default)(times)
};
}
onAdd(weekDay) {
const {
onChange
} = this.props;
const newState = {
...this.state
};
const foundTimes = newState.times.filter(time => time.weekDay === weekDay);
let oldEnd = (0, _dateTimeHelper.getTimeStringMinutes)(foundTimes[0].end);
if (oldEnd === 0) {
oldEnd = 24 * 60;
}
let newStart = oldEnd + 60;
if (oldEnd < 18 * 60) {
newStart = 18 * 60;
}
if (newStart > 24 * 60) {
newStart = Math.max(24 * 60 - 1, oldEnd);
}
let newEnd = newStart + 2 * 60;
if (newEnd > 24 * 60) {
newEnd = 24 * 60;
}
newState.times.push({
weekDay,
start: (0, _dateTimeHelper.getTimeStringFromMinutes)(newStart),
end: (0, _dateTimeHelper.getTimeStringFromMinutes)(newEnd),
disabled: false
});
const openingTimesValid = (0, _validateOpeningTimes.default)(newState.times);
this.setState(newState);
this.validateState(openingTimesValid);
if (onChange) onChange(newState.times, openingTimesValid);
}
onRemove(day, span) {
const {
onChange
} = this.props;
const newState = {
...this.state
};
const timesOfDay = newState.times.filter(time => time.weekDay === day).filter((time, index) => index !== span);
const otherTimes = newState.times.filter(time => time.weekDay !== day);
newState.times = [...timesOfDay, ...otherTimes];
if (onChange) {
const openingTimesValid = (0, _validateOpeningTimes.default)(newState.times);
this.setState(newState);
this.validateState(openingTimesValid);
onChange(newState.times, openingTimesValid);
}
}
onChange(day, index, start, end) {
// eslint-disable-next-line no-nested-ternary
const {
times
} = this.state;
const {
onChange
} = this.props;
const newState = {
...this.state
};
if (onChange) {
const timesOfDay = newState.times.filter(time => time.weekDay === day);
timesOfDay[index].start = start;
timesOfDay[index].end = end;
const openingTimesValid = (0, _validateOpeningTimes.default)(newState.times);
this.setState(newState);
this.validateState(openingTimesValid);
onChange(times, openingTimesValid);
}
}
onDayActivation(day, status) {
const {
onChange
} = this.props;
const newState = {
...this.state
};
const timesOfDay = newState.times.filter(time => time.weekDay === day);
const defaultTime = {
weekDay: day,
start: '08:00',
end: '17:00',
disabled: false
};
if (timesOfDay.length === 0) {
timesOfDay.push(defaultTime);
}
if (status) {
if (newState.times.length === newState.times.filter(time => time.disabled).length || newState.times.length === 0) {
if (newState.times.find(time => time.weekDay === day)) {
newState.times = newState.times.map(time => time.weekDay === day ? {
weekDay: time.weekDay,
start: time.start,
end: time.end,
disabled: !time.disabled
} : time);
} else newState.times.push(defaultTime);
}
// else newState.times = this.applyPreviousTimes(day, status);
let foundTimeForDay = false;
for (let i = 0; i < newState.times.length; i += 1) {
if (newState.times[i].weekDay === day) {
if (newState.times[i].disabled === true) {
newState.times[i].disabled = false;
}
foundTimeForDay = true;
}
}
if (!foundTimeForDay) newState.times.push(defaultTime);
} else {
for (let i = 0; i < timesOfDay.length; i += 1) {
const current = timesOfDay[i];
if (current.weekDay === day) current.disabled = true;
}
}
const openingTimesValid = (0, _validateOpeningTimes.default)(newState.times);
this.setState(newState);
this.validateState(openingTimesValid);
if (onChange) onChange(newState.times, openingTimesValid);
}
onValidateState() {
const {
times
} = this.state;
const timesValid = (0, _validateOpeningTimes.default)(times);
this.setState({
timesValid
});
}
validateState(valid) {
if (valid === void 0) {
valid = false;
}
if (valid) {
this.setState({
timesValid: valid
});
} else {
this.onValidateStateDebounce();
}
}
render() {
const {
className,
style,
forceMobile,
hintPosition,
hintText
} = this.props;
const {
times,
timesValid
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)(className, 'cc__opening_times', forceMobile && 'cc__opening_times--force-mobile'),
style: style
}, !timesValid && hintPosition === OpeningTimes.hintPositions.TOP && /*#__PURE__*/_react.default.createElement(_OpeningTimesHint.default, {
content: hintText,
position: hintPosition
}), OpeningTimes.weekdays.map(day => /*#__PURE__*/_react.default.createElement(_Day.default
// eslint-disable-next-line react/no-array-index-key
, {
key: day.number,
weekday: day,
times: times.filter(t => t.weekDay === day.number),
onDayActivation: this.onDayActivation,
onAdd: this.onAdd,
onRemove: this.onRemove,
onChange: this.onChange
})), !timesValid && hintPosition === OpeningTimes.hintPositions.BOTTOM && /*#__PURE__*/_react.default.createElement(_OpeningTimesHint.default, {
content: hintText,
position: hintPosition
}));
}
}
OpeningTimes.hintPositions = _OpeningTimesHint.HINT_POSITIONS;
OpeningTimes.weekdays = [{
name: 'Montag',
number: 1
}, {
name: 'Dienstag',
number: 2
}, {
name: 'Mittwoch',
number: 3
}, {
name: 'Donnerstag',
number: 4
}, {
name: 'Freitag',
number: 5
}, {
name: 'Samstag',
number: 6
}, {
name: 'Sonntag',
number: 0
}];
OpeningTimes.propTypes = {
/**
* An array of the timespans that are opening hours.
*/
times: _propTypes.default.arrayOf(_propTypes.default.shape({
weekDay: _propTypes.default.number.isRequired,
start: _propTypes.default.string.isRequired,
end: _propTypes.default.string.isRequired,
disabled: _propTypes.default.bool
})).isRequired,
/**
* Called after the user has changed the opening times. Receives the
* modified times as its first parameter.
*/
onChange: _propTypes.default.func,
/**
* A classname string that will be applied to the root container.
*/
className: _propTypes.default.string,
/**
* A React style object that will be applied to the root container.
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/**
* Wether to force a mobile view.
*/
forceMobile: _propTypes.default.bool,
/**
* The hint position. Possible values are `OpeningTimes.hintPositions.NONE`,
* `OpeningTimes.hintPositions.TOP` and `OpeningTimes.hintPositions.BOTTOM`.
*/
hintPosition: _propTypes.default.oneOf([OpeningTimes.hintPositions.NONE, OpeningTimes.hintPositions.TOP, OpeningTimes.hintPositions.BOTTOM]),
/**
* The text to be shown inside of the hint.
*/
hintText: _propTypes.default.string
};
OpeningTimes.defaultProps = {
onChange: null,
className: null,
style: null,
forceMobile: false,
hintPosition: OpeningTimes.hintPositions.TOP,
hintText: ''
};
OpeningTimes.displayName = 'OpeningTimes';
var _default = OpeningTimes;
exports.default = _default;
//# sourceMappingURL=OpeningTimes.js.map