import * as React from "react" ; import path from "path" ; import r6operators from "r6operators" ; import { Search } from "react-feather" ; import Dropdown from "react-dropdown-now" ; import IconTile from "~components/IconTile" ; import { IIcon } from "~components/Icon" ; import "./icongrid.scss" ; interface IIconGridProps { children ? : React . ReactNode ; } interface IIconGridState { inputValue : string ; items : Array < any > ; filter : string ; } interface IICONSMap { [ name ] : IIcon ; } const initialItems = Object . values ( r6operators ) ; const roleFilter = new Set ( ) ; const unitFilter = new Set ( ) ; for ( const op of initialItems ) { roleFilter . add ( op . role ) ; unitFilter . add ( op . unit ) ; } const dropdownFilters = [ "None" , { name : "Role" , items : [ ... roleFilter ] . sort ( ) . map ( ( x ) => { return { value : x , label : x } ; } ) , } , { name : "Unit" , items : [ ... unitFilter ] . sort ( ) . map ( ( x ) => { return { value : x , label : x } ; } ) , } , ] as any ; const requestIcons = require . context ( "r6operators/dist/icons" , true , /\.svg$/ ) ; export default class IconGrid extends React . Component < IIconGridProps , IIconGridState > { constructor ( props ) { super ( props ) ; this . state = { inputValue : "" , items : initialItems , filter : "" , } ; this . updateInputValue = this . updateInputValue . bind ( this ) ; this . setFilter = this . setFilter . bind ( this ) ; } updateInputValue ( event ) { const updatedList = initialItems . filter ( ( x ) => x . name . toString ( ) . toLowerCase ( ) . includes ( event . target . value . toString ( ) . toLowerCase ( ) ) ) ; this . setState ( { inputValue : event . target . value , filter : "" , items : updatedList } ) ; } setFilter ( option ) { if ( option . value === "None" ) { this . setState ( { inputValue : "" , filter : option . value , items : initialItems } ) ; } else { const updatedList = initialItems . filter ( ( x ) => x . role . toString ( ) . toLowerCase ( ) === option . value . toString ( ) . toLowerCase ( ) || x . unit . toString ( ) . toLowerCase ( ) === option . value . toString ( ) . toLowerCase ( ) ) ; this . setState ( { inputValue : "" , filter : option . value , items : updatedList } ) ; } } render ( ) { return ( < div className = "icongrid" > < div className = "icongrid__filters" > < div className = "icongrid__search" > < Search /> < input placeholder = "Search icons" value = { this . state . inputValue } onChange = { this . updateInputValue } / > < /div> < Dropdown className = "icongrid__dropdown" options = { dropdownFilters } onChange = { this . setFilter } value = { this . state . filter } placeholder = "Select an option" / > < /div> < div className = { this . state . items . length === 0 ? "icongrid__container is-empty" : "icongrid__container" } > { this . state . items . map ( ( x ) => ( < IconTile key = { x . id } object = { x } icon = { x . id } / > ) ) } { this . state . items . length === 0 ? ( < div className = "icongrid__empty" > No results found for { this . state . inputValue || this . state . filter } < /div>) : undefined} < /div> < /div>); } }