lucid-ui
Version:
A UI component library from Xandr.
233 lines (231 loc) • 10.8 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, getFirst } from '../../util/component-types';
import { buildModernHybridComponent } from '../../util/state-management';
import * as reducers from './SingleSelect.reducers';
import { DropMenuDumb as DropMenu, } from '../DropMenu/DropMenu';
import ChevronIcon from '../Icon/ChevronIcon/ChevronIcon';
const cx = lucidClassNames.bind('&-SingleSelect');
const { any, bool, func, node, number, object, shape, string, oneOfType } = PropTypes;
const Placeholder = (_props) => null;
Placeholder.displayName = 'SingleSelect.Placeholder';
Placeholder.peek = {
description: `Content this is displayed when nothing is selected.`,
};
Placeholder.propName = 'Placeholder';
const Selected = (_props) => null;
Selected.displayName = 'SingleSelect.Option.Selected';
Selected.peek = {
description: `Customizes the rendering of the Option when it is selected and is displayed instead of the Placeholder.`,
};
Selected.propName = 'Selected';
Selected.propTypes = {};
const Option = (_props) => null;
Option.displayName = 'SingleSelect.Option';
Option.peek = {
description: `
A selectable option in the list.
`,
};
Option.Selected = Selected;
Option.propName = 'Option';
Option.propTypes = {
/**
Customizes the rendering of the Option when it is selected and is
displayed instead of the Placeholder.
*/
Selected: any,
...DropMenu.Option.propTypes,
};
Option.defaultProps = DropMenu.Option.defaultProps;
const OptionGroup = (_props) => null;
OptionGroup.displayName = 'SingleSelect.OptionGroup';
OptionGroup.peek = {
description: `
Groups \`Option\`s together with a non-selectable heading.
`,
};
OptionGroup.propName = 'OptionGroup';
OptionGroup.propTypes = DropMenu.OptionGroup.propTypes;
OptionGroup.defaultProps = DropMenu.OptionGroup.defaultProps;
const defaultProps = {
hasReset: true,
isSelectionHighlighted: true,
isDisabled: false,
isInvisible: false,
selectedIndex: null,
showIcon: true,
DropMenu: DropMenu.defaultProps,
};
class SingleSelect extends React.Component {
UNSAFE_componentWillMount() {
// preprocess the options data before rendering
const { optionGroups, flattenedOptionsData, ungroupedOptionData, optionGroupDataLookup, } = DropMenu.preprocessOptionData(this.props, SingleSelect);
this.setState({
optionGroups,
flattenedOptionsData,
ungroupedOptionData,
optionGroupDataLookup,
});
}
UNSAFE_componentWillReceiveProps(nextProps) {
// only preprocess options data when it changes (via new props) - better performance than doing this each render
const { optionGroups, flattenedOptionsData, ungroupedOptionData, optionGroupDataLookup, } = DropMenu.preprocessOptionData(nextProps, SingleSelect);
this.setState({
optionGroups,
flattenedOptionsData,
ungroupedOptionData,
optionGroupDataLookup,
});
}
render() {
const { style, className, hasReset, isDisabled, isInvisible, isSelectionHighlighted, selectedIndex, maxMenuHeight, onSelect, showIcon, DropMenu: dropMenuProps, Title, } = this.props;
const { direction, isExpanded, flyOutStyle } = dropMenuProps;
const { optionGroups, optionGroupDataLookup, ungroupedOptionData, flattenedOptionsData, } = this.state;
const placeholderProps = _.first(_.map(findTypes(this.props, SingleSelect.Placeholder), 'props'));
const placeholder = _.get(placeholderProps, 'children', 'Select');
const isItemSelected = _.isNumber(selectedIndex);
const isHighlighted = (!isDisabled && isItemSelected && isSelectionHighlighted) ||
(isExpanded && isSelectionHighlighted);
const isNullOptionSelected = selectedIndex === null;
const title = _.isEmpty(Title) ? null : (React.createElement("span", { className: 'select-title' },
Title,
":"));
return (React.createElement(DropMenu, { ...dropMenuProps, isDisabled: isDisabled, selectedIndices: _.isNumber(selectedIndex) ? [selectedIndex] : [], className: cx('&', className), onSelect: onSelect, style: style, flyOutStyle: _.assign({}, flyOutStyle, !_.isNil(maxMenuHeight) ? { maxHeight: maxMenuHeight } : null), ContextMenu: { directonOffset: isNullOptionSelected ? -1 : 0 } },
React.createElement(DropMenu.Control, null,
React.createElement("div", { tabIndex: 0, className: cx('&-Control', {
'&-Control-is-highlighted': isHighlighted,
'&-Control-is-selected': isHighlighted,
'&-Control-is-expanded': isExpanded,
'&-Control-is-disabled': isDisabled,
'&-Control-is-invisible': isInvisible,
'&-Control-is-null-option': isNullOptionSelected,
}) },
title,
React.createElement("span", { ...(!isItemSelected ? placeholderProps : null), className: cx('&-Control-content', !isItemSelected ? _.get(placeholderProps, 'className') : null) }, isItemSelected
? _.get(getFirst(flattenedOptionsData[selectedIndex].optionProps, SingleSelect.Option.Selected), 'props.children') ||
flattenedOptionsData[selectedIndex].optionProps
.children
: placeholder),
showIcon && (React.createElement(ChevronIcon, { size: 12, direction: isExpanded ? direction : 'down' })))),
hasReset && isItemSelected ? (React.createElement(DropMenu.NullOption, { ...placeholderProps }, placeholder)) : null,
_.map(optionGroups, (optionGroupProps, optionGroupIndex) => (React.createElement(DropMenu.OptionGroup, { key: 'SingleSelectOptionGroup' + optionGroupIndex, ...optionGroupProps },
optionGroupProps.children,
_.map(_.get(optionGroupDataLookup, optionGroupIndex), ({ optionProps, optionIndex }) => (React.createElement(DropMenu.Option, { key: 'SingleSelectOption' + optionIndex, ..._.omit(optionProps, 'Selected') })))))).concat(
// then render all the ungrouped options at the end
_.map(ungroupedOptionData, ({ optionProps, optionIndex }) => (React.createElement(DropMenu.Option, { key: 'SingleSelectOption' + optionIndex, ..._.omit(optionProps, 'Selected') }))))));
}
}
SingleSelect.displayName = 'SingleSelect';
SingleSelect.peek = {
description: `\`SingleSelect\` is a dropdown list.`,
notes: {
overview: `
A dropdown list. When you click on the trigger a dropdown menu appears, allows you to choose one option, and execute relevant actions.
`,
intendedUse: `
Allow users to select one option from a list of 3-10 options.
**Styling notes**
- Use the default style in forms. The blue outline helps users clearly see that a selection has been made.
- Use \`isSelectedHighlighted='false'\` if the default selection is All or a null state. See the \`no selection highlighting\` example.
- Use \`isInvisible\` for filters within a full page table header. See the \`invisible\` example.
`,
technicalRecommendations: `
`,
},
categories: ['controls', 'selectors'],
madeFrom: ['DropMenu'],
};
SingleSelect.defaultProps = defaultProps;
SingleSelect.reducers = reducers;
SingleSelect.Placeholder = Placeholder;
SingleSelect.Option = Option;
SingleSelect.Selected = Selected;
SingleSelect.OptionGroup = OptionGroup;
SingleSelect.NullOption = DropMenu.NullOption;
SingleSelect.FixedOption = DropMenu.FixedOption;
SingleSelect.propTypes = {
/**
Should be instances of: \`SingleSelect.Placeholder\`,
\`SingleSelect.Option\`, \`SingleSelect.OptionGroup\`. Other direct
child elements will not render.
*/
children: node,
className: string /**
Appended to the component-specific class names set on the root elements.
Applies to *both* the control and the flyout menu.
*/,
/**
Styles that are passed through to root element.
*/
style: object,
/**
Applies primary color styling to the control when an item is selected.
*/
isSelectionHighlighted: bool,
/**
Allows user to reset the \`optionIndex\` to \`null\` if they select the
placeholder at the top of the options list. If \`false\`, it will not
render the placeholder in the menu.
*/
hasReset: bool,
/**
Disables the \`SingleSelect\` from being clicked or focused.
*/
isDisabled: bool,
/**
Gives the effect of an 'invisible button'. Essentially, there is no grey border,
but there is still a blue border on a selection.
*/
isInvisible: bool,
/**
The currently selected \`SingleSelect.Option\` index or \`null\` if
nothing is selected.
*/
selectedIndex: number,
/**
The max height of the fly-out menu.
*/
maxMenuHeight: oneOfType([number, string]),
/**
Show or hide the dropndown icon
*/
showIcon: bool,
/**
Object of \`DropMenu\` props which are passed thru to the underlying \`DropMenu\`
component.
*/
DropMenu: shape(DropMenu.propTypes),
/**
Called when an option is selected. Has the signature \`(optionIndex,
{props, event}) => {}\` where \`optionIndex\` is the new
\`selectedIndex\` or \`null\` and \`props\` are the \`props\` for the
selected \`Option\`.
*/
onSelect: func,
Placeholder: any /**
*Child Element* - The content rendered in the control when there is no
option is selected. Also rendered in the option list to remove current
selection.
*/,
Option: any /**
*Child Element* - A drop menu option. The \`optionIndex\` is in-order
of rendering regardless of group nesting, starting with index \`0\`.
Each \`Option\` may be passed a prop called \`isDisabled\` to disable
selection of that \`Option\`. Any other props pass to Option will be
available from the \`onSelect\` handler.
*/,
OptionGroup: any /**
*Child Element* - Used to group \`Option\`s within the menu. Any
non-\`Option\`s passed in will be rendered as a label for the group.
*/,
/**
Optional Title.
*/
Title: string,
};
export default buildModernHybridComponent(SingleSelect, { reducers });
export { SingleSelect as SingleSelectDumb };
//# sourceMappingURL=SingleSelect.js.map