UNPKG

@react-md/form

Version:

This package is for creating all the different form input types.

103 lines 4.14 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.getDisplayLabel = exports.getOptionLabel = exports.getOptionId = exports.defaultIsOptionDisabled = exports.isListboxOptionProps = void 0; var react_1 = require("react"); var icon_1 = require("@react-md/icon"); /** * A type guard that simply checks if the option is considered an object of list * item props. * * @param option - The option to check * @returns true if the option is considered a object of list item props and * will ensure that the option is typed as ListboxOptionProps * @internal */ function isListboxOptionProps(option) { return (option !== "" && option !== 0 && !!option && typeof option === "object"); } exports.isListboxOptionProps = isListboxOptionProps; /** * The default implementation to check if an option is disabled. It will just * check if the option is an object and if it has the disabled prop enabled. * * @param option - The option to check * @returns true if the option is disabled * @internal */ function defaultIsOptionDisabled(option) { return isListboxOptionProps(option) && !!option.disabled; } exports.defaultIsOptionDisabled = defaultIsOptionDisabled; /** * The default way to generate a "unique" id for each option within the listbox * by concatenating the current index with a base id. * * Note: The index will be incremented by 1 so the ids start from 1 instead of * 0. This is so that it matches how paginated results work with `aria-posinset` * + `aria-setsize`. * * @param baseId - The base id of the listbox. * @param index - The current index of the option * @returns a "unique" id for the option */ function getOptionId(baseId, index) { return "".concat(baseId, "-option-").concat(index + 1); } exports.getOptionId = getOptionId; /** * A function that will get the label for an option. The default behavior is to * check if the option is an object. If it is, it'll use the `labelKey` property * and fallback to the `children` property. If it is anything else, the option * itself will be returned. * * This is used in both the select's button element to show the current value as * well as rendering each option within the listbox component. * * @param option - The option that should be converted into a renderable label * element. * @param labelKey - The object key to use to extract the label from an option * object. * @returns a renderable label to display. */ function getOptionLabel(option, labelKey) { if (isListboxOptionProps(option)) { if (typeof option.children !== "undefined") { return option.children; } var label = option[labelKey]; return typeof label === "undefined" ? null : label; } return option; } exports.getOptionLabel = getOptionLabel; /** * A function that will get the display value for the `Select` field based on * the current selected option. The default behavior will be to return null if * an option is not currently selected so the placeholder text can be shown * instead. If there is an option selected, it will: * - get the option's label using the general `getOptionLabel` util * - check if includeLeft is enabled and the option is an object with * `leftAddon` * - if there is a `leftAddon`, use the `TextIconSpacing` of * the label + the icon or avatar. * * @param option - The option to get a display label for * @param labelKey - The key to use to extract a label from the option when it * is an object * @param includeLeft - Boolean if a `leftAddon` should be added with * `TextIconSpacing` to the result. * @returns A renderable node to display in a `Select` field. */ function getDisplayLabel(option, labelKey, includeLeft) { if (!option && option !== 0) { return null; } var label = getOptionLabel(option, labelKey); if (!includeLeft || !isListboxOptionProps(option)) { return label; } var leftAddon = option.leftAddon; return (0, react_1.createElement)(icon_1.TextIconSpacing, { icon: leftAddon }, label); } exports.getDisplayLabel = getDisplayLabel; //# sourceMappingURL=utils.js.map