lbry-desktop/ui/js/component/form.js

139 lines
3.2 KiB
JavaScript
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import FormField from "component/formField";
2016-11-22 21:19:08 +01:00
let formFieldCounter = 0;
2016-11-22 21:19:08 +01:00
export const formFieldNestedLabelTypes = ["radio", "checkbox"];
2017-06-06 06:21:55 +02:00
export function formFieldId() {
return "form-field-" + ++formFieldCounter;
2017-05-17 10:10:25 +02:00
}
2016-11-22 21:19:08 +01:00
2017-06-08 06:42:19 +02:00
export class FormRow extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
2017-06-06 23:19:12 +02:00
label: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element,
]),
2017-07-19 01:00:13 +02:00
errorMessage: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
]),
2017-04-10 14:32:40 +02:00
// helper: React.PropTypes.html,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
constructor(props) {
super(props);
this._field = null;
2017-06-06 23:19:12 +02:00
this._fieldRequiredText = __("This field is required");
2017-05-17 10:10:25 +02:00
2017-06-08 23:15:34 +02:00
this.state = this.getStateFromProps(props);
}
componentWillReceiveProps(nextProps) {
this.setState(this.getStateFromProps(nextProps));
}
getStateFromProps(props) {
return {
isError: !!props.errorMessage,
2017-06-08 23:15:34 +02:00
errorMessage: typeof props.errorMessage === "string"
? props.errorMessage
2017-07-19 01:00:13 +02:00
: props.errorMessage instanceof Error
? props.errorMessage.toString()
: "",
2017-05-17 10:10:25 +02:00
};
}
showError(text) {
2017-04-10 14:32:40 +02:00
this.setState({
isError: true,
errorMessage: text,
});
2017-05-17 10:10:25 +02:00
}
showRequiredError() {
2017-04-12 16:55:19 +02:00
this.showError(this._fieldRequiredText);
2017-05-17 10:10:25 +02:00
}
clearError(text) {
2017-04-12 16:55:19 +02:00
this.setState({
isError: false,
2017-06-06 23:19:12 +02:00
errorMessage: "",
2017-04-12 16:55:19 +02:00
});
2017-05-17 10:10:25 +02:00
}
getValue() {
return this._field.getValue();
2017-05-17 10:10:25 +02:00
}
getSelectedElement() {
return this._field.getSelectedElement();
2017-05-17 10:10:25 +02:00
}
2017-06-15 21:30:56 +02:00
getOptions() {
if (!this._field || !this._field.getOptions) {
console.log(this);
console.log(this._field);
console.log(this._field.getOptions);
}
return this._field.getOptions();
2017-06-15 21:30:56 +02:00
}
2017-05-17 10:10:25 +02:00
focus() {
this._field.focus();
2017-05-17 10:10:25 +02:00
}
render() {
2017-04-10 14:32:40 +02:00
const fieldProps = Object.assign({}, this.props),
2017-06-06 23:19:12 +02:00
elementId = formFieldId(),
renderLabelInFormField = formFieldNestedLabelTypes.includes(
this.props.type
);
2017-04-10 14:32:40 +02:00
if (!renderLabelInFormField) {
delete fieldProps.label;
}
delete fieldProps.helper;
delete fieldProps.errorMessage;
2017-04-10 14:32:40 +02:00
2017-06-06 23:19:12 +02:00
return (
<div className="form-row">
{this.props.label && !renderLabelInFormField
? <div
className={
"form-row__label-row " +
(this.props.labelPrefix ? "form-row__label-row--prefix" : "")
}
>
<label
htmlFor={elementId}
className={
"form-field__label " +
(this.state.isError ? "form-field__label--error" : "")
}
>
{this.props.label}
</label>
</div>
: ""}
<FormField
ref={ref => {
this._field = ref ? ref.getWrappedInstance() : null;
}}
hasError={this.state.isError}
{...fieldProps}
/>
2017-06-06 23:19:12 +02:00
{!this.state.isError && this.props.helper
? <div className="form-field__helper">{this.props.helper}</div>
: ""}
{this.state.isError
? <div className="form-field__error">{this.state.errorMessage}</div>
: ""}
</div>
);
2017-04-10 14:32:40 +02:00
}
2017-05-17 10:10:25 +02:00
}