82 lines
1.7 KiB
JavaScript
82 lines
1.7 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { EmailSettings } from "../utils/email";
|
|
import EmailInput from "./";
|
|
|
|
const disable = {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
};
|
|
|
|
export default {
|
|
title: "Components/EmailInput",
|
|
component: EmailInput,
|
|
argTypes: {
|
|
allowDomainPunycode: disable,
|
|
allowLocalPartPunycode: disable,
|
|
allowDomainIp: disable,
|
|
allowStrictLocalPart: disable,
|
|
allowSpaces: disable,
|
|
allowName: disable,
|
|
allowLocalDomainName: disable,
|
|
},
|
|
};
|
|
|
|
const Template = ({
|
|
allowDomainPunycode,
|
|
allowLocalPartPunycode,
|
|
allowDomainIp,
|
|
allowStrictLocalPart,
|
|
allowSpaces,
|
|
allowName,
|
|
allowLocalDomainName,
|
|
...rest
|
|
}) => {
|
|
const [emailValue, setEmailValue] = useState("");
|
|
|
|
const onChangeHandler = (value) => {
|
|
setEmailValue(value);
|
|
};
|
|
const settings = EmailSettings.parse({
|
|
allowDomainPunycode,
|
|
allowLocalPartPunycode,
|
|
allowDomainIp,
|
|
allowStrictLocalPart,
|
|
allowSpaces,
|
|
allowName,
|
|
allowLocalDomainName,
|
|
});
|
|
|
|
useEffect(() => {
|
|
setEmailValue(rest.value);
|
|
}, [rest.value]);
|
|
|
|
return (
|
|
<div style={{ margin: "7px" }}>
|
|
<EmailInput
|
|
{...rest}
|
|
value={emailValue}
|
|
emailSettings={settings}
|
|
onValidateInput={(isEmailValid) => rest.onValidateInput(isEmailValid)}
|
|
onChange={(e) => {
|
|
rest.onChange(e.target.value);
|
|
onChangeHandler(e.target.value);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
allowDomainPunycode: false,
|
|
allowLocalPartPunycode: false,
|
|
allowDomainIp: false,
|
|
allowSpaces: false,
|
|
allowName: false,
|
|
allowLocalDomainName: false,
|
|
allowStrictLocalPart: true,
|
|
placeholder: "Input email",
|
|
size: "base",
|
|
};
|