@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
216 lines • 10.9 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;
};
import { jsx as _jsx, jsxs as _jsxs } from "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/>.
*/
import { tokens } from '@neo4j-ndl/base';
import { components, } from 'react-select';
import { classNames } from '../_common/defaultImports';
import { Checkbox } from '../checkbox';
import { ChevronDownIconOutline, XMarkIconOutline } from '../icons';
import { Tag } from '../tag';
import { useNeedleTheme } from '../theme';
export const DropdownIndicatorCurrying = ({ size, }) => function Component(props) {
const classes = 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 (_jsx(components.DropdownIndicator, Object.assign({}, props, { className: classes, children: _jsx(ChevronDownIconOutline, { className: "ndl-select-icon", style: {
transform: props.selectProps.menuIsOpen
? 'rotate(180deg)'
: 'rotate(0deg)',
transitionDuration: tokens.transitions.values.duration.quick,
} }) })));
};
export const CustomClearIndication = ({ size, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = 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 (_jsx(components.ClearIndicator, Object.assign({}, restProps, { className: classes, children: _jsxs("div", { children: [_jsx(XMarkIconOutline, {}), _jsx("div", { className: "ndl-select-divider" })] }) })));
};
export const CustomMultiValue = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 (_jsx(components.MultiValueContainer, Object.assign({}, restProps, { children: _jsx("div", { className: classes, children: _jsx(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 }) }) })));
};
export const CustomPlaceholder = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 (_jsx(components.Placeholder, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomControl = ({ size, hasBorder, errorText, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 (_jsx(components.Control, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomIndicatorsContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 (_jsx(components.IndicatorsContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomValueContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 (_jsx(components.ValueContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomInput = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 _jsx(components.Input, Object.assign({}, restProps, { className: classes }));
};
export const CustomSingleValue = ({ size, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = 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 _jsx(components.SingleValue, Object.assign({}, restProps, { className: classes }));
};
/** Overrides that are part of the popover menu */
export const CustomMenu = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { themeClassName } = useNeedleTheme();
const classes = classNames('ndl-select-menu', className, themeClassName, {
'ndl-is-multi': restProps.isMulti,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return (_jsx(components.Menu, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomMenuPortal = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames(className, 'ndl-select-menu-portal', {
'ndl-is-multi': restProps.isMulti,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return (_jsx(components.MenuPortal, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomMenuList = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames(className, 'ndl-select-menu-list', {
'ndl-is-multi': restProps.isMulti,
'ndl-small': size === 'small',
'ndl-medium': size === 'medium',
'ndl-large': size === 'large',
});
return (_jsx(components.MenuList, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomOption = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = 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 (_jsxs(components.Option, Object.assign({}, restProps, { className: classes, children: [restProps.isMulti === true && (_jsx(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] })));
};
//# sourceMappingURL=Overrides.js.map