lucid-ui
Version:
A UI component library from Xandr.
215 lines • 8.59 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisableSlidePanel = exports.RelativeFontSize = exports.CustomModifiers = exports.MutipleMonths = exports.InitialMonth = exports.DisabledDays = exports.SelectRange = exports.Basic = void 0;
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var timemachine_1 = __importDefault(require("timemachine"));
var DateSelect_1 = __importDefault(require("./DateSelect"));
var Button_1 = __importDefault(require("../Button/Button"));
exports.default = {
title: 'Controls/DateSelect',
component: DateSelect_1.default,
subcomponents: { 'DateSelect.CalendarMonth': DateSelect_1.default.CalendarMonth },
parameters: {
docs: {
description: {
component: DateSelect_1.default.peek.description,
},
},
layout: 'centered',
},
args: DateSelect_1.default.defaultProps,
};
var Basic = function (args) {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
selectedDate: null,
};
},
handleSelectDate: function (date) {
this.setState({
selectedDate: date,
});
},
render: function () {
var selectedDate = this.state.selectedDate;
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(DateSelect_1.default, __assign({}, args, { selectedDays: selectedDate, onSelectDate: this.handleSelectDate })),
"selected date:",
' ',
selectedDate && selectedDate.toLocaleDateString('en-US')));
},
});
return react_1.default.createElement(Component, null);
};
exports.Basic = Basic;
/* Select Range */
var SelectRange = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
selectMode: 'from',
from: null,
to: null,
};
},
handleSelectDate: function (date) {
var _a;
var selectMode = this.state.selectMode;
this.setState((_a = {
selectMode: 'to'
},
_a[selectMode] = date,
_a));
},
handleReset: function () {
this.setState({
selectMode: 'from',
from: null,
to: null,
});
},
render: function () {
var _a = this.state, selectMode = _a.selectMode, from = _a.from, to = _a.to;
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(DateSelect_1.default, { from: from, to: to, selectMode: selectMode, onSelectDate: this.handleSelectDate }),
react_1.default.createElement("div", null,
"from: ",
from && from.toLocaleDateString('en-US'),
", to:",
' ',
to && to.toLocaleDateString('en-US')),
react_1.default.createElement(Button_1.default, { kind: 'primary', onClick: this.handleReset }, "Reset")));
},
});
return react_1.default.createElement(Component, null);
};
exports.SelectRange = SelectRange;
/* Disabled Days */
var DisabledDays = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
function isPastDay(date) {
var day = new Date(date.getTime()).setHours(0, 0, 0, 0);
var today = new Date().setHours(0, 0, 0, 0);
return day < today;
}
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(DateSelect_1.default, { disabledDays: isPastDay })));
};
exports.DisabledDays = DisabledDays;
/* Initial Month */
var InitialMonth = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(DateSelect_1.default, { initialMonth: new Date(2016, 1), selectedDays: new Date(2016, 1, 17) })));
};
exports.InitialMonth = InitialMonth;
/* Mutiple Months */
var MutipleMonths = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
return (react_1.default.createElement(DateSelect_1.default, { selectedDays: new Date(), monthsShown: 3, calendarsRendered: 9, showDivider: true }));
};
exports.MutipleMonths = MutipleMonths;
exports.MutipleMonths.parameters = {
layout: 'padded',
};
/* Custom Modifiers */
var CustomModifiers = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
return (react_1.default.createElement("section", { style: { maxWidth: 400 } },
react_1.default.createElement(DateSelect_1.default, null,
react_1.default.createElement(DateSelect_1.default.CalendarMonth, { modifiers: {
tuesday: function (date) { return date.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")));
};
exports.CustomModifiers = CustomModifiers;
/* Relative Font Size */
var RelativeFontSize = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
selectedDate: null,
};
},
handleSelectDate: function (date) {
this.setState({
selectedDate: date,
});
},
render: function () {
var selectedDate = this.state.selectedDate;
return (react_1.default.createElement("section", null,
react_1.default.createElement(DateSelect_1.default, { isFontSizeRelative: true, style: {
width: 600,
height: 400,
}, selectedDays: selectedDate, onSelectDate: this.handleSelectDate }),
"selected date:",
' ',
selectedDate && selectedDate.toLocaleDateString('en-US')));
},
});
return react_1.default.createElement(Component, null);
};
exports.RelativeFontSize = RelativeFontSize;
/* Disable Slide Panel */
var DisableSlidePanel = function () {
timemachine_1.default.config({
dateString: 'December 25, 2018 13:12:59',
});
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
selectedDate: null,
};
},
handleSelectDate: function (date) {
this.setState({
selectedDate: date,
});
},
render: function () {
var selectedDate = this.state.selectedDate;
return (react_1.default.createElement("section", { style: { maxWidth: 800 } },
react_1.default.createElement(DateSelect_1.default, { useSlidePanel: false, selectedDays: selectedDate, onSelectDate: this.handleSelectDate, monthsShown: 2, showDivider: true }),
"selected date:",
' ',
selectedDate && selectedDate.toLocaleDateString('en-US')));
},
});
return react_1.default.createElement(Component, null);
};
exports.DisableSlidePanel = DisableSlidePanel;
//# sourceMappingURL=DateSelect.stories.js.map