lucid-ui
Version:
A UI component library from Xandr.
228 lines • 9.69 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShowCursor = exports.SelectRange = exports.SelectDates = exports.CustomDaypickerModifiers = exports.DisabledDays = exports.SelectedDay = void 0;
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var CalendarMonth_1 = __importDefault(require("./CalendarMonth"));
var react_day_picker_1 = __importDefault(require("react-day-picker"));
var lodash_1 = __importDefault(require("lodash"));
var Button_1 = __importDefault(require("../Button/Button"));
exports.default = {
title: 'Private/CalendarMonth',
component: CalendarMonth_1.default,
parameters: {
docs: {
description: {
component: CalendarMonth_1.default.peek.description,
},
},
},
};
/* Selected Day */
var SelectedDay = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(CalendarMonth_1.default, { selectedDays: new Date() })));
},
});
return react_1.default.createElement(Component, null);
};
exports.SelectedDay = SelectedDay;
exports.SelectedDay.storyName = 'SelectedDay';
/* Disabled Days */
var DisabledDays = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(CalendarMonth_1.default, { disabledDays: react_day_picker_1.default.DateUtils.isPastDay })));
},
});
return react_1.default.createElement(Component, null);
};
exports.DisabledDays = DisabledDays;
exports.DisabledDays.storyName = 'DisabledDays';
/* Custom Daypicker Modifiers */
var CustomDaypickerModifiers = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(CalendarMonth_1.default, { modifiers: {
tuesday: function (day) { return day.getDay() === 2; },
} }),
react_1.default.createElement("style", null, "\n\t\t\t\t\t.lucid-CalendarMonth .DayPicker-Day--tuesday {\n\t\t\t\t\t\tborder: 1px dotted gray;\n\t\t\t\t\t}\n\t\t\t\t")));
},
});
return react_1.default.createElement(Component, null);
};
exports.CustomDaypickerModifiers = CustomDaypickerModifiers;
exports.CustomDaypickerModifiers.storyName = 'CustomDaypickerModifiers';
/* Select Dates */
var SelectDates = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
offset: 0,
selectedDays: [],
cursor: null,
};
},
handlePrev: function () {
this.setState({
offset: this.state.offset - 1,
});
},
handleNext: function () {
this.setState({
offset: this.state.offset + 1,
});
},
handleDayClick: function (date, _a) {
var disabled = _a.disabled;
if (disabled) {
return;
}
var selectedDays = this.state.selectedDays;
this.setState({
selectedDays: lodash_1.default.xorWith(selectedDays, [date], react_day_picker_1.default.DateUtils.isSameDay),
cursor: date,
});
},
handleDayMouseEnter: function (day, _a) {
var disabled = _a.disabled;
if (disabled) {
this.setState({
cursor: null,
});
}
else {
this.setState({
cursor: day,
});
}
},
handleDayMouseLeave: function () {
this.setState({
cursor: null,
});
},
render: function () {
var _a = this.state, selectedDays = _a.selectedDays, cursor = _a.cursor, offset = _a.offset;
return (react_1.default.createElement("section", null,
react_1.default.createElement("div", { style: { display: 'flex', maxWidth: 468 } },
react_1.default.createElement(Button_1.default, { onClick: this.handlePrev }, '<'),
react_1.default.createElement(CalendarMonth_1.default, { monthOffset: offset, selectedDays: selectedDays, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: react_day_picker_1.default.DateUtils.isPastDay }),
react_1.default.createElement(Button_1.default, { onClick: this.handleNext }, '>')),
"selectedDays:",
' ',
lodash_1.default.map(selectedDays, function (selected) {
return selected.toLocaleDateString('en-US');
}).join(', ')));
},
});
return react_1.default.createElement(Component, null);
};
exports.SelectDates = SelectDates;
exports.SelectDates.storyName = 'SelectDates';
/* Select Range */
var SelectRange = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
offset: 0,
selectMode: 'from',
from: null,
to: null,
cursor: null,
};
},
handlePrev: function () {
this.setState({
offset: this.state.offset - 1,
});
},
handleNext: function () {
this.setState({
offset: this.state.offset + 1,
});
},
handleDayClick: function (date, _a) {
var disabled = _a.disabled;
if (disabled) {
return;
}
var selectMode = this.state.selectMode;
if (selectMode === 'to') {
this.setState({
to: date,
cursor: date,
});
}
else {
this.setState({
from: date,
selectMode: 'to',
cursor: date,
});
}
},
handleDayMouseEnter: function (day, _a) {
var disabled = _a.disabled;
if (disabled) {
this.setState({
cursor: null,
});
}
else {
this.setState({
cursor: day,
});
}
},
handleDayMouseLeave: function () {
this.setState({
cursor: null,
});
},
render: function () {
var _a = this.state, selectMode = _a.selectMode, from = _a.from, to = _a.to, cursor = _a.cursor, offset = _a.offset;
return (react_1.default.createElement("section", null,
react_1.default.createElement("div", { style: { display: 'flex', maxWidth: 800 } },
react_1.default.createElement(Button_1.default, { onClick: this.handlePrev }, '<'),
react_1.default.createElement(CalendarMonth_1.default, { monthOffset: offset, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: react_day_picker_1.default.DateUtils.isPastDay }),
react_1.default.createElement(CalendarMonth_1.default, { monthOffset: offset + 1, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: react_day_picker_1.default.DateUtils.isPastDay }),
react_1.default.createElement(Button_1.default, { onClick: this.handleNext }, '>')),
"from: ",
from && from.toLocaleDateString('en-US'),
", to:",
' ',
to && to.toLocaleDateString('en-US')));
},
});
return react_1.default.createElement(Component, null);
};
exports.SelectRange = SelectRange;
exports.SelectRange.storyName = 'SelectRange';
/* Show Cursor */
var ShowCursor = function () {
var Component = (0, create_react_class_1.default)({
UNSAFE_componentWillMount: function () {
this.fromDate = new Date();
this.fromDate.setDate(1);
},
render: function () {
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
"Cursor for day selectMode:",
react_1.default.createElement(CalendarMonth_1.default, { cursor: new Date() }),
"Cursor for range selectMode:",
react_1.default.createElement(CalendarMonth_1.default, { selectMode: 'to', from: this.fromDate, cursor: new Date() })));
},
});
return react_1.default.createElement(Component, null);
};
exports.ShowCursor = ShowCursor;
exports.ShowCursor.storyName = 'ShowCursor';
//# sourceMappingURL=CalendarMonth.stories.js.map