chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
124 lines (121 loc) • 5.1 kB
JavaScript
;
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 _areDatesEqual = _interopRequireDefault(require("../utils/areDatesEqual"));
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; }
/* eslint-disable react/no-array-index-key, jsx-a11y/click-events-have-key-events,react/forbid-prop-types,no-underscore-dangle */
class DayItem extends _react.PureComponent {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
const {
onDateSelect,
date
} = this.props;
if (onDateSelect) {
onDateSelect(date);
}
}
render() {
const {
date,
inMonth,
activateAll,
activated,
selected,
highlighted,
highlightStyle,
categories,
circleColor
} = this.props;
let _active = activateAll;
let _selected = false;
let _marked = false;
let _highlighted = false;
let _onClick = false;
let _className = 'day__item day-in-month';
let _contentClassName = 'day__item__content';
let _style = null;
if (_active) {
_onClick = true;
}
if (activated) {
_active = true;
_marked = true;
_onClick = true;
}
if (selected && (0, _areDatesEqual.default)(selected, date)) {
_active = true;
_selected = true;
}
if (highlighted) {
_active = true;
_marked = true;
_onClick = true;
_highlighted = true;
if (highlightStyle) {
_style = highlightStyle;
}
}
if (inMonth) {
_className = (0, _clsx.default)('day__item day-in-month', _active ? 'is-active' : 'is-deactive', _marked && ['is-marked', _active ? 'chayns__background-color--80 chayns__color--5' : !_selected && 'chayns__background-color--80', _highlighted && 'is-marked-is-highlighted']);
_contentClassName = 'day__item__content' + (_selected ? " is-selected" : "");
return /*#__PURE__*/_react.default.createElement("div", {
className: _className,
style: _style,
onClick: _onClick ? this.onClick : null
}, /*#__PURE__*/_react.default.createElement("div", {
className: _contentClassName,
style: _selected && circleColor ? {
backgroundColor: circleColor
} : undefined
}, date.getDate()), (categories === null || categories === void 0 ? void 0 : categories.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
className: "day__item__category--wrapper"
}, categories.map((color, index) => /*#__PURE__*/_react.default.createElement("div", {
key: `${index}__${color}`,
className: "day__item__category-circle",
style: {
backgroundColor: color
}
}))));
}
return /*#__PURE__*/_react.default.createElement("div", {
className: "day__item day-out-month"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "day__item__content"
}, date.getDate()));
}
}
DayItem.propTypes = {
date: _propTypes.default.instanceOf(Date).isRequired,
inMonth: _propTypes.default.bool.isRequired,
onDateSelect: _propTypes.default.func,
activateAll: _propTypes.default.bool,
selected: _propTypes.default.instanceOf(Date),
activated: _propTypes.default.bool,
highlighted: _propTypes.default.bool,
highlightStyle: _propTypes.default.object,
circleColor: _propTypes.default.string,
categories: _propTypes.default.arrayOf(_propTypes.default.string)
};
DayItem.defaultProps = {
selected: null,
activated: false,
highlighted: false,
activateAll: null,
highlightStyle: null,
circleColor: null,
onDateSelect: null,
categories: null
};
DayItem.displayName = 'DayItem';
var _default = DayItem;
exports.default = _default;
//# sourceMappingURL=DayItem.js.map