react-date-field/lib/index.old.js

React DateField

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactClass = require('react-class');

var _reactClass2 = _interopRequireDefault(_reactClass);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _reactFlex = require('react-flex');

var _reactField = require('react-field');

var _reactField2 = _interopRequireDefault(_reactField);

var _reactDatePicker = require('react-date-picker');

var _reactDatePicker2 = _interopRequireDefault(_reactDatePicker);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var toUpperFirst = require('./toUpperFirst');
var toMoment = require('./toMoment');
var isDate = require('./isDate');
var isMoment = require('./isMoment');
var CONFIG = require('./config');

function emptyFn() {}

var Utils = require('react-field-component-utils');

module.exports = _react2.default.createClass({

    displayName: 'ReactDateField',

    mixins: [Utils],

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

    getDefaultProps: function getDefaultProps() {
        return {
            constrainTo: true,
            validate: true,
            calendarToolColor: '#a8a8a8',
            calendarToolOverColor: '#7F7C7C',
            calendarToolWidth: 15,
            showPickerOnFocus: true,
            dateFormat: CONFIG.dateFormat,
            strict: true,
            defaultStyle: {
                display: 'inline-block'
            },
            defaultFieldStyle: {
                width: '100%'
            },
            defaultPickerFactory: DatePickerFactory,
            defaultPickerStyle: {
                background: 'white',
                zIndex: 1,
                position: 'absolute',
                left: 0,
                top: '100%'
            }
        };
    },

    render: function render() {

        this.toMoment = function (value, config) {
            return toMoment(value, this.props.dateFormat, config || {
                strict: this.props.strict
            });
        };

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

        var picker = this.renderPicker(props, state);
        var hiddenField = this.renderHiddenField(props, state);

        return _react2.default.createElement(
            'div',
            this.prepareWrapperProps(props, state),
            hiddenField,
            _react2.default.createElement(
                Field,
                props.fieldProps,
                picker
            )
        );
    },

    renderPicker: function renderPicker(props, state) {
        return this._renderPicker(props, state);
    },

    renderHiddenField: function renderHiddenField(props, state) {
        return props.hiddenName ? _react2.default.createElement('input', { type: 'hidden', value: this.getValue(props, state), name: props.hiddenName }) : null;
    },

    format: function format(moment) {
        return moment.format(this.props.dateFormat);
    },

    prepareProps: function prepareProps(thisProps, state) {
        var props = {};

        (0, _objectAssign2.default)(props, thisProps);

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

        props.style = this.prepareStyle(props);
        props.fieldProps = this.prepareFieldProps(props, state);
        props.pickerProps = this.preparePickerProps(props);

        return props;
    },

    renderTools: function renderTools(props, clearTool) {
        var calendarTool = props.renderCalendarTool || this.renderCalendarTool;

        return [clearTool, calendarTool(props)];
    },

    renderCalendarTool: function renderCalendarTool(props) {

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

        var state = this.state;

        var color = state.calendarToolMouseOver ? props.calendarToolOverColor : props.calendarToolColor;

        var width = props.calendarToolWidth;

        var style = normalize({
            position: 'relative',
            display: 'flex',
            flexFlow: 'row',
            alignItems: 'stretch',
            cursor: 'pointer',
            padding: '7px 5px 5px 5px',
            boxSizing: 'border-box'
        });

        var innerStyle = {
            width: width,
            borderColor: color,
            borderStyle: 'solid',
            borderWidth: '4px 2px 2px 2px',
            boxSizing: 'border-box',
            position: 'relative'
        };

        var topMarkerStyle = {
            borderColor: color,
            borderStyle: 'solid',
            borderWidth: '0px 3px 0px 3px',
            boxSizing: 'border-box',
            height: 5,
            right: 1,
            left: 1,
            top: -6,
            position: 'absolute'
        };

        var centerMarkerStyle = {
            position: 'absolute',
            bottom: 2,
            right: 2,
            width: 4,
            height: 4,
            background: color

        };

        return _react2.default.createElement(
            'div',
            { style: style,
                key: 'calendarTool',
                onMouseEnter: this.handleCalendarToolMouseEnter,
                onMouseLeave: this.handleCalendarToolMouseLeave,
                onClick: this.handleCalendarToolClick,
                onMouseDown: this.handleCalendarToolMouseDown
            },
            _react2.default.createElement(
                'div',
                { style: innerStyle },
                _react2.default.createElement('div', { style: topMarkerStyle }),
                _react2.default.createElement('div', { style: centerMarkerStyle })
            )
        );
    },

    handleCalendarToolMouseEnter: function handleCalendarToolMouseEnter() {
        this.setState({
            calendarToolMouseOver: true
        });
    },

    handleCalendarToolMouseLeave: function handleCalendarToolMouseLeave() {
        this.setState({
            calendarToolMouseOver: false
        });
    },

    handleCalendarToolClick: function handleCalendarToolClick() {
        this.togglePicker();
    },

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

    prepareValue: function prepareValue(props, state) {
        var value = this.getValue(props, state);
        props.strictMoment = this.toMoment(value, { strict: true });

        props.moment = props.strictMoment.isValid() ? this.toMoment(props.strictMoment) : this.toMoment(value);

        if (isDate(value) || typeof value == 'number' || isMoment(value)) {
            value = this.format(props.moment);
        }

        var valid = true;

        if (props.strictMoment.isValid()) {
            value = this.format(props.moment);
        } else if (!props.moment.isValid()) {
            valid = false;
            // delete props.moment
        }

        props.valid = valid;

        return value;
    },

    preparePickerProps: function preparePickerProps(props) {
        var pickerProps = this._preparePickerProps(props);

        if (props.valid) {
            pickerProps.date = props.moment;
        }

        pickerProps.onMouseDown = this.handlePickerMouseDown.bind(this, props, pickerProps);
        pickerProps.onChange = this.handlePickerChange.bind(this, props, pickerProps);
        // pickerProps.style.position

        return pickerProps;
    },

    handlePickerMouseDown: function handlePickerMouseDown(props, pickerProps, event) {
        var initialPickerProps = this.props.pickerProps;

        if (initialPickerProps && initialPickerProps.onMouseDown) {
            initialPickerProps.onMouseDown(event);
        }

        event.preventDefault();
    },

    handlePickerChange: function handlePickerChange(props, pickerProps, text, moment) {

        var initialPickerProps = this.props.pickerProps || {};
        var args = [].slice.call(arguments, 2);(initialPickerProps.onChange || emptyFn).apply(null, args);

        this.notify(text);

        this.setPickerVisible(false);
    },

    prepareFieldProps: function prepareFieldProps(props, state) {

        var fieldProps = this._prepareFieldProps(props, state);

        fieldProps.value = props.value;

        if (fieldProps.validate === true) {
            fieldProps.validate = function () {
                return props.strictMoment.isValid();
            };
        }

        return fieldProps;
    },

    prepareStyle: function prepareStyle(props) {
        var style = {};

        (0, _objectAssign2.default)(style, props.defaultStyle, props.style);

        return style;
    },

    getValue: function getValue(props, state) {
        return props.value === undefined ? state.defaultValue : props.value;
    },

    handleKeyDown: function handleKeyDown(props, event) {
        var key = event.key;
        var fn = 'handle' + toUpperFirst(key) + 'KeyDown';

        if (this[fn]) {
            this[fn](props, event);
        }
    },

    handleChange: function handleChange(props, value, fieldProps, event) {
        if (props.readOnly && event && event.type == 'input') {
            //cancel change event from input
            return;
        }

        var moment = this.toMoment(value);

        if (this.props.value === undefined) {
            this.setState({
                defaultValue: value
            });
        }

        var args = [value, moment, event];(props.onChange || emptyFn).apply(null, args);

        var fieldProps = this.props.fieldProps || {};(fieldProps.onChange || emptyFn).apply(null, args);
    },

    prepareWrapperProps: function prepareWrapperProps(props) {
        var wrapperProps = this._prepareWrapperProps.apply(this, arguments);

        wrapperProps.style = this.prepareWrapperStyle(props, wrapperProps);

        return wrapperProps;
    },

    prepareWrapperStyle: function prepareWrapperStyle(props, wrapperProps) {
        var style = (0, _objectAssign2.default)({}, wrapperProps.style);

        if (style.position != 'absolute') {
            //in order for the
            style.position = 'relative';
        }

        return style;
    },

    notify: function notify() {
        return this._notify.apply(this, arguments);
    },

    focus: function focus() {
        return this._focus.apply(this, arguments);
    },

    getInput: function getInput() {
        return this._getInput.apply(this, arguments);
    },

    isFocused: function isFocused() {
        return this._isFocused.apply(this, arguments);
    },

    handleFocus: function handleFocus(event) {
        if (this.props.showPickerOnFocus) {
            this.setPickerVisible(true);
        }

        var fieldProps = this.props.fieldProps;

        if (fieldProps && fieldProps.onFocus) {
            fieldProps.onFocus(event);
        }

        if (this.props.onFocus) {
            this.props.onFocus(event);
        }
    },

    handleBlur: function handleBlur(event) {
        this.setPickerVisible(false);

        var fieldProps = this.props.fieldProps;

        if (fieldProps && fieldProps.onBlur) {
            fieldProps.onBlur(event);
        }

        if (this.props.onBlur) {
            this.props.onBlur(event);
        }
    },

    isPickerVisible: function isPickerVisible() {
        return this._isPickerVisible();
    },

    setPickerVisible: function setPickerVisible(bool) {
        if (bool != this.state.pickerVisible) {

            var value = this.getValue(this.props, this.state);

            var fn = bool ? this.props.onPickerShow : this.props.onPickerHide;(fn || emptyFn)(value);

            this.setState({
                pickerVisible: bool
            });
        }
    },

    togglePicker: function togglePicker() {
        this.setState({
            pickerVisible: !this.state.pickerVisible
        });
    }
});