universal-select v0.5.21

universal-Select

A univeral select is a highly funtional quick search/filter control that intergrates witht ag-grid.

Universal select provides a simple interface to create filter criteria from multiple sources.

For examples and help universal-select

To install

yarn add universal-select

npm i --save universal-select

Quick start

A simple string list

const choices: ChoiceDefinition<any>[] = [
  {
    key: "guarantorName",
    prefix: "guarantorName",
    name: "Guarantor Name",
    options: [...]
    replaceExisting: true
  }
];

<UniversalSelect
  title="Quick Filter"
  choices={choices}
/>

Properties

• title select title and key for cache
• choices choices to present to the user and their behaviour (see choice properties)
• selected? selected items
• showWithNoFilter? Show items even if user has not typed
• cacheLookUp? should looked up items be cached
• cacheTimeToLive? how long should items exist in the cache for in seconds
• cacheExpiryCheck? how often should cached item expiry be checked in seconds
• onChange? notify of change
• disabled? control is disabled
• noItemText? text to display if not items are found
• typePromptText? prompt to tell user to type
• caseSensitive? perform case sensitive matching
• toolTipValueLimit? maxium number of items to display
• maxAvailableChoices? maxium choices to display for all catagories
• hideOnSelect close option list when an item is selected
• noClearTextOnSelect? don't clear input text on selection
• selectIfOnlyOption? select an option if it is the only option available
• agGridApi? if supplied allows automatic filtering of ag-grid

choice properties

• key key of the choice type
• prefix choice prefix
• options static choices
• text? text getter for display text, if the - item is complex
• value? text getter for value, if the item is complex
• name? choice display name
• lookUp? if item choices are vast, lookup - function
• regExMatch? if item choices are free flowing text, regex to identifier when text is valid
• valueGetter? function to get the item text
• filterType? filter type "text" | "number" | "date";
• maximumSelections? max selections, if using ag-grid is always 1
• maxAvailableChoices? max available choices
• search? if type is complex search text, value or both. 'text' | 'value' | 'both';
• showSelectedValue? show select value or text
• noSelectIfOnlyOption? override for control property - selectIfOnlyOption
• agGridColumn? aggrid column to apply filter
• valueConverter? used to convert text to value
• replaceExisting? if using ag-grid replaces existing filters when a new filter is selected

Styles

Choice apperance properties

• choiceStyle
• choiceHoverStyle
• choiceClassName
• choiceHoverClassName

Selection apperance properties

• selectionStyle
• selectionDisabledStyle
• selectionClassName
• selectionDisabledClassName
• deselectStyle
• deselectDisabledStyle
• deselectHoverStyle
• deselectClassName
• deselectDisabledClassName
• deselectHoverClassName
• selectionPrefixClassName
• selectionPrefixDisabledClassName
• selectionPrefixDisabledStyle
• selectionPrefixStyle
• selectionTextClassName
• selectionTextDisabledClassName
• selectionTextDisabledStyle
• selectionTextStyle
• deselectIcon?: IconType;

General apperance properties

• selectStyle
• selectDisabledStyle
• className
• disabledClassName
• inputStyle
• inputDisabledStyle
• inputClassName
• inputDisabledClassName
• clearSelectionStyle
• clearSelectionDisabledStyle
• clearSelectionHoverStyle
• clearSelectionClassName
• clearSelectionDisabledClassName
• clearSelectionHoverClassName
• titleStyle
• titleDisabledStyle
• titleClassName
• titleDisabledClassName
• textDisplayClassName
• textDisplayDisabledClassName
• dropdownIconStyle
• dropdownIcondisabledStyle
• dropIconClassName
• dropIconDisabledClassName
• choiceListClassName
• loadingTextClassName
• catagoryStyle
• catagoryClassName
• hideDropdownIcon?: boolean;
• dropdownIcon?: IconType;
• clearSelectionIcon?: IconType;
• dropdownIconColor
• dropdownIconDisabledColor
• hideTitle?: boolean;
• listStyle
• height
• width
• minWidth
• maxWidth

Componenets

• choiceComponent?: (props: ChoiceProps & ChoiceStyle) => JSX.Element;
• selectComponent?: (props: SelectionProps & SelectionStyle) => JSX.Element;

Styles

--universalSelectBackgroundColor White --universalSelectBackgroundImage --universalSelectHighlihtedBackgroundColor lightgray --universalSelectHighlihtedBackgroundImage

--universalSelectFontColor, Black --universalSelectSelectedBackgroundColor lightgray --universalSelectSelectedBackgroundImage

--universalSelectDisabledFontColor --universalSelectDisabledBackgroundColor darkgray --universalSelectDisabledBackgroundImage

--universalSelectListWidth (fill available) --universalSelectCatagoryTitleFontWeight (bold) --universalSelectPrefixFontSize, "xx-small" --universalSelectPrefixFontWeight, "bold" --universalSelectHighlightFontColor darkgray --universalSelectDeslectIconColor --universalSelectDeslectDisableIconColor --universalSelectDeslectHighlightIconColor

--universalSelectFontWeight --universalSelectFontFamily --universalSelectFontSize; -universalSelectFontStyle

--universalSelectDropdownIconSize, large --universalSelectDropdownIconColor

--universalSelectClearSelectionIconSize, large --universalSelectClearSelectionIconColor --universalSelectClearSelectionIconHighlightColor Lightgray

--universalSelectTitleFontSize, small --universalSelectDisabledFontColor --universalSelectBorder, 2px solid Lightgray --universalSelectBackgroundColor, White --universalSelectBackgroundImage

--universalSelectCatagoryTitleFontSize, x-small --universalSelectCatagorFontColor,DarkGray --universalSelectCatagoryTitleBackgroundColor,DarkGray --universalSelectCatagoryTitleBackgroundImage