@fluentui/react
Version:
Reusable React components for building web experiences.
86 lines • 5.44 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Styling", "../../Utilities", "../../Color", "../../utilities/ButtonGrid/ButtonGridCell", "../Button/ActionButton/ActionButton.styles"], function (require, exports, tslib_1, React, Styling_1, Utilities_1, Color_1, ButtonGridCell_1, ActionButton_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPickerGridCellBase = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
/** Validate if the cell's color is white or not to apply whiteCell style */
var isWhiteCell = function (inputColor) {
var currentColor = (0, Color_1.getColorFromString)(inputColor);
return (currentColor === null || currentColor === void 0 ? void 0 : currentColor.hex) === 'ffffff';
};
var getColorPickerGridCellButtonClassNames = (0, Utilities_1.memoizeFunction)(function (theme, className, variantClassName, iconClassName, menuIconClassName, disabled, checked, expanded, isSplit) {
var styles = (0, ActionButton_styles_1.getStyles)(theme);
return (0, Styling_1.mergeStyleSets)({
root: [
'ms-Button',
styles.root,
variantClassName,
className,
checked && ['is-checked', styles.rootChecked],
disabled && ['is-disabled', styles.rootDisabled],
!disabled &&
!checked && {
selectors: {
':hover': styles.rootHovered,
':focus': styles.rootFocused,
':active': styles.rootPressed,
},
},
disabled && checked && [styles.rootCheckedDisabled],
!disabled &&
checked && {
selectors: {
':hover': styles.rootCheckedHovered,
':active': styles.rootCheckedPressed,
},
},
],
flexContainer: ['ms-Button-flexContainer', styles.flexContainer],
});
});
var ColorPickerGridCellBase = function (props) {
var item = props.item,
// eslint-disable-next-line @typescript-eslint/no-deprecated
_a = props.idPrefix,
// eslint-disable-next-line @typescript-eslint/no-deprecated
idPrefix = _a === void 0 ? props.id : _a, isRadio = props.isRadio, _b = props.selected, selected = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, styles = props.styles, _d = props.circle, circle = _d === void 0 ? true : _d, color = props.color, onClick = props.onClick, onHover = props.onHover, onFocus = props.onFocus, onMouseEnter = props.onMouseEnter, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onWheel = props.onWheel, onKeyDown = props.onKeyDown, height = props.height, width = props.width, borderWidth = props.borderWidth;
var classNames = getClassNames(styles, {
theme: props.theme,
disabled: disabled,
selected: selected,
circle: circle,
isWhite: isWhiteCell(color),
height: height,
width: width,
borderWidth: borderWidth,
});
// Render the core of a color cell
var renderColorOption = function (colorOption) {
var _a;
var svgClassName = classNames.svg;
// Build an SVG for the cell with the given shape and color properties
// Include role="img" and aria-label here for better virtual cursor accessibility,
// and for a VoiceOver bug where it skips grid cells that lack inner content
return (React.createElement("svg", { className: svgClassName, role: "img", "aria-label": colorOption.label, viewBox: "0 0 20 20", fill: (_a = (0, Color_1.getColorFromString)(colorOption.color)) === null || _a === void 0 ? void 0 : _a.str }, circle ? React.createElement("circle", { cx: "50%", cy: "50%", r: "50%" }) : React.createElement("rect", { width: "100%", height: "100%" })));
};
var onRenderItem = function (option) {
var _a = props.onRenderColorCellContent, onRenderColorCellContent = _a === void 0 ? renderColorOption : _a;
return onRenderColorCellContent(option, renderColorOption);
};
var cellSemantics = isRadio
? {
role: 'radio',
'aria-checked': selected,
selected: undefined,
}
: {
role: 'gridcell',
selected: selected,
};
return (React.createElement(ButtonGridCell_1.ButtonGridCell, tslib_1.__assign({ item: item, id: "".concat(idPrefix, "-").concat(item.id, "-").concat(item.index), key: item.id, disabled: disabled }, cellSemantics, {
// eslint-disable-next-line react/jsx-no-bind
onRenderItem: onRenderItem, onClick: onClick, onHover: onHover, onFocus: onFocus, label: item.label, className: classNames.colorCell, getClassNames: getColorPickerGridCellButtonClassNames, index: item.index, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onWheel: onWheel, onKeyDown: onKeyDown })));
};
exports.ColorPickerGridCellBase = ColorPickerGridCellBase;
});
//# sourceMappingURL=ColorPickerGridCell.base.js.map