dinocollab-core 1.0.0 → 1.0.2

package/src/lab/filter-bar/base.tsx

@@ -1,162 +0,0 @@
-import React, { Component } from 'react'
-import { EFieldValidate, ESearchMatch, FilterField, FilterFields, FilterItemModel, FilterModel, FilterState } from './types'
-
-export const filterPanelClasses = {
-  root: 'FilterPanel-root',
-  list: 'FilterPanel-list',
-  item: 'FilterPanel-item'
-}
-
-export default class FilterBarBase<P, S, T = any> extends Component<P, S> {
-  //#region Filter
-  mergeFilter = (f1?: FilterState<T>, f2?: FilterState<T>): FilterState<T> => {
-    const mergedFilter: FilterModel<T> = f2?.filter ?? {}
-
-    if (f1?.filter) {
-      for (const key in f1?.filter) {
-        const fieldKey = key as keyof T
-        const existingItems = mergedFilter[fieldKey] ?? []
-        const newItems = f1?.filter[fieldKey] ?? []
-
-        const existingValues = new Set(existingItems.map((item) => item.value))
-
-        const mergedItems = [...existingItems, ...newItems.filter((item) => !existingValues.has(item.value))]
-
-        if (mergedItems.length > 0) {
-          mergedFilter[fieldKey] = mergedItems
-        }
-      }
-    }
-
-    const result: FilterState<T> = {
-      filter: Object.keys(mergedFilter).length ? mergedFilter : {},
-      details: f2?.details ?? f1?.details
-    }
-
-    return result
-  }
-
-  patchFilterWithKey = (filterState: FilterState<T>, key: keyof FilterModel<T>, value: FilterItemModel) => {
-    const clonedFilter: FilterModel<T> = { ...(filterState.filter || {}) }
-    let filter = clonedFilter[key] ?? []
-    const isChanged = !filter.map((x) => x.value).includes(value.value)
-    if (isChanged) filter = [...filter, value]
-    clonedFilter[key] = filter
-    return { isChanged, filterState: { ...filterState, filter: clonedFilter } }
-  }
-
-  deleteFilterWithKey = (filterState: FilterState<T>, key: keyof FilterModel<T>) => {
-    const clonedFilter: FilterModel<T> = { ...(filterState.filter || {}) }
-    const isChanged = key in clonedFilter
-    if (isChanged) delete clonedFilter[key]
-    return { isChanged, filterState: { ...filterState, filter: clonedFilter } }
-  }
-
-  isFilterEmpty = (filterState: FilterState<T>) => {
-    const values = Object.values(filterState.filter ?? {})
-    return values.length < 1 || values.every((x) => x.length < 1)
-  }
-  //#endregion
-
-  //#region Field
-  isYoutubeLink = (val: string) => /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\//.test(val)
-
-  isGenericLink = (val: string) => /^https?:\/\/[^ ]+$/.test(val)
-
-  isGuid = (val: string) => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(val)
-
-  getFieldsMatches = (fields: FilterFields<T>, keyword: string, showAll?: boolean): FilterFields<T> => {
-    const trimmed = keyword.trim().toLowerCase()
-    if (!trimmed) return fields
-
-    const matched: FilterFields<T> = {}
-
-    for (const key in fields) {
-      const field = key as keyof FilterFields<T>
-      const config = fields[field]
-      if (!config) continue
-
-      const matches = Array.isArray(config.searchMatches) ? config.searchMatches : config.searchMatches ? [config.searchMatches] : []
-
-      let visible = false
-
-      for (const matchObj of matches) {
-        switch (matchObj.rule) {
-          case ESearchMatch.AlwaysVisible:
-            visible = true
-            break
-          case ESearchMatch.MatchOnly:
-            if (typeof matchObj.match === 'function') {
-              if (matchObj.match(trimmed)) visible = true
-            }
-            break
-          case ESearchMatch.LinkYoutube:
-            if (this.isYoutubeLink(trimmed)) visible = true
-            break
-          case ESearchMatch.Link:
-            if (this.isGenericLink(trimmed)) visible = true
-            break
-          case ESearchMatch.Guid:
-            if (this.isGuid(trimmed)) visible = true
-            break
-          default:
-            break
-        }
-
-        if (visible) break
-      }
-
-      if (visible) matched[field] = config
-    }
-    return Object.keys(matched).length === 0 ? (showAll ? fields : {}) : matched
-  }
-
-  validated = (value: string, fieldKey: keyof FilterModel<T>, filterField?: FilterField): { error: boolean; message?: string } => {
-    const trimmed = value.trim().toLowerCase()
-    if (!trimmed) return { error: true, message: `The ${fieldKey.toString()} is required ` }
-    const validate = Array.isArray(filterField?.validate) ? (filterField?.validate ?? []) : filterField?.validate ? [filterField.validate] : []
-    const obj: { error: boolean; message?: string } = { error: false }
-    for (const validateObj of validate) {
-      switch (validateObj.rule) {
-        case EFieldValidate.LinkYoutube:
-          if (!this.isYoutubeLink(trimmed)) {
-            obj.error = true
-            obj.message = `The ${filterField?.label ?? fieldKey.toString()} must be a valid YouTube link`
-          }
-          break
-
-        case EFieldValidate.Link:
-          if (!this.isGenericLink(trimmed)) {
-            obj.error = true
-            obj.message = `The ${filterField?.label ?? fieldKey.toString()} must be a valid URL link`
-          }
-          break
-
-        case EFieldValidate.Custom:
-          if (typeof validateObj.custom === 'function' && !validateObj.custom(trimmed)) {
-            obj.error = true
-            obj.message = `The ${filterField?.label ?? fieldKey.toString()} is invalid`
-          }
-          break
-        default:
-          break
-      }
-      if (obj.error) break
-    }
-    return obj
-  }
-  //#endregion
-
-  //#region Sort
-  getSortFields = (fields: FilterFields<T>) => {
-    const keys = Object.keys(fields) as (keyof FilterFields<T>)[]
-    return keys.reduce<FilterFields<T>>((a, b) => {
-      const item = fields[b]
-      if (item?.sortable !== false) {
-        a[b] = item
-      }
-      return a
-    }, {})
-  }
-  //#endregion
-}

