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.
|
|
|
|
*/
|
|
|
|
|
2020-06-17 04:14:20 +03:00
|
|
|
import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react';
|
2019-03-05 18:13:12 +03:00
|
|
|
import classNames from 'classnames';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from '../../../index';
|
2020-05-25 18:47:57 +03:00
|
|
|
import { debounce } from 'lodash';
|
2020-06-15 12:53:53 +03:00
|
|
|
import {IFieldState, IValidationResult} from "./Validation";
|
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
|
|
|
|
2020-03-30 00:59:15 +03:00
|
|
|
const BASE_ID = "mx_Field";
|
|
|
|
let count = 1;
|
|
|
|
function getId() {
|
|
|
|
return `${BASE_ID}_${count++}`;
|
|
|
|
}
|
|
|
|
|
2020-06-17 04:14:20 +03:00
|
|
|
interface IProps {
|
2020-05-25 15:40:05 +03:00
|
|
|
// The field's ID, which binds the input and label together. Immutable.
|
2020-06-17 04:14:20 +03:00
|
|
|
id?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// The field's type (when used as an <input>). Defaults to "text".
|
2020-06-17 04:14:20 +03:00
|
|
|
type?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// id of a <datalist> element for suggestions
|
2020-06-17 04:14:20 +03:00
|
|
|
list?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// The field's label string.
|
2020-06-17 04:14:20 +03:00
|
|
|
label?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// The field's placeholder string. Defaults to the label.
|
2020-06-17 04:14:20 +03:00
|
|
|
placeholder?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// Optional component to include inside the field before the input.
|
2020-06-17 04:14:20 +03:00
|
|
|
prefixComponent?: React.ReactNode;
|
2020-05-25 15:40:05 +03:00
|
|
|
// Optional component to include inside the field after the input.
|
2020-06-17 04:14:20 +03:00
|
|
|
postfixComponent?: React.ReactNode;
|
2020-05-25 15:40:05 +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.
|
2020-06-17 04:14:20 +03:00
|
|
|
onValidate?: (input: IFieldState) => Promise<IValidationResult>;
|
2020-05-25 15:40:05 +03:00
|
|
|
// If specified, overrides the value returned by onValidate.
|
2020-06-17 04:14:20 +03:00
|
|
|
flagInvalid?: boolean;
|
2020-05-25 15:40:05 +03:00
|
|
|
// If specified, contents will appear as a tooltip on the element and
|
|
|
|
// validation feedback tooltips will be suppressed.
|
2020-06-17 04:14:20 +03:00
|
|
|
tooltipContent?: React.ReactNode;
|
2020-05-25 15:40:05 +03:00
|
|
|
// If specified alongside tooltipContent, the class name to apply to the
|
|
|
|
// tooltip itself.
|
2020-06-17 04:14:20 +03:00
|
|
|
tooltipClassName?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// If specified, an additional class name to apply to the field container
|
2020-06-17 04:14:20 +03:00
|
|
|
className?: string;
|
2020-05-25 15:40:05 +03:00
|
|
|
// All other props pass through to the <input>.
|
|
|
|
}
|
|
|
|
|
2020-06-17 04:14:20 +03:00
|
|
|
interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
|
|
|
|
// The element to create. Defaults to "input".
|
|
|
|
element?: "input";
|
|
|
|
// The input's value. This is a controlled component, so the value is required.
|
|
|
|
value: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
|
|
|
|
// To define options for a select, use <Field><option ... /></Field>
|
|
|
|
element: "select";
|
|
|
|
// The select's value. This is a controlled component, so the value is required.
|
|
|
|
value: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
|
|
element: "textarea";
|
|
|
|
// The textarea's value. This is a controlled component, so the value is required.
|
|
|
|
value: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
type PropShapes = IInputProps | ISelectProps | ITextareaProps;
|
|
|
|
|
2020-05-25 15:40:05 +03:00
|
|
|
interface IState {
|
|
|
|
valid: boolean,
|
|
|
|
feedback: React.ReactNode,
|
|
|
|
feedbackVisible: boolean,
|
|
|
|
focused: boolean,
|
|
|
|
}
|
2019-01-22 23:09:40 +03:00
|
|
|
|
2020-06-17 04:14:20 +03:00
|
|
|
export default class Field extends React.PureComponent<PropShapes, IState> {
|
2020-05-25 15:40:05 +03:00
|
|
|
private id: string;
|
|
|
|
private input: HTMLInputElement;
|
|
|
|
|
2020-05-26 14:09:23 +03:00
|
|
|
private static defaultProps = {
|
2020-05-25 18:47:57 +03:00
|
|
|
element: "input",
|
|
|
|
type: "text",
|
|
|
|
}
|
|
|
|
|
2020-05-25 15:40: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.
|
|
|
|
*/
|
2020-05-26 14:09:23 +03:00
|
|
|
private validateOnChange = debounce(() => {
|
2020-05-25 15:40:05 +03:00
|
|
|
this.validate({
|
|
|
|
focused: true,
|
|
|
|
});
|
|
|
|
}, VALIDATION_THROTTLE_MS);
|
|
|
|
|
2020-03-30 01:16:57 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-02-01 02:36:19 +03:00
|
|
|
this.state = {
|
|
|
|
valid: undefined,
|
|
|
|
feedback: undefined,
|
2020-05-25 15:40:05 +03:00
|
|
|
feedbackVisible: false,
|
2019-12-17 17:28:18 +03:00
|
|
|
focused: false,
|
2019-02-01 02:36:19 +03:00
|
|
|
};
|
2020-03-30 00:59:15 +03:00
|
|
|
|
|
|
|
this.id = this.props.id || getId();
|
2019-02-01 02:36:19 +03:00
|
|
|
}
|
|
|
|
|
2020-05-26 14:09:23 +03:00
|
|
|
public focus() {
|
|
|
|
this.input.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
private onFocus = (ev) => {
|
2019-12-17 17:28:18 +03:00
|
|
|
this.setState({
|
|
|
|
focused: true,
|
|
|
|
});
|
2019-04-16 20:12:13 +03:00
|
|
|
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
|
|
|
};
|
|
|
|
|
2020-05-26 14:09:23 +03:00
|
|
|
private 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
|
|
|
};
|
|
|
|
|
2020-05-26 14:09:23 +03:00
|
|
|
private onBlur = (ev) => {
|
2019-12-17 17:28:18 +03:00
|
|
|
this.setState({
|
|
|
|
focused: false,
|
|
|
|
});
|
2019-04-16 20:12:13 +03:00
|
|
|
this.validate({
|
|
|
|
focused: false,
|
|
|
|
});
|
|
|
|
// Parent component may have supplied its own `onBlur` as well
|
|
|
|
if (this.props.onBlur) {
|
|
|
|
this.props.onBlur(ev);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-05-26 14:09:23 +03:00
|
|
|
private async validate({ focused, allowEmpty = true }: {focused: boolean, allowEmpty?: boolean}) {
|
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
|
|
|
|
2019-12-17 17:36:20 +03:00
|
|
|
// this method is async and so we may have been blurred since the method was called
|
|
|
|
// if we have then hide the feedback as withValidation does
|
2019-12-17 17:28:18 +03:00
|
|
|
if (this.state.focused && feedback) {
|
2019-04-25 13:10:35 +03:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2020-05-25 15:40:05 +03:00
|
|
|
|
2019-04-23 19:59:19 +03:00
|
|
|
|
2020-05-26 14:09:23 +03:00
|
|
|
public render() {
|
2019-08-15 22:28:23 +03:00
|
|
|
const {
|
2020-05-25 15:40:05 +03:00
|
|
|
element, prefixComponent, postfixComponent, className, onValidate, children,
|
2020-03-09 18:31:07 +03:00
|
|
|
tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
|
2019-01-20 07:11:20 +03:00
|
|
|
|
2019-03-01 19:13:11 +03:00
|
|
|
// Set some defaults for the <input> element
|
2020-05-25 15:40:05 +03:00
|
|
|
const ref = input => this.input = input;
|
2019-03-01 19:13:11 +03:00
|
|
|
inputProps.placeholder = inputProps.placeholder || inputProps.label;
|
2020-03-30 00:59:15 +03:00
|
|
|
inputProps.id = this.id; // this overwrites the id from props
|
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
|
|
|
|
2020-05-25 15:40:05 +03:00
|
|
|
// Appease typescript's inference
|
|
|
|
const inputProps_ = {...inputProps, ref, list};
|
|
|
|
|
2020-05-25 18:47:57 +03:00
|
|
|
const fieldInput = React.createElement(this.props.element, inputProps_, children);
|
2019-01-20 07:11:20 +03:00
|
|
|
|
2019-03-05 18:13:12 +03:00
|
|
|
let prefixContainer = null;
|
2020-05-25 15:40:05 +03:00
|
|
|
if (prefixComponent) {
|
|
|
|
prefixContainer = <span className="mx_Field_prefix">{prefixComponent}</span>;
|
2019-03-05 18:13:12 +03:00
|
|
|
}
|
2019-09-20 18:45:14 +03:00
|
|
|
let postfixContainer = null;
|
2020-05-25 15:40:05 +03:00
|
|
|
if (postfixComponent) {
|
|
|
|
postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
|
2019-09-20 18:45:14 +03:00
|
|
|
}
|
2019-03-05 18:13:12 +03:00
|
|
|
|
2019-08-15 22:33:02 +03:00
|
|
|
const hasValidationFlag = flagInvalid !== null && flagInvalid !== undefined;
|
2020-05-25 18:47:57 +03:00
|
|
|
const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
|
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.
|
2020-05-25 15:40:05 +03:00
|
|
|
mx_Field_labelAlwaysTopLeft: prefixComponent,
|
2019-04-09 18:10:36 +03:00
|
|
|
mx_Field_valid: onValidate && this.state.valid === true,
|
2019-08-15 22:28:23 +03:00
|
|
|
mx_Field_invalid: hasValidationFlag
|
|
|
|
? flagInvalid
|
|
|
|
: 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;
|
2019-08-13 13:01:04 +03:00
|
|
|
if (tooltipContent || this.state.feedback) {
|
2019-08-21 21:51:16 +03:00
|
|
|
const addlClassName = tooltipClassName ? tooltipClassName : '';
|
2019-08-09 20:07:58 +03:00
|
|
|
fieldTooltip = <Tooltip
|
2019-08-20 22:20:07 +03:00
|
|
|
tooltipClassName={`mx_Field_tooltip ${addlClassName}`}
|
2019-04-25 13:10:35 +03:00
|
|
|
visible={this.state.feedbackVisible}
|
2019-08-13 13:01:04 +03:00
|
|
|
label={tooltipContent || 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}
|
2020-03-30 00:59:15 +03:00
|
|
|
<label htmlFor={this.id}>{this.props.label}</label>
|
2019-09-20 18:45:14 +03:00
|
|
|
{postfixContainer}
|
2019-08-09 20:07:58 +03:00
|
|
|
{fieldTooltip}
|
2019-01-20 07:11:20 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|