react-input-field/lib/index.js

React Input Field

'use strict';

Object.defineProperty(exports, '__esModule', {
    value: true
});

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; };

var React = require('react');
var normalize = require('react-style-normalizer');
var assign = require('object-assign');

function emptyFn() {}

var TOOL_STYLES = {
    'true': { display: 'inline-block' },
    'false': { cursor: 'text', color: 'transparent' }
};

var DISPLAY_NAME = 'ReactInputField';

var PT = React.PropTypes;

function _ref2(cls) {
    return !!cls;
}

var DESCRIPTOR = {

    displayName: DISPLAY_NAME,

    propTypes: {
        validate: PT.oneOfType([PT.func, PT.bool]),
        isEmpty: PT.func,
        clearTool: PT.node,
        value: PT.string
    },

    getInitialState: function getInitialState() {
        return {
            defaultValue: this.props.defaultValue
        };
    },

    getDefaultProps: function getDefaultProps() {
        return {

            //STYLE props
            defaultClearToolStyle: {
                fontSize: 20,
                paddingRight: 5,
                paddingLeft: 5,

                alignSelf: 'center',
                cursor: 'pointer',
                userSelect: 'none',
                boxSizing: 'border-box'
            },

            clearToolColor: '#a8a8a8',
            clearToolOverColor: '#7F7C7C',

            defaultStyle: {
                border: '1px solid #a8a8a8',
                overflow: 'hidden',
                boxSizing: 'border-box'
            },

            defaultFocusedStyle: {
                boxShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.45)'
            },

            defaultInnerStyle: {
                userSelect: 'none',
                width: '100%',
                display: 'inline-flex',
                flexFlow: 'row',
                alignItems: 'stretch'
            },

            defaultInvalidStyle: {
                border: '1px solid rgb(248, 144, 144)'
            },

            defaultInputStyle: {
                flex: 1,
                border: 0,
                height: '100%',
                padding: '6px 2px',
                outline: 'none',
                boxSizing: 'border-box'
            },

            defaultInputInvalidStyle: {},

            //CLASS NAME
            defaultClassName: 'z-field',
            emptyClassName: 'z-empty-value',
            invalidClassName: 'z-invalid',

            inputClassName: '',

            //NON-STYLE props
            focusOnClick: true,
            stopChangePropagation: true,
            stopSelectPropagation: true,

            defaultValue: '',
            emptyValue: '',
            inputProps: null,

            clearTool: true,

            toolsPosition: 'right'
        };
    },

    render: function render() {

        if (this.valid === undefined) {
            this.valid = true;
        }

        var props = this.p = this.prepareProps(this.props, this.state);

        function _ref() {
            return props.onValidityChange(props.valid, props.value, props);
        }

        if (this.valid !== props.valid && typeof props.onValidityChange === 'function') {
            setTimeout(_ref, 0);
        }

        this.valid = props.valid;

        var children = this.renderChildren(props, this.state);

        var divProps = assign({}, props);
        delete divProps.value;
        delete divProps.placeholder;

        return React.createElement(
            'div',
            _extends({}, divProps, { 'data-display-name': DISPLAY_NAME }),
            React.createElement(
                'div',
                { style: props.innerStyle },
                children
            )
        );
    },

    renderChildren: function renderChildren(props, state) {
        var field = this.renderField(props, state);
        var tools = this.renderTools(props, state);

        var children = [field, props.children];

        if (props.toolsPosition == 'after' || props.toolsPosition == 'right') {
            children.push.apply(children, tools);
        } else {
            children = (tools || []).concat(field);
        }

        if (typeof props.renderChildren == 'function') {
            children = props.renderChildren(children);
        }

        return children;
    },

    renderField: function renderField(props) {
        var inputProps = this.prepareInputProps(props);

        inputProps.ref = 'input';

        if (props.inputFactory) {
            return props.inputFactory(inputProps, props);
        }

        return React.createElement('input', inputProps);
    },

    renderTools: function renderTools(props, state) {

        var clearTool = this.renderClearTool(props, state);
        var result = [clearTool];

        if (typeof props.tools === 'function') {
            result = props.tools(props, clearTool);
        }

        return result;
    },

    renderClearTool: function renderClearTool(props, state) {

        var visible;

        if (props.forceClearTool && !props.clearTool) {
            return;
        }

        if (!props.forceClearTool) {
            if (!props.clearTool || props.readOnly || props.disabled) {
                return;
            }
        }

        visible = props.forceClearTool ? true : !props.empty;

        var visibilityStyle = TOOL_STYLES[visible];
        var style = assign({}, visibilityStyle, this.prepareClearToolStyle(props, state));

        if (!visible) {
            assign(style, visibilityStyle);
        }

        var tool = props.clearTool === true ? '✖' : props.clearTool;

        return React.createElement(
            'div',
            {
                key: 'clearTool',
                className: 'z-clear-tool',
                onClick: this.handleClearToolClick,
                onMouseDown: this.handleClearToolMouseDown,
                onMouseOver: this.handleClearToolOver,
                onMouseOut: this.handleClearToolOut,
                style: style
            },
            tool
        );
    },

    handleClearToolMouseDown: function handleClearToolMouseDown(event) {
        event.preventDefault();
    },

    handleClearToolOver: function handleClearToolOver() {
        this.setState({
            clearToolOver: true
        });
    },

    handleClearToolOut: function handleClearToolOut() {
        this.setState({
            clearToolOver: false
        });
    },

    isEmpty: function isEmpty(props) {
        var emptyValue = this.getEmptyValue(props);

        if (typeof props.isEmpty === 'function') {
            return props.isEmpty(props, emptyValue);
        }

        var value = props.value;

        if (value == null) {
            value = '';
        }

        return value === emptyValue;
    },

    getEmptyValue: function getEmptyValue(props) {
        var value = props.emptyValue;

        if (typeof value === 'function') {
            value = value(props);
        }

        return value;
    },

    isValid: function isValid(props) {
        var value = props.value;
        var result = true;

        if (typeof props.validate === 'function') {
            result = props.validate(value, props, this) !== false;
        }

        return result;
    },

    getInput: function getInput() {
        return this.refs.input.getDOMNode();
    },

    focus: function focus() {
        var input = this.getInput();

        if (input && typeof input.focus === 'function') {
            input.focus();
        }
    },

    handleClick: function handleClick(event) {
        if (this.props.focusOnClick && !this.isFocused()) {
            this.focus();
        }

        ;(this.props.onClick || emptyFn)(event);
    },

    handleMouseDown: function handleMouseDown(event) {
        ;(this.props.onMouseDown || emptyFn)(event);
    },

    handleClearToolClick: function handleClearToolClick(event) {
        var emptyValue = this.getEmptyValue(this.props);

        this.notify(emptyValue, event);(this.props.onClearToolClick || emptyFn)(emptyValue, event);
    },

    handleChange: function handleChange(event) {
        this.props.stopChangePropagation && event.stopPropagation();
        this.notify(event.target.value, event);
    },

    handleSelect: function handleSelect(event) {
        this.props.stopSelectPropagation && event.stopPropagation();(this.props.onSelect || emptyFn)(event);
    },

    notify: function notify(value, event) {
        if (this.props.value === undefined) {
            this.setState({
                defaultValue: value
            });
        }
        ;(this.props.onChange || emptyFn)(value, this.props, event);
    },

    //*****************//
    // PREPARE METHODS //
    //*****************//
    prepareProps: function prepareProps(thisProps, state) {

        var props = {};

        assign(props, thisProps);

        props.value = this.prepareValue(props, state);

        props.focused = this.isFocused();
        props.valid = this.isValid(props);
        props.empty = this.isEmpty(props);

        props.onClick = this.handleClick;
        props.onMouseDown = this.handleMouseDown;

        props.className = this.prepareClassName(props);
        props.style = this.prepareStyle(props);
        props.innerStyle = this.prepareInnerStyle(props);

        return props;
    },

    getValue: function getValue() {
        var value = this.props.value === undefined ? this.state.defaultValue : this.props.value;

        return value;
    },

    prepareValue: function prepareValue(props, state) {
        return this.getValue();
    },

    prepareClassName: function prepareClassName(props) {
        var result = [props.className, props.defaultClassName];

        if (props.empty) {
            result.push(props.emptyClassName);
        }

        if (!props.valid) {
            result.push(props.invalidClassName);
        }

        return result.filter(_ref2).join(' ');
    },

    prepareStyle: function prepareStyle(props) {
        var style = assign({}, props.defaultStyle, props.style);

        if (props.focused) {
            assign(style, props.defaultFocusedStyle, props.focusedStyle);
        }

        if (props.empty) {
            assign(style, props.emptyStyle);
        }

        if (!props.valid) {
            assign(style, props.defaultInvalidStyle, props.invalidStyle);
        }

        return style;
    },

    prepareInnerStyle: function prepareInnerStyle(props) {
        var style = assign({}, props.defaultInnerStyle, props.innerStyle);

        return normalize(style);
    },

    prepareInputProps: function prepareInputProps(props) {

        var inputProps = {
            className: props.inputClassName
        };

        assign(inputProps, props.defaultInputProps, props.inputProps);

        inputProps.key = 'field';
        inputProps.value = props.value;
        inputProps.placeholder = props.placeholder;
        inputProps.onChange = this.handleChange;
        inputProps.onSelect = this.handleSelect;
        inputProps.style = this.prepareInputStyle(props);
        inputProps.onFocus = this.handleFocus;
        inputProps.onBlur = this.handleBlur;
        inputProps.name = props.name;
        inputProps.disabled = props.disabled;
        inputProps.readOnly = props.readOnly;
        inputProps.autoFocus = props.autoFocus;

        return inputProps;
    },

    handleFocus: function handleFocus(event) {
        this._focused = true;

        //so as to apply focus style
        this.setState({});
    },

    handleBlur: function handleBlur() {
        this._focused = false;

        //so as to unapply focus style
        this.setState({});
    },

    isFocused: function isFocused() {
        return !!this._focused;
    },

    prepareInputStyle: function prepareInputStyle(props) {
        var inputStyle = props.inputProps ? props.inputProps.style : null;

        var style = assign({}, props.defaultInputStyle, props.inputStyle, inputStyle);

        if (props.empty) {
            assign(style, props.inputEmptyStyle);
        }

        if (!props.valid) {
            assign(style, props.defaultInputInvalidStyle, props.inputInvalidStyle);
        }

        return normalize(style);
    },

    prepareClearToolStyle: function prepareClearToolStyle(props, state) {
        var defaultClearToolOverStyle;
        var clearToolOverStyle;
        var clearToolColor;

        if (state && state.clearToolOver) {
            defaultClearToolOverStyle = props.defaultClearToolOverStyle;
            clearToolOverStyle = props.clearToolOverStyle;
        }

        if (props.clearToolColor) {
            clearToolColor = {
                color: props.clearToolColor
            };
            if (state && state.clearToolOver && props.clearToolOverColor) {
                clearToolColor = {
                    color: props.clearToolOverColor
                };
            }
        }

        var style = assign({}, props.defaultClearToolStyle, defaultClearToolOverStyle, clearToolColor, props.clearToolStyle, clearToolOverStyle);

        return style;
    }
};

var ReactClass = React.createClass(DESCRIPTOR);

ReactClass.descriptor = DESCRIPTOR;

exports['default'] = ReactClass;
module.exports = exports['default'];
//this.props.onFocus is called due to event propagation
//this.props.onBlur is called due to event propagation