From 225d5414871c06a5ece90365e6e808924deaeec3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 25 Nov 2020 09:19:08 +0000 Subject: [PATCH] Extend Field and InfoDialog with more configurability --- src/components/views/dialogs/InfoDialog.js | 2 ++ src/components/views/elements/Field.tsx | 27 ++++++++++++++++------ 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/views/dialogs/InfoDialog.js b/src/components/views/dialogs/InfoDialog.js index 8125bc3edd..97ae968ff3 100644 --- a/src/components/views/dialogs/InfoDialog.js +++ b/src/components/views/dialogs/InfoDialog.js @@ -31,6 +31,7 @@ export default class InfoDialog extends React.Component { onFinished: PropTypes.func, hasCloseButton: PropTypes.bool, onKeyDown: PropTypes.func, + fixedWidth: PropTypes.bool, }; static defaultProps = { @@ -54,6 +55,7 @@ export default class InfoDialog extends React.Component { contentId='mx_Dialog_content' hasCancel={this.props.hasCloseButton} onKeyDown={this.props.onKeyDown} + fixedWidth={this.props.fixedWidth} >
{ this.props.description } diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx index 58bd5226b6..4335cc46ac 100644 --- a/src/components/views/elements/Field.tsx +++ b/src/components/views/elements/Field.tsx @@ -61,6 +61,10 @@ interface IProps { tooltipClassName?: string; // If specified, an additional class name to apply to the field container className?: string; + // On what events should validation occur; by default on all + validateOnFocus?: boolean; + validateOnBlur?: boolean; + validateOnChange?: boolean; // All other props pass through to the . } @@ -100,6 +104,9 @@ export default class Field extends React.PureComponent { public static readonly defaultProps = { element: "input", type: "text", + validateOnFocus: true, + validateOnBlur: true, + validateOnChange: true, }; /* @@ -137,9 +144,11 @@ export default class Field extends React.PureComponent { this.setState({ focused: true, }); - this.validate({ - focused: true, - }); + if (this.props.validateOnFocus) { + this.validate({ + focused: true, + }); + } // Parent component may have supplied its own `onFocus` as well if (this.props.onFocus) { this.props.onFocus(ev); @@ -147,7 +156,9 @@ export default class Field extends React.PureComponent { }; private onChange = (ev) => { - this.validateOnChange(); + if (this.props.validateOnChange) { + this.validateOnChange(); + } // Parent component may have supplied its own `onChange` as well if (this.props.onChange) { this.props.onChange(ev); @@ -158,9 +169,11 @@ export default class Field extends React.PureComponent { this.setState({ focused: false, }); - this.validate({ - focused: false, - }); + if (this.props.validateOnBlur) { + this.validate({ + focused: false, + }); + } // Parent component may have supplied its own `onBlur` as well if (this.props.onBlur) { this.props.onBlur(ev);