office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
37 lines • 2.49 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/Stack"], function (require, exports, tslib_1, React, TextField_1, Stack_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TextFieldControlledExample = /** @class */ (function (_super) {
tslib_1.__extends(TextFieldControlledExample, _super);
function TextFieldControlledExample() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { value1: '', value2: '' };
_this._onChange1 = function (ev, newValue) {
_this.setState({ value1: newValue || '' });
};
_this._onChange2 = function (ev, newValue) {
if (!newValue || newValue.length <= 5) {
_this.setState({ value2: newValue || '' });
}
else {
// This block should NOT be necessary, but there's currently a bug (#1350) where a controlled
// TextField will continue to accept input even if its `value` prop isn't updated.
// (The correct behavior is that the displayed value should *always* match the `value` prop.
// If the `value` prop isn't updated in response to user input, the input should be ignored.)
// Because this is a large behavior change, the bug won't be fixed until Fabric 7.
// As a workaround, force re-rendering with the existing value.
_this.setState({ value2: _this.state.value2 });
}
};
return _this;
}
TextFieldControlledExample.prototype.render = function () {
return (React.createElement(Stack_1.Stack, { tokens: { childrenGap: 15 } },
React.createElement(TextField_1.TextField, { label: "Basic controlled TextField", value: this.state.value1, onChange: this._onChange1, styles: { fieldGroup: { width: 300 } } }),
React.createElement(TextField_1.TextField, { label: "Controlled TextField limiting length of value to 5", value: this.state.value2, onChange: this._onChange2, styles: { fieldGroup: { width: 100 } } })));
};
return TextFieldControlledExample;
}(React.Component));
exports.TextFieldControlledExample = TextFieldControlledExample;
});
//# sourceMappingURL=TextField.Controlled.Example.js.map