Filters

import{ChoiceList,TextField,RangeSlider,LegacyCard,ResourceList,Filters,Avatar,Text,}from'@shopify/polaris';import{useState,useCallback}from'react';functionFiltersWithAResourceListExample(){const[accountStatus,setAccountStatus]=useState<string[]|undefined>(undefined,);const[moneySpent,setMoneySpent]=useState<[number,number]|undefined>(undefined,);const[taggedWith,setTaggedWith]=useState<string|undefined>(undefined);const[queryValue,setQueryValue]=useState<string|undefined>(undefined);consthandleAccountStatusChange=useCallback((value:string[])=>setAccountStatus(value),[],);consthandleMoneySpentChange=useCallback((value:[number,number])=>setMoneySpent(value),[],);consthandleTaggedWithChange=useCallback((value:string)=>setTaggedWith(value),[],);consthandleFiltersQueryChange=useCallback((value:string)=>setQueryValue(value),[],);consthandleAccountStatusRemove=useCallback(()=>setAccountStatus(undefined),[],);consthandleMoneySpentRemove=useCallback(()=>setMoneySpent(undefined),[],);consthandleTaggedWithRemove=useCallback(()=>setTaggedWith(undefined),[],);consthandleQueryValueRemove=useCallback(()=>setQueryValue(undefined),[],);consthandleFiltersClearAll=useCallback(()=>{handleAccountStatusRemove();handleMoneySpentRemove();handleTaggedWithRemove();handleQueryValueRemove();},[handleAccountStatusRemove,handleMoneySpentRemove,handleQueryValueRemove,handleTaggedWithRemove,]);constfilters=[{key:'accountStatus',label:'Account status',filter:(<ChoiceListtitle="Account status"titleHiddenchoices={[{label:'Enabled',value:'enabled'},{label:'Not invited',value:'not invited'},{label:'Invited',value:'invited'},{label:'Declined',value:'declined'},]}selected={accountStatus||[]}onChange={handleAccountStatusChange}allowMultiple/>),shortcut:true,},{key:'taggedWith',label:'Tagged with',filter:(<TextFieldlabel="Tagged with"value={taggedWith}onChange={handleTaggedWithChange}autoComplete="off"labelHidden/>),shortcut:true,},{key:'moneySpent',label:'Money spent',filter:(<RangeSliderlabel="Money spent is between"labelHiddenvalue={moneySpent||[0,500]}prefix="$"outputmin={0}max={2000}step={1}onChange={handleMoneySpentChange}/>),},];constappliedFilters=[];if(!isEmpty(accountStatus)){constkey='accountStatus';appliedFilters.push({key,label:disambiguateLabel(key,accountStatus),onRemove:handleAccountStatusRemove,});}if(!isEmpty(moneySpent)){constkey='moneySpent';appliedFilters.push({key,label:disambiguateLabel(key,moneySpent),onRemove:handleMoneySpentRemove,});}if(!isEmpty(taggedWith)){constkey='taggedWith';appliedFilters.push({key,label:disambiguateLabel(key,taggedWith),onRemove:handleTaggedWithRemove,});}return(<div style={{height:'568px'}}><LegacyCard><ResourceListresourceName={{singular:'customer',plural:'customers'}}filterControl={<FiltersqueryValue={queryValue}filters={filters}appliedFilters={appliedFilters}onQueryChange={handleFiltersQueryChange}onQueryClear={handleQueryValueRemove}onClearAll={handleFiltersClearAll}/>}flushFiltersitems={[{id:'341',url:'#',name:'Mae Jemison',location:'Decatur, USA',},{id:'256',url:'#',name:'Ellen Ochoa',location:'Los Angeles, USA',},]}renderItem={(item)=>{const{id,url,name,location}=item;constmedia=<Avatarcustomer size="medium"name={name}/>;return(<ResourceList.Itemid={id}url={url}media={media}accessibilityLabel={`View details for${name}`}><Textas="h3"variant="bodyMd"fontWeight="bold">{name}</Text><div>{location}</div></ResourceList.Item>);}}/></LegacyCard></div>);functiondisambiguateLabel(key:string,value:any){switch(key){case'moneySpent':return`Money spent is between $${value[0]}and $${value[1]}`;case'taggedWith':return`Tagged with${value}`;case'accountStatus':returnvalue?.map((val:string)=>`客户${val}`).join(', ');default:returnvalue;}}functionisEmpty(value:string|string[]|[number,number]|undefined,):boolean{if(Array.isArray(value)){returnvalue.length===0;}else{returnvalue===''||value==null;}}}