package/src/lab/filter-bar/create.filter-bar.tsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import { Box, ClickAwayListener, IconButton, InputBase, styled } from '@mui/material'
-import SwapVertIcon from '@mui/icons-material/SwapVert'
-import FilterListIcon from '@mui/icons-material/FilterList'
-import { ButtonClear, FilterHelpNotes, FilterHelpNotesProps } from './ui.units'
-import { FilterFields, FilterItemModel, FilterModel, FilterReason, FilterState } from './types'
-import CreateFilterPanel, { FilterPanelState } from './create.filter-panel'
-import FilterBarBase from './base'
-import CreateFiltered from './create.filtered'
-
-export interface FilterBarParams<T> {
-  fields: FilterFields<T>
-  id?: string
-  placeholder?: string
-  helpNotes?: FilterHelpNotesProps
-}
-
-interface IProps<T> {
-  id?: string
-  placeholder?: string
-  value?: FilterState<T>
-  onChange?: (value: FilterState<T>) => void
-}
-
-interface IState {
-  panelState: FilterPanelState
-  keyword: string
-}
-
-function CreateFilterBar<T>(params: FilterBarParams<T>) {
-  const FilterPanelInstance = CreateFilterPanel<T>({ fields: params.fields })
-  const FilteredInstance = CreateFiltered<T>()
-
-  class FilterBar extends FilterBarBase<IProps<T>, IState, T> {
-    defaultState: IState = { keyword: '', panelState: { anchorEl: null } }
-    constructor(props: IProps<T>) {
-      super(props)
-      this.state = this.defaultState
-    }
-
-    filterStateStore: FilterState<T> = { filter: {} }
-    get filterState(): FilterState<T> {
-      return this.props.value ?? this.filterStateStore
-    }
-
-    setFilterState = (filterState: FilterState<T>) => {
-      if (!this.props.value) {
-        this.filterStateStore = filterState
-      }
-      this.props.onChange && this.props.onChange(filterState)
-    }
-
-    get configs() {
-      return {
-        id: this.props.id ?? params.id ?? new Date().getTime().toString(),
-        placeholder: this.props.placeholder ?? params.placeholder ?? 'Filter',
-        helpNotes: params.helpNotes
-      }
-    }
-
-    refFilterButton: HTMLButtonElement | null = null
-    refSortButton: HTMLButtonElement | null = null
-    render() {
-      return (
-        <ClickAwayListener onClickAway={this.closePanel}>
-          <Wrapper>
-            <IconButton ref={(ref) => (this.refFilterButton = ref)} onClick={() => this.showPanel('filterButton')}>
-              <FilterListIcon />
-            </IconButton>
-            <Content>
-              <FilteredInstance fields={params.fields} filterState={this.filterState} onRemove={this.handleRemove} />
-              {this.renderTextField()}
-            </Content>
-            <ButtonClear visibled={!this.isFilterEmpty(this.filterState)} onClick={this.handleClear} />
-            {/* <IconButton ref={(ref) => (this.refSortButton = ref)} onClick={() => this.showPanel('sortButton')}>
-              <SwapVertIcon />
-            </IconButton> */}
-            <FilterHelpNotes {...this.configs.helpNotes} />
-            <FilterPanelInstance {...this.state.panelState} keyword={this.state.keyword} onSubmit={this.handleAdd} onClose={this.closePanel} />
-          </Wrapper>
-        </ClickAwayListener>
-      )
-    }
-
-    refInput: HTMLInputElement | null = null
-    refBeforeInput: HTMLElement | null = null
-    renderTextField = () => (
-      <Box component='label' htmlFor={this.configs.id} sx={{ flex: 1, display: 'flex', alignItems: 'flex-end' }}>
-        <Box ref={(ref: HTMLElement) => (this.refBeforeInput = ref)} sx={{ height: '100%' }} />
-        <InputBase
-          id={this.configs.id}
-          placeholder={this.configs.placeholder}
-          fullWidth
-          autoComplete='off'
-          inputRef={(ref: HTMLInputElement) => (this.refInput = ref)}
-          onChange={(event) => this.setState({ keyword: event.target.value })}
-          value={this.state.keyword}
-          onFocus={() => this.showPanel('searchInput')}
-          onKeyDown={this.handleKeyDown}
-        />
-      </Box>
-    )
-
-    handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const keyCode: number = event.keyCode
-      if (keyCode === 13) {
-        if (!this.state.keyword) return
-        const temp = this.patchFilterWithKey(this.filterState, 'Search', { value: this.state.keyword })
-        temp.filterState.details = 'add'
-        if (!!temp.isChanged) {
-          this.refInput?.blur()
-          this.setFilterState(temp.filterState)
-          this.setState(this.defaultState)
-        }
-      } else if (keyCode === 27) {
-        this.refInput?.blur()
-        this.setState(this.defaultState)
-      }
-    }
-
-    handleAdd = (key: keyof FilterModel<T>, value: FilterItemModel) => {
-      const temp = this.patchFilterWithKey(this.filterState, key, value)
-      temp.filterState.details = 'add'
-      if (!!temp.isChanged) {
-        this.refInput?.blur()
-        this.setFilterState(temp.filterState)
-        this.setState(this.defaultState)
-      }
-    }
-
-    handleRemove = (key: keyof FilterModel<T>) => {
-      const temp = this.deleteFilterWithKey(this.filterState, key)
-      temp.filterState.details = 'remove'
-      if (!!temp.isChanged) {
-        this.refInput?.blur()
-        this.setFilterState(temp.filterState)
-        this.forceUpdate()
-      }
-    }
-
-    handleClear = () => {
-      this.setFilterState({ filter: {}, details: 'remove' })
-      this.setState(this.defaultState)
-    }
-
-    showPanel = (reason: FilterReason) => {
-      let anchorEl = null
-      switch (reason) {
-        case 'searchInput':
-          anchorEl = this.refBeforeInput
-          break
-        case 'filterButton':
-          anchorEl = this.refFilterButton
-          break
-        case 'sortButton':
-          anchorEl = this.refSortButton
-          break
-        default:
-          break
-      }
-      this.setState({ panelState: { anchorEl, reason } })
-    }
-
-    closePanel = () => this.setState({ panelState: { anchorEl: null } })
-  }
-
-  return FilterBar
-}
-
-export default CreateFilterBar
-
-const Wrapper = styled(Box)({
-  display: 'flex',
-  gap: '8px',
-  width: '100%',
-  borderRadius: '6px',
-  transition: 'all linear 0.2s',
-  padding: '2px',
-  backgroundColor: '#fafafa',
-  '&:hover': { backgroundColor: '#ededed' }
-})
-
-const Content = styled(Box)({
-  flex: 1,
-  minHeight: '40px',
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  gap: '6px'
-})

