lucid-ui
Version:
A UI component library from AppNexus.
210 lines • 19.8 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SingleSelectDumb = void 0;
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var lodash_1 = __importDefault(require("lodash"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var state_management_1 = require("../../util/state-management");
var reducers = __importStar(require("./SingleSelect.reducers"));
var DropMenu_1 = require("../DropMenu/DropMenu");
var ChevronIcon_1 = __importDefault(require("../Icon/ChevronIcon/ChevronIcon"));
var cx = style_helpers_1.lucidClassNames.bind('&-SingleSelect');
var any = prop_types_1.default.any, bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, number = prop_types_1.default.number, object = prop_types_1.default.object, shape = prop_types_1.default.shape, string = prop_types_1.default.string, oneOfType = prop_types_1.default.oneOfType;
var Placeholder = function (_props) { return null; };
Placeholder.displayName = 'SingleSelect.Placeholder';
Placeholder.peek = {
description: "\n Content this is displayed when nothing is selected.\n ",
};
Placeholder.propName = 'Placeholder';
var Selected = function (_props) { return null; };
Selected.displayName = 'SingleSelect.Option.Selected';
Selected.peek = {
description: "\n Customizes the rendering of the Option when it is selected\n and is displayed instead of the Placeholder.\n ",
};
Selected.propName = 'Selected';
Selected.propTypes = {};
var Option = function (_props) { return null; };
Option.displayName = 'SingleSelect.Option';
Option.peek = {
description: "\n A selectable option in the list.\n ",
};
Option.Selected = Selected;
Option.propName = 'Option';
Option.propTypes = __assign({ Selected: any(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n Customizes the rendering of the Option when it is selected and is\n displayed instead of the Placeholder.\n "], ["\n Customizes the rendering of the Option when it is selected and is\n displayed instead of the Placeholder.\n "]))) }, DropMenu_1.DropMenuDumb.Option.propTypes);
Option.defaultProps = DropMenu_1.DropMenuDumb.Option.defaultProps;
var OptionGroup = function (_props) { return null; };
OptionGroup.displayName = 'SingleSelect.OptionGroup';
OptionGroup.peek = {
description: "\n Groups `Option`s together with a non-selectable heading.\n ",
};
OptionGroup.propName = 'OptionGroup';
OptionGroup.propTypes = DropMenu_1.DropMenuDumb.OptionGroup.propTypes;
OptionGroup.defaultProps = DropMenu_1.DropMenuDumb.OptionGroup.defaultProps;
var defaultProps = {
hasReset: true,
isSelectionHighlighted: true,
isDisabled: false,
isInvisible: false,
selectedIndex: null,
showIcon: true,
DropMenu: DropMenu_1.DropMenuDumb.defaultProps,
};
var SingleSelect = /** @class */ (function (_super) {
__extends(SingleSelect, _super);
function SingleSelect() {
return _super !== null && _super.apply(this, arguments) || this;
}
SingleSelect.prototype.UNSAFE_componentWillMount = function () {
// preprocess the options data before rendering
var _a = DropMenu_1.DropMenuDumb.preprocessOptionData(this.props, SingleSelect), optionGroups = _a.optionGroups, flattenedOptionsData = _a.flattenedOptionsData, ungroupedOptionData = _a.ungroupedOptionData, optionGroupDataLookup = _a.optionGroupDataLookup;
this.setState({
optionGroups: optionGroups,
flattenedOptionsData: flattenedOptionsData,
ungroupedOptionData: ungroupedOptionData,
optionGroupDataLookup: optionGroupDataLookup,
});
};
SingleSelect.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
// only preprocess options data when it changes (via new props) - better performance than doing this each render
var _a = DropMenu_1.DropMenuDumb.preprocessOptionData(nextProps, SingleSelect), optionGroups = _a.optionGroups, flattenedOptionsData = _a.flattenedOptionsData, ungroupedOptionData = _a.ungroupedOptionData, optionGroupDataLookup = _a.optionGroupDataLookup;
this.setState({
optionGroups: optionGroups,
flattenedOptionsData: flattenedOptionsData,
ungroupedOptionData: ungroupedOptionData,
optionGroupDataLookup: optionGroupDataLookup,
});
};
SingleSelect.prototype.render = function () {
var _a = this.props, style = _a.style, className = _a.className, hasReset = _a.hasReset, isDisabled = _a.isDisabled, isInvisible = _a.isInvisible, isSelectionHighlighted = _a.isSelectionHighlighted, selectedIndex = _a.selectedIndex, maxMenuHeight = _a.maxMenuHeight, onSelect = _a.onSelect, showIcon = _a.showIcon, dropMenuProps = _a.DropMenu;
var direction = dropMenuProps.direction, isExpanded = dropMenuProps.isExpanded, flyOutStyle = dropMenuProps.flyOutStyle;
var _b = this.state, optionGroups = _b.optionGroups, optionGroupDataLookup = _b.optionGroupDataLookup, ungroupedOptionData = _b.ungroupedOptionData, flattenedOptionsData = _b.flattenedOptionsData;
var placeholderProps = lodash_1.default.first(lodash_1.default.map(component_types_1.findTypes(this.props, SingleSelect.Placeholder), 'props'));
var placeholder = lodash_1.default.get(placeholderProps, 'children', 'Select');
var isItemSelected = lodash_1.default.isNumber(selectedIndex);
var isHighlighted = (!isDisabled && isItemSelected && isSelectionHighlighted) ||
(isExpanded && isSelectionHighlighted);
var isNullOptionSelected = selectedIndex === null;
return (react_1.default.createElement(DropMenu_1.DropMenuDumb, __assign({}, dropMenuProps, { isDisabled: isDisabled, selectedIndices: lodash_1.default.isNumber(selectedIndex) ? [selectedIndex] : [], className: cx('&', className), onSelect: onSelect, style: style, flyOutStyle: lodash_1.default.assign({}, flyOutStyle, !lodash_1.default.isNil(maxMenuHeight) ? { maxHeight: maxMenuHeight } : null), ContextMenu: { directonOffset: isNullOptionSelected ? -1 : 0 } }),
react_1.default.createElement(DropMenu_1.DropMenuDumb.Control, null,
react_1.default.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,
}) },
react_1.default.createElement("span", __assign({}, (!isItemSelected ? placeholderProps : null), { className: cx('&-Control-content', !isItemSelected ? lodash_1.default.get(placeholderProps, 'className') : null) }), isItemSelected
? lodash_1.default.get(component_types_1.getFirst(flattenedOptionsData[selectedIndex].optionProps, SingleSelect.Option.Selected), 'props.children') ||
flattenedOptionsData[selectedIndex].optionProps
.children
: placeholder),
showIcon && (react_1.default.createElement(ChevronIcon_1.default, { size: 12, direction: isExpanded ? direction : 'down' })))),
hasReset && isItemSelected ? (react_1.default.createElement(DropMenu_1.DropMenuDumb.NullOption, __assign({}, placeholderProps), placeholder)) : null,
// for each option group passed in, render a DropMenu.OptionGroup, any label will be included in it's children, render each option inside the group
lodash_1.default.map(optionGroups, function (optionGroupProps, optionGroupIndex) { return (react_1.default.createElement(DropMenu_1.DropMenuDumb.OptionGroup, __assign({ key: 'SingleSelectOptionGroup' + optionGroupIndex }, optionGroupProps),
optionGroupProps.children,
lodash_1.default.map(lodash_1.default.get(optionGroupDataLookup, optionGroupIndex), function (_a) {
var optionProps = _a.optionProps, optionIndex = _a.optionIndex;
return (react_1.default.createElement(DropMenu_1.DropMenuDumb.Option, __assign({ key: 'SingleSelectOption' + optionIndex }, lodash_1.default.omit(optionProps, 'Selected'))));
}))); }).concat(
// then render all the ungrouped options at the end
lodash_1.default.map(ungroupedOptionData, function (_a) {
var optionProps = _a.optionProps, optionIndex = _a.optionIndex;
return (react_1.default.createElement(DropMenu_1.DropMenuDumb.Option, __assign({ key: 'SingleSelectOption' + optionIndex }, lodash_1.default.omit(optionProps, 'Selected'))));
}))));
};
SingleSelect.displayName = 'SingleSelect';
SingleSelect.peek = {
description: "\n\t\t\t\t`SingleSelect` is a dropdown list. \n\t\t\t\t",
notes: {
overview: "\n\t\t\t\t\t\tA dropdown list. When you click on the trigger a dropdown menu appears, allows you to choose one option, and execute relevant actions.\n\t\t\t\t\t",
intendedUse: "\n\t\t\t\t\t\tAllow users to select one option from a list of 3-10 options.\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t**Styling notes**\n\t\t\t\t\t\t\n\t\t\t\t\t\t- Use the default style in forms. The blue outline helps users clearly see that a selection has been made.\n\t\t\t\t\t\t- Use `isSelectedHighlighted='false'` if the default selection is All or a null state. See the `no selection highlighting` example.\n\t\t\t\t\t\t- Use `isInvisible` for filters within a full page table header. See the `invisible` example.\n\t\t\t\t\t",
technicalRecommendations: "\n\t\t\t\t\t",
},
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_1.DropMenuDumb.NullOption;
SingleSelect.FixedOption = DropMenu_1.DropMenuDumb.FixedOption;
SingleSelect.propTypes = {
children: node(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n Should be instances of: `SingleSelect.Placeholder`,\n `SingleSelect.Option`, `SingleSelect.OptionGroup`. Other direct\n child elements will not render.\n "], ["\n Should be instances of: \\`SingleSelect.Placeholder\\`,\n \\`SingleSelect.Option\\`, \\`SingleSelect.OptionGroup\\`. Other direct\n child elements will not render.\n "]))),
className: string(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n Appended to the component-specific class names set on the root elements.\n Applies to *both* the control and the flyout menu.\n "], ["\n Appended to the component-specific class names set on the root elements.\n Applies to *both* the control and the flyout menu.\n "]))),
style: object(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n Styles that are passed through to root element.\n "], ["\n Styles that are passed through to root element.\n "]))),
isSelectionHighlighted: bool(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n Applies primary color styling to the control when an item is selected.\n "], ["\n Applies primary color styling to the control when an item is selected.\n "]))),
hasReset: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n Allows user to reset the `optionIndex` to `null` if they select the\n placeholder at the top of the options list. If `false`, it will not\n render the placeholder in the menu.\n "], ["\n Allows user to reset the \\`optionIndex\\` to \\`null\\` if they select the\n placeholder at the top of the options list. If \\`false\\`, it will not\n render the placeholder in the menu.\n "]))),
isDisabled: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n Disables the `SingleSelect` from being clicked or focused.\n "], ["\n Disables the \\`SingleSelect\\` from being clicked or focused.\n "]))),
isInvisible: bool(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n Gives the effect of an 'invisible button'. Essentially, there is no grey border,\n but there is still a blue border on a selection.\n "], ["\n Gives the effect of an 'invisible button'. Essentially, there is no grey border,\n but there is still a blue border on a selection.\n "]))),
selectedIndex: number(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n The currently selected `SingleSelect.Option` index or `null` if\n nothing is selected.\n "], ["\n The currently selected \\`SingleSelect.Option\\` index or \\`null\\` if\n nothing is selected.\n "]))),
maxMenuHeight: oneOfType([number, string])(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n The max height of the fly-out menu.\n "], ["\n The max height of the fly-out menu.\n "]))),
showIcon: bool(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\t\t\t\tShow or hide the dropndown icon\n\t\t\t\t"], ["\n\t\t\t\t\t\tShow or hide the dropndown icon\n\t\t\t\t"]))),
DropMenu: shape(DropMenu_1.DropMenuDumb.propTypes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n Object of `DropMenu` props which are passed thru to the underlying `DropMenu`\n component.\n "], ["\n Object of \\`DropMenu\\` props which are passed thru to the underlying \\`DropMenu\\`\n component.\n "]))),
onSelect: func(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n Called when an option is selected. Has the signature `(optionIndex,\n {props, event}) => {}` where `optionIndex` is the new\n `selectedIndex` or `null` and `props` are the `props` for the\n selected `Option`.\n "], ["\n Called when an option is selected. Has the signature \\`(optionIndex,\n {props, event}) => {}\\` where \\`optionIndex\\` is the new\n \\`selectedIndex\\` or \\`null\\` and \\`props\\` are the \\`props\\` for the\n selected \\`Option\\`.\n "]))),
Placeholder: any(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n *Child Element* - The content rendered in the control when there is no\n option is selected. Also rendered in the option list to remove current\n selection.\n "], ["\n *Child Element* - The content rendered in the control when there is no\n option is selected. Also rendered in the option list to remove current\n selection.\n "]))),
Option: any(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n *Child Element* - These are menu options. The `optionIndex` is in-order\n of rendering regardless of group nesting, starting with index `0`.\n Each `Option` may be passed a prop called `isDisabled` to disable\n selection of that `Option`. Any other props pass to Option will be\n available from the `onSelect` handler.\n "], ["\n *Child Element* - These are menu options. The \\`optionIndex\\` is in-order\n of rendering regardless of group nesting, starting with index \\`0\\`.\n Each \\`Option\\` may be passed a prop called \\`isDisabled\\` to disable\n selection of that \\`Option\\`. Any other props pass to Option will be\n available from the \\`onSelect\\` handler.\n "]))),
OptionGroup: any(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n *Child Element* - Used to group `Option`s within the menu. Any\n non-`Option`s passed in will be rendered as a label for the group.\n "], ["\n *Child Element* - Used to group \\`Option\\`s within the menu. Any\n non-\\`Option\\`s passed in will be rendered as a label for the group.\n "]))),
};
return SingleSelect;
}(react_1.default.Component));
exports.SingleSelectDumb = SingleSelect;
exports.default = state_management_1.buildModernHybridComponent(SingleSelect, { reducers: reducers });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
//# sourceMappingURL=SingleSelect.js.map