@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
136 lines • 8.18 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const react_select_1 = __importDefault(require("react-select"));
const async_1 = __importDefault(require("react-select/async"));
/** Different types of select components */
const creatable_1 = __importDefault(require("react-select/creatable"));
const utils_1 = require("../_common/utils");
const dialog_context_1 = require("../dialog/dialog-context");
const icons_1 = require("../icons");
const Overrides_1 = require("./Overrides");
/**
*
*
* Helpers
*
*
*/
const overrideComponents = (props) => ({
ClearIndicator: (0, Overrides_1.CustomClearIndication)(props),
Control: (0, Overrides_1.CustomControl)(props),
DropdownIndicator: (0, Overrides_1.DropdownIndicatorCurrying)(props),
IndicatorSeparator: null,
IndicatorsContainer: (0, Overrides_1.CustomIndicatorsContainer)(props),
Input: (0, Overrides_1.CustomInput)(props),
Menu: (0, Overrides_1.CustomMenu)(props),
MenuList: (0, Overrides_1.CustomMenuList)(props),
MenuPortal: (0, Overrides_1.CustomMenuPortal)(props),
MultiValue: (0, Overrides_1.CustomMultiValue)(props),
Option: (0, Overrides_1.CustomOption)(props),
Placeholder: (0, Overrides_1.CustomPlaceholder)(props),
SingleValue: (0, Overrides_1.CustomSingleValue)(props),
ValueContainer: (0, Overrides_1.CustomValueContainer)(props),
});
const customStyles = () => {
return {
clearIndicator: () => ({}),
control: () => ({}),
dropdownIndicator: () => ({}),
indicatorsContainer: () => ({}),
input: () => ({}),
menu: (provided) => ({
bottom: provided.bottom,
top: provided.top,
}),
menuList: (provided) => ({
maxHeight: provided.maxHeight,
minHeight: provided.minHeight,
}),
option: () => ({}),
placeholder: () => ({}),
singleValue: () => ({}),
valueContainer: (provided) => (Object.assign(Object.assign({}, provided), { padding: '0' })),
};
};
const Select = (_a) => {
var _b, _c, _d;
var { as, label, helpText, errorText, isFluid = true, size = 'medium', type = 'select', ariaLabel, selectProps = {}, isClean = false, isDisabled, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["as", "label", "helpText", "errorText", "isFluid", "size", "type", "ariaLabel", "selectProps", "isClean", "isDisabled", "htmlAttributes", "className", "style", "ref"]);
const isInsideDialog = (0, dialog_context_1.useIsInsideDialog)();
const menuPosition = isInsideDialog ? 'fixed' : 'absolute';
const identifier = (0, react_1.useId)();
const Component = as !== null && as !== void 0 ? as : 'div';
const ComponentOverrides = (0, react_1.useMemo)(() => overrideComponents({
errorText,
isClean,
size,
}), [errorText, size, isClean]);
const StyleOverrides = (0, react_1.useMemo)(() => customStyles(), []);
(0, react_1.useEffect)(() => {
if (label === undefined && ariaLabel === undefined) {
(0, utils_1.needleWarningMessage)('A Select needs to have a label or an aria label to be accessible. link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
}
}, [label, ariaLabel]);
let SelectElement;
switch (type) {
case 'async': {
SelectElement = ((0, jsx_runtime_1.jsx)(async_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel }, selectProps, { menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
break;
}
case 'creatable':
SelectElement = ((0, jsx_runtime_1.jsx)(creatable_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
break;
default:
SelectElement = ((0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
}
const classes = (0, classnames_1.default)('ndl-select', className, {
'ndl-creatable': type === 'creatable',
'ndl-disabled': selectProps.isDisabled,
'ndl-fluid': isFluid,
'ndl-has-error': Boolean(errorText),
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-multi': selectProps.isMulti,
'ndl-small': size === 'small',
});
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [Boolean(label) && (0, jsx_runtime_1.jsx)("label", { htmlFor: identifier, children: label }), SelectElement, Boolean(helpText) && Boolean(errorText) === false && ((0, jsx_runtime_1.jsx)("span", { className: "ndl-sub-text", "aria-disabled": Boolean(isDisabled) || selectProps.isDisabled, children: helpText })), Boolean(errorText) && ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-4 n-items-center", children: [(0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, { className: (0, classnames_1.default)('ndl-error-icon', classes), htmlAttributes: { role: 'img', type: 'solid' } }), (0, jsx_runtime_1.jsx)("span", { className: "ndl-sub-text ndl-error-text", children: errorText })] }))] })));
};
exports.Select = Select;
//# sourceMappingURL=Select.js.map