@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
65 lines • 4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const Button_1 = require("@fluentui/react/lib/Button");
const Label_1 = require("@fluentui/react/lib/Label");
const SwatchColorPicker_1 = require("@fluentui/react/lib/SwatchColorPicker");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const React = tslib_1.__importStar(require("react"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const IPropertyFieldSwatchColorPicker_1 = require("./IPropertyFieldSwatchColorPicker");
const PropertyFieldSwatchColorPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldSwatchColorPickerHost.module.scss"));
class PropertyFieldSwatchColorPickerHost extends React.Component {
constructor(props, state) {
super(props);
telemetry.track('PropertyFieldSwatchColorPicker', {
disabled: props.disabled
});
this.state = {
errorMessage: undefined,
inlinePickerShowing: false
};
this.onTogglePicker = this.onTogglePicker.bind(this);
}
render() {
return (React.createElement("div", { className: PropertyFieldSwatchColorPickerHost_module_scss_1.default.pfSwatchColorPicker },
this.props.label && React.createElement(Label_1.Label, null, this.props.label),
this.props.style === IPropertyFieldSwatchColorPicker_1.PropertyFieldSwatchColorPickerStyle.Inline &&
React.createElement("table", { className: PropertyFieldSwatchColorPickerHost_module_scss_1.default.cpInlineTable },
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", { style: { width: "100%" } },
this.state.inlinePickerShowing &&
React.createElement("div", { className: 'ms-slideDownIn20 ' + PropertyFieldSwatchColorPickerHost_module_scss_1.default.cpSwatchRow }, this.renderSwatchColorPicker()),
!this.state.inlinePickerShowing &&
React.createElement("div", { className: "ms-slideUpIn20 ms-borderColor-neutralDark", style: { backgroundColor: this.props.selectedColor, border: "1px solid" } }, "\u00A0")),
React.createElement("td", { className: PropertyFieldSwatchColorPickerHost_module_scss_1.default.cpInlineRow },
React.createElement(Button_1.IconButton, { title: strings.ColorPickerButtonTitle, disabled: this.props.disabled, iconProps: { iconName: this.props.iconName, ariaLabel: strings.ColorPickerButtonTitle }, onClick: this.onTogglePicker }))))),
this.props.style === IPropertyFieldSwatchColorPicker_1.PropertyFieldSwatchColorPickerStyle.Full && this.renderSwatchColorPicker()));
}
renderSwatchColorPicker() {
const colorCells = this.props.colors.map((value, index) => {
return {
id: index.toString(),
label: value.label,
color: value.color
};
});
return (React.createElement(SwatchColorPicker_1.SwatchColorPicker, { disabled: this.props.disabled, columnCount: this.props.columnCount, selectedId: this.selectedColorId().toString(), colorCells: colorCells, cellShape: this.props.showAsCircles ? 'circle' : 'square', onColorChanged: this.props.onColorChanged }));
}
onTogglePicker() {
this.setState({
inlinePickerShowing: !this.state.inlinePickerShowing
});
}
selectedColorId() {
for (let i = 0; i < this.props.colors.length; i++) {
if (this.props.colors[i].color === this.props.selectedColor) {
return i;
}
}
return -1;
}
}
exports.default = PropertyFieldSwatchColorPickerHost;
//# sourceMappingURL=PropertyFieldSwatchColorPickerHost.js.map