68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import { storiesOf } from "@storybook/react";
|
|
import {
|
|
text,
|
|
boolean,
|
|
withKnobs,
|
|
select,
|
|
number,
|
|
} from "@storybook/addon-knobs/react";
|
|
import withReadme from "storybook-readme/with-readme";
|
|
import Readme from "./README.md";
|
|
import EmailInput from ".";
|
|
import Section from "../../../.storybook/decorators/section";
|
|
import { action } from "@storybook/addon-actions";
|
|
|
|
const sizeInput = ["base", "middle", "big", "huge", "large"];
|
|
|
|
storiesOf("Components|Input", module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(withReadme(Readme))
|
|
.add("email input", () => {
|
|
const placeholder = text("placeholder", "Input email");
|
|
const size = select("size", sizeInput, "base");
|
|
const scale = boolean("scale", false);
|
|
const isDisabled = boolean("isDisabled", false);
|
|
const isReadOnly = boolean("isReadOnly", false);
|
|
const maxLength = number("maxLength", 255);
|
|
const id = text("id", "emailId");
|
|
const name = text("name", "demoEmailInput");
|
|
|
|
const allowDomainPunycode = boolean("allowDomainPunycode", false);
|
|
const allowLocalPartPunycode = boolean("allowLocalPartPunycode", false);
|
|
const allowDomainIp = boolean("allowDomainIp", false);
|
|
const allowStrictLocalPart = boolean("allowStrictLocalPart", true);
|
|
const allowSpaces = boolean("allowSpaces", false);
|
|
const allowName = boolean("allowName", false);
|
|
const allowLocalDomainName = boolean("allowLocalDomainName", false);
|
|
|
|
const settings = {
|
|
allowDomainPunycode,
|
|
allowLocalPartPunycode,
|
|
allowDomainIp,
|
|
allowStrictLocalPart,
|
|
allowSpaces,
|
|
allowName,
|
|
allowLocalDomainName,
|
|
};
|
|
|
|
return (
|
|
<Section>
|
|
<EmailInput
|
|
placeholder={placeholder}
|
|
size={size}
|
|
scale={scale}
|
|
isDisabled={isDisabled}
|
|
isReadOnly={isReadOnly}
|
|
maxLength={maxLength}
|
|
id={id}
|
|
name={name}
|
|
emailSettings={settings}
|
|
onValidateInput={(isEmailValid) =>
|
|
action("onValidateInput")(isEmailValid)
|
|
}
|
|
/>
|
|
</Section>
|
|
);
|
|
});
|