@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
110 lines (109 loc) • 4.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
const Arrows_1 = tslib_1.__importDefault(require("./Arrows"));
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const baseClassName = 'ab-Dropdown';
const Dropdown = (props) => {
let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand, ...boxProps } = props;
if (showClearButton !== false) {
showClearButton = true;
}
let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
onChange: props.onChange,
});
let selectedOption = null;
let [lazyOptions, setLazyOptions] = (0, react_1.useState)([]);
let onMouseDown = () => {
if (onExpand) {
onExpand();
}
};
if (typeof options === 'function') {
const lazyOptionsFn = options;
onMouseDown = () => {
const newOptions = lazyOptionsFn();
setLazyOptions(newOptions);
if (onExpand) {
onExpand();
}
};
options = lazyOptions;
}
let placeholder = props.emptyText || props.placeholder || 'Select an option';
const finalOptions = options.map((option) => {
if (typeof option === 'string') {
option = {
label: option,
value: option,
};
}
if (value === option.value) {
selectedOption = option;
}
return option;
});
if (showEmptyItem)
finalOptions.splice(0, 0, {
label: placeholder,
value: '',
});
const onChange = (option, e) => {
setValue(option ? option.value : option, e, option);
};
const selectRef = (0, react_1.useRef)(null);
const domRef = (0, react_1.useRef)(null);
const [focused, setFocused] = (0, react_1.useState)(false);
const onFocus = (e) => {
if (e.target === selectRef.current) {
setFocused(true);
return;
}
if (e.target === domRef.current) {
selectRef.current.focus();
}
};
const onBlur = () => {
setFocused(false);
};
const defaultLabel = selectedOption ? selectedOption.label : null;
let selectedText = props.renderLabel
? props.renderLabel(defaultLabel, selectedOption)
: defaultLabel;
if (!selectedOption) {
selectedText = placeholder;
}
//20 ... 20 16
const renderClearButton = () => (React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1, ...clearButtonProps, style: {
zIndex: 10,
color: 'inherit',
...(clearButtonProps ? clearButtonProps.style : null),
}, onClick: (e) => {
e.preventDefault();
onChange(null, e);
} }));
return (React.createElement(rebass_1.Flex, { ref: domRef, flexDirection: "row", alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
React.createElement("div", { style: { display: 'inline-block' }, className: `${baseClassName}__text` },
selectedText,
React.createElement(Arrows_1.default, null)),
React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
onChange(selected, e);
}, style: {
opacity: 0,
width: '100%',
height: '100%',
top: 0,
left: 0,
zIndex: 1,
}, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus }, finalOptions.map((o) => {
return (React.createElement("option", { key: o.value, value: o.value }, o.label));
})),
showClearButton && selectedOption ? renderClearButton() : null));
};
exports.default = Dropdown;