@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
212 lines (211 loc) • 13.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueOptionsTags = exports.renderSelectionSection = exports.ValueSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const dnd_1 = require("../../../components/dnd");
const CheckBox_1 = require("../../../components/CheckBox");
const icons_1 = require("../../../components/icons");
const EllipsisContainer_1 = require("../../../components/EllipsisContainer");
const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
const Tag_1 = require("../../../components/Tag");
const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
const optionsMap = (0, react_1.useMemo)(() => {
if (selectedMap) {
return;
}
const map = new Map([]);
options.forEach((option) => {
map.set(toIdentifier(option), option);
});
return map;
}, [options, selectedMap]);
const result = (0, react_1.useMemo)(() => {
if (selectedMap) {
return selectedMap;
}
const map = new Map([]);
value.forEach((id) => {
map.set(id, optionsMap.get(id) ?? null);
});
return map;
}, [optionsMap, selectedMap, value]);
return { selectedMap: result, optionsMap };
}
const baseClassName = 'ab-ValueSelector';
function ValueSelector(props) {
const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, showSelectedOnlyLabel, showFilterInput, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
const [searchInputValue, setSearchInputValue] = React.useState('');
const preparedToLabel = toListLabel ?? toLabel;
const [selectedOnly, doSetSelectedOnly] = (0, react_1.useState)(false);
const setSelectedOnly = (0, react_1.useCallback)((selectedOnly) => {
doSetSelectedOnly(selectedOnly);
onShowSelectedOnlyChange?.(selectedOnly);
}, [onShowSelectedOnlyChange]);
const { selectedMap } = useValuesMap({
options,
toIdentifier,
value,
});
const notifyChange = (0, react_1.useCallback)(() => {
const newSelection = [...selectedMap.keys()];
if (!newSelection.length && selectedOnly) {
setSelectedOnly(false);
}
onChange(newSelection, new Map(selectedMap));
}, [onChange, selectedOnly, selectedMap]);
const renderOption = (option, index) => {
const identifier = toIdentifier(option);
const label = !allowReorder ? preparedToLabel(option) : null;
const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
const renderNode = (props, dragHandleProps) => {
return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier ?? index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option", ...props },
React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
reorderable ? (React.createElement(rebass_1.Box, { mr: 3, ...dragHandleProps },
React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
singleSelect ? (React.createElement(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
if (checked) {
selectedMap.clear();
selectedMap.set(identifier, option);
}
else {
selectedMap.delete(identifier);
}
notifyChange();
} }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
if (checked) {
selectedMap.set(identifier, option);
}
else {
selectedMap.delete(identifier);
}
notifyChange();
}, checked: selectedMap.has(identifier) }, label)),
React.createElement(rebass_1.Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
};
return (React.createElement(dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
return renderNode({
ref: draggableProvided.innerRef,
...draggableProvided.draggableProps,
style: draggableProvided.draggableProps.style,
}, draggableProvided.dragHandleProps);
}));
};
const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
const showSelectedOnlyPosition = props.showSelectedOnlyPosition ?? 'floating';
const selectionSectionProps = {
...props,
onSelectAll: () => {
options.forEach((option) => {
selectedMap.set(toIdentifier(option), option);
});
notifyChange();
},
onClearOption: (id) => {
selectedMap.delete(id);
notifyChange();
},
onClear: () => {
selectedMap.clear();
notifyChange();
},
};
return (React.createElement(rebass_1.Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
React.createElement(rebass_1.Flex, { mb: 1 },
showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),
selectionBoxPosition === 'top' && (0, exports.renderSelectionSection)(selectionSectionProps),
React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
const { source, destination } = result;
const selection = [];
const extraKeys = [];
for (let [key, value] of selectedMap) {
if (value != null) {
selection.push(key);
}
else {
// null/non-existent keys have to be stored separately
extraKeys.push(key);
}
}
const clone = new Map(selectedMap);
const newSelection = ArrayExtensions_1.default.reorderArray(selection, source.index, destination.index);
// and then pushed back in the new order, at the end
newSelection.push(...extraKeys);
selectedMap.clear();
newSelection.forEach((key) => {
selectedMap.set(key, clone.get(key));
});
notifyChange();
} },
React.createElement(rebass_1.Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox` },
React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
options
.filter((option) => {
let result = true;
if (filter) {
result = filter(option, searchInputValue);
}
result =
result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
return result;
})
.map(renderOption),
droppableProvided.placeholder));
}))),
selectionBoxPosition === 'bottom' && (0, exports.renderSelectionSection)(selectionSectionProps)));
}
exports.ValueSelector = ValueSelector;
const renderSelectionSection = (props) => {
const { noSelectionLabel, clearSelectionLabel, value, options, disabled, singleSelect, toLabel, toIdentifier, selectionBoxPosition = 'bottom', } = props;
const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null,
noSelectionLabel ?? 'No selected options',
!singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: props.onSelectAll }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
React.createElement(SimpleButton_1.default, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: props.onClear }, clearSelectionLabel ?? 'Clear selection.'),
props.xSelectedLabel
? props.xSelectedLabel(value.length)
: `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
return (React.createElement(rebass_1.Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
selectionBox,
React.createElement(ValueOptionsTags, { options: options, value: value, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: props.onClearOption, readOnly: disabled, isOptionDisabled: props.isOptionDisabled })));
};
exports.renderSelectionSection = renderSelectionSection;
function ValueOptionsTags(props) {
const { allowWrap, value, toLabel, isOptionDisabled, onChange, onClearOption, readOnly: isReadOnly, renderLabel, } = props;
const { selectedMap } = useValuesMap(props);
const renderOptionTag = (index) => {
const optionId = value[index];
const clear = () => {
selectedMap.delete(optionId);
onClearOption?.(optionId);
if (onChange) {
onChange([...selectedMap.keys()], new Map(selectedMap));
}
};
const option = selectedMap.get(optionId);
const readOnly = isReadOnly || (isOptionDisabled ? isOptionDisabled(option) : false);
const label = option != null ? toLabel(option) : `${optionId}`;
return (React.createElement(Tag_1.Tag, { flexDirection: "row", alignItems: "center", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, className: "ab-ValueSelector__tag", onClick: (e) => {
e.target?.lastChild?.focus?.();
}, style: { flex: 'none' } },
renderLabel ? renderLabel(label) : label,
React.createElement(SimpleButton_1.default, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none', visibility: readOnly ? 'hidden' : 'visible' }, onClick: clear })));
};
const renderEllipsis = (0, react_1.useCallback)(({ remaining }) => {
return (React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },
"+",
remaining,
" ",
remaining > 1 ? 'others' : 'other'));
}, []);
return (React.createElement(EllipsisContainer_1.EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
}
exports.ValueOptionsTags = ValueOptionsTags;