@bigfishtv/cockpit/es/components/form/Field.js

var _class, _class2, _temp;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import { withFormValue, Input as _DefaultInput, ErrorList as BaseErrorList } from '@bigfishtv/react-forms';

import { wordCount, labelFromKeyPath } from '../../utils/stringUtils';
import InfoTooltip from '../InfoTooltip';
import StopShouting from '../StopShouting';

// we define this because react-docgen fails when defaultProp directly references an imported component

var DefaultInput = function (_Component) {
	_inherits(DefaultInput, _Component);

	function DefaultInput() {
		_classCallCheck(this, DefaultInput);

		return _possibleConstructorReturn(this, _Component.apply(this, arguments));
	}

	DefaultInput.prototype.render = function render() {
		// don't put thses on to <input> component pls
		var _props2 = this.props,
		    invalid = _props2.invalid,
		    hint = _props2.hint,
		    select = _props2.select,
		    formValue = _props2.formValue,
		    props = _objectWithoutProperties(_props2, ['invalid', 'hint', 'select', 'formValue']);

		return React.createElement(_DefaultInput, props);
	};

	return DefaultInput;
}(Component);

var Self = function Self(_props) {
	// don't put these on div please
	var children = _props.children,
	    fieldClass = _props.fieldClass,
	    Label = _props.Label,
	    label = _props.label,
	    instructions = _props.instructions,
	    Input = _props.Input,
	    ErrorList = _props.ErrorList,
	    Self = _props.Self,
	    autoLabel = _props.autoLabel,
	    stopShouting = _props.stopShouting,
	    invalid = _props.invalid,
	    className = _props.className,
	    formValue = _props.formValue,
	    maxWords = _props.maxWords,
	    inputProps = _props.inputProps,
	    labelWidth = _props.labelWidth,
	    inline = _props.inline,
	    hint = _props.hint,
	    props = _objectWithoutProperties(_props, ['children', 'fieldClass', 'Label', 'label', 'instructions', 'Input', 'ErrorList', 'Self', 'autoLabel', 'stopShouting', 'invalid', 'className', 'formValue', 'maxWords', 'inputProps', 'labelWidth', 'inline', 'hint']);

	return React.createElement(
		'div',
		_extends({ className: classnames('form-input', fieldClass, { 'form-input-inline': inline }) }, props),
		children
	);
};

var Label = function Label(_ref) {
	var labelWidth = _ref.labelWidth,
	    hint = _ref.hint,
	    label = _ref.label,
	    formValue = _ref.formValue;

	if (label === undefined) {
		label = labelFromKeyPath(formValue.keyPath);
	}
	return label ? React.createElement(
		'label',
		{ style: { minWidth: labelWidth } },
		label,
		' ',
		hint && React.createElement(InfoTooltip, { text: hint })
	) : React.createElement('span', null);
};

var Error = function Error(_ref2) {
	var error = _ref2.error,
	    label = _ref2.label,
	    noLabel = _ref2.noLabel,
	    complete = _ref2.complete;
	return error ? React.createElement(
		'div',
		{ className: 'form-message error' },
		error.message
	) : null;
};

var ErrorList = function ErrorList(_ref3) {
	var formValue = _ref3.formValue;
	return React.createElement(BaseErrorList, { stylesheet: { Error: Error, Root: 'div' }, formValue: formValue });
};

var WordCount = function WordCount(_ref4) {
	var value = _ref4.value,
	    maxWords = _ref4.maxWords,
	    props = _objectWithoutProperties(_ref4, ['value', 'maxWords']);

	var count = wordCount(value);
	return React.createElement(
		'p',
		_extends({}, props, { className: classnames('form-message', count > maxWords && 'color-error') }),
		count + ' / ' + maxWords + ' words'
	);
};

