rsuite
Version:
A suite of react components
649 lines (630 loc) • 21 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useEffect } from 'react';
import isNil from 'lodash/isNil';
import isFunction from 'lodash/isFunction';
import remove from 'lodash/remove';
import clone from 'lodash/clone';
import isArray from 'lodash/isArray';
import pick from 'lodash/pick';
import Tag from "../Tag/index.js";
import TextBox from "./TextBox.js";
import Stack from "../Stack/index.js";
import useInput from "./hooks/useInput.js";
import useData from "./hooks/useData.js";
import Plaintext from "../internals/Plaintext/index.js";
import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
import { KEY_VALUES } from "../internals/constants/index.js";
import { useTagContext } from "./InputPickerContext.js";
import { convertSize } from "./utils.js";
import { forwardRef, shallowEqual, getDataGroupBy, createChainedFunction, tplTransform, mergeRefs, isOneOf, mergeStyles } from "../internals/utils/index.js";
import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, useSearch, usePickerRef, useToggleKeyDownEvent, triggerPropKeys } from "../internals/Picker/index.js";
import { getPositionStyle } from "../internals/Overlay/Position.js";
/**
* Single item selector with text box input.
*
* @see https://rsuitejs.com/components/input-picker
*/
const InputPicker = forwardRef((props, ref) => {
const {
propsWithDefaults
} = useCustom('InputPicker', props);
const {
as,
appearance = 'default',
block,
cleanable = true,
cacheData = [],
className,
classPrefix = 'picker',
caretAs,
data: controlledData = [],
disabled,
readOnly,
plaintext,
defaultValue,
defaultOpen = false,
disabledItemValues = [],
locale,
toggleAs,
style,
size = 'md',
searchable = true,
open: controlledOpen,
placeholder,
placement = 'bottomStart',
groupBy,
popupClassName,
popupStyle,
popupAutoWidth = true,
listboxMaxHeight = 320,
creatable,
shouldDisplayCreateOption,
value: valueProp,
valueKey = 'value',
virtualized,
labelKey = 'label',
listProps,
id,
tabIndex,
loading,
label,
sort,
renderListbox,
renderExtraFooter,
renderValue,
renderOption,
renderOptionGroup,
onEnter,
onEntered,
onExit,
onExited,
onChange,
onClean,
onCreate,
onSearch,
onSelect,
onBlur,
onFocus,
searchBy,
...rest
} = propsWithDefaults;
const {
multi,
tagProps,
trigger,
disabledOptions,
onTagRemove,
renderCheckbox
} = useTagContext();
if (groupBy === valueKey || groupBy === labelKey) {
throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
}
const {
trigger: triggerRef,
root,
target,
overlay,
list
} = usePickerRef(ref);
const {
prefix,
merge
} = useStyles(classPrefix);
const [open, setOpen] = useControlled(controlledOpen, defaultOpen);
const {
inputRef,
inputProps,
focus,
blur
} = useInput({
multi,
triggerRef
});
const handleDataChange = data => {
var _data$;
setFocusItemValue(data === null || data === void 0 || (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[valueKey]);
};
const {
data,
dataWithCache,
newData,
setNewData
} = useData({
controlledData,
cacheData,
onChange: handleDataChange
});
const [value, setValue, isControlled] = useControlled(valueProp, multi ? defaultValue || [] : defaultValue);
const cloneValue = () => multi ? clone(value) || [] : value;
const handleClose = useEventCallback(() => {
var _triggerRef$current, _target$current, _target$current$focus;
triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.close();
// The focus is on the trigger button after closing
(_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);
});
const focusItemValueOptions = {
data: dataWithCache,
valueKey,
target: () => overlay.current
};
// Used to hover the focuse item when trigger `onKeydown`
const {
focusItemValue,
setFocusItemValue,
onKeyDown
} = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions);
const onSearchCallback = useEventCallback((searchKeyword, filteredData, event) => {
if (!disabledOptions) {
var _filteredData$;
// The first option after filtering is the focus.
let firstItemValue = filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];
// If there is no value in the option and new options are supported, the search keyword is the first option
if (!firstItemValue && creatable) {
firstItemValue = searchKeyword;
}
setFocusItemValue(firstItemValue);
}
onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);
});
const searchOptions = {
labelKey,
searchBy,
callback: onSearchCallback
};
// Use search keywords to filter options.
const {
searchKeyword,
resetSearch,
checkShouldDisplay,
handleSearch
} = useSearch(data, searchOptions);
// Update the position of the menu when the search keyword and value change
useEffect(() => {
var _triggerRef$current2, _triggerRef$current2$;
(_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 || _triggerRef$current2$.call(_triggerRef$current2);
}, [searchKeyword, value]);
const getDataItem = value => {
// Find active `MenuItem` by `value`
const activeItem = dataWithCache.find(item => shallowEqual(item[valueKey], value));
let itemNode = placeholder;
if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {
itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];
}
return {
isValid: !!activeItem,
activeItem,
itemNode
};
};
/**
* Convert the string of the newly created option into an object.
*/
const createOption = value => {
const option = {
create: true,
[valueKey]: value,
[labelKey]: value
};
if (groupBy) {
return {
[groupBy]: locale === null || locale === void 0 ? void 0 : locale.newItem,
...option
};
}
return option;
};
const handleChange = useEventCallback((value, event) => {
onChange === null || onChange === void 0 || onChange(value, event);
});
const handleRemoveItemByTag = useEventCallback((tag, event) => {
event.stopPropagation();
const val = cloneValue();
remove(val, itemVal => shallowEqual(itemVal, tag));
setValue(val);
handleChange(val, event);
onTagRemove === null || onTagRemove === void 0 || onTagRemove(tag, event);
});
const handleSelect = useEventCallback((value, item, event) => {
onSelect === null || onSelect === void 0 || onSelect(value, item, event);
if (creatable && item.create) {
delete item.create;
onCreate === null || onCreate === void 0 || onCreate(value, item, event);
setNewData(newData.concat(item));
}
});
/**
* Callback triggered by single selection
* @param value
* @param item
* @param event
*/
const handleSelectItem = useEventCallback((value, item, event) => {
setValue(value);
setFocusItemValue(value);
resetSearch();
handleSelect(value, item, event);
handleChange(value, event);
handleClose();
});
/**
* Callback triggered by multiple selection
* @param nextItemValue
* @param item
* @param event
* @param checked
*/
const handleCheckTag = useEventCallback((nextItemValue, item, event, checked) => {
const val = cloneValue();
if (checked) {
val.push(nextItemValue);
} else {
remove(val, itemVal => shallowEqual(itemVal, nextItemValue));
}
setValue(val);
resetSearch();
setFocusItemValue(nextItemValue);
handleSelect(val, item, event);
handleChange(val, event);
focus();
});
const handleTagKeyPress = useEventCallback(event => {
// When composing, ignore the keypress event.
if (event.nativeEvent.isComposing) {
return;
}
const val = cloneValue();
let newItemValue = focusItemValue || '';
// In TagInput
if (multi && disabledOptions) {
newItemValue = searchKeyword;
}
if (!newItemValue || !data) {
return;
}
// If the value is disabled in this option, it is returned.
if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === newItemValue)) {
return;
}
if (!val.some(v => shallowEqual(v, newItemValue))) {
val.push(newItemValue);
} else if (!disabledOptions) {
remove(val, itemVal => shallowEqual(itemVal, newItemValue));
}
let focusItem = data.find(item => shallowEqual(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue));
if (!focusItem) {
focusItem = createOption(newItemValue);
}
setValue(val);
resetSearch();
handleSelect(val, focusItem, event);
handleChange(val, event);
});
const handleMenuItemKeyPress = useEventCallback(event => {
if (!focusItemValue || !controlledData) {
return;
}
// If the value is disabled in this option, it is returned.
if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === focusItemValue)) {
return;
}
// Find active `MenuItem` by `value`
let focusItem = data.find(item => shallowEqual(item[valueKey], focusItemValue));
// FIXME Bad state flow
if (!focusItem && focusItemValue === searchKeyword) {
focusItem = createOption(searchKeyword);
}
setValue(focusItemValue);
resetSearch();
if (focusItem) {
handleSelect(focusItemValue, focusItem, event);
}
handleChange(focusItemValue, event);
handleClose();
});
/**
* Remove the last item, after pressing the back key on the keyboard.
* @param event
*/
const removeLastItem = useEventCallback(event => {
const target = event === null || event === void 0 ? void 0 : event.target;
if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {
focus();
return;
}
if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {
return;
}
const val = cloneValue();
val.pop();
setValue(val);
handleChange(val, event);
});
const handleClean = useEventCallback(event => {
if (disabled) {
return;
}
// When there is a value in the search box and the user presses the delete key on the keyboard,
// do not trigger clearing
if (inputRef.current === event.target && searchKeyword !== '') {
return;
}
setValue(null);
setFocusItemValue(null);
resetSearch();
if (multi) {
handleChange([], event);
} else {
handleChange(null, event);
}
onClean === null || onClean === void 0 || onClean(event);
});
const events = {
onMenuPressBackspace: multi ? removeLastItem : handleClean,
onMenuKeyDown: onKeyDown,
onMenuPressEnter: undefined,
onKeyDown: undefined
};
const handleKeyPress = useEventCallback(event => {
// When typing a space, create a tag.
if (isOneOf('Space', trigger) && event.key === KEY_VALUES.SPACE) {
handleTagKeyPress(event);
event.preventDefault();
}
// When typing a comma, create a tag.
if (isOneOf('Comma', trigger) && event.key === KEY_VALUES.COMMA) {
handleTagKeyPress(event);
event.preventDefault();
}
});
if (multi) {
if (isOneOf('Enter', trigger)) {
events.onMenuPressEnter = handleTagKeyPress;
}
if (creatable) {
events.onKeyDown = handleKeyPress;
}
} else {
events.onMenuPressEnter = handleMenuItemKeyPress;
}
const onPickerKeyDown = useToggleKeyDownEvent({
trigger: triggerRef,
target,
overlay,
loading,
...events,
...rest
});
const handleExited = useEventCallback(() => {
setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
resetSearch();
});
const handleFocus = useEventCallback(event => {
if (!readOnly) {
var _triggerRef$current3;
setOpen(true);
(_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.open();
}
onFocus === null || onFocus === void 0 || onFocus(event);
});
const handleEnter = useEventCallback(() => {
focus();
setOpen(true);
});
const handleExit = useEventCallback(() => {
blur();
setOpen(false);
});
const renderListItem = (label, item) => {
// 'Create option "{0}"' => Create option "xxxxx"
const newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;
return renderOption ? renderOption(newLabel, item) : newLabel;
};
const checkValue = () => {
if (multi) {
return {
isValid: false,
itemNode: null
};
}
const dataItem = getDataItem(value);
let itemNode = dataItem.itemNode;
if (!isNil(value) && isFunction(renderValue)) {
itemNode = renderValue(value, dataItem.activeItem, itemNode);
}
return {
isValid: dataItem.isValid,
itemNode
};
};
const renderMultiValue = () => {
if (!multi) {
return null;
}
const {
closable = true,
onClose,
...tagRest
} = tagProps;
const tags = value || [];
const items = [];
const tagElements = tags.map(tag => {
const {
isValid,
itemNode,
activeItem
} = getDataItem(tag);
items.push(activeItem);
if (!isValid) {
return null;
}
return /*#__PURE__*/React.createElement(Tag, _extends({
role: "option"
}, tagRest, {
key: tag,
size: convertSize(size),
closable: !disabled && closable && !readOnly && !plaintext,
title: typeof itemNode === 'string' ? itemNode : undefined,
onClose: createChainedFunction(handleRemoveItemByTag.bind(null, tag), onClose)
}), itemNode);
}).filter(item => item !== null);
if ((tags.length > 0 || isControlled) && isFunction(renderValue)) {
return renderValue(value, items, tagElements);
}
return tagElements;
};
const renderPopup = (positionProps, speakerRef) => {
const {
className,
left,
top
} = positionProps;
const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));
const mergedPopupStyle = mergeStyles(getPositionStyle(left, top), popupStyle);
let items = filterNodesOfTree(data, checkShouldDisplay);
if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {
items = [...items, createOption(searchKeyword)];
}
// Create a tree structure data when set `groupBy`
if (groupBy) {
items = getDataGroupBy(items, groupBy, sort);
} else if (typeof sort === 'function') {
items = items.sort(sort(false));
}
if (disabledOptions) {
return /*#__PURE__*/React.createElement(PickerPopup, {
ref: mergeRefs(overlay, speakerRef)
});
}
const listbox = items.length ? /*#__PURE__*/React.createElement(Listbox, {
listProps: listProps,
listRef: list,
disabledItemValues: disabledItemValues,
valueKey: valueKey,
labelKey: labelKey,
classPrefix: menuClassPrefix,
listItemClassPrefix: multi ? undefined : `${menuClassPrefix}-item`,
listItemAs: multi ? ListCheckItem : ListItem,
listItemProps: {
renderCheckbox
},
activeItemValues: multi ? value : [value],
focusItemValue: focusItemValue,
maxHeight: listboxMaxHeight,
data: items,
query: searchKeyword,
groupBy: groupBy,
onSelect: multi ? handleCheckTag : handleSelectItem,
renderOptionGroup: renderOptionGroup,
renderOption: renderListItem,
virtualized: virtualized
}) : /*#__PURE__*/React.createElement("div", {
className: prefix`none`
}, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
return /*#__PURE__*/React.createElement(PickerPopup, {
ref: mergeRefs(overlay, speakerRef),
autoWidth: popupAutoWidth,
className: classes,
style: mergedPopupStyle,
target: triggerRef,
onKeyDown: onPickerKeyDown
}, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
};
const {
isValid,
itemNode
} = checkValue();
const tagElements = renderMultiValue();
/**
* 1.Have a value and the value is valid.
* 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
* 3.If renderValue returns null or undefined, hasValue is false.
*/
const hasSingleValue = !isNil(value) && isFunction(renderValue) && !isNil(itemNode);
const hasMultiValue = isArray(value) && value.length > 0 && isFunction(renderValue) && !isNil(tagElements);
const hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
const searching = !!searchKeyword && open;
const editable = searchable && !disabled && !loading;
if (plaintext) {
const plaintextProps = {};
// When multiple selection, the tag is displayed in a stack layout.
if (multi && hasValue) {
plaintextProps.as = Stack;
plaintextProps.spacing = 6;
plaintextProps.wrap = true;
}
return /*#__PURE__*/React.createElement(Plaintext, _extends({
localeKey: "notSelected",
ref: target
}, plaintextProps), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);
}
const placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
const triggerProps = {
...pick(props, triggerPropKeys),
onEnter: createChainedFunction(handleEnter, onEnter),
onEntered: onEntered,
onExit: createChainedFunction(handleExit, onExit),
onExited: createChainedFunction(handleExited, onExited)
};
return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
id: id,
multiple: multi,
pickerType: multi ? 'tag' : 'input',
block: block,
disabled: disabled,
appearance: appearance,
as: as,
triggerProps: triggerProps,
ref: triggerRef,
trigger: "active",
speaker: renderPopup,
placement: placement,
rootRef: root,
style: style,
size: size,
classPrefix: classPrefix,
className: className,
responsive: searchable === false,
onClick: focus,
onKeyDown: onPickerKeyDown,
"data-focus": open,
"data-disabled-options": disabledOptions
}, rest), /*#__PURE__*/React.createElement(PickerToggle, {
loading: loading,
label: label,
appearance: appearance,
readOnly: readOnly,
plaintext: plaintext,
ref: target,
as: toggleAs,
caretAs: caretAs,
tabIndex: tabIndex,
onClean: handleClean,
cleanable: cleanable && !disabled,
hasValue: hasValue,
active: open,
disabled: disabled,
placement: placement,
inputValue: value,
focusItemValue: focusItemValue,
caret: !disabledOptions,
size: size
}, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
showTagList: multi,
inputRef: inputRef,
inputValue: open ? searchKeyword : '',
inputProps: inputProps,
tags: tagElements,
editable: editable,
readOnly: readOnly,
disabled: disabled,
multiple: multi,
onBlur: onBlur,
onFocus: handleFocus,
onChange: handleSearch
}));
});
InputPicker.displayName = 'InputPicker';
export default InputPicker;