Stefan Hacker
71 lines
4.9 KiB
JavaScript
71 lines
4.9 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.ChoiceGroupOptionBase = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var React = require("react");
|
|
var Image_1 = require("../../../Image");
|
|
var Icon_1 = require("../../../Icon");
|
|
var Utilities_1 = require("../../../Utilities");
|
|
var getClassNames = (0, Utilities_1.classNamesFunction)();
|
|
var LARGE_IMAGE_SIZE = 71;
|
|
var DEFAULT_PROPS = {
|
|
// This ensures default imageSize value doesn't mutate. Mutation can cause style re-calcuation.
|
|
imageSize: { width: 32, height: 32 },
|
|
};
|
|
var ChoiceGroupOptionBase = function (propsWithoutDefaults) {
|
|
// Mix the `key` prop back in since custom render functions may be expecting it
|
|
// (React uses `key` internally rather than passing it through to the component)
|
|
var props = (0, Utilities_1.getPropsWithDefaults)(tslib_1.__assign(tslib_1.__assign({}, DEFAULT_PROPS), { key: propsWithoutDefaults.itemKey }), propsWithoutDefaults);
|
|
var ariaLabel = props.ariaLabel, focused = props.focused, required = props.required, theme = props.theme, iconProps = props.iconProps, imageSrc = props.imageSrc, imageSize = props.imageSize, disabled = props.disabled, checked = props.checked, id = props.id, styles = props.styles, name = props.name, rest = tslib_1.__rest(props, ["ariaLabel", "focused", "required", "theme", "iconProps", "imageSrc", "imageSize", "disabled", "checked", "id", "styles", "name"]);
|
|
var classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
hasIcon: !!iconProps,
|
|
hasImage: !!imageSrc,
|
|
checked: checked,
|
|
disabled: disabled,
|
|
imageIsLarge: !!imageSrc && (imageSize.width > LARGE_IMAGE_SIZE || imageSize.height > LARGE_IMAGE_SIZE),
|
|
imageSize: imageSize,
|
|
focused: focused,
|
|
});
|
|
var _a = (0, Utilities_1.getNativeProps)(rest, Utilities_1.inputProperties), className = _a.className, nativeProps = tslib_1.__rest(_a, ["className"]);
|
|
var defaultOnRenderLabel = function () {
|
|
return (React.createElement("span", { id: props.labelId, className: "ms-ChoiceFieldLabel" }, props.text));
|
|
};
|
|
var defaultOnRenderField = function () {
|
|
var _a = props.imageAlt, imageAlt = _a === void 0 ? '' : _a, selectedImageSrc = props.selectedImageSrc;
|
|
var onRenderLabel = props.onRenderLabel
|
|
? (0, Utilities_1.composeRenderFunction)(props.onRenderLabel, defaultOnRenderLabel)
|
|
: defaultOnRenderLabel;
|
|
var label = onRenderLabel(tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }));
|
|
return (React.createElement("label", { htmlFor: id, className: classNames.field },
|
|
imageSrc && (React.createElement("div", { className: classNames.innerField },
|
|
React.createElement("div", { className: classNames.imageWrapper },
|
|
React.createElement(Image_1.Image, tslib_1.__assign({ src: imageSrc, alt: imageAlt }, imageSize))),
|
|
React.createElement("div", { className: classNames.selectedImageWrapper },
|
|
React.createElement(Image_1.Image, tslib_1.__assign({ src: selectedImageSrc, alt: imageAlt }, imageSize))))),
|
|
iconProps && (React.createElement("div", { className: classNames.innerField },
|
|
React.createElement("div", { className: classNames.iconWrapper },
|
|
React.createElement(Icon_1.Icon, tslib_1.__assign({}, iconProps))))),
|
|
imageSrc || iconProps ? React.createElement("div", { className: classNames.labelWrapper }, label) : label));
|
|
};
|
|
var _b = props.onRenderField, onRenderField = _b === void 0 ? defaultOnRenderField : _b;
|
|
var onChange = function (evt) {
|
|
var _a;
|
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, evt, tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }));
|
|
};
|
|
var onBlur = function (evt) {
|
|
var _a;
|
|
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, evt);
|
|
};
|
|
var onFocus = function (evt) {
|
|
var _a;
|
|
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, evt, tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }));
|
|
};
|
|
return (React.createElement("div", { className: classNames.root },
|
|
React.createElement("div", { className: classNames.choiceFieldWrapper },
|
|
React.createElement("input", tslib_1.__assign({ "aria-label": ariaLabel, id: id, className: (0, Utilities_1.css)(classNames.input, className), type: "radio", name: name, disabled: disabled, checked: checked, required: required }, nativeProps, { onChange: onChange, onFocus: onFocus, onBlur: onBlur })),
|
|
onRenderField(tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }), defaultOnRenderField))));
|
|
};
|
|
exports.ChoiceGroupOptionBase = ChoiceGroupOptionBase;
|
|
exports.ChoiceGroupOptionBase.displayName = 'ChoiceGroupOption';
|
|
//# sourceMappingURL=ChoiceGroupOption.base.js.map
|