@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
272 lines • 14.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var strings = tslib_1.__importStar(require("ControlStrings"));
var RteColorPicker_module_scss_1 = tslib_1.__importDefault(require("./RteColorPicker.module.scss"));
var SwatchColorPickerGroup_1 = tslib_1.__importDefault(require("./SwatchColorPickerGroup"));
var Button_1 = require("@fluentui/react/lib/Button");
var Tooltip_1 = require("@fluentui/react/lib/Tooltip");
var Icon_1 = require("@fluentui/react/lib/Icon");
var Callout_1 = require("@fluentui/react/lib/Callout");
var ThemeColorHelper_1 = require("../../common/utilities/ThemeColorHelper");
var RteColorPicker = /** @class */ (function (_super) {
tslib_1.__extends(RteColorPicker, _super);
function RteColorPicker(props) {
var _this = _super.call(this, props) || this;
_this.wrapperRef = undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
/**
* Handle switch to default
*/
_this.handleSwitchToDefault = function () {
_this.setState({ isCalloutVisible: !_this.state.isCalloutVisible });
_this.props.switchToDefaultColor();
};
/**
* Handle color change
*/
_this.handleColorChanged = function (color) {
_this.setState({ isCalloutVisible: !_this.state.isCalloutVisible });
_this.props.onColorChanged(color);
};
/**
* Get swatch color picker group
*/
_this.getSwatchColorPickerGroup = function (pickerGroup) {
var groupName = undefined;
switch (pickerGroup) {
case "themeColors":
groupName = strings.ThemeColorsGroupName;
break;
case "highlightColors":
groupName = strings.HighlightColorsGroupName;
break;
case "standardColors":
groupName = strings.StandardColorsGroupName;
break;
case "customColors":
groupName = strings.CustomColorsGroupName;
break;
default:
groupName = strings.HighlightColorsGroupName;
break;
}
var groupColors = [];
switch (pickerGroup) {
case "themeColors":
groupColors = [
{
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorDarker),
id: "#1c561c",
label: strings.ThemeColorDarker
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorDark),
id: "#267426",
label: strings.ThemeColorDark
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorDarkAlt),
id: "#2d8a2d",
label: strings.ThemeColorDarkAlt
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorPrimary),
id: "#339933",
label: strings.ThemeColorPrimary
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorSecondary),
id: "#44a544",
label: strings.ThemeColorSecondary
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorTertiary),
id: "#a6a6a6",
label: strings.ThemeColorTertiary
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralSecondary),
id: "#666666",
label: strings.ThemeColorNeutralSecondary
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralPrimaryAlt),
id: "#3c3c3c",
label: strings.ThemeColorNeutralPrimaryAlt
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralPrimary),
id: "#333333",
label: strings.ThemeColorNeutralPrimary
}, {
color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralDark),
id: "#212121",
label: strings.ThemeColorNeutralDark
}
];
break;
case "highlightColors":
groupColors = [
{
color: "#FFFF00",
id: "#FFFF00",
label: strings.HighlightColorYellow
},
{
color: "#00FF00",
id: "#00FF00",
label: strings.HighlightColorGreen
},
{
color: "#00FFFF",
id: "#00FFFF",
label: strings.HighlightColorAqua
},
{
color: "#FF00FF",
id: "#FF00FF",
label: strings.HighlightColorMagenta
},
{
color: "#0000FF",
id: "#0000FF",
label: strings.HighlightColorBlue
},
{
color: "#FF0000",
id: "#FF0000",
label: strings.HighlightColorRed
},
{
color: "#000080",
id: "#000080",
label: strings.HighlightColorDarkblue
},
{
color: "#008080",
id: "#008080",
label: strings.HighlightColorTeal
},
{
color: "#008000",
id: "#008000",
label: strings.HighlightColorDarkgreen
},
{
color: "#800080",
id: "#800080",
label: strings.HighlightColorPurple
},
{
color: "#800000",
id: "#800000",
label: strings.HighlightColorMaroon
},
{
color: "#808000",
id: "#808000",
label: strings.HighlightColorGold
},
{
color: "#808080",
id: "#808080",
label: strings.HighlightColorDarkgrey
},
{
color: "#C0C0C0",
id: "#C0C0C0",
label: strings.HighlightColorGrey
},
{
color: "#000000",
id: "#000000",
label: strings.HighlightColorBlack
}
];
break;
case 'customColors':
groupColors = _this.props.customColors;
break;
default:
groupColors = [
{
color: "#a80000",
id: "#a80000",
label: strings.StandardColorDarkred
},
{
color: "#e81123",
id: "#e81123",
label: strings.StandardColorRed
},
{
color: "#ffb900",
id: "#ffb900",
label: strings.StandardColorOrange
},
{
color: "#fff100",
id: "#fff100",
label: strings.StandardColorYellow
},
{
color: "#bad80a",
id: "#bad80a",
label: strings.StandardColorLightgreen
},
{
color: "#107c10",
id: "#107c10",
label: strings.StandardColorGreen
},
{
color: "#00bcf2",
id: "#00bcf2",
label: strings.StandardColorLightblue
},
{
color: "#0078d4",
id: "#0078d4",
label: strings.StandardColorBlue
},
{
color: "#002050",
id: "#002050",
label: strings.StandardColorDarkblue
},
{
color: "#5c2d91",
id: "#5c2d91",
label: strings.StandardColorPurple
}
];
break;
}
return (React.createElement(SwatchColorPickerGroup_1.default, { key: pickerGroup, groupText: groupName, onColorChanged: _this.handleColorChanged, groupColors: groupColors, selectedColor: _this.props.selectedColor }));
};
_this.state = {
isCalloutVisible: false
};
return _this;
}
/**
* Default React render method
*/
RteColorPicker.prototype.render = function () {
var _this = this;
var _a = this.props, buttonLabel = _a.buttonLabel, defaultButtonLabel = _a.defaultButtonLabel, fillThemeColor = _a.fillThemeColor, id = _a.id, previewColor = _a.previewColor;
return (React.createElement("div", null,
React.createElement("div", { ref: function (ref) { _this.wrapperRef = ref; } },
React.createElement(Tooltip_1.TooltipHost, { content: buttonLabel, id: id, calloutProps: { gapSpace: 0 } },
React.createElement(Button_1.DefaultButton, { className: RteColorPicker_module_scss_1.default.colorPickerButton, "aria-describedby": id, onClick: function () { return _this.handleColorChanged(previewColor); } },
React.createElement("svg", { className: "".concat(RteColorPicker_module_scss_1.default.previewSvg, " ").concat((previewColor === "rgba(0, 0, 0, 0)" || previewColor === "#ffffff") ? RteColorPicker_module_scss_1.default.border : ""), fill: previewColor, viewBox: "0 0 20 20" },
React.createElement("rect", { className: RteColorPicker_module_scss_1.default.previewRectangle, width: "100%", height: "100%" })),
React.createElement("div", { className: RteColorPicker_module_scss_1.default.buttonLabel }, buttonLabel),
React.createElement(Icon_1.Icon, { iconName: "CaretDownSolid8", className: RteColorPicker_module_scss_1.default.previewIcon })))),
React.createElement(Callout_1.Callout, { isBeakVisible: false, directionalHint: 4, className: RteColorPicker_module_scss_1.default.pickerCallout, setInitialFocus: true, gapSpace: 0, role: "alertdialog", hidden: !this.state.isCalloutVisible, target: this.wrapperRef, onDismiss: function () { return _this.setState({ isCalloutVisible: false }); } },
React.createElement(Tooltip_1.TooltipHost, { content: defaultButtonLabel, id: "".concat(id, "DefaultButton"), calloutProps: { gapSpace: 0 } },
React.createElement(Button_1.DefaultButton, { className: RteColorPicker_module_scss_1.default.colorPickerButton, "aria-describedby": "".concat(id, "DefaultButton"), onClick: this.handleSwitchToDefault },
React.createElement("svg", { className: "".concat(RteColorPicker_module_scss_1.default.previewSvg, " ").concat(RteColorPicker_module_scss_1.default.defaultSvg, " ").concat(fillThemeColor ? RteColorPicker_module_scss_1.default.fillThemeColor : RteColorPicker_module_scss_1.default.fillDefaultColor, " ").concat(fillThemeColor ? "" : RteColorPicker_module_scss_1.default.border), viewBox: "0 0 20 20" },
React.createElement("rect", { className: RteColorPicker_module_scss_1.default.previewRectangle, width: "100%", height: "100%" })),
React.createElement("div", { className: RteColorPicker_module_scss_1.default.buttonLabel }, defaultButtonLabel))),
this.props.colorPickerGroups.map(function (cpg) {
return (_this.getSwatchColorPickerGroup(cpg));
}))));
};
return RteColorPicker;
}(React.Component));
exports.default = RteColorPicker;
//# sourceMappingURL=RteColorPicker.js.map