import React from "react"; import FormField from "component/formField"; import { Icon } from "component/common.js"; let formFieldCounter = 0; export const formFieldNestedLabelTypes = ["radio", "checkbox"]; export function formFieldId() { return "form-field-" + ++formFieldCounter; } export class Form extends React.PureComponent { static propTypes = { onSubmit: React.PropTypes.func.isRequired, }; constructor(props) { super(props); } handleSubmit(event) { event.preventDefault(); this.props.onSubmit(); } render() { return (
this.handleSubmit(event)}> {this.props.children}
); } } export class FormRow extends React.PureComponent { static propTypes = { label: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.element, ]), errorMessage: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.object, ]), // helper: React.PropTypes.html, }; static defaultProps = { isFocus: false, }; constructor(props) { super(props); this._field = null; this._fieldRequiredText = __("This field is required"); this.state = this.getStateFromProps(props); } componentWillReceiveProps(nextProps) { this.setState(this.getStateFromProps(nextProps)); } getStateFromProps(props) { return { isError: !!props.errorMessage, errorMessage: typeof props.errorMessage === "string" ? props.errorMessage : props.errorMessage instanceof Error ? props.errorMessage.toString() : "", }; } showError(text) { this.setState({ isError: true, errorMessage: text, }); } showRequiredError() { this.showError(this._fieldRequiredText); } clearError(text) { this.setState({ isError: false, errorMessage: "", }); } getValue() { return this._field.getValue(); } getSelectedElement() { return this._field.getSelectedElement(); } getOptions() { return this._field.getOptions(); } focus() { this._field.focus(); } onFocus() { this.setState({ isFocus: true }); } onBlur() { this.setState({ isFocus: false }); } render() { const fieldProps = Object.assign({}, this.props), elementId = formFieldId(), renderLabelInFormField = formFieldNestedLabelTypes.includes( this.props.type ); if (!renderLabelInFormField) { delete fieldProps.label; } delete fieldProps.helper; delete fieldProps.errorMessage; delete fieldProps.isFocus; return (
{this.props.label && !renderLabelInFormField ?
: ""} { this._field = ref ? ref.getWrappedInstance() : null; }} hasError={this.state.isError} onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)} {...fieldProps} /> {!this.state.isError && this.props.helper ?
{this.props.helper}
: ""} {this.state.isError ?
{this.state.errorMessage}
: ""}
); } } export const Submit = props => { const { title, label, icon, disabled } = props; const className = "button-block" + " button-primary" + " button-set-item" + " button--submit" + (disabled ? " disabled" : ""); const content = ( {"icon" in props ? : null} {label ? {label} : null} ); return ( ); };