package/src/lab/filter-bar/create.filter-menu.tsx

@@ -1,156 +0,0 @@
-import React, { Fragment } from 'react'
-import { Box, Button, ButtonProps, Divider } from '@mui/material'
-import { FormControlLabel, MenuItem, MenuList, Radio, RadioGroup, styled, TextField, Typography } from '@mui/material'
-import FilterBarBase, { filterPanelClasses } from './base'
-import { FilterModel, FilterPanelParams, FilterPannelSubmitFunc } from './types'
-import { convertFormDataToJson } from '../../form'
-
-interface IProps<T> {
-  onSubmit?: FilterPannelSubmitFunc<T>
-  onCancel?: ButtonProps['onClick']
-}
-
-interface IState<T> {
-  fieldSelected: keyof FilterModel<T> | null
-  messageError?: string
-}
-
-function CreateFilterMenu<T>(params: FilterPanelParams<T>) {
-  class FilterMenu extends FilterBarBase<IProps<T>, IState<T>, T> {
-    constructor(props: IProps<T>) {
-      super(props)
-      this.state = { fieldSelected: null }
-    }
-
-    render() {
-      const { fieldSelected } = this.state
-      if (!!fieldSelected) return this.renderFrom(fieldSelected)
-      const keys = Object.keys(params.fields).filter((x) => !!x) as (keyof FilterModel<T>)[]
-      return (
-        <MenuList className={filterPanelClasses.list} sx={{ minWidth: '200px' }}>
-          {keys.map((x, i) => {
-            const item = params.fields[x]
-            if (!item) return <Fragment key={x.toString() + i} />
-            return (
-              <MenuItem
-                key={x.toString() + i}
-                className={filterPanelClasses.item}
-                onClick={() => this.setState({ fieldSelected: x, messageError: undefined })}
-              >
-                {item?.label ?? x.toString()}
-              </MenuItem>
-            )
-          })}
-        </MenuList>
-      )
-    }
-
-    renderFrom = (fieldSelected: keyof FilterModel<T>) => {
-      const fieldConfig = params.fields[fieldSelected]
-      const label = fieldConfig?.label ?? fieldSelected.toString()
-      return (
-        <form onSubmit={(e) => this.handleSubmit(fieldSelected, e)}>
-          <WrapPanelFilterMode>
-            <Box className='top-bar'>
-              <Typography variant='subtitle2'>{label}</Typography>
-            </Box>
-            <Box className='content'>{this.renderWithMode(fieldSelected)}</Box>
-            {fieldConfig?.type === 'select' && <Divider variant='middle' />}
-            <Box className='actions'>
-              <Button size='small' color='inherit' onClick={this.props.onCancel}>
-                Cancel
-              </Button>
-              <Button size='small' color='primary' type='submit' sx={{ fontWeight: 700 }}>
-                Apply
-              </Button>
-            </Box>
-          </WrapPanelFilterMode>
-        </form>
-      )
-    }
-
-    renderWithMode = (fieldSelected: keyof FilterModel<T>) => {
-      const fieldConfig = params.fields[fieldSelected]
-      const { messageError } = this.state
-      switch (fieldConfig?.type) {
-        case 'select':
-          return (
-            <CustomRadioGroup
-              name={fieldSelected.toString()}
-              className={messageError ? 'error' : ''}
-              onChange={() => this.setState({ messageError: undefined })}
-            >
-              {fieldConfig.options.map((x, i) => (
-                <FormControlLabel key={x.value.toString() + i} value={x.value} control={<Radio />} label={x.label ?? x.value} />
-              ))}
-            </CustomRadioGroup>
-          )
-        case 'string':
-        default:
-          return <TextField autoFocus name={fieldSelected.toString()} size='small' error={!!messageError} helperText={messageError} />
-      }
-    }
-
-    handleSubmit = (fieldSelected: keyof FilterModel<T>, event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-      const formData = new FormData(event.currentTarget as HTMLFormElement)
-      const obj = convertFormDataToJson<T>(formData)
-      const value = obj[fieldSelected as keyof T]?.toString()
-
-      const fieldConfig = params.fields[fieldSelected]
-      const validate = this.validated(value ?? '', fieldSelected, fieldConfig)
-      if (validate.error) {
-        this.setState({ messageError: validate.message })
-        return
-      }
-
-      let label: string | undefined = undefined
-      if (fieldConfig?.type === 'select') {
-        label = fieldConfig.options.find((x) => x.value === value)?.label
-      }
-
-      this.props.onSubmit && this.props.onSubmit(fieldSelected, label ? { value, label } : { value })
-    }
-  }
-
-  return FilterMenu
-}
-
-export default CreateFilterMenu
-
-const WrapPanelFilterMode = styled(Box)({
-  minWidth: '200px',
-  borderRadius: '4px',
-  overflow: 'hidden',
-  '.top-bar': {
-    background: '#000',
-    padding: '8px',
-    '.MuiTypography-root': {
-      color: '#fff'
-    }
-  },
-  '.content': {
-    padding: '8px'
-  },
-  '.actions': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: '8px'
-  }
-})
-
-const CustomRadioGroup = styled(RadioGroup)({
-  marginLeft: '-8px',
-  marginRight: '-8px',
-  '&.error .MuiRadio-root': {
-    color: '#d32f2f'
-  },
-  '.MuiFormControlLabel-root': {
-    margin: 0
-  },
-  '.MuiFormControlLabel-root:hover': {
-    backgroundColor: 'rgba(25, 118, 210, 0.04)'
-  }
-})

