baseui
Version:
A React Component library implementing the Base design language
198 lines (196 loc) • 7.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = require("./styled-components");
var _menu = require("../menu");
var _overrides = require("../helpers/overrides");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
function groupOptions(options) {
return options.reduce((groups, option) => {
if (option.__optgroup) {
if (!groups[option.__optgroup]) {
// @ts-expect-error todo(flow->ts): modifying what is declared as readonly array
groups[option.__optgroup] = [];
}
groups[option.__optgroup].push(option);
} else {
groups.__ungrouped.push(option);
}
return groups;
}, {
__ungrouped: []
});
}
class SelectDropdown extends React.Component {
constructor(...args) {
super(...args);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_defineProperty(this, "getItemLabel", option => {
const {
getOptionLabel,
overrides = {},
value,
valueKey
} = this.props;
const [OptionContent, optionContentProps] = (0, _overrides.getOverrides)(overrides.OptionContent, _styledComponents.StyledOptionContent);
let $selected;
if (Array.isArray(value)) {
$selected = !!value.find(selected => selected && selected[valueKey] === option[valueKey]);
} else {
// @ts-ignore
$selected = value[valueKey] === option[valueKey];
}
const optionSharedProps = {
$selected,
$disabled: option.disabled,
$isHighlighted: option.isHighlighted
};
return /*#__PURE__*/React.createElement(OptionContent, _extends({
"aria-readonly": option.disabled,
"aria-selected": $selected,
key: option[valueKey]
}, this.getSharedProps(), optionSharedProps, optionContentProps), getOptionLabel({
option,
optionState: optionSharedProps
}));
});
_defineProperty(this, "onMouseDown", e => {
e.nativeEvent.stopImmediatePropagation();
});
_defineProperty(this, "getHighlightedIndex", () => {
const {
value,
options,
valueKey
} = this.props;
// Highlight only first value as menu supports only a single highlight index
let firstValue = {};
if (Array.isArray(value) && value.length > 0) {
firstValue = value[0];
} else if (!(value instanceof Array)) {
firstValue = value;
}
if (Object.keys(firstValue).length > 0) {
const a = options.findIndex(option => option && option[valueKey] === firstValue[valueKey]);
return a === -1 ? 0 : a;
}
return 0;
});
}
getSharedProps() {
const {
error,
isLoading,
multi,
required,
size,
searchable,
type,
width
} = this.props;
return {
$error: error,
$isLoading: isLoading,
$multi: multi,
$required: required,
$searchable: searchable,
$size: size,
$type: type,
$width: width
};
}
render() {
// TODO(#185) Add no-results and loading states to menu
const {
maxDropdownHeight,
multi,
noResultsMsg,
onItemSelect,
options = [],
overrides = {},
size
} = this.props;
const [DropdownContainer, dropdownContainerProps] = (0, _overrides.getOverrides)(overrides.DropdownContainer, _styledComponents.StyledDropdownContainer);
const [ListItem, listItemProps] = (0, _overrides.getOverrides)(overrides.DropdownListItem, _styledComponents.StyledDropdownListItem);
const [OverriddenStatefulMenu, {
overrides: statefulMenuOverrides = {},
...restStatefulMenuProps
}] = (0, _overrides.getOverrides)(overrides.StatefulMenu, _menu.StatefulMenu);
const highlightedIndex = this.getHighlightedIndex();
const groupedOptions = groupOptions(options);
return /*#__PURE__*/React.createElement(DropdownContainer, _extends({
"data-no-focus-lock": true,
ref: this.props.innerRef
}, this.getSharedProps(), dropdownContainerProps), /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
noResultsMsg: noResultsMsg
// @ts-ignore
,
onActiveDescendantChange: id => {
if (this.props.onActiveDescendantChange) {
this.props.onActiveDescendantChange(id);
}
},
onItemSelect: onItemSelect,
items: groupedOptions,
size: size,
initialState: {
isFocused: true,
highlightedIndex: highlightedIndex
},
typeAhead: false,
keyboardControlNode: this.props.keyboardControlNode,
forceHighlight: true,
overrides: (0, _overrides.mergeOverrides)({
List: {
component: _styledComponents.StyledDropdown,
style: p => ({
maxHeight: p.$maxHeight || null
}),
props: {
id: this.props.id ? this.props.id : null,
$maxHeight: maxDropdownHeight,
'aria-multiselectable': multi
}
},
Option: {
props: {
getItemLabel: this.getItemLabel,
// figure out why the onClick handler is not
// triggered without this temporary fix
onMouseDown: this.onMouseDown,
overrides: {
ListItem: {
component: ListItem,
props: {
...listItemProps,
role: 'option'
},
// slightly hacky way to handle the list item style overrides
// since the menu component doesn't provide a top level overrides for it
style: listItemProps.$style
}
},
renderHrefAsAnchor: false
}
}
}, {
List: overrides.Dropdown || {},
Option: overrides.DropdownOption || {},
...statefulMenuOverrides
})
}, restStatefulMenuProps)));
}
}
exports.default = SelectDropdown;