optimizely-oui
Version:
Optimizely's Component Library.
371 lines (356 loc) • 17.8 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _moment = _interopRequireDefault(require("moment"));
var _react2 = require("@storybook/react");
var _addonKnobs = require("@storybook/addon-knobs");
var _addonActions = require("@storybook/addon-actions");
var _Button = _interopRequireDefault(require("../Button"));
var _DateRangePicker = _interopRequireDefault(require("./DateRangePicker"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _templateObject() {
var data = _taggedTemplateLiteral(["\n height: 100vh;\n width: 100vh;\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var mockDateForTesting = (0, _moment["default"])("2020-01-15");
var presetPanelOptions = [{
label: "Last 7 days",
startDate: (0, _moment["default"])().subtract(7, "days").startOf("day"),
endDate: (0, _moment["default"])().endOf("day")
}, {
label: "Last 30 days",
startDate: (0, _moment["default"])().subtract(30, "days").startOf("day"),
endDate: (0, _moment["default"])().endOf("day")
}, {
label: "Last 60 days",
startDate: (0, _moment["default"])().subtract(60, "days").startOf("day"),
endDate: (0, _moment["default"])().endOf("day")
}, {
label: "This Month",
startDate: (0, _moment["default"])().startOf("month"),
endDate: (0, _moment["default"])().endOf("month")
}];
var stories = (0, _react2.storiesOf)("Forms|DateRangePicker", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
return _react["default"].createElement("div", {
id: "root-preview"
}, story());
});
stories.add("Default date range picker", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}), _react["default"].createElement("p", null, "I appear after the calendar."));
}).add("With absolute positioning", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
isAbsolutelyPositioned: (0, _addonKnobs["boolean"])("isAbsolutelyPositioned", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}), _react["default"].createElement("p", null, "I should be behind the calendar when opened"));
}).add("Focused initially", function () {
return _react["default"].createElement(Container, {
className: "chromatic-ignore"
}, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: (0, _addonKnobs.text)('focusedInput (either "startDate" or "endDate"', "startDate"),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("With initial start date", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: (0, _addonKnobs.text)("focusedInput", "endDate"),
initialStartDate: mockDateForTesting,
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("Allow any dates", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "endDate",
initialStartDate: mockDateForTesting,
isFutureDateSelectable: (0, _addonKnobs["boolean"])("isFutureDateSelectable", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("Only allow future dates", function () {
return _react["default"].createElement(Container, {
className: "chromatic-ignore"
}, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "endDate",
isFutureDateSelectable: (0, _addonKnobs["boolean"])("isFutureDateSelectable", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", false),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("Only allow past dates", function () {
return _react["default"].createElement(Container, {
className: "chromatic-ignore"
}, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "endDate",
initialVisibleMonth: function initialVisibleMonth() {
return (0, _moment["default"])().subtract(1, "months");
},
isFutureDateSelectable: (0, _addonKnobs["boolean"])("isFutureDateSelectable", false),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("With custom range checker", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement("p", null, "Custom function for", _react["default"].createElement("code", null, " isOutsideRange "), " prop may look something like", _react["default"].createElement("code", null, " ", "{ (day) => {return day.day() % 2 === 0; } }")), _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "endDate",
initialStartDate: mockDateForTesting,
isOutsideRange: function isOutsideRange(day) {
return day.day() % 2 === 0;
},
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("With an initial starting month", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement("p", null, "Adjust the left hand month using a function like:", _react["default"].createElement("code", null, " () =", ">", " moment().subtract(1, 'months')"), " with the", _react["default"].createElement("code", null, " initialVisibleMonth "), " prop."), _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "endDate",
initialVisibleMonth: function initialVisibleMonth() {
return mockDateForTesting.subtract(1, "months");
},
isOutsideRange: (0, _addonActions.action)("isOutsideRange"),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("Remains open after date selection", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOnDateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("Remains open always, even when clicking outside component", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
keepOpenAlways: (0, _addonKnobs["boolean"])("keepOpenAlways", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("With time inputs", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
endTimeInputId: "endTimeInputId",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
hasTimeInputs: (0, _addonKnobs["boolean"])("hasTimeInputs", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0",
startTimeInputId: "startTimeInputId"
}));
}).add("With preset options panel", function () {
return _react["default"].createElement(Container, {
className: "chromatic-ignore"
}, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
panelButtons: [_react["default"].createElement(_Button["default"], {
key: 0,
style: "plain",
onClick: (0, _addonActions.action)("onClick Clear")
}, "Clear"), _react["default"].createElement(_Button["default"], {
key: 1,
style: "highlight",
onClick: (0, _addonActions.action)("onClick Apply")
}, "Apply")],
presetPanelOptions: presetPanelOptions,
startDateInputId: "start-date-id-0"
}));
}).add("With buttons panel", function () {
return _react["default"].createElement(Container, {
className: "chromatic-ignore"
}, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
panelButtons: [_react["default"].createElement(_Button["default"], {
key: 0,
style: "plain",
onClick: (0, _addonActions.action)("onClick Clear")
}, "Clear"), _react["default"].createElement(_Button["default"], {
key: 1,
style: "highlight",
onClick: (0, _addonActions.action)("onClick Apply")
}, "Apply")],
startDateInputId: "start-date-id-0"
}));
}).add("With no border on calendar", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
isBorderless: (0, _addonKnobs["boolean"])("isBorderless", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
}).add("With no border and time inputs", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
endTimeInputId: "endTimeInputId",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
isBorderless: (0, _addonKnobs["boolean"])("isBorderless", true),
hasTimeInputs: (0, _addonKnobs["boolean"])("hasTimeInputs", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0",
startTimeInputId: "startTimeInputId"
}));
}).add("With preset options and no border on calendar", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
isBorderless: (0, _addonKnobs["boolean"])("isBorderless", true),
hasTimeInputs: (0, _addonKnobs["boolean"])("hasTimeInputs", false),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
panelButtons: [_react["default"].createElement(_Button["default"], {
key: 0,
style: "plain",
onClick: (0, _addonActions.action)("onClick Clear")
}, "Clear"), _react["default"].createElement(_Button["default"], {
key: 1,
style: "highlight",
onClick: (0, _addonActions.action)("onClick Apply")
}, "Apply")],
presetPanelOptions: presetPanelOptions,
startDateInputId: "start-date-id-0"
}));
}).add("With panelButtons as an array (not render props)", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
isBorderless: (0, _addonKnobs["boolean"])("isBorderless", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
panelButtons: [_react["default"].createElement(_Button["default"], {
key: 0,
style: "plain",
onClick: (0, _addonActions.action)("onClick Clear")
}, "Clear"), _react["default"].createElement(_Button["default"], {
key: 1,
style: "highlight",
onClick: (0, _addonActions.action)("onClick Apply")
}, "Apply")],
presetPanelOptions: presetPanelOptions,
startDateInputId: "start-date-id-0"
}));
}).add("With panelButtons as render props function returning an array", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "startDate",
initialStartDate: mockDateForTesting,
isBorderless: (0, _addonKnobs["boolean"])("isBorderless", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
panelButtons: function panelButtons(_ref) {
var endDate = _ref.endDate,
onDatesChange = _ref.onDatesChange,
startDate = _ref.startDate;
return [_react["default"].createElement(_Button["default"], {
key: 0,
style: "plain",
onClick: function onClick() {
(0, _addonActions.action)("onClick Clear with onDatesChange via render props")();
onDatesChange({
startDate: null,
endDate: null
});
}
}, "Clear"), _react["default"].createElement(_Button["default"], {
key: 1,
style: "highlight",
onClick: function onClick() {
return (0, _addonActions.action)("onClick Apply")({
startDate: startDate,
endDate: endDate
});
}
}, "Apply")];
},
presetPanelOptions: presetPanelOptions,
startDateInputId: "start-date-id-0"
}));
}).add("With hasTimeInput and presetPanelOptions", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
endTimeInputId: "endTimeInputId",
focusedInput: "startDate",
hasTimeInputs: (0, _addonKnobs["boolean"])("hasTimeInputs", true),
initialStartDate: mockDateForTesting,
isBorderless: (0, _addonKnobs["boolean"])("isBorderless", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
keepOpenOnDateSelect: (0, _addonKnobs["boolean"])("keepOpenOndateSelect", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
panelButtons: function panelButtons(_ref2) {
var endDate = _ref2.endDate,
onDatesChange = _ref2.onDatesChange,
startDate = _ref2.startDate;
return [_react["default"].createElement(_Button["default"], {
key: 0,
style: "plain",
onClick: function onClick() {
(0, _addonActions.action)("onClick Clear with onDatesChange via render props")();
onDatesChange({
startDate: null,
endDate: null
});
}
}, "Clear"), _react["default"].createElement(_Button["default"], {
key: 1,
style: "highlight",
onClick: function onClick() {
return (0, _addonActions.action)("onClick Apply")({
startDate: startDate,
endDate: endDate
});
}
}, "Apply")];
},
presetPanelOptions: presetPanelOptions,
startDateInputId: "start-date-id-0",
startTimeInputId: "startTimeInputId"
}));
}).add("With clear buttons", function () {
return _react["default"].createElement(Container, null, _react["default"].createElement(_DateRangePicker["default"], {
endDateInputId: "end-date-id-0",
focusedInput: "endDate",
hasClearButton: true,
initialStartDate: mockDateForTesting,
isFutureDateSelectable: (0, _addonKnobs["boolean"])("isFutureDateSelectable", true),
isPastDateSelectable: (0, _addonKnobs["boolean"])("isPastDateSelectable", true),
onDatesChange: (0, _addonActions.action)("onDatesChange"),
startDateInputId: "start-date-id-0"
}));
});
var Container = _styledComponents["default"].div(_templateObject());