package/src/lab/filter-bar/create.filter-panel.tsx

@@ -1,95 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { Popper, Fade, Box, styled, MenuList, MenuItem, Typography } from '@mui/material'
-import { FilterModel, FilterReason, FilterPanelParams, FilterPannelSubmitFunc } from './types'
-import FilterBarBase, { filterPanelClasses } from './base'
-import CreateFilterMenu from './create.filter-menu'
-import { FilterHelpNotes } from './ui.units'
-import CreateFilterSort from './create.sort-menu'
-
-export interface FilterPanelState {
-  anchorEl: HTMLElement | null
-  reason?: FilterReason
-}
-
-interface IProps<T> extends FilterPanelState, PropsWithChildren {
-  keyword?: string
-  onSubmit?: FilterPannelSubmitFunc<T>
-  onClose?: () => void
-}
-
-function CreateFilterPanel<T>(params: FilterPanelParams<T>) {
-  const FilterMenuInstance = CreateFilterMenu<T>(params)
-  const SortMenuInstance = CreateFilterSort<T>(params)
-
-  class FilterPanel extends FilterBarBase<IProps<T>, {}, T> {
-    render() {
-      const isOpen = Boolean(this.props.anchorEl) && (!!this.props.keyword || this.props.reason !== 'searchInput')
-      return (
-        <Popper anchorEl={this.props.anchorEl} open={isOpen} placement='bottom-start' transition sx={{ zIndex: 1350 }}>
-          {({ TransitionProps }) => (
-            <Fade {...TransitionProps} timeout={0}>
-              <Wrapper className={filterPanelClasses.root}>{this.renderContent()}</Wrapper>
-            </Fade>
-          )}
-        </Popper>
-      )
-    }
-
-    renderContent = () => {
-      switch (this.props.reason) {
-        case 'searchInput':
-          return this.renderSearchInput()
-        case 'filterButton':
-          return (
-            <FilterMenuInstance
-              onCancel={this.props.onClose}
-              onSubmit={(f, v) => {
-                this.props.onSubmit && this.props.onSubmit(f, v)
-                this.props.onClose && this.props.onClose()
-              }}
-            />
-          )
-        case 'sortButton':
-          return <SortMenuInstance />
-        default:
-          break
-      }
-    }
-
-    renderSearchInput = () => {
-      if (this.props.reason !== 'searchInput') return <></>
-      const fields = this.getFieldsMatches(params.fields, this.props.keyword ?? '')
-      const keys = Object.keys(fields).filter((x) => !!x) as (keyof FilterModel<T>)[]
-      return (
-        <MenuList className={filterPanelClasses.list}>
-          {keys.map((x, i) => {
-            const item = params.fields[x]
-            return (
-              <MenuItem key={x.toString() + i} className={filterPanelClasses.item} onClick={() => this.handleClick(x)}>
-                {item?.label ?? x.toString()} "{this.props.keyword}"
-              </MenuItem>
-            )
-          })}
-          {this.props.keyword && (
-            <MenuItem className={filterPanelClasses.item} onClick={() => this.handleClick('Search')}>
-              Search "{this.props.keyword}"{/* <FilterHelpNotes title='The quick search includes' items={[]} /> */}
-            </MenuItem>
-          )}
-        </MenuList>
-      )
-    }
-    handleClick = (key: keyof FilterModel<T>) => {
-      if (!this.props.onSubmit) return
-      this.props.onSubmit(key, { value: this.props.keyword })
-    }
-  }
-  return FilterPanel
-}
-
-export default CreateFilterPanel
-
-const Wrapper = styled(Box)({
-  borderRadius: '4px',
-  boxShadow: 'rgba(0, 0, 0, 0.06) 0px 5px 22px, rgba(0, 0, 0, 0.04) 0px 0px 0px 0.5px',
-  backgroundColor: '#fff'
-})

