PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Extend Field and InfoDialog with more configurability

Browse source
This commit is contained in:
Michael Telatynski 2020-11-25 09:19:08 +00:00
parent 2f64160a0e
commit 225d541487
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/dialogs/InfoDialog.js
View file

@ -31,6 +31,7 @@ export default class InfoDialog extends React.Component {
onFinished: PropTypes.func, onFinished: PropTypes.func,
hasCloseButton: PropTypes.bool, hasCloseButton: PropTypes.bool,
onKeyDown: PropTypes.func, onKeyDown: PropTypes.func,
fixedWidth: PropTypes.bool,
}; };
static defaultProps = { static defaultProps = {
@ -54,6 +55,7 @@ export default class InfoDialog extends React.Component {
contentId='mx_Dialog_content' contentId='mx_Dialog_content'
hasCancel={this.props.hasCloseButton} hasCancel={this.props.hasCloseButton}
onKeyDown={this.props.onKeyDown} onKeyDown={this.props.onKeyDown}
fixedWidth={this.props.fixedWidth}
> >
<div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content"> <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
{ this.props.description } { this.props.description }

13
src/components/views/elements/Field.tsx
View file

@ -61,6 +61,10 @@ interface IProps {
tooltipClassName?: string; tooltipClassName?: string;
// If specified, an additional class name to apply to the field container // If specified, an additional class name to apply to the field container
className?: string; 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 <input>. // All other props pass through to the <input>.
} }
@ -100,6 +104,9 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
public static readonly defaultProps = { public static readonly defaultProps = {
element: "input", element: "input",
type: "text", type: "text",
validateOnFocus: true,
validateOnBlur: true,
validateOnChange: true,
}; };
/* /*
@ -137,9 +144,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
this.setState({ this.setState({
focused: true, focused: true,
}); });
if (this.props.validateOnFocus) {
this.validate({ this.validate({
focused: true, focused: true,
}); });
}
// Parent component may have supplied its own `onFocus` as well // Parent component may have supplied its own `onFocus` as well
if (this.props.onFocus) { if (this.props.onFocus) {
this.props.onFocus(ev); this.props.onFocus(ev);
@ -147,7 +156,9 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
}; };
private onChange = (ev) => { private onChange = (ev) => {
if (this.props.validateOnChange) {
this.validateOnChange(); this.validateOnChange();
}
// Parent component may have supplied its own `onChange` as well // Parent component may have supplied its own `onChange` as well
if (this.props.onChange) { if (this.props.onChange) {
this.props.onChange(ev); this.props.onChange(ev);
@ -158,9 +169,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
this.setState({ this.setState({
focused: false, focused: false,
}); });
if (this.props.validateOnBlur) {
this.validate({ this.validate({
focused: false, focused: false,
}); });
}
// Parent component may have supplied its own `onBlur` as well // Parent component may have supplied its own `onBlur` as well
if (this.props.onBlur) { if (this.props.onBlur) {
this.props.onBlur(ev); this.props.onBlur(ev);