2022-09-29 12:37:33 +00:00
|
|
|
|
import { useState } from "react";
|
|
|
|
|
import { options } from "./options";
|
2022-10-04 13:59:47 +00:00
|
|
|
|
import InputPhone from "./index";
|
2022-09-07 14:53:27 +00:00
|
|
|
|
|
|
|
|
|
export default {
|
2022-09-07 17:56:40 +00:00
|
|
|
|
title: "Components/InputPhone",
|
2022-09-07 14:53:27 +00:00
|
|
|
|
component: InputPhone,
|
2022-10-04 13:59:47 +00:00
|
|
|
|
argTypes: {
|
|
|
|
|
onChange: { control: "onChange" },
|
|
|
|
|
},
|
2022-09-07 14:53:27 +00:00
|
|
|
|
};
|
|
|
|
|
|
2022-09-29 12:37:33 +00:00
|
|
|
|
const Template = ({ onChange, value, ...args }) => {
|
|
|
|
|
const [val, setValue] = useState(value);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div style={{ height: "300px" }}>
|
2022-10-04 13:59:47 +00:00
|
|
|
|
<InputPhone
|
|
|
|
|
{...args}
|
|
|
|
|
value={val}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setValue(e.target.value), onChange(e.target.value);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2022-09-29 12:37:33 +00:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
2022-09-07 14:53:27 +00:00
|
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|
2022-09-29 12:37:33 +00:00
|
|
|
|
Default.args = {
|
|
|
|
|
defaultCountry: {
|
|
|
|
|
locale: options[182].code, // default locale RU
|
|
|
|
|
dialCode: options[182].dialCode, // default dialCode +7
|
2022-10-06 06:31:02 +00:00
|
|
|
|
mask: options[182].mask, // default Russia mask
|
|
|
|
|
icon: options[182].flag, // default Russia flag
|
2022-09-29 12:37:33 +00:00
|
|
|
|
},
|
2022-10-05 11:36:34 +00:00
|
|
|
|
phonePlaceholderText: "7 XXX XXX-XX-XX",
|
2022-09-29 12:37:33 +00:00
|
|
|
|
searchPlaceholderText: "Search",
|
2022-10-05 14:19:50 +00:00
|
|
|
|
scaled: false,
|
2022-09-29 12:37:33 +00:00
|
|
|
|
searchEmptyMessage: "Nothing found",
|
|
|
|
|
errorMessage: "Сountry code is invalid",
|
|
|
|
|
};
|