maputnik/stories/FieldDynamicArray.stories.js
orangemug 2cc179acc1 Fixed more input accessibility issues, also
- Added searchParams based router for easier testing
 - Added more stories to the storybook
2020-06-09 19:11:07 +01:00

58 lines
1.2 KiB
JavaScript

import React from 'react';
import {useActionState} from './helper';
import FieldDynamicArray from '../src/components/FieldDynamicArray';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldDynamicArray',
component: FieldDynamicArray,
decorators: [withA11y],
};
export const NumberType = () => {
const [value, setValue] = useActionState("onChange", [1,2,3]);
return (
<Wrapper>
<FieldDynamicArray
label="Foobar"
type="number"
value={value}
onChange={setValue}
/>
</Wrapper>
);
};
export const UrlType = () => {
const [value, setValue] = useActionState("onChange", ["http://example.com"]);
return (
<Wrapper>
<FieldDynamicArray
label="Foobar"
type="url"
value={value}
onChange={setValue}
/>
</Wrapper>
);
};
export const EnumType = () => {
const [value, setValue] = useActionState("onChange", ["foo"]);
return (
<Wrapper>
<FieldDynamicArray
label="Foobar"
fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
type="enum"
value={value}
onChange={setValue}
/>
</Wrapper>
);
};