lucid-ui
Version:
A UI component library from Xandr.
278 lines • 15.9 kB
JavaScript
"use strict";
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) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
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("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: "Content this is displayed when nothing is selected.",
};
Placeholder.propName = 'Placeholder';
var Selected = function (_props) { return 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 = {};
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({
/**
Customizes the rendering of the Option when it is selected and is
displayed instead of the Placeholder.
*/
Selected: any }, 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, Title = _a.Title;
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((0, 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;
var title = lodash_1.default.isEmpty(Title) ? null : (react_1.default.createElement("span", { className: 'select-title' },
Title,
":"));
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,
}) },
title,
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((0, 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,
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: "`SingleSelect` is a dropdown list.",
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 = {
/**
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_1.DropMenuDumb.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,
};
return SingleSelect;
}(react_1.default.Component));
exports.SingleSelectDumb = SingleSelect;
exports.default = (0, state_management_1.buildModernHybridComponent)(SingleSelect, { reducers: reducers });
//# sourceMappingURL=SingleSelect.js.map