IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Old AsyncSelect: Add story (#22536)

Browse Source 
* Change to CSF

* Remove comments

* Fix AsyncSelect error

* Remove changes to the component

* Restructure

* Remove comments

* Add searching

* Remove witespace

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Tobias Skarhed 2020-03-03 17:06:57 +01:00 committed by GitHub
parent 3aa3fa3ee1
commit 98418ea55f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/grafana-ui/src/components/Select/Select.story.tsx
View File

@ -1,23 +1,31 @@
import React from 'react'; import React, { useState, useCallback } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withKnobs, object } from '@storybook/addon-knobs'; import { withKnobs, object } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState'; import { UseState } from '../../utils/storybook/UseState';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { Select } from './Select'; import { Select, AsyncSelect } from './Select';
const SelectStories = storiesOf('General/Select/Select', module); export default {
title: 'General/Select/Select',
component: Select,
decorators: [withCenteredStory, withKnobs],
};
SelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs); const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
SelectStories.add('default', () => { const options = object<Array<SelectableValue<string>>>('Options:', [
const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' }; intialState,
{ label: 'Another label', value: 'Another value 1' },
{ label: 'Another label', value: 'Another value 2' },
{ label: 'Another label', value: 'Another value 3' },
{ label: 'Another label', value: 'Another value 4' },
{ label: 'Another label', value: 'Another value 5' },
{ label: 'Another label', value: 'Another value ' },
]);
export const basic = () => {
const value = object<SelectableValue<string>>('Selected Value:', intialState); const value = object<SelectableValue<string>>('Selected Value:', intialState);
const options = object<Array<SelectableValue<string>>>('Options:', [
intialState,
{ label: 'Another label', value: 'Another value' },
]);
return ( return (
<UseState initialState={value}> <UseState initialState={value}>
@ -35,16 +43,11 @@ SelectStories.add('default', () => {
}} }}
</UseState> </UseState>
); );
}); };
SelectStories.add('With allowCustomValue', () => { export const withAllowCustomValue = () => {
const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
// @ts-ignore // @ts-ignore
const value = object<SelectableValue<string>>('Selected Value:', null); const value = object<SelectableValue<string>>('Selected Value:', null);
const options = object<Array<SelectableValue<string>>>('Options:', [
intialState,
{ label: 'Another label', value: 'Another value' },
]);
return ( return (
<UseState initialState={value}> <UseState initialState={value}>
@ -64,4 +67,32 @@ SelectStories.add('With allowCustomValue', () => {
}} }}
</UseState> </UseState>
); );
}); };
export const asyncSelect = () => {
const [isLoading, setIsLoading] = useState<boolean>(true);
const [value, setValue] = useState();
const loadAsyncOptions = useCallback(
inputValue => {
return new Promise<Array<SelectableValue<string>>>(resolve => {
setTimeout(() => {
setIsLoading(false);
resolve(options.filter(option => option.label && option.label.includes(inputValue)));
}, 1000);
});
},
[value]
);
return (
<AsyncSelect
value={value}
defaultOptions
isLoading={isLoading}
loadOptions={loadAsyncOptions}
onChange={value => {
action('onChange')(value);
setValue(value);
}}
/>
);
};