120 lines
2.8 KiB
TypeScript
120 lines
2.8 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { Box } from '@chakra-ui/react';
|
|
|
|
import { FormSelect } from '@/components/form/FormSelect';
|
|
import { useFormidable } from '@/components/form/Formidable';
|
|
|
|
export default {
|
|
title: 'Components/FormSelect',
|
|
};
|
|
|
|
type BasicFormData = {
|
|
data?: number;
|
|
};
|
|
|
|
export const Default = () => {
|
|
const form = useFormidable<BasicFormData>({});
|
|
return (
|
|
<FormSelect
|
|
label="Simple Title"
|
|
form={form}
|
|
variableName={'data'}
|
|
keyInputValue="id"
|
|
options={[{ id: 111 }, { id: 222 }, { id: 333 }, { id: 123 }]}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const ChangeKeys = () => {
|
|
const form = useFormidable<BasicFormData>({});
|
|
return (
|
|
<FormSelect
|
|
label="Simple Title for (ChangeKeys)"
|
|
form={form}
|
|
variableName={'data'}
|
|
keyInputKey="key"
|
|
keyInputValue="plop"
|
|
options={[
|
|
{ key: 111, plop: 'first Item' },
|
|
{ key: 222, plop: 'Second Item' },
|
|
{ key: 333, plop: 'third item' },
|
|
]}
|
|
/>
|
|
);
|
|
};
|
|
export const ChangeName = () => {
|
|
const form = useFormidable<BasicFormData>({});
|
|
return (
|
|
<FormSelect
|
|
label="Simple Title for (ChangeName)"
|
|
form={form}
|
|
variableName={'data'}
|
|
options={[
|
|
{ id: 111, name: 'first Item' },
|
|
{ id: 222, name: 'Second Item' },
|
|
{ id: 333, name: 'third item' },
|
|
]}
|
|
/>
|
|
);
|
|
};
|
|
export const AddableItem = () => {
|
|
const form = useFormidable<BasicFormData>({});
|
|
const [data, setData] = useState([
|
|
{ id: 111, name: 'first Item' },
|
|
{ id: 222, name: 'Second Item' },
|
|
{ id: 333, name: 'third item' },
|
|
]);
|
|
return (
|
|
<FormSelect
|
|
label="Simple Title for (ChangeName)"
|
|
form={form}
|
|
variableName={'data'}
|
|
addNewItem={(data: string) => {
|
|
return new Promise((resolve, _rejects) => {
|
|
let upperId = 0;
|
|
setData((previous) => {
|
|
previous.forEach((element) => {
|
|
if (element['id'] > upperId) {
|
|
upperId = element['id'];
|
|
}
|
|
});
|
|
upperId++;
|
|
return [...previous, { id: upperId, name: data }];
|
|
});
|
|
resolve({ id: upperId, name: data });
|
|
});
|
|
}}
|
|
options={data}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const DarkBackground = {
|
|
render: () => {
|
|
const form = useFormidable<BasicFormData>({});
|
|
return (
|
|
<Box p="4" color="white" bg="gray.800">
|
|
<FormSelect
|
|
label="Simple Title for (DarkBackground)"
|
|
form={form}
|
|
variableName={'data'}
|
|
options={[
|
|
{ id: 111, name: 'first Item' },
|
|
{ id: 222, name: 'Second Item' },
|
|
{ id: 333, name: 'third item' },
|
|
]}
|
|
/>
|
|
</Box>
|
|
);
|
|
},
|
|
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'some story **markdown**',
|
|
},
|
|
},
|
|
},
|
|
};
|