2019-01-20 07:11:20 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-03-05 18:13:12 +03:00
|
|
|
import classNames from 'classnames';
|
2019-02-01 02:36:19 +03:00
|
|
|
import sdk from '../../../index';
|
2019-08-09 17:30:05 +03:00
|
|
|
import { debounce } from 'lodash';
|
2019-04-23 19:59:19 +03:00
|
|
|
|
|
|
|
// Invoke validation from user input (when typing, etc.) at most once every N ms.
|
|
|
|
const VALIDATION_THROTTLE_MS = 200;
|
2019-01-20 07:11:20 +03:00
|
|
|
|
|
|
|
export default class Field extends React.PureComponent {
|
|
|
|
static propTypes = {
|
2019-01-20 07:29:57 +03:00
|
|
|
// The field's ID, which binds the input and label together.
|
2019-01-20 07:11:20 +03:00
|
|
|
id: PropTypes.string.isRequired,
|
2019-03-01 19:13:11 +03:00
|
|
|
// The element to create. Defaults to "input".
|
|
|
|
// To define options for a select, use <Field><option ... /></Field>
|
2019-03-05 14:18:58 +03:00
|
|
|
element: PropTypes.oneOf(["input", "select", "textarea"]),
|
2019-03-01 19:13:11 +03:00
|
|
|
// The field's type (when used as an <input>). Defaults to "text".
|
2019-01-20 07:11:20 +03:00
|
|
|
type: PropTypes.string,
|
|
|
|
// The field's label string.
|
|
|
|
label: PropTypes.string,
|
2019-01-25 05:36:23 +03:00
|
|
|
// The field's placeholder string. Defaults to the label.
|
2019-01-20 07:11:20 +03:00
|
|
|
placeholder: PropTypes.string,
|
2019-03-12 19:17:21 +03:00
|
|
|
// The field's value.
|
|
|
|
// This is a controlled component, so the value is required.
|
|
|
|
value: PropTypes.string.isRequired,
|
2019-03-05 18:13:12 +03:00
|
|
|
// Optional component to include inside the field before the input.
|
|
|
|
prefix: PropTypes.node,
|
2019-02-01 02:36:19 +03:00
|
|
|
// The callback called whenever the contents of the field
|
|
|
|
// changes. Returns an object with `valid` boolean field
|
|
|
|
// and a `feedback` react component field to provide feedback
|
|
|
|
// to the user.
|
2019-03-07 18:39:42 +03:00
|
|
|
onValidate: PropTypes.func,
|
2019-08-09 20:07:58 +03:00
|
|
|
// If specified, contents will appear as a tooltip on the element and
|
|
|
|
// validation feedback tooltips will be suppressed.
|
|
|
|
tooltip: PropTypes.node,
|
2019-01-20 07:11:20 +03:00
|
|
|
// All other props pass through to the <input>.
|
2019-01-22 23:09:40 +03:00
|
|
|
};
|
|
|
|
|
2019-02-01 02:36:19 +03:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
|
|
|
valid: undefined,
|
|
|
|
feedback: undefined,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-04-16 20:12:13 +03:00
|
|
|
onFocus = (ev) => {
|
|
|
|
this.validate({
|
|
|
|
focused: true,
|
|
|
|
});
|
|
|
|
// Parent component may have supplied its own `onFocus` as well
|
|
|
|
if (this.props.onFocus) {
|
|
|
|
this.props.onFocus(ev);
|
2019-02-01 02:36:19 +03:00
|
|
|
}
|
2019-04-16 20:12:13 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
onChange = (ev) => {
|
2019-04-23 19:59:19 +03:00
|
|
|
this.validateOnChange();
|
2019-03-07 17:45:18 +03:00
|
|
|
// Parent component may have supplied its own `onChange` as well
|
|
|
|
if (this.props.onChange) {
|
|
|
|
this.props.onChange(ev);
|
|
|
|
}
|
2019-02-01 02:36:19 +03:00
|
|
|
};
|
|
|
|
|
2019-04-16 20:12:13 +03:00
|
|
|
onBlur = (ev) => {
|
|
|
|
this.validate({
|
|
|
|
focused: false,
|
|
|
|
});
|
|
|
|
// Parent component may have supplied its own `onBlur` as well
|
|
|
|
if (this.props.onBlur) {
|
|
|
|
this.props.onBlur(ev);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-04-17 16:23:59 +03:00
|
|
|
focus() {
|
|
|
|
this.input.focus();
|
|
|
|
}
|
|
|
|
|
2019-04-23 16:55:57 +03:00
|
|
|
async validate({ focused, allowEmpty = true }) {
|
2019-04-16 20:12:13 +03:00
|
|
|
if (!this.props.onValidate) {
|
|
|
|
return;
|
|
|
|
}
|
2019-04-18 23:33:37 +03:00
|
|
|
const value = this.input ? this.input.value : null;
|
2019-04-23 16:55:57 +03:00
|
|
|
const { valid, feedback } = await this.props.onValidate({
|
2019-04-16 20:12:13 +03:00
|
|
|
value,
|
|
|
|
focused,
|
2019-04-18 23:33:37 +03:00
|
|
|
allowEmpty,
|
2019-04-16 20:12:13 +03:00
|
|
|
});
|
2019-04-25 13:10:35 +03:00
|
|
|
|
|
|
|
if (feedback) {
|
|
|
|
this.setState({
|
|
|
|
valid,
|
|
|
|
feedback,
|
|
|
|
feedbackVisible: true,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
// When we receive null `feedback`, we want to hide the tooltip.
|
|
|
|
// We leave the previous `feedback` content in state without updating it,
|
|
|
|
// so that we can hide the tooltip containing the most recent feedback
|
|
|
|
// via CSS animation.
|
|
|
|
this.setState({
|
|
|
|
valid,
|
|
|
|
feedbackVisible: false,
|
|
|
|
});
|
|
|
|
}
|
2019-04-16 20:12:13 +03:00
|
|
|
}
|
|
|
|
|
2019-08-09 17:30:05 +03:00
|
|
|
/*
|
|
|
|
* This was changed from throttle to debounce: this is more traditional for
|
|
|
|
* form validation since it means that the validation doesn't happen at all
|
|
|
|
* until the user stops typing for a bit (debounce defaults to not running on
|
|
|
|
* the leading edge). If we're doing an HTTP hit on each validation, we have more
|
|
|
|
* incentive to prevent validating input that's very unlikely to be valid.
|
|
|
|
* We may find that we actually want different behaviour for registration
|
|
|
|
* fields, in which case we can add some options to control it.
|
|
|
|
*/
|
|
|
|
validateOnChange = debounce(() => {
|
2019-04-23 19:59:19 +03:00
|
|
|
this.validate({
|
|
|
|
focused: true,
|
|
|
|
});
|
|
|
|
}, VALIDATION_THROTTLE_MS);
|
|
|
|
|
2019-01-20 07:11:20 +03:00
|
|
|
render() {
|
2019-08-12 14:05:25 +03:00
|
|
|
const { element, prefix, onValidate, children, ...inputProps } = this.props;
|
2019-08-12 13:50:11 +03:00
|
|
|
delete inputProps.tooltip; // needs to be removed from props but we don't need it here
|
2019-01-20 07:11:20 +03:00
|
|
|
|
2019-03-01 19:13:11 +03:00
|
|
|
const inputElement = element || "input";
|
2019-01-23 06:03:59 +03:00
|
|
|
|
2019-03-01 19:13:11 +03:00
|
|
|
// Set some defaults for the <input> element
|
|
|
|
inputProps.type = inputProps.type || "text";
|
2019-04-17 16:23:59 +03:00
|
|
|
inputProps.ref = input => this.input = input;
|
2019-03-01 19:13:11 +03:00
|
|
|
inputProps.placeholder = inputProps.placeholder || inputProps.label;
|
2019-01-23 05:25:09 +03:00
|
|
|
|
2019-04-16 20:12:13 +03:00
|
|
|
inputProps.onFocus = this.onFocus;
|
2019-02-01 02:36:19 +03:00
|
|
|
inputProps.onChange = this.onChange;
|
2019-04-16 20:12:13 +03:00
|
|
|
inputProps.onBlur = this.onBlur;
|
2019-03-12 19:17:21 +03:00
|
|
|
|
2019-03-01 19:13:11 +03:00
|
|
|
const fieldInput = React.createElement(inputElement, inputProps, children);
|
2019-01-20 07:11:20 +03:00
|
|
|
|
2019-03-05 18:13:12 +03:00
|
|
|
let prefixContainer = null;
|
|
|
|
if (prefix) {
|
2019-03-06 13:58:54 +03:00
|
|
|
prefixContainer = <span className="mx_Field_prefix">{prefix}</span>;
|
2019-03-05 18:13:12 +03:00
|
|
|
}
|
|
|
|
|
2019-02-01 02:36:19 +03:00
|
|
|
const fieldClasses = classNames("mx_Field", `mx_Field_${inputElement}`, {
|
2019-03-05 18:13:12 +03:00
|
|
|
// If we have a prefix element, leave the label always at the top left and
|
|
|
|
// don't animate it, as it looks a bit clunky and would add complexity to do
|
|
|
|
// properly.
|
|
|
|
mx_Field_labelAlwaysTopLeft: prefix,
|
2019-04-09 18:10:36 +03:00
|
|
|
mx_Field_valid: onValidate && this.state.valid === true,
|
|
|
|
mx_Field_invalid: onValidate && this.state.valid === false,
|
2019-03-05 18:13:12 +03:00
|
|
|
});
|
|
|
|
|
2019-04-16 18:52:31 +03:00
|
|
|
// Handle displaying feedback on validity
|
2019-02-01 02:36:19 +03:00
|
|
|
const Tooltip = sdk.getComponent("elements.Tooltip");
|
2019-08-09 20:07:58 +03:00
|
|
|
let fieldTooltip;
|
|
|
|
if (this.props.tooltip || this.state.feedback) {
|
|
|
|
fieldTooltip = <Tooltip
|
2019-03-07 16:24:23 +03:00
|
|
|
tooltipClassName="mx_Field_tooltip"
|
2019-04-25 13:10:35 +03:00
|
|
|
visible={this.state.feedbackVisible}
|
2019-08-09 20:07:58 +03:00
|
|
|
label={this.props.tooltip || this.state.feedback}
|
2019-02-01 02:36:19 +03:00
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div className={fieldClasses}>
|
2019-03-05 18:13:12 +03:00
|
|
|
{prefixContainer}
|
2019-01-23 05:25:09 +03:00
|
|
|
{fieldInput}
|
2019-01-20 07:11:20 +03:00
|
|
|
<label htmlFor={this.props.id}>{this.props.label}</label>
|
2019-08-09 20:07:58 +03:00
|
|
|
{fieldTooltip}
|
2019-01-20 07:11:20 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|