@react-md/form
Version:
This package is for creating all the different form input types.
103 lines • 4.14 kB
JavaScript
;
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