@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
232 lines • 12.7 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomOption = exports.CustomMenuList = exports.CustomMenuPortal = exports.CustomMenu = exports.CustomSingleValue = exports.CustomInput = exports.CustomValueContainer = exports.CustomIndicatorsContainer = exports.CustomControl = exports.CustomPlaceholder = exports.CustomMultiValue = exports.CustomClearIndication = exports.DropdownIndicatorCurrying = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-unused-vars */
/**
*
* 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 base_1 = require("@neo4j-ndl/base");
const react_select_1 = require("react-select");
const defaultImports_1 = require("../_common/defaultImports");
const checkbox_1 = require("../checkbox");
const icons_1 = require("../icons");
const tag_1 = require("../tag");
const theme_1 = require("../theme");
const DropdownIndicatorCurrying = ({ size, }) => function Component(props) {
const classes = (0, defaultImports_1.classNames)('ndl-select-dropdown-indicator', {
'ndl-is-multi': props.isMulti,
'ndl-disabled': props.isDisabled,
'ndl-focused': props.isFocused,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, Object.assign({}, props, { className: classes, children: (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: "ndl-select-icon", style: {
transform: props.selectProps.menuIsOpen
? 'rotate(180deg)'
: 'rotate(0deg)',
transitionDuration: base_1.tokens.transitions.values.duration.quick,
} }) })));
};
exports.DropdownIndicatorCurrying = DropdownIndicatorCurrying;
const CustomClearIndication = ({ size, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-clear', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-focused': restProps.isFocused,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.ClearIndicator, Object.assign({}, restProps, { className: classes, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}), (0, jsx_runtime_1.jsx)("div", { className: "ndl-select-divider" })] }) })));
};
exports.CustomClearIndication = CustomClearIndication;
const CustomMultiValue = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-multi-value', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MultiValueContainer, Object.assign({}, restProps, { children: (0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsx)(tag_1.Tag, { size: size, isRemovable: true, onRemove: (e) => {
var _a, _b;
e.preventDefault();
(_b = (_a = restProps.removeProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
}, htmlAttributes: {
onMouseDown: (e) => e.preventDefault(),
}, children: children }) }) })));
};
exports.CustomMultiValue = CustomMultiValue;
const CustomPlaceholder = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-placeholder', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.Placeholder, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomPlaceholder = CustomPlaceholder;
const CustomControl = ({ size, hasBorder, errorText, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-control', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
'ndl-has-border': hasBorder,
'ndl-has-error': !!errorText,
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.Control, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomControl = CustomControl;
const CustomIndicatorsContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-indicators-container', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.IndicatorsContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomIndicatorsContainer = CustomIndicatorsContainer;
const CustomValueContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-value-container', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.ValueContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomValueContainer = CustomValueContainer;
const CustomInput = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-input', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, Object.assign({}, restProps, { className: classes }));
};
exports.CustomInput = CustomInput;
const CustomSingleValue = ({ size, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = (0, defaultImports_1.classNames)('ndl-select-single-value', className, {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return (0, jsx_runtime_1.jsx)(react_select_1.components.SingleValue, Object.assign({}, restProps, { className: classes }));
};
exports.CustomSingleValue = CustomSingleValue;
/** Overrides that are part of the popover menu */
const CustomMenu = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { themeClassName } = (0, theme_1.useNeedleTheme)();
const classes = (0, defaultImports_1.classNames)('ndl-select-menu', className, themeClassName, {
'ndl-is-multi': restProps.isMulti,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomMenu = CustomMenu;
const CustomMenuPortal = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)(className, 'ndl-select-menu-portal', {
'ndl-is-multi': restProps.isMulti,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuPortal, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomMenuPortal = CustomMenuPortal;
const CustomMenuList = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)(className, 'ndl-select-menu-list', {
'ndl-is-multi': restProps.isMulti,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomMenuList = CustomMenuList;
const CustomOption = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, defaultImports_1.classNames)(className, 'ndl-select-option', {
'ndl-is-multi': restProps.isMulti,
'ndl-disabled': restProps.isDisabled,
'ndl-selected': restProps.isSelected,
'ndl-focused': restProps.isFocused,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return ((0, jsx_runtime_1.jsxs)(react_select_1.components.Option, Object.assign({}, restProps, { className: classes, children: [restProps.isMulti === true && ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { isChecked: restProps.isSelected, isReadOnly: true, ariaLabel: restProps.label, isDisabled: restProps.isDisabled, htmlAttributes: {
onPointerDown: (e) => {
var _a, _b;
e.preventDefault();
(_b = (_a = restProps.innerProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
},
onTouchStart: (e) => {
var _a, _b;
e.preventDefault();
(_b = (_a = restProps.innerProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
},
disabled: true,
'aria-hidden': true,
role: 'presentation',
tabIndex: -1,
} })), children] })));
};
exports.CustomOption = CustomOption;
//# sourceMappingURL=Overrides.js.map