package/src/lab/filter-bar/create.filtered.tsx

@@ -1,41 +0,0 @@
-import React, { Component } from 'react'
-import { Chip, Typography } from '@mui/material'
-import { FilterFields, FilterModel, FilterState } from './types'
-
-interface IProps<T> {
-  fields: FilterFields<T>
-  filterState: FilterState<T>
-  onRemove?: (key: keyof FilterModel<T>) => void
-}
-
-function CreateFiltered<T>() {
-  class Filtered extends Component<IProps<T>> {
-    render() {
-      const keys = Object.keys(this.props.filterState.filter ?? {}) as (keyof FilterModel<T>)[]
-      return keys.map((key, i) => {
-        const item = this.props.filterState.filter?.[key]
-        const config = this.props.fields[key]
-        return (
-          <Chip
-            key={`${key?.toString()}${i}`}
-            onDelete={() => this.handleRemove(key)}
-            size='small'
-            label={
-              <Typography component='span' variant='caption'>
-                {config?.label ?? key?.toString() ?? 'Search'} {item?.map((x) => `"${x.label ?? x.value}"`).join(' ')}
-              </Typography>
-            }
-          />
-        )
-      })
-    }
-
-    handleRemove = (key: keyof FilterModel<T>) => {
-      if (!this.props.onRemove) return
-      this.props.onRemove(key)
-    }
-  }
-  return Filtered
-}
-
-export default CreateFiltered

package/src/lab/filter-bar/create.sort-menu.tsx

@@ -1,43 +0,0 @@
-import { List, ListItem, ListItemButton, ListItemText } from '@mui/material'
-import FilterBarBase from './base'
-import { FilterFields, FilterPanelParams, FilterPannelSubmitFunc } from './types'
-
-interface IProps<T> {
-  onSubmit?: FilterPannelSubmitFunc<T>
-}
-
-interface IState<T> {}
-
-function CreateFilterSort<T>(params: FilterPanelParams<T>): React.ComponentType<IProps<T>> {
-  class FilterSort extends FilterBarBase<IProps<T>, IState<T>, T> {
-    render() {
-      // const sortFields = this.getSortFields(params.fields)
-      // const keys = Object.keys(sortFields) as (keyof FilterFields<T>)[]
-      return (
-        <List disablePadding>
-          <ListItem>
-            <ListItemButton>
-              <ListItemText>Item 1</ListItemText>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton>Item 2</ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton>Item 3</ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton>Item 4</ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton>Item 5</ListItemButton>
-          </ListItem>
-        </List>
-      )
-    }
-  }
-
-  return FilterSort
-}
-
-export default CreateFilterSort