@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
123 lines • 5.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const TextField_1 = require("@fluentui/react/lib/TextField");
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
class PropertyFieldNumberHost extends React.Component {
constructor(props) {
super(props);
/**
* Validate if field value is a number
* @param value
*/
this._validateNumber = (value) => {
const nrValue = !GeneralHelper_1.GeneralHelper.isDefined(this.props.precision) || this.props.precision === 0 ? parseInt(value) : parseFloat(value);
if (isNaN(nrValue)) {
return `${strings.NotNumberValidationMessage} ${value}.`;
}
const { minValue, maxValue } = this.props;
// Check if number is lower or equal to minimum value
if (GeneralHelper_1.GeneralHelper.isDefined(minValue) && nrValue < minValue) {
return `${strings.MinimumNumberValidationMessage} ${minValue}`;
}
// Check if the number is greater than the maximum value
if (GeneralHelper_1.GeneralHelper.isDefined(maxValue) && nrValue > maxValue) {
return `${strings.MaximumNumberValidationMessage} ${maxValue}`;
}
if (this.props.onGetErrorMessage) {
return this.props.onGetErrorMessage(nrValue);
}
else {
return '';
}
};
/**
* On field change event handler
*/
this._onChanged = (value) => {
let nrValue;
const { precision } = this.props;
if (!GeneralHelper_1.GeneralHelper.isDefined(precision)) {
nrValue = parseFloat(value);
}
else if (precision === 0) {
nrValue = parseInt(value);
}
else {
const multiplier = Math.pow(10, precision);
nrValue = Math.round((parseFloat(value) + 0.000000000000001) * multiplier) / multiplier;
}
// Update state
this.setState({
value,
roundedValue: nrValue
});
const { minValue, maxValue } = this.props;
if (!isNaN(nrValue)) {
if ((!GeneralHelper_1.GeneralHelper.isDefined(minValue) || nrValue >= minValue) && (!GeneralHelper_1.GeneralHelper.isDefined(maxValue) || nrValue <= maxValue)) {
// Trigger change for the web part
this.props.onChanged(nrValue);
}
}
else {
this.props.onChanged(undefined);
}
};
telemetry.track('PropertyFieldNumber', {
disabled: props.disabled
});
let value = null;
let nrValue = undefined;
if (GeneralHelper_1.GeneralHelper.isDefined(props.value)) {
value = props.value.toString();
if (!GeneralHelper_1.GeneralHelper.isDefined(props.precision)) {
nrValue = props.value;
}
else if (props.precision === 0) {
nrValue = parseInt(value);
}
else {
const multiplier = Math.pow(10, props.precision);
nrValue = Math.round((parseFloat(value) + 0.000000000000001) * multiplier) / multiplier;
}
}
this.state = {
value: value,
roundedValue: nrValue
};
this._async = new Utilities_1.Async(this);
this._delayedChange = this._async.debounce(this._onChanged, this.props.deferredValidationTime ? this.props.deferredValidationTime : 200);
}
/**
* componentDidUpdate lifecycle hook
*
* @param prevProps
* @param prevState
*/
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value && this.props.value !== this.state.roundedValue) {
this.setState({
value: GeneralHelper_1.GeneralHelper.isDefined(this.props.value) ? this.props.value.toString() : null
});
}
}
/**
* componentWillUnmount lifecycle hook
*/
componentWillUnmount() {
this._async.dispose();
}
/**
* Render field
*/
render() {
return (React.createElement("div", null,
React.createElement(TextField_1.TextField, { label: this.props.label, ariaLabel: this.props.ariaLabel, onChange: (e, value) => this._delayedChange(value), defaultValue: this.state.value, description: this.props.description, placeholder: this.props.placeholder, errorMessage: this.props.errorMessage, onGetErrorMessage: this._validateNumber, deferredValidationTime: this.props.deferredValidationTime, disabled: this.props.disabled })));
}
}
exports.default = PropertyFieldNumberHost;
//# sourceMappingURL=PropertyFieldNumberHost.js.map