@try-at-software/input-elements
Version:
A package providing different input elements that are extensible and easily configurable for your custom needs.
40 lines (39 loc) • 2.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownInput = void 0;
const react_1 = require("@fluentui/react");
const React = require("react");
const react_2 = require("react");
const Components_1 = require("../../Components");
const Utilities_1 = require("../../Utilities");
const ConsistencyErrorMessage = 'The value is not present within the specified options.';
const DropdownInputComponent = (props) => {
var _a;
const { dynamicProps, operativeProps, styles: stylePreferences } = props;
const normalizedOptions = react_2.useMemo(() => Utilities_1.DropdownHelper.getNormalizedOptions(dynamicProps.defaultOption, dynamicProps.options), [dynamicProps.defaultOption, dynamicProps.options]);
const styles = react_2.useMemo(() => {
if (!(stylePreferences === null || stylePreferences === void 0 ? void 0 : stylePreferences.automaticHeight))
return undefined;
return { dropdownItem: { height: 'auto' } };
}, [stylePreferences]);
react_2.useEffect(() => {
if (!props.value || normalizedOptions.some((o) => o.key === props.value))
return;
const invalidationOptions = { errorMessage: props.consistencyErrorMessage || ConsistencyErrorMessage };
props.invalidateInput(invalidationOptions);
}, [props.value, normalizedOptions, props.consistencyErrorMessage, props.invalidateInput]);
const DropdownComponent = react_2.useMemo(() => { var _a; return (_a = dynamicProps.dropdownComponent) !== null && _a !== void 0 ? _a : react_1.Dropdown; }, [dynamicProps.dropdownComponent]);
const onChange = react_2.useCallback((_event, option) => !!props.onChange && props.onChange(option.id), [props.onChange]);
const onRenderOption = react_2.useCallback((option, defaultRender) => {
if (!dynamicProps.renderOption)
return defaultRender(option);
return dynamicProps.renderOption(option.id);
}, []);
return (React.createElement(React.Fragment, null,
React.createElement(Components_1.LabelRenderer, { label: props.label, required: !!props.renderRequiredIndicator }),
React.createElement(DropdownComponent, { "data-automationid": "dropdown-input", options: normalizedOptions, onChange: onChange, onRenderOption: onRenderOption, placeholder: operativeProps.placeholder,
// This value should never be `undefined`.
selectedKey: props.value || ((_a = dynamicProps.defaultOption) === null || _a === void 0 ? void 0 : _a.key) || null, disabled: dynamicProps.isDisabled, styles: styles }),
React.createElement(Components_1.ErrorRenderer, { error: props.errorMessage, messageBarType: react_1.MessageBarType.error })));
};
exports.DropdownInput = React.memo(DropdownInputComponent);