1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Fix dropdown-input-pair component to for new Storybook format (#12895)

* input pair

* proptype comments

* Update

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault 2021-12-08 01:44:25 +08:00 committed by GitHub
parent c0f03d827d
commit 068e97314e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 21 deletions

View File

@ -0,0 +1,15 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import DropdownInputPair from '.';
# Dropdown Input Pair
Dropdown to choose cryptocurrency with amount input field.
<Canvas>
<Story id="ui-pages-swaps-dropdown-input-pair-dropdown-input-pair-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={DropdownInputPair} />

View File

@ -122,17 +122,56 @@ export default function DropdownInputPair({
} }
DropdownInputPair.propTypes = { DropdownInputPair.propTypes = {
/**
* Give items data for the component
*/
itemsToSearch: PropTypes.array, itemsToSearch: PropTypes.array,
/**
* Handler for input change
*/
onInputChange: PropTypes.func, onInputChange: PropTypes.func,
/**
* Show input value content
*/
inputValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), inputValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Handler for onSelect
*/
onSelect: PropTypes.func, onSelect: PropTypes.func,
/**
* Set value to left
*/
leftValue: PropTypes.string, leftValue: PropTypes.string,
/**
* Show selected item
*/
selectedItem: PropTypes.object, selectedItem: PropTypes.object,
/**
* Doesn't look like this is used
*/
SearchListPlaceholder: PropTypes.func, SearchListPlaceholder: PropTypes.func,
/**
* Define maximum item per list
*/
maxListItems: PropTypes.number, maxListItems: PropTypes.number,
/**
* Show select placeholder text
*/
selectPlaceHolderText: PropTypes.string, selectPlaceHolderText: PropTypes.string,
/**
* Check if the component is loading
*/
loading: PropTypes.bool, loading: PropTypes.bool,
/**
* Handler for hide item
*/
hideItemIf: PropTypes.func, hideItemIf: PropTypes.func,
/**
* Add custom CSS class for list container
*/
listContainerClassName: PropTypes.string, listContainerClassName: PropTypes.string,
/**
* Check if the component is auto focus
*/
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
}; };

View File

@ -1,4 +1,7 @@
import React, { useState } from 'react'; import React from 'react';
import { useArgs } from '@storybook/client-api';
import README from './README.mdx';
import DropdownInputPair from '.'; import DropdownInputPair from '.';
const tokens = [ const tokens = [
@ -115,6 +118,25 @@ const tokens = [
export default { export default {
title: 'Pages/Swaps/DropdownInputPair', title: 'Pages/Swaps/DropdownInputPair',
id: __filename, id: __filename,
component: DropdownInputPair,
parameters: {
docs: {
page: README,
},
},
argTypes: {
itemsToSearch: { control: 'array' },
onInputChange: { action: 'onInputChange' },
inputValue: { control: 'text' },
onSelect: { action: 'onSelect' },
leftValue: { control: 'text' },
selectedItem: { control: 'object' },
maxListItems: { control: 'number' },
selectPlaceHolderText: { control: 'text' },
loading: { control: 'boolean' },
listContainerClassName: { control: 'text' },
autoFocus: { control: 'boolean' },
},
}; };
const tokensToSearch = tokens.map((token) => ({ const tokensToSearch = tokens.map((token) => ({
@ -127,29 +149,27 @@ const tokensToSearch = tokens.map((token) => ({
rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`, rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`,
})); }));
export const DefaultStory = () => { export const DefaultStory = (args) => {
const [inputValue, setInputValue] = useState(); const [
{ inputValue, selectedItem = tokensToSearch[0] },
updateArgs,
] = useArgs();
return ( return (
<div <DropdownInputPair
style={{ {...args}
height: '600px', inputValue={inputValue}
width: '357px', onInputChange={(value) => {
display: 'flex', updateArgs({ ...args, inputValue: value });
justifyContent: 'center',
flexFlow: 'column',
}} }}
> selectedItem={selectedItem}
<DropdownInputPair />
startingItem={tokensToSearch[0]}
itemsToSearch={tokensToSearch}
maxListItems={tokensToSearch.length}
defaultToAll
onInputChange={(value) => setInputValue(value)}
inputValue={inputValue}
/>
</div>
); );
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
DefaultStory.args = {
itemsToSearch: tokensToSearch,
maxListItems: tokensToSearch.length,
loading: false,
};