@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
91 lines • 3.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollectionNumberField = 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");
const sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
class CollectionNumberField extends React.Component {
constructor(props) {
super(props);
/**
* Value change event handler
*
* @param field
* @param value
*/
this.valueChange = (field, value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
const inputVal = typeof value === 'string' ? parseInt(value) : value;
this.setState({
value: inputVal,
});
yield this.props.fOnValueChange(field.id, value);
this.delayedValidate(field, inputVal);
});
/**
* Delayed field validation
*/
this.valueValidation = (field, value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
// debugger;
const validation = yield this.props.fValidation(field, value);
// Update the error message
this.setState({
errorMessage: validation,
});
});
this.state = {
value: null,
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.setState({
value: this.props.item[this.props.field.id],
});
this.valueChange(this.props.field, this.props.item[this.props.field.id])
.then(() => {
/* no-op; */
})
.catch(() => {
/* no-op; */
});
}
/**
* UNSAFE_componentWillUpdate lifecycle hook
*
* @param nextProps
* @param nextState
*/
UNSAFE_componentWillUpdate(nextProps, nextState) {
if (!(0, sp_lodash_subset_1.isEqual)(nextProps.item, this.props.item)) {
this.setState({
value: nextProps.item[nextProps.field.id],
});
}
}
/**
* componentWillUnmount lifecycle hook
*/
componentWillUnmount() {
this.async.dispose();
}
/**
* Default React render method
*/
render() {
const { errorMessage, value } = this.state;
return (React.createElement("div", { className: `PropertyFieldCollectionData__panel__number-field ${PropertyFieldCollectionDataHost_module_scss_1.default.numberField} ${errorMessage ? PropertyFieldCollectionDataHost_module_scss_1.default.invalidField : ''}` },
React.createElement("input", { type: 'number', role: 'spinbutton', placeholder: this.props.field.placeholder || this.props.field.title, "aria-valuemax": 99999, "aria-valuemin": -999999, "aria-valuenow": this.props.item[this.props.field.id] || '', "aria-invalid": !!errorMessage, value: !value && value !== 0 ? '' : value, onChange: (ev) => tslib_1.__awaiter(this, void 0, void 0, function* () { return yield this.valueChange(this.props.field, ev.target.value); }), disabled: this.props.disableEdit })));
}
}
exports.CollectionNumberField = CollectionNumberField;
//# sourceMappingURL=CollectionNumberField.js.map