2019-10-02 08:07:39 +00:00
|
|
|
import React from "react";
|
|
|
|
import { storiesOf } from "@storybook/react";
|
|
|
|
import { action } from "@storybook/addon-actions";
|
|
|
|
import {
|
|
|
|
withKnobs,
|
|
|
|
boolean,
|
|
|
|
color,
|
|
|
|
select,
|
2019-10-09 11:18:35 +00:00
|
|
|
date,
|
|
|
|
number,
|
2020-10-16 13:16:01 +00:00
|
|
|
text,
|
2019-10-02 08:07:39 +00:00
|
|
|
} from "@storybook/addon-knobs/react";
|
|
|
|
import withReadme from "storybook-readme/with-readme";
|
|
|
|
import Readme from "./README.md";
|
|
|
|
import DatePicker from ".";
|
|
|
|
import Section from "../../../.storybook/decorators/section";
|
2019-09-02 06:45:45 +00:00
|
|
|
|
|
|
|
function myDateKnob(name, defaultValue) {
|
2019-10-02 08:07:39 +00:00
|
|
|
const stringTimestamp = date(name, defaultValue);
|
|
|
|
return new Date(stringTimestamp);
|
2019-09-02 06:45:45 +00:00
|
|
|
}
|
|
|
|
|
2019-09-11 06:28:46 +00:00
|
|
|
const locales = [
|
|
|
|
"az",
|
|
|
|
"zh-cn",
|
|
|
|
"cs",
|
|
|
|
"nl",
|
|
|
|
"en-gb",
|
|
|
|
"en",
|
|
|
|
"fi",
|
|
|
|
"fr",
|
|
|
|
"de",
|
|
|
|
"de-ch",
|
|
|
|
"el",
|
|
|
|
"it",
|
|
|
|
"ja",
|
|
|
|
"ko",
|
|
|
|
"lv",
|
|
|
|
"pl",
|
|
|
|
"pt",
|
|
|
|
"pt-br",
|
|
|
|
"ru",
|
|
|
|
"sk",
|
|
|
|
"sl",
|
|
|
|
"es",
|
|
|
|
"tr",
|
|
|
|
"uk",
|
2020-10-16 13:16:01 +00:00
|
|
|
"vi",
|
2019-09-11 06:28:46 +00:00
|
|
|
];
|
2019-09-02 11:29:56 +00:00
|
|
|
|
2019-10-09 11:18:35 +00:00
|
|
|
const displayType = ["dropdown", "aside", "auto"];
|
2019-10-02 08:07:39 +00:00
|
|
|
|
|
|
|
storiesOf("Components|DatePicker", module)
|
2019-09-02 06:45:45 +00:00
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
2019-10-02 08:07:39 +00:00
|
|
|
.add("base", () => (
|
2019-09-02 06:45:45 +00:00
|
|
|
<Section>
|
|
|
|
<DatePicker
|
2020-10-16 13:16:01 +00:00
|
|
|
onChange={(date) => {
|
2019-10-02 08:07:39 +00:00
|
|
|
action("Selected date")(date);
|
2019-09-02 11:29:56 +00:00
|
|
|
}}
|
2019-10-02 08:07:39 +00:00
|
|
|
selectedDate={myDateKnob("selectedDate", new Date())}
|
|
|
|
minDate={myDateKnob("minDate", new Date("1970/01/01"))}
|
|
|
|
maxDate={myDateKnob(
|
|
|
|
"maxDate",
|
|
|
|
new Date(new Date().getFullYear() + 1 + "/01/01")
|
|
|
|
)}
|
2019-09-02 11:29:56 +00:00
|
|
|
isDisabled={boolean("isDisabled", false)}
|
|
|
|
isReadOnly={boolean("isReadOnly", false)}
|
|
|
|
hasError={boolean("hasError", false)}
|
2019-10-02 08:07:39 +00:00
|
|
|
isOpen={boolean("isOpen", false)}
|
|
|
|
themeColor={color("themeColor", "#ED7309")}
|
|
|
|
locale={select("locale", locales, "en")}
|
2019-10-09 11:18:35 +00:00
|
|
|
displayType={select("displayType", displayType, "auto")}
|
2019-10-02 08:07:39 +00:00
|
|
|
calendarSize={select("calendarSize", ["base", "big"], "base")}
|
2019-10-09 11:18:35 +00:00
|
|
|
zIndex={number("zIndex", 310)}
|
|
|
|
calendarHeaderContent={text("headerContent", "Select Date")}
|
2019-09-02 06:45:45 +00:00
|
|
|
/>
|
|
|
|
</Section>
|
|
|
|
));
|