@sap-ux/ui-components
Version:
SAP UI Components Library
173 lines • 8.21 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UICreateSelect = void 0;
const react_1 = __importDefault(require("react"));
const react_select_1 = require("react-select");
const creatable_1 = __importDefault(require("react-select/creatable"));
const UIIcon_1 = require("../UIIcon");
const UILoader_1 = require("../UILoader");
const UIContextualMenu_1 = require("../UIContextualMenu");
require("./UICreateSelect.scss");
const UIInput_1 = require("../UIInput");
/**
* Return a custom dropdown indicator component to be used in the select component.
*
* @param {DropdownIndicatorProps<UICreateSelectOptionEntry>} props
* @returns {JSX.Element}
*/
const DropdownIndicator = (props) => {
return (react_1.default.createElement(react_select_1.components.DropdownIndicator, { ...props },
react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-dropdown", iconName: "ArrowDown" })));
};
/**
* Return a custom clear indicator component to be used in the select component.
*
* @param {ClearIndicatorProps<UICreateSelectOptionEntry, true>} props
* @returns {JSX.Element}
*/
const ClearIndicator = (props) => {
return (react_1.default.createElement(react_select_1.components.ClearIndicator, { ...props },
react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-clear", iconName: "Clear" })));
};
/**
* Return a custom loading indicator component to be used in the select component.
*
* @param {LoadingIndicatorProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} _props
* @returns {JSX.Element}
*/
const LoadingIndicator = (_props) => {
return (react_1.default.createElement("div", { className: "ui-create-select-indicator-loading" },
react_1.default.createElement(UILoader_1.UILoader, { className: "uiLoaderXSmall", labelPosition: "right" })));
};
/**
* Return a custom option component to be used in the select component.
*
* @param {OptionProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} props
* @returns {JSX.Element}
*/
const Option = (props) => {
return (react_1.default.createElement(react_1.default.Fragment, null,
!props?.data?.__isNew__ && (react_1.default.createElement(react_select_1.components.Option, { ...props },
react_1.default.createElement(UIContextualMenu_1.UIHighlightMenuOption, { text: props?.data?.label, query: props?.selectProps?.inputValue }))),
props?.data?.__isNew__ && react_1.default.createElement(react_select_1.components.Option, { ...props })));
};
const getBackgroundColor = (state) => {
let backgroundColor = 'transparent';
if (state.isSelected) {
backgroundColor =
'var(--vscode-editorSuggestWidget-selectedBackground, var(--vscode-quickInputList-focusBackground))';
}
if (state.isFocused && !state.isSelected) {
backgroundColor = 'var(--vscode-list-hoverBackground)';
}
return backgroundColor;
};
/**
* Return a UICreateSelect component.
*
* @param {CreatableProps} props to be passed to the component.
* @returns {JSX.Element}
*/
const UICreateSelect = (props) => {
const formatCreateLabel = (inputValue) => `${props.createText}: ${inputValue}`;
return (react_1.default.createElement(creatable_1.default, { ...props, ref: props.creatableRef, className: "ui-create-select", classNamePrefix: "ui-create-select", openMenuOnFocus: false, createOptionPosition: "first", allowCreateWhileLoading: true, formatOptionLabel: (option) => option.label, formatCreateLabel: formatCreateLabel, components: { ClearIndicator, DropdownIndicator, LoadingIndicator, Option }, unstyled: true, styles: {
control: (baseStyles, state) => ({
...baseStyles,
background: 'var(--vscode-input-background)',
height: '26px',
maxHeight: '26px',
minHeight: '26px',
padding: '0px 0px 0px 8px;',
boxShadow: 'none',
boxSizing: 'border-box',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: state.isFocused ? 'var(--vscode-focusBorder)' : 'var(--vscode-editorWidget-border)',
color: 'var(--vscode-input-foreground)',
borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
'&:hover': {
borderColor: 'var(--vscode-focusBorder)'
}
}),
input: (baseStyles, _state) => ({
...baseStyles,
color: 'var(--vscode-input-foreground)',
background: 'transparent',
fontFamily: 'var(--vscode-font-family)',
fontSize: '13px',
fontWeight: 'normal',
minHeight: 'unset',
padding: '1px 0px 1px 1px',
outline: 0
}),
menu: (baseStyles, _state) => ({
...baseStyles,
background: 'var(--vscode-menu-background, var(--vscode-input-background))',
border: '1px solid var(--vscode-focusBorder)',
boxSizing: 'border-box',
margin: '0px',
borderRadius: 0
}),
option: (baseStyles, state) => ({
...baseStyles,
fontFamily: 'var(--vscode-font-family)',
fontWeight: 'var(--vscode-font-weight)',
minHeight: '22px',
height: '22px',
lineHeight: '22px',
color: state.isSelected
? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
: 'var(--vscode-editorSuggestWidget-foreground)',
backgroundColor: getBackgroundColor(state),
letterSpacing: 'normal',
border: '0',
padding: '0px 8px',
fontSize: '13px',
'&:hover': {
backgroundColor: !state.isSelected
? 'var(--vscode-list-hoverBackground)'
: getBackgroundColor(state),
color: state.isSelected
? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
: 'var(--vscode-editorSuggestWidget-foreground)',
cursor: 'pointer'
}
}),
placeholder: (baseStyles, _state) => ({
...baseStyles,
fontSize: '13px',
fontWeight: 'normal',
fontFamily: 'var(--vscode-font-family)',
color: 'var(--vscode-input-placeholderForeground)'
}),
singleValue: (baseStyles, _state) => ({
...baseStyles,
color: 'var(--vscode-input-foreground)',
background: 'transparent',
fontFamily: 'var(--vscode-font-family)',
fontSize: '13px',
fontWeight: 'normal',
minHeight: 'unset',
padding: '1px 0px 1px 1px',
outline: 0
}),
valueContainer: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
indicatorsContainer: (baseStyles, _state) => ({
...baseStyles,
padding: '0px 5px 0px 0px',
cursor: 'pointer'
}),
indicatorSeparator: (baseStyles, _state) => ({ ...baseStyles, display: 'none' }),
dropdownIndicator: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
clearIndicator: (baseStyles, _state) => ({
...baseStyles,
padding: '0px',
cursor: 'pointer'
})
} }));
};
exports.UICreateSelect = UICreateSelect;
//# sourceMappingURL=UICreateSelect.js.map