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-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-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,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
onChange = (ev) => {
|
|
|
|
if (this.props.onValidate) {
|
2019-03-12 19:51:19 +03:00
|
|
|
const result = this.props.onValidate(ev.target.value);
|
2019-02-01 02:36:19 +03:00
|
|
|
this.setState({
|
|
|
|
valid: result.valid,
|
|
|
|
feedback: result.feedback,
|
|
|
|
});
|
|
|
|
}
|
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-01-20 07:11:20 +03:00
|
|
|
render() {
|
2019-02-01 02:36:19 +03:00
|
|
|
const { element, prefix, onValidate, children, ...inputProps } = this.props;
|
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";
|
|
|
|
inputProps.placeholder = inputProps.placeholder || inputProps.label;
|
2019-01-23 05:25:09 +03:00
|
|
|
|
2019-02-01 02:36:19 +03:00
|
|
|
inputProps.onChange = this.onChange;
|
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-02-01 02:36:19 +03:00
|
|
|
// handle displaying feedback on validity
|
|
|
|
const Tooltip = sdk.getComponent("elements.Tooltip");
|
|
|
|
let feedback;
|
|
|
|
if (this.state.feedback) {
|
|
|
|
feedback = <Tooltip
|
2019-03-07 16:24:23 +03:00
|
|
|
tooltipClassName="mx_Field_tooltip"
|
2019-02-01 02:36:19 +03:00
|
|
|
label={this.state.feedback}
|
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
|
|
|
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-02-01 02:36:19 +03:00
|
|
|
{feedback}
|
2019-01-20 07:11:20 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|