@sap-ux/ui-components
Version:
SAP UI Components Library
166 lines • 7.68 kB
JavaScript
import React from 'react';
import { components } from 'react-select';
import CreatableSelect from 'react-select/creatable';
import { UIIcon } from '../UIIcon/index.js';
import { UILoader } from '../UILoader/index.js';
import { UIHighlightMenuOption } from '../UIContextualMenu/index.js';
import './UICreateSelect.scss';
import { COMMON_INPUT_STYLES } from '../UIInput/index.js';
/**
* 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.createElement(components.DropdownIndicator, { ...props },
React.createElement(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.createElement(components.ClearIndicator, { ...props },
React.createElement(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.createElement("div", { className: "ui-create-select-indicator-loading" },
React.createElement(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.createElement(React.Fragment, null,
!props?.data?.__isNew__ && (React.createElement(components.Option, { ...props },
React.createElement(UIHighlightMenuOption, { text: props?.data?.label, query: props?.selectProps?.inputValue }))),
props?.data?.__isNew__ && React.createElement(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}
*/
export const UICreateSelect = (props) => {
const formatCreateLabel = (inputValue) => `${props.createText}: ${inputValue}`;
return (React.createElement(CreatableSelect, { ...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: 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'
})
} }));
};
//# sourceMappingURL=UICreateSelect.js.map