@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
267 lines (266 loc) • 12.1 kB
JavaScript
import * as React from 'react';
import FieldWrap from '../../FieldWrap';
import { TreeList } from '../TreeList';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import OverlayTrigger from '../../OverlayTrigger';
import { Box, Flex } from 'rebass';
import NotifyResize from '../../NotifyResize';
import Input from '../../Input';
import { TreeSelectionState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
import SimpleButton from '../../SimpleButton';
import { CheckBox } from '../../CheckBox';
import { useLatest } from '../../utils/useLatest';
import { Resizable } from 're-resizable';
import { useAdaptableComputedCSSVars } from '../../../View/AdaptableComputedCSSVarsContext';
const resizableDirections = {
right: true,
bottom: true,
bottomRight: true,
};
export function toDisplayValueDefault(value) {
if (!Array.isArray(value)) {
return `${value}`;
}
return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
}
const getLabelColumn = (field, { includeExpandCollapseButton }) => {
return {
field,
defaultFlex: 1,
renderTreeIcon: true,
defaultSortable: false,
resizable: false,
renderSelectionCheckBox: ({ rowInfo, dataSourceApi, api }) => {
if (!rowInfo.isTreeNode) {
return null;
}
return (React.createElement(CheckBox, { mx: 1, checked: rowInfo?.rowSelected, onChange: (checked) => {
dataSourceApi.treeApi.setNodeSelection(rowInfo.nodePath, checked);
api.focus();
} }));
},
renderHeader: ({ dataSourceApi, api, allRowsSelected, someRowsSelected }) => {
const { treeApi } = dataSourceApi;
const allFirstLevelCollapsed = dataSourceApi
.getOriginalDataArray()
.every((item) => !treeApi.isNodeExpanded([item.id]));
return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', width: '100%', onMouseDown: (e) => {
// so we can keep the focus on the Grid
e.preventDefault();
} },
React.createElement(CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, mr: 2, onChange: () => {
if (allRowsSelected) {
dataSourceApi.treeApi.deselectAll();
}
else {
dataSourceApi.treeApi.selectAll();
}
api.focus();
} }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
React.createElement(Flex, { flex: 1 }),
includeExpandCollapseButton ? (React.createElement(SimpleButton, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
if (allFirstLevelCollapsed) {
dataSourceApi.treeApi.expandAll();
}
else {
dataSourceApi.treeApi.collapseAll();
}
}, iconPosition: "end" })) : null));
},
};
};
const sizeFull = {
width: '100%',
height: '100%',
};
function getRowCount(options) {
return options.reduce((acc, option) => {
if (Array.isArray(option.children)) {
return acc + getRowCount(option.children) + 1;
}
return acc + 1;
}, 0);
}
export function TreeDropdown(props) {
const [visible, doSetVisible] = useState(false);
const overlayDOMRef = useRef(null);
const getProps = useLatest(props);
const computedCSSVars = useAdaptableComputedCSSVars();
const [treeExpandState, setTreeExpandState] = useState(undefined);
const [searchValue, setSearchValue] = useState('');
const labelField = props.labelField ?? 'label';
const [stateValue, setStateValue] = useState(props.value !== undefined ? props.value : props.defaultValue || []);
const onChange = useCallback((value) => {
const paths = value instanceof TreeSelectionState
? value.getState().selectedPaths
: value.selectedPaths || [];
if (props.value === undefined) {
setStateValue(paths);
}
props.onChange?.(paths);
}, [props.onChange, props.value]);
const value = props.value !== undefined ? props.value : stateValue;
const treeSelection = useMemo(() => {
const selection = {
defaultSelection: false,
selectedPaths: value,
};
return selection;
}, [value]);
const rowCount = useMemo(() => {
return getRowCount(props.options);
}, [props.options]);
const hasChildren = rowCount > props.options.length;
const columns = useMemo(() => {
return {
label: getLabelColumn(labelField, {
includeExpandCollapseButton: hasChildren,
}),
};
}, [labelField, hasChildren]);
const [size, setSize] = useState({
width: 0,
height: rowCount * 35,
});
const setHeight = useCallback((height) => {
setSize((s) => {
return {
...s,
height,
};
});
}, []);
const setWidth = useCallback((width) => {
setSize((s) => {
return {
...s,
width,
};
});
}, []);
const getSize = useLatest(size);
useEffect(() => {
if (!getSize().height) {
setHeight(rowCount * 35);
}
}, [rowCount]);
const setVisible = (visible) => {
if (visible) {
const { onMenuOpen } = getProps();
if (onMenuOpen) {
onMenuOpen();
}
requestAnimationFrame(() => {
doSetVisible(visible);
});
}
else {
const { onMenuClose } = getProps();
if (onMenuClose) {
onMenuClose();
}
doSetVisible(visible);
}
};
const [treeListApi, setTreeListApi] = useState(null);
const { listSizeConstraints } = props;
const nodeMatches = useCallback(({ data }) => {
return !searchValue
? data
: `${data[labelField]}`.toLowerCase().includes(searchValue.toLowerCase());
}, [searchValue]);
const filterFunction = useCallback(({ data, filterTreeNode }) => {
if (!Array.isArray(data.children)) {
return nodeMatches({ data });
}
// allow non-leaf nodes to match
if (nodeMatches({ data })) {
return data;
}
return filterTreeNode(data);
}, [nodeMatches]);
return (React.createElement(Flex, { flexDirection: 'row', className: "ab-TreeDropdown", style: {
width: '100%',
...props.style,
}, onMouseDown: props.onMouseDown, onBlur: (e) => {
const { relatedTarget } = e;
const overlayDOMNode = overlayDOMRef.current;
if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
overlayDOMNode?.contains(relatedTarget)) {
return;
}
setVisible(false);
} },
React.createElement(NotifyResize, { onResize: (newSize) => {
setWidth(newSize.width);
} }),
React.createElement(OverlayTrigger, { visible: visible, targetOffset: 20, alignPosition: [
// overlay - target
['TopLeft', 'BottomLeft'],
['TopRight', 'BottomRight'],
['BottomLeft', 'TopLeft'],
['BottomRight', 'TopRight'],
], render: () => {
const minWidth = listSizeConstraints?.minWidth ||
computedCSSVars['--ab-cmp-select-menu__min-width'] ||
240;
const maxWidth = listSizeConstraints?.maxWidth ||
computedCSSVars['--ab-cmp-select-menu__max-width'] ||
'60vw';
const minHeight = listSizeConstraints?.minHeight || 200;
const maxHeight = listSizeConstraints?.maxHeight ||
computedCSSVars['--ab-cmp-select-menu__max-height'] ||
'50vh';
const resizable = getProps().resizable;
const treeListStyle = resizable
? { ...sizeFull }
: {
width: size.width,
height: size.height,
maxWidth,
minHeight,
maxHeight,
minWidth,
};
if (!hasChildren) {
// @ts-ignore - don't leave any space for the > expand icon, as there are no children
treeListStyle['--infinite-group-row-column-nesting'] = 'var(--ab-space-2)';
}
const treeList = (React.createElement(TreeList, { primaryKey: props.primaryKey ?? 'id', treeFilterFunction: filterFunction, columnHeaderHeight: 30, onReady: ({ api }) => {
setTreeListApi(api);
api.focus();
}, defaultTreeExpandState: treeExpandState, onTreeExpandStateChange: setTreeExpandState, columns: columns, options: props.options, treeSelection: treeSelection, onTreeSelectionChange: withSelectedLeafNodesOnly(onChange), style: treeListStyle }));
let children = (React.createElement(Flex, { flexDirection: 'column', height: '100%' },
React.createElement(Flex, { backgroundColor: 'defaultbackground', p: 1, alignItems: 'center', justifyContent: 'stretch', justifyItems: 'stretch' },
React.createElement(Input, { "data-name": "menulist-search-input", placeholder: "Search...", style: { width: '100%' }, value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
treeList));
if (resizable) {
const onResizeStop = (_e, _direction, ref) => {
const newSize = {
width: ref.style.width,
height: ref.style.height,
};
setSize(newSize);
};
children = (React.createElement(Resizable, { enable: resizableDirections, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight, defaultSize: size, onResizeStop: onResizeStop, onResizeStart: (e) => {
// in order to prevent focus from being lost
e.preventDefault();
} }, children));
}
return (React.createElement(Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container", style: {
fontSize: 'var(--ab-cmp-select__font-size)',
} }, children));
} },
React.createElement(FieldWrap, { style: { width: '100%', ...props.fieldStyle } },
React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', style: {
width: '100%',
}, pr: props.clearable ? 0 : undefined, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
if (!visible) {
setVisible(true);
}
treeListApi?.focus();
} }),
props.clearable && (React.createElement(SimpleButton, { style: {
visibility: Array.isArray(value) && value.length > 0 ? 'visible' : 'hidden',
}, variant: "text", icon: "close", onClick: () => onChange({ selectedPaths: [] }) }))))));
}