@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
75 lines • 3.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollectionColorField = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PropertyFieldCollectionDataHost_module_scss_1 = tslib_1.__importDefault(require("../PropertyFieldCollectionDataHost.module.scss"));
const react_1 = require("@fluentui/react");
class CollectionColorField extends React.Component {
constructor(props, state) {
super(props, state);
this._colorElement = React.createRef();
this._onCalloutDismiss = () => {
this.setState({
isCalloutVisible: false
});
};
this._onCalloutToggle = () => {
this.setState({
isCalloutVisible: !this.state.isCalloutVisible
});
};
/**
* Value change event handler
*
* @param field
* @param value
*/
this.valueChange = (field, value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
this.setState({
color: value
});
yield this.props.fOnValueChange(field.id, value);
this.delayedValidate(field, value);
});
/**
* Delayed field validation
*/
this.valueValidation = (field, value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
const validation = yield this.props.fValidation(field, value);
// Update the error message
this.setState({
errorMessage: validation
});
});
const { field, item } = this.props;
this.state = {
isCalloutVisible: false,
color: item[field.id] ? item[field.id] : "#0000ff",
errorMessage: ''
};
this.async = new react_1.Async(this);
this.delayedValidate = this.async.debounce(this.valueValidation, (this.props.field.deferredValidationTime || this.props.field.deferredValidationTime >= 0) ? this.props.field.deferredValidationTime : 200);
}
/**
* UNSAFE_componentWillMount lifecycle hook
*/
UNSAFE_componentWillMount() {
this.valueChange(this.props.field, this.props.item[this.props.field.id]).then(() => { }).catch(() => { });
}
/**
* componentWillUnmount lifecycle hook
*/
componentWillUnmount() {
this.async.dispose();
}
render() {
return (React.createElement("div", { className: `PropertyFieldCollectionData__panel__color-field ${PropertyFieldCollectionDataHost_module_scss_1.default.colorField} ${this.state.errorMessage ? PropertyFieldCollectionDataHost_module_scss_1.default.invalidField : ""}` },
React.createElement("div", { className: PropertyFieldCollectionDataHost_module_scss_1.default.colorIndicator, style: { backgroundColor: this.state.color, cursor: this.props.disableEdit ? 'default' : 'hand' }, ref: this._colorElement, onClick: () => { if (!this.props.disableEdit)
this._onCalloutToggle(); } }),
React.createElement(react_1.Callout, { gapSpace: 0, target: this._colorElement.current, onDismiss: this._onCalloutDismiss, setInitialFocus: true, hidden: !this.state.isCalloutVisible, directionalHint: react_1.DirectionalHint.rightCenter },
React.createElement(react_1.ColorPicker, { color: this.state.color, alphaSliderHidden: true, onChange: (ev, color) => tslib_1.__awaiter(this, void 0, void 0, function* () { return yield this.valueChange(this.props.field, color.str); }) }))));
}
}
exports.CollectionColorField = CollectionColorField;
//# sourceMappingURL=CollectionColorField.js.map