@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
55 lines • 4.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Label_1 = require("@fluentui/react/lib/Label");
const ColorPicker_1 = require("@fluentui/react/lib/ColorPicker");
const Button_1 = require("@fluentui/react/lib/Button");
const PropertyFieldColorPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldColorPickerHost.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const IPropertyFieldColorPicker_1 = require("./IPropertyFieldColorPicker");
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
class PropertyFieldColorPickerHost extends React.Component {
constructor(props, state) {
super(props);
telemetry.track('PropertyFieldColorPicker', {
disabled: props.disabled
});
this.state = {
errorMessage: undefined,
inlinePickerShowing: false
};
this.onTogglePicker = this.onTogglePicker.bind(this);
}
render() {
return (React.createElement("div", { className: `${PropertyFieldColorPickerHost_module_scss_1.default.pfColorPicker} ${this.props.isHidden ? PropertyFieldColorPickerHost_module_scss_1.default.hidden : ""}` },
this.props.label && React.createElement(Label_1.Label, null, this.props.label),
this.props.style === IPropertyFieldColorPicker_1.PropertyFieldColorPickerStyle.Inline &&
React.createElement("table", { className: PropertyFieldColorPickerHost_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" },
React.createElement(ColorPicker_1.ColorPicker, { color: this.props.selectedColor, onChange: (e, color) => this.props.onColorChanged(color.str), alphaSliderHidden: this.props.alphaSliderHidden, showPreview: this.props.showPreview, strings: strings.ColorPickerStrings })),
!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: PropertyFieldColorPickerHost_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 === IPropertyFieldColorPicker_1.PropertyFieldColorPickerStyle.Full && !this.props.disabled &&
React.createElement("div", null,
React.createElement("div", { style: { width: 0, height: 0, overflow: 'hidden' } },
React.createElement("input", null)),
React.createElement(ColorPicker_1.ColorPicker, { color: this.props.selectedColor, onChange: (e, color) => this.props.onColorChanged(color.str), alphaSliderHidden: this.props.alphaSliderHidden })),
this.props.style === IPropertyFieldColorPicker_1.PropertyFieldColorPickerStyle.Full && this.props.disabled &&
React.createElement("fieldset", { disabled: true, className: PropertyFieldColorPickerHost_module_scss_1.default.disabledCP },
React.createElement(ColorPicker_1.ColorPicker, { color: this.props.selectedColor, alphaSliderHidden: this.props.alphaSliderHidden }))));
}
onTogglePicker() {
this.setState({
inlinePickerShowing: !this.state.inlinePickerShowing
});
}
}
exports.default = PropertyFieldColorPickerHost;
//# sourceMappingURL=PropertyFieldColorPickerHost.js.map