@pnp/spfx-controls-react/lib-commonjs/controls/richText/SwatchColorPickerGroup.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var RteColorPicker_module_scss_1 = tslib_1.__importDefault(require("./RteColorPicker.module.scss"));
var Label_1 = require("@fluentui/react/lib/Label");
var FocusZone_1 = require("@fluentui/react/lib/FocusZone");
var Button_1 = require("@fluentui/react/lib/Button");
var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
var SwatchColorPickerGroup = /** @class */ (function (_super) {
    tslib_1.__extends(SwatchColorPickerGroup, _super);
    function SwatchColorPickerGroup() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SwatchColorPickerGroup.prototype.render = function () {
        var _this = this;
        var colorRows = (0, sp_lodash_subset_1.chunk)(this.props.groupColors, 5);
        return (React.createElement("div", null,
            React.createElement(Label_1.Label, { htmlFor: this.props.groupText, className: RteColorPicker_module_scss_1.default.pickerLabel }, this.props.groupText),
            React.createElement("div", { key: this.props.groupText },
                React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal, handleTabKey: FocusZone_1.FocusZoneTabbableElements.all, isCircularNavigation: true, className: RteColorPicker_module_scss_1.default.focusedContainer },
                    React.createElement("table", { className: RteColorPicker_module_scss_1.default.tableRoot },
                        React.createElement("tbody", null, colorRows.map(function (cr, rowIndex) {
                            return (React.createElement("tr", { role: "row", key: rowIndex }, cr.map(function (gc, index) {
                                var _a;
                                return (React.createElement("td", { role: "presentation", className: RteColorPicker_module_scss_1.default.tableCell, key: gc.id },
                                    React.createElement(Button_1.ActionButton, { className: RteColorPicker_module_scss_1.default.colorCell, role: "gridCell", title: gc.label, "aria-label": gc.label, "aria-selected": _this.props.selectedColor === gc.color, "data-index": index, "data-is-focusable": true, id: "".concat(_this.props.groupText, "-").concat(gc.id, "-").concat(index), onClick: function () { return _this.handleColorChanged(gc.color); } },
                                        React.createElement("svg", { className: "".concat(RteColorPicker_module_scss_1.default.svg, " ").concat(((_a = _this.props.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === gc.color.toUpperCase() ? RteColorPicker_module_scss_1.default.selected : ""), viewBox: "0 0 20 20", fill: gc.color, focusable: "false" },
                                            React.createElement("rect", { width: "100%", height: "100%" })))));
                            })));
                        })))))));
    };
    SwatchColorPickerGroup.prototype.handleColorChanged = function (color) {
        this.props.onColorChanged(color);
    };
    return SwatchColorPickerGroup;
}(React.Component));
exports.default = SwatchColorPickerGroup;
//# sourceMappingURL=SwatchColorPickerGroup.js.map