chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
139 lines (136 loc) • 6.06 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 _ChooseButton = _interopRequireDefault(require("../../react-chayns-button/component/ChooseButton"));
var _Checkbox = _interopRequireDefault(require("../../react-chayns-checkbox/component/Checkbox"));
var _Icon = _interopRequireDefault(require("../../react-chayns-icon/component/Icon"));
var _checkDay = _interopRequireDefault(require("../utils/checkDay"));
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; }
const PLACEHOLDER_STYLE = {
width: 23
};
const PREFIX = 'CC_TIMESPAN_';
let currentId = 0;
class Day extends _react.Component {
constructor(props) {
super(props);
this.animationendFunction = () => {
const {
weekday,
onRemove
} = this.props;
onRemove(weekday.number, 1);
this.setState({
isRemoving: false
});
if (this.timeSpanRef) this.timeSpanRef.removeEventListener('animationend', this.animationendFunction);
};
this.onChange = (weekDayNumber, index, start, end) => {
const {
onChange
} = this.props;
onChange(weekDayNumber, index, start, end);
};
this.onDayActivation = this.onDayActivation.bind(this);
this.timeSpanKey1 = `${PREFIX}${currentId++}`;
this.timeSpanKey2 = `${PREFIX}${currentId++}`;
this.state = {
isRemoving: false,
animations: false
};
}
onDayActivation(status) {
const {
onDayActivation,
weekday
} = this.props;
onDayActivation(weekday.number, status);
}
render() {
const {
weekday,
times,
onAdd,
onRemove
} = this.props;
const {
isRemoving,
animations
} = this.state;
// eslint-disable-next-line no-nested-ternary
const timeSpans = times.slice();
const isDisabled = !times.some(t => !t.disabled);
const dateValid = (0, _checkDay.default)(times);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)("flex times", timeSpans.length > 1 && "multiple" + (animations ? " multiple--animations" : ""), isDisabled && 'times--disabled')
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex__left"
}, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
label: weekday.name,
onChange: this.onDayActivation,
checked: !isDisabled
})), /*#__PURE__*/_react.default.createElement("div", {
className: "flex__middle flex__middle--wrapper"
}, timeSpans.map((t, index) => /*#__PURE__*/_react.default.createElement("div", {
className: "flex__middle__wrapper"
}, /*#__PURE__*/_react.default.createElement(_TimeSpan.default, {
key: index === 0 ? this.timeSpanKey1 : this.timeSpanKey2,
startTime: t.start,
endTime: t.end,
disabled: isDisabled,
onChange: (start, end) => this.onChange(weekday.number, index, start, end),
childrenRef: index === 1 ? ref => {
this.timeSpanRef = ref;
} : null,
isInvalid: !dateValid
}), index === timeSpans.length - 1 ? /*#__PURE__*/_react.default.createElement(_ChooseButton.default, {
className: "flex__right",
onClick: () => {
this.setState({
animations: true
});
if (this.timeSpanRef) this.timeSpanRef.removeEventListener('animationend', this.animationendFunction);
if (timeSpans.length < 2) {
onAdd(weekday.number, _TimeSpan.default.defaultStart, _TimeSpan.default.defaultEnd);
} else {
onRemove(weekday.number, 1);
this.timeSpanRef.addEventListener('animationend', this.animationendFunction);
this.setState({
isRemoving: true
});
}
}
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: timeSpans.length < 2 || isRemoving ? 'fa fa-plus' : 'fa fa-times',
style: {
fontSize: 'inherit'
}
})) : /*#__PURE__*/_react.default.createElement("div", {
style: PLACEHOLDER_STYLE
})))));
}
}
Day.propTypes = {
weekday: _propTypes.default.shape({
name: _propTypes.default.string.isRequired,
number: _propTypes.default.number.isRequired
}).isRequired,
times: _propTypes.default.arrayOf(_propTypes.default.shape({
start: _propTypes.default.string.isRequired,
end: _propTypes.default.string.isRequired
})).isRequired,
onDayActivation: _propTypes.default.func.isRequired,
onAdd: _propTypes.default.func.isRequired,
onRemove: _propTypes.default.func.isRequired,
onChange: _propTypes.default.func.isRequired
};
Day.displayName = 'Day';
var _default = Day;
exports.default = _default;
//# sourceMappingURL=Day.js.map