import { Meta , Story } from '@storybook/react' ; import { SortAndFilter , ISortAndFilterItem } from './SortAndFilter' ; import React from 'react' ; import { ISelectGroupValue } from '../SelectGroup' ; export default { title : 'Components/Interface/DataTable/SortAndFilter' , component : SortAndFilter } as Meta ; interface ISortAndFilterPrpos { sortBy ? : ISortAndFilterItem ; filterBy ? : ISortAndFilterItem ; onChangeSort ? : ( value : ISelectGroupValue , changedValue : ISelectGroupValue ) => void ; onChangeFilter ? : ( value : ISelectGroupValue , changedValue : ISelectGroupValue ) => void ; } const Template = ( args ) => ( < SortAndFilter { ... args } / > ) ; export const Filter = Template . bind ( { } ) ; Filter . args = { sortBy : { input : { label : 'Sort By' } , selects : { name : 'Sort' , values : { Sort1 : '' } , options : [ { name : 'Sort1' , options : [ { value : 'chocolate' , label : 'Chocolate' } , { value : 'strawberry' , label : 'Strawberry' } , { value : 'vanilla' , label : 'Vanilla' } ] , value : 'Sort1' } ] } } , filterBy : { input : { label : 'Filter By' } , selects : { name : 'Filter' , values : { Filter1 : '' , Filter2 : '' , Filter3 : '' } , options : [ { name : 'Filter1' , options : [ { value : 'chocolate' , label : 'Chocolate' } , { value : 'strawberry' , label : 'Strawberry' } , { value : 'vanilla' , label : 'Vanilla' } ] , value : 'Filter1' } , { name : 'Filter2' , options : [ { value : 'chocolate' , label : 'Chocolate' } , { value : 'strawberry' , label : 'Strawberry' } , { value : 'vanilla' , label : 'Vanilla' } ] , value : 'Filter2' } , { name : 'Filter3' , options : [ { value : 'chocolate' , label : 'Chocolate' } , { value : 'strawberry' , label : 'Strawberry' } , { value : 'vanilla' , label : 'Vanilla' } ] , value : 'Filter3' } ] } } } ;