var Field = withFormValue(_class = (_temp = _class2 = function (_Component2) {
	_inherits(Field, _Component2);

	function Field() {
		var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

		_classCallCheck(this, Field);

		var _this2 = _possibleConstructorReturn(this, _Component2.call(this, props));

		_this2.onBlur = function (event) {
			_this2.setState({ dirty: true });
			_this2.props.onBlur && _this2.props.onBlur(event);
		};

		_this2.onChange = function (e) {
			var value = void 0;
			if (e && e.target && e.target.value !== undefined) {
				e.stopPropagation();
				value = e.target.value;
			} else {
				value = e;
			}
			var nextFormValue = _this2.props.formValue.update(value);
			_this2.props.onChange && _this2.props.onChange(value, nextFormValue);
			_this2.setState({ dirty: true });
		};

		_this2.state = { dirty: false };
		return _this2;
	}

	Field.prototype.render = function render() {
		var dirty = this.state.dirty;
		var _props$formValue = this.props.formValue,
		    value = _props$formValue.value,
		    _props$formValue$para = _props$formValue.params,
		    params = _props$formValue$para === undefined ? {} : _props$formValue$para,
		    _props$formValue$erro = _props$formValue.errorList,
		    errorList = _props$formValue$erro === undefined ? [] : _props$formValue$erro;

		var _props3 = this.props,
		    children = _props3.children,
		    Self = _props3.Self,
		    ErrorList = _props3.ErrorList,
		    Label = _props3.Label,
		    Input = _props3.Input,
		    label = _props3.label,
		    autoLabel = _props3.autoLabel,
		    labelWidth = _props3.labelWidth,
		    inline = _props3.inline,
		    formValue = _props3.formValue,
		    select = _props3.select,
		    stopShouting = _props3.stopShouting,
		    readOnly = _props3.readOnly,
		    disabled = _props3.disabled,
		    placeholder = _props3.placeholder,
		    hint = _props3.hint,
		    instructions = _props3.instructions,
		    maxWords = _props3.maxWords,
		    className = _props3.className,
		    size = _props3.size,
		    inputProps = _props3.inputProps,
		    fieldClass = _props3.fieldClass,
		    rest = _objectWithoutProperties(_props3, ['children', 'Self', 'ErrorList', 'Label', 'Input', 'label', 'autoLabel', 'labelWidth', 'inline', 'formValue', 'select', 'stopShouting', 'readOnly', 'disabled', 'placeholder', 'hint', 'instructions', 'maxWords', 'className', 'size', 'inputProps', 'fieldClass']);

		if (Input === DefaultInput && readOnly && !rest.onClick) rest.onClick = function (event) {
			return event.target.select();
		};

		var showErrors = dirty || params.forceShowErrors;
		var invalid = errorList.length > 0;
		className = classnames(className, { error: invalid });

		if (!children) {
			children = React.createElement(Input, _extends({}, rest, {
				value: value,
				onChange: this.onChange,
				invalid: invalid,
				readOnly: readOnly,
				disabled: disabled,
				className: className,
				placeholder: placeholder
			}, inputProps));
		} else {
			children = React.cloneElement(React.Children.only(children), _extends({}, rest, {
				value: value,
				onChange: this.onChange,
				invalid: invalid,
				placeholder: placeholder,
				className: className,
				readOnly: readOnly,
				disabled: disabled
			}, inputProps));
		}

		var _props4 = this.props,
		    onChange = _props4.onChange,
		    propsWithoutOnChange = _objectWithoutProperties(_props4, ['onChange']);

		return React.createElement(
			Self,
			_extends({}, propsWithoutOnChange, { onBlur: this.onBlur }),
			autoLabel && React.createElement(Label, propsWithoutOnChange),
			instructions && (typeof instructions == 'string' ? React.createElement(
				'p',
				{ className: 'form-message' },
				instructions
			) : instructions),
			children,
			maxWords > 0 && React.createElement(WordCount, { value: value, maxWords: maxWords }),
			stopShouting && React.createElement(StopShouting, { value: value, onChange: this.onChange }),
			showErrors && React.createElement(ErrorList, { formValue: this.formValue })
		);
	};

	return Field;
}(Component), _class2.propTypes = {
	label: PropTypes.node,
	children: PropTypes.element,
	Input: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
	Self: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
	Label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
	ErrorList: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
	inputProps: PropTypes.object,
	instructions: PropTypes.node,
	maxWords: PropTypes.number
}, _class2.defaultProps = {
	Input: DefaultInput,
	Label: Label,
	ErrorList: ErrorList,
	Self: Self,
	autoLabel: true,
	stopShouting: true,
	maxWords: 0,
	inputProps: {}
}, _temp)) || _class;

export { Field as default };