pl-fe: start adopting multiselect-react-dropdown
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
688
packages/pl-fe/src/components/ui/multiselect.tsx
Normal file
688
packages/pl-fe/src/components/ui/multiselect.tsx
Normal file
@ -0,0 +1,688 @@
|
|||||||
|
/**
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2019 Srigar Sukumar <ssrigar@gmail.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
// Adapted from [multiselect-react-dropdown](https://github.com/srigar/multiselect-react-dropdown)
|
||||||
|
|
||||||
|
/* eslint-disable jsdoc/require-jsdoc */
|
||||||
|
// @ts-nocheck
|
||||||
|
import React, { useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
// import './styles.css';
|
||||||
|
|
||||||
|
import Icon from './icon';
|
||||||
|
|
||||||
|
function useOutsideAlerter(ref, clickEvent) {
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(event) {
|
||||||
|
if (ref.current && !ref.current.contains(event.target)) {
|
||||||
|
clickEvent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [ref]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component that alerts if you click outside of it
|
||||||
|
*/
|
||||||
|
const OutsideAlerter = (props) => {
|
||||||
|
const wrapperRef = useRef(null);
|
||||||
|
useOutsideAlerter(wrapperRef, props.outsideClick);
|
||||||
|
return <div ref={wrapperRef}>{props.children}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface IMultiselectProps {
|
||||||
|
options: any;
|
||||||
|
disablePreSelectedValues?: boolean;
|
||||||
|
selectedValues?: any;
|
||||||
|
isObject?: boolean;
|
||||||
|
displayValue?: string;
|
||||||
|
showCheckbox?: boolean;
|
||||||
|
selectionLimit?: any;
|
||||||
|
placeholder?: string;
|
||||||
|
groupBy?: string;
|
||||||
|
loading?: boolean;
|
||||||
|
style?: object;
|
||||||
|
emptyRecordMsg?: string;
|
||||||
|
onSelect?: (selectedList:any, selectedItem: any) => void;
|
||||||
|
onRemove?: (selectedList:any, selectedItem: any) => void;
|
||||||
|
onSearch?: (value:string) => void;
|
||||||
|
onKeyPressFn?: (event:any, value:string) => void;
|
||||||
|
closeIcon?: string;
|
||||||
|
singleSelect?: boolean;
|
||||||
|
caseSensitiveSearch?: boolean;
|
||||||
|
id?: string;
|
||||||
|
closeOnSelect?: boolean;
|
||||||
|
avoidHighlightFirstOption?: boolean;
|
||||||
|
hidePlaceholder?: boolean;
|
||||||
|
showArrow?: boolean;
|
||||||
|
keepSearchTerm?: boolean;
|
||||||
|
customCloseIcon?: React.ReactNode | string;
|
||||||
|
customArrow?: any;
|
||||||
|
disable?: boolean;
|
||||||
|
className?: string;
|
||||||
|
selectedValueDecorator?: (v:string, option: any) => React.ReactNode | string;
|
||||||
|
optionValueDecorator?: (v:string, option: any) => React.ReactNode | string;
|
||||||
|
hideSelectedList?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Multiselect extends React.Component<IMultiselectProps, any> {
|
||||||
|
|
||||||
|
static defaultProps: IMultiselectProps;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
inputValue: '',
|
||||||
|
options: props.options,
|
||||||
|
filteredOptions: props.options,
|
||||||
|
unfilteredOptions: props.options,
|
||||||
|
selectedValues: Object.assign([], props.selectedValues),
|
||||||
|
preSelectedValues: Object.assign([], props.selectedValues),
|
||||||
|
toggleOptionsList: false,
|
||||||
|
highlightOption: props.avoidHighlightFirstOption ? -1 : 0,
|
||||||
|
showCheckbox: props.showCheckbox,
|
||||||
|
keepSearchTerm: props.keepSearchTerm,
|
||||||
|
groupedObject: [],
|
||||||
|
};
|
||||||
|
// @ts-ignore
|
||||||
|
this.optionTimeout = null;
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchWrapper = React.createRef();
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchBox = React.createRef();
|
||||||
|
this.onChange = this.onChange.bind(this);
|
||||||
|
this.onKeyPress = this.onKeyPress.bind(this);
|
||||||
|
this.onFocus = this.onFocus.bind(this);
|
||||||
|
this.onBlur = this.onBlur.bind(this);
|
||||||
|
this.renderMultiselectContainer = this.renderMultiselectContainer.bind(this);
|
||||||
|
this.renderSelectedList = this.renderSelectedList.bind(this);
|
||||||
|
this.onRemoveSelectedItem = this.onRemoveSelectedItem.bind(this);
|
||||||
|
this.toggelOptionList = this.toggelOptionList.bind(this);
|
||||||
|
this.onArrowKeyNavigation = this.onArrowKeyNavigation.bind(this);
|
||||||
|
this.onSelectItem = this.onSelectItem.bind(this);
|
||||||
|
this.filterOptionsByInput = this.filterOptionsByInput.bind(this);
|
||||||
|
this.removeSelectedValuesFromOptions = this.removeSelectedValuesFromOptions.bind(this);
|
||||||
|
this.isSelectedValue = this.isSelectedValue.bind(this);
|
||||||
|
this.fadeOutSelection = this.fadeOutSelection.bind(this);
|
||||||
|
this.isDisablePreSelectedValues = this.isDisablePreSelectedValues.bind(this);
|
||||||
|
this.renderGroupByOptions = this.renderGroupByOptions.bind(this);
|
||||||
|
this.renderNormalOption = this.renderNormalOption.bind(this);
|
||||||
|
this.listenerCallback = this.listenerCallback.bind(this);
|
||||||
|
this.resetSelectedValues = this.resetSelectedValues.bind(this);
|
||||||
|
this.getSelectedItems = this.getSelectedItems.bind(this);
|
||||||
|
this.getSelectedItemsCount = this.getSelectedItemsCount.bind(this);
|
||||||
|
this.hideOnClickOutside = this.hideOnClickOutside.bind(this);
|
||||||
|
this.onCloseOptionList = this.onCloseOptionList.bind(this);
|
||||||
|
this.isVisible = this.isVisible.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
initialSetValue() {
|
||||||
|
const { showCheckbox, groupBy, singleSelect } = this.props;
|
||||||
|
const { options } = this.state;
|
||||||
|
if (!showCheckbox && !singleSelect) {
|
||||||
|
this.removeSelectedValuesFromOptions(false);
|
||||||
|
}
|
||||||
|
// if (singleSelect) {
|
||||||
|
// this.hideOnClickOutside();
|
||||||
|
// }
|
||||||
|
if (groupBy) {
|
||||||
|
this.groupByOptions(options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resetSelectedValues() {
|
||||||
|
const { unfilteredOptions } = this.state;
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
this.setState({
|
||||||
|
selectedValues: [],
|
||||||
|
preSelectedValues: [],
|
||||||
|
options: unfilteredOptions,
|
||||||
|
filteredOptions: unfilteredOptions,
|
||||||
|
}, () => {
|
||||||
|
// @ts-ignore
|
||||||
|
resolve();
|
||||||
|
this.initialSetValue();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getSelectedItems() {
|
||||||
|
return this.state.selectedValues;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSelectedItemsCount() {
|
||||||
|
return this.state.selectedValues.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.initialSetValue();
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchWrapper.current.addEventListener('click', this.listenerCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const { options, selectedValues } = this.props;
|
||||||
|
const { options: prevOptions, selectedValues: prevSelectedvalues } = prevProps;
|
||||||
|
if (JSON.stringify(prevOptions) !== JSON.stringify(options)) {
|
||||||
|
this.setState({ options, filteredOptions: options, unfilteredOptions: options }, this.initialSetValue);
|
||||||
|
}
|
||||||
|
if (JSON.stringify(prevSelectedvalues) !== JSON.stringify(selectedValues)) {
|
||||||
|
this.setState({ selectedValues: Object.assign([], selectedValues), preSelectedValues: Object.assign([], selectedValues) }, this.initialSetValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
listenerCallback() {
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchBox.current.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
// @ts-ignore
|
||||||
|
if (this.optionTimeout) {
|
||||||
|
// @ts-ignore
|
||||||
|
clearTimeout(this.optionTimeout);
|
||||||
|
}
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchWrapper.current.removeEventListener('click', this.listenerCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skipcheck flag - value will be true when the func called from on deselect anything.
|
||||||
|
removeSelectedValuesFromOptions(skipCheck) {
|
||||||
|
const { isObject, displayValue, groupBy } = this.props;
|
||||||
|
const { selectedValues = [], unfilteredOptions, options } = this.state;
|
||||||
|
if (!skipCheck && groupBy) {
|
||||||
|
this.groupByOptions(options);
|
||||||
|
}
|
||||||
|
if (!selectedValues.length && !skipCheck) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isObject) {
|
||||||
|
const optionList = unfilteredOptions.filter(item => {
|
||||||
|
return selectedValues.findIndex(
|
||||||
|
v => v[displayValue] === item[displayValue],
|
||||||
|
) === -1
|
||||||
|
? true
|
||||||
|
: false;
|
||||||
|
});
|
||||||
|
if (groupBy) {
|
||||||
|
this.groupByOptions(optionList);
|
||||||
|
}
|
||||||
|
this.setState(
|
||||||
|
{ options: optionList, filteredOptions: optionList },
|
||||||
|
this.filterOptionsByInput,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const optionList = unfilteredOptions.filter(
|
||||||
|
item => selectedValues.indexOf(item) === -1,
|
||||||
|
);
|
||||||
|
|
||||||
|
this.setState(
|
||||||
|
{ options: optionList, filteredOptions: optionList },
|
||||||
|
this.filterOptionsByInput,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
groupByOptions(options) {
|
||||||
|
const { groupBy } = this.props;
|
||||||
|
const groupedObject = options.reduce(function(r, a) {
|
||||||
|
const key = a[groupBy] || 'Others';
|
||||||
|
r[key] = r[key] || [];
|
||||||
|
r[key].push(a);
|
||||||
|
return r;
|
||||||
|
}, Object.create({}));
|
||||||
|
|
||||||
|
this.setState({ groupedObject });
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange(event) {
|
||||||
|
const { onSearch } = this.props;
|
||||||
|
this.setState(
|
||||||
|
{ inputValue: event.target.value },
|
||||||
|
this.filterOptionsByInput,
|
||||||
|
);
|
||||||
|
if (onSearch) {
|
||||||
|
onSearch(event.target.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyPress(event) {
|
||||||
|
const { onKeyPressFn } = this.props;
|
||||||
|
if (onKeyPressFn) {
|
||||||
|
onKeyPressFn(event, event.target.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
filterOptionsByInput() {
|
||||||
|
let { options } = this.state;
|
||||||
|
const { filteredOptions, inputValue } = this.state;
|
||||||
|
const { isObject, displayValue } = this.props;
|
||||||
|
if (isObject) {
|
||||||
|
options = filteredOptions.filter(i => this.matchValues(i[displayValue], inputValue));
|
||||||
|
} else {
|
||||||
|
options = filteredOptions.filter(i => this.matchValues(i, inputValue));
|
||||||
|
}
|
||||||
|
this.groupByOptions(options);
|
||||||
|
this.setState({ options });
|
||||||
|
}
|
||||||
|
|
||||||
|
matchValues(value, search) {
|
||||||
|
if (this.props.caseSensitiveSearch) {
|
||||||
|
return value.indexOf(search) > -1;
|
||||||
|
}
|
||||||
|
if (value.toLowerCase) {
|
||||||
|
return value.toLowerCase().indexOf(search.toLowerCase()) > -1;
|
||||||
|
}
|
||||||
|
return value.toString().indexOf(search) > -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
onArrowKeyNavigation(e) {
|
||||||
|
const {
|
||||||
|
options,
|
||||||
|
highlightOption,
|
||||||
|
toggleOptionsList,
|
||||||
|
inputValue,
|
||||||
|
selectedValues,
|
||||||
|
} = this.state;
|
||||||
|
const { disablePreSelectedValues } = this.props;
|
||||||
|
if (e.keyCode === 8 && !inputValue && !disablePreSelectedValues && selectedValues.length) {
|
||||||
|
this.onRemoveSelectedItem(selectedValues.length - 1);
|
||||||
|
}
|
||||||
|
if (!options.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (e.keyCode === 38) {
|
||||||
|
if (highlightOption > 0) {
|
||||||
|
this.setState(previousState => ({
|
||||||
|
highlightOption: previousState.highlightOption - 1,
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
this.setState({ highlightOption: options.length - 1 });
|
||||||
|
}
|
||||||
|
} else if (e.keyCode === 40) {
|
||||||
|
if (highlightOption < options.length - 1) {
|
||||||
|
this.setState(previousState => ({
|
||||||
|
highlightOption: previousState.highlightOption + 1,
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
this.setState({ highlightOption: 0 });
|
||||||
|
}
|
||||||
|
} else if (e.key === 'Enter' && options.length && toggleOptionsList) {
|
||||||
|
if (highlightOption === -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.onSelectItem(options[highlightOption]);
|
||||||
|
}
|
||||||
|
// TODO: Instead of scrollIntoView need to find better soln for scroll the dropwdown container.
|
||||||
|
// setTimeout(() => {
|
||||||
|
// const element = document.querySelector("ul.optionContainer .highlight");
|
||||||
|
// if (element) {
|
||||||
|
// element.scrollIntoView();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
onRemoveSelectedItem(item) {
|
||||||
|
const { selectedValues } = this.state;
|
||||||
|
let { index = 0 } = this.state;
|
||||||
|
const { onRemove, showCheckbox, displayValue, isObject } = this.props;
|
||||||
|
if (isObject) {
|
||||||
|
index = selectedValues.findIndex(
|
||||||
|
i => i[displayValue] === item[displayValue],
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
index = selectedValues.indexOf(item);
|
||||||
|
}
|
||||||
|
selectedValues.splice(index, 1);
|
||||||
|
onRemove(selectedValues, item);
|
||||||
|
this.setState({ selectedValues }, () => {
|
||||||
|
if (!showCheckbox) {
|
||||||
|
this.removeSelectedValuesFromOptions(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!this.props.closeOnSelect) {
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchBox.current.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelectItem(item) {
|
||||||
|
const { selectedValues } = this.state;
|
||||||
|
const { selectionLimit, onSelect, singleSelect, showCheckbox } = this.props;
|
||||||
|
if (!this.state.keepSearchTerm){
|
||||||
|
this.setState({
|
||||||
|
inputValue: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (singleSelect) {
|
||||||
|
this.onSingleSelect(item);
|
||||||
|
onSelect([item], item);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.isSelectedValue(item)) {
|
||||||
|
this.onRemoveSelectedItem(item);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (selectionLimit === selectedValues.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
selectedValues.push(item);
|
||||||
|
onSelect(selectedValues, item);
|
||||||
|
this.setState({ selectedValues }, () => {
|
||||||
|
if (!showCheckbox) {
|
||||||
|
this.removeSelectedValuesFromOptions(true);
|
||||||
|
} else {
|
||||||
|
this.filterOptionsByInput();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!this.props.closeOnSelect) {
|
||||||
|
// @ts-ignore
|
||||||
|
this.searchBox.current.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSingleSelect(item) {
|
||||||
|
this.setState({ selectedValues: [item], toggleOptionsList: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
isSelectedValue(item) {
|
||||||
|
const { isObject, displayValue } = this.props;
|
||||||
|
const { selectedValues } = this.state;
|
||||||
|
if (isObject) {
|
||||||
|
return (
|
||||||
|
selectedValues.filter(i => i[displayValue] === item[displayValue])
|
||||||
|
.length > 0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return selectedValues.filter(i => i === item).length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderOptionList() {
|
||||||
|
const { groupBy, style, emptyRecordMsg, loading, loadingMessage = 'loading...' } = this.props;
|
||||||
|
const { options } = this.state;
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<ul className={'optionContainer'} style={style.optionContainer}>
|
||||||
|
{typeof loadingMessage === 'string' && <span style={style.loadingMessage} className={'notFound'}>{loadingMessage}</span>}
|
||||||
|
{typeof loadingMessage !== 'string' && loadingMessage}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<ul className={'optionContainer'} style={style.optionContainer}>
|
||||||
|
{options.length === 0 && <span style={style.notFound} className={'notFound'}>{emptyRecordMsg}</span>}
|
||||||
|
{!groupBy ? this.renderNormalOption() : this.renderGroupByOptions()}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderGroupByOptions() {
|
||||||
|
const { isObject = false, displayValue, showCheckbox, style, singleSelect } = this.props;
|
||||||
|
const { groupedObject } = this.state;
|
||||||
|
return Object.keys(groupedObject).map(obj => {
|
||||||
|
return (
|
||||||
|
<React.Fragment key={obj}>
|
||||||
|
<li className='groupHeading' style={style.groupHeading}>{obj}</li>
|
||||||
|
{groupedObject[obj].map((option, i) => {
|
||||||
|
const isSelected = this.isSelectedValue(option);
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={`option${i}`}
|
||||||
|
style={style.option}
|
||||||
|
className={`groupChildEle option ${isSelected ? 'selected' : ''} ${this.fadeOutSelection(option) ? 'disableSelection' : ''} ${this.isDisablePreSelectedValues(option) ? 'disableSelection' : ''}`}
|
||||||
|
onClick={() => this.onSelectItem(option)}
|
||||||
|
>
|
||||||
|
{showCheckbox && !singleSelect && (
|
||||||
|
<input
|
||||||
|
type='checkbox'
|
||||||
|
className={'checkbox'}
|
||||||
|
readOnly
|
||||||
|
checked={isSelected}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{this.props.optionValueDecorator(isObject ? option[displayValue] : (option || '').toString(), option)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNormalOption() {
|
||||||
|
const { isObject = false, displayValue, showCheckbox, style, singleSelect } = this.props;
|
||||||
|
const { highlightOption } = this.state;
|
||||||
|
return this.state.options.map((option, i) => {
|
||||||
|
const isSelected = this.isSelectedValue(option);
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={`option${i}`}
|
||||||
|
style={style.option}
|
||||||
|
className={`option ${isSelected ? 'selected' : ''} ${highlightOption === i ? 'highlightOption highlight' : ''} ${this.fadeOutSelection(option) ? 'disableSelection' : ''} ${this.isDisablePreSelectedValues(option) ? 'disableSelection' : ''}`}
|
||||||
|
onClick={() => this.onSelectItem(option)}
|
||||||
|
>
|
||||||
|
{showCheckbox && !singleSelect && (
|
||||||
|
<input
|
||||||
|
type='checkbox'
|
||||||
|
readOnly
|
||||||
|
className={'checkbox'}
|
||||||
|
checked={isSelected}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{this.props.optionValueDecorator(isObject ? option[displayValue] : (option || '').toString(), option)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSelectedList() {
|
||||||
|
const { isObject = false, displayValue, style, singleSelect } = this.props;
|
||||||
|
const { selectedValues } = this.state;
|
||||||
|
return selectedValues.map((value, index) => (
|
||||||
|
<span className={`chip ${singleSelect && 'singleChip'} ${this.isDisablePreSelectedValues(value) && 'disableSelection'}`} key={index} style={style.chips}>
|
||||||
|
{this.props.selectedValueDecorator(!isObject ? (value || '').toString() : value[displayValue], value)}
|
||||||
|
{!this.isDisablePreSelectedValues(value) && (<i className='custom-close' onClick={() => this.onRemoveSelectedItem(value)}>
|
||||||
|
<Icon className='ml-1 size-4 hover:cursor-pointer' src={require('@phosphor-icons/core/regular/x-circle.svg')} />
|
||||||
|
</i>)}
|
||||||
|
</span>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
isDisablePreSelectedValues(value) {
|
||||||
|
const { isObject, disablePreSelectedValues, displayValue } = this.props;
|
||||||
|
const { preSelectedValues } = this.state;
|
||||||
|
if (!disablePreSelectedValues || !preSelectedValues.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (isObject) {
|
||||||
|
return (
|
||||||
|
preSelectedValues.filter(i => i[displayValue] === value[displayValue])
|
||||||
|
.length > 0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return preSelectedValues.filter(i => i === value).length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fadeOutSelection(item) {
|
||||||
|
const { selectionLimit, showCheckbox, singleSelect } = this.props;
|
||||||
|
if (singleSelect) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { selectedValues } = this.state;
|
||||||
|
if (selectionLimit === -1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (selectionLimit !== selectedValues.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (selectionLimit === selectedValues.length) {
|
||||||
|
if (!showCheckbox) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
if (this.isSelectedValue(item)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggelOptionList() {
|
||||||
|
this.setState({
|
||||||
|
toggleOptionsList: !this.state.toggleOptionsList,
|
||||||
|
highlightOption: this.props.avoidHighlightFirstOption ? -1 : 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onCloseOptionList() {
|
||||||
|
this.setState({
|
||||||
|
toggleOptionsList: false,
|
||||||
|
highlightOption: this.props.avoidHighlightFirstOption ? -1 : 0,
|
||||||
|
inputValue: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocus(){
|
||||||
|
if (this.state.toggleOptionsList) {
|
||||||
|
// @ts-ignore
|
||||||
|
clearTimeout(this.optionTimeout);
|
||||||
|
} else {
|
||||||
|
this.toggelOptionList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onBlur(){
|
||||||
|
this.setState({ inputValue: '' }, this.filterOptionsByInput);
|
||||||
|
// @ts-ignore
|
||||||
|
this.optionTimeout = setTimeout(this.onCloseOptionList, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
isVisible(elem) {
|
||||||
|
return !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
|
||||||
|
}
|
||||||
|
|
||||||
|
hideOnClickOutside() {
|
||||||
|
const element = document.getElementsByClassName('multiselect-container')[0];
|
||||||
|
const outsideClickListener = event => {
|
||||||
|
if (element && !element.contains(event.target) && this.isVisible(element)) {
|
||||||
|
this.toggelOptionList();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('click', outsideClickListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderMultiselectContainer() {
|
||||||
|
const { inputValue, toggleOptionsList, selectedValues } = this.state;
|
||||||
|
const { placeholder, style, singleSelect, id, name, hidePlaceholder, disable, showArrow, className, customArrow, hideSelectedList } = this.props;
|
||||||
|
return (
|
||||||
|
<div className={`multiselect-container multiSelectContainer ${disable ? 'disable_ms' : ''} ${className || ''}`} id={id || 'multiselectContainerReact'} style={style.multiselectContainer}>
|
||||||
|
<div
|
||||||
|
className={`search-wrapper searchWrapper ${singleSelect ? 'singleSelect' : ''}`}
|
||||||
|
ref={this.searchWrapper} style={style.searchBox}
|
||||||
|
onClick={singleSelect ? this.toggelOptionList : () => {}}
|
||||||
|
>
|
||||||
|
{!hideSelectedList && this.renderSelectedList()}
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
ref={this.searchBox}
|
||||||
|
className={`searchBox ${singleSelect && selectedValues.length ? 'display-none' : ''}`}
|
||||||
|
id={`${id || 'search'}_input`}
|
||||||
|
name={`${name || 'search_name'}_input`}
|
||||||
|
onChange={this.onChange}
|
||||||
|
onKeyPress={this.onKeyPress}
|
||||||
|
value={inputValue}
|
||||||
|
onFocus={this.onFocus}
|
||||||
|
onBlur={this.onBlur}
|
||||||
|
placeholder={((singleSelect && selectedValues.length) || (hidePlaceholder && selectedValues.length)) ? '' : placeholder}
|
||||||
|
onKeyDown={this.onArrowKeyNavigation}
|
||||||
|
style={style.inputField}
|
||||||
|
autoComplete='off'
|
||||||
|
disabled={singleSelect || disable}
|
||||||
|
/>
|
||||||
|
{(singleSelect || showArrow) && (
|
||||||
|
<>
|
||||||
|
{customArrow ? <span className='icon_down_dir'>{customArrow}</span> : <img src='' className={'icon_cancel icon_down_dir'} />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`optionListContainer ${
|
||||||
|
toggleOptionsList ? 'displayBlock' : 'displayNone'
|
||||||
|
}`}
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{this.renderOptionList()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<OutsideAlerter outsideClick={this.onCloseOptionList}>
|
||||||
|
{this.renderMultiselectContainer()}
|
||||||
|
</OutsideAlerter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
Multiselect.defaultProps = {
|
||||||
|
options: [],
|
||||||
|
disablePreSelectedValues: false,
|
||||||
|
selectedValues: [],
|
||||||
|
isObject: true,
|
||||||
|
displayValue: 'model',
|
||||||
|
showCheckbox: false,
|
||||||
|
selectionLimit: -1,
|
||||||
|
placeholder: 'Select',
|
||||||
|
groupBy: '',
|
||||||
|
style: {},
|
||||||
|
emptyRecordMsg: 'No Options Available',
|
||||||
|
onSelect: () => {},
|
||||||
|
onRemove: () => {},
|
||||||
|
onKeyPressFn: () => {},
|
||||||
|
closeIcon: 'circle2',
|
||||||
|
singleSelect: false,
|
||||||
|
caseSensitiveSearch: false,
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
closeOnSelect: true,
|
||||||
|
avoidHighlightFirstOption: false,
|
||||||
|
hidePlaceholder: false,
|
||||||
|
showArrow: false,
|
||||||
|
keepSearchTerm: false,
|
||||||
|
customCloseIcon: '',
|
||||||
|
className: '',
|
||||||
|
customArrow: undefined,
|
||||||
|
selectedValueDecorator: v => v,
|
||||||
|
optionValueDecorator: v => v,
|
||||||
|
} as IMultiselectProps;
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import MultiselectReactDropdown from 'multiselect-react-dropdown';
|
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState } from 'react';
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
import Icon from 'pl-fe/components/ui/icon';
|
import Icon from 'pl-fe/components/ui/icon';
|
||||||
|
import { Multiselect } from 'pl-fe/components/ui/multiselect';
|
||||||
import Select from 'pl-fe/components/ui/select';
|
import Select from 'pl-fe/components/ui/select';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
@ -146,7 +146,7 @@ const Mutliselect: React.FC<IMultiselect> = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const selectElem = (
|
const selectElem = (
|
||||||
<MultiselectReactDropdown
|
<Multiselect
|
||||||
className='plfe-multiselect'
|
className='plfe-multiselect'
|
||||||
options={options}
|
options={options}
|
||||||
selectedValues={selectedValues}
|
selectedValues={selectedValues}
|
||||||
|
|||||||
Reference in New Issue
Block a user