-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
CustomInput.stories.tsx
43 lines (38 loc) · 1.21 KB
/
CustomInput.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import Tooltip from '@atlaskit/tooltip';
import { ComponentMeta } from '@storybook/react';
import * as React from 'react';
import Select, { components, InputProps } from 'react-select';
import { Field } from '../components';
import { ColourOption, colourOptions } from '../data';
export default {
title: 'Select/CustomInput',
component: Select,
argTypes: {},
} as ComponentMeta<typeof Select>;
export function CustomInput() {
return (
<Field label="Custom Input" htmlFor="custom-input-id">
<Select
inputId="custom-input-id"
components={{ Input }}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
</Field>
);
}
// =============================================================================
// Components
// =============================================================================
function Input(props: InputProps<ColourOption, true>) {
const component = <components.Input {...props} />;
if (props.isHidden) return component;
return (
<div style={{ border: `1px dotted ${colourOptions[2].color}` }}>
<Tooltip content="Custom Input" position="top">
{component}
</Tooltip>
</div>
);
}