instantjob-recruiter-client/dist/components/period_picker.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _constants = require('../common/constants');

var _md = require('react-icons/lib/md');

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

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

var cx = _bind2.default.bind(require('../styles/period_picker.scss'));

// TODO: correct file

var PeriodPicker = function (_Component) {
  (0, _inherits3.default)(PeriodPicker, _Component);

  function PeriodPicker(props) {
    (0, _classCallCheck3.default)(this, PeriodPicker);

    var _this = (0, _possibleConstructorReturn3.default)(this, (PeriodPicker.__proto__ || (0, _getPrototypeOf2.default)(PeriodPicker)).call(this, props));

    _this.state = {
      date_from: '',
      date_to: '',
      hour_from: '',
      hour_to: '',
      week: [true, true, true, true, true, false, false]
    };
    _this.select_day = _this.select_day.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(PeriodPicker, [{
    key: 'select_day',
    value: function select_day(index) {
      var updated_week = this.state.week;
      updated_week[index] = !updated_week[index];
      this.setState({ week: [].concat((0, _toConsumableArray3.default)(updated_week)) });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var cancel_bootstrap_margin = -5;
      return _react2.default.createElement(
        'div',
        { className: cx('period-picker') },
        _react2.default.createElement(
          'div',
          { className: cx('period-picker__times-fields') },
          _react2.default.createElement(
            'div',
            { style: { color: (0, _constants.color)('black') } },
            _react2.default.createElement(_md.MdEvent, null)
          ),
          _react2.default.createElement(
            'div',
            { className: cx('period-picker__times-inputs') },
            _react2.default.createElement('input', {
              type: 'text',
              className: cx('period-picker__input'),
              placeholder: 'Du',
              value: this.state.date_from,
              onChange: function onChange(event) {
                _this2.setState({ date_from: event.target.value });
              }
            }),
            _react2.default.createElement('input', {
              type: 'text',
              className: cx('period-picker__input'),
              placeholder: 'Au',
              value: this.state.date_to,
              onChange: function onChange(event) {
                _this2.setState({ date_to: event.target.value });
              },
              style: { marginLeft: 20 }
            })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: cx('period-picker__times-fields', 'period-picker__times-fields_hours') },
          _react2.default.createElement(
            'div',
            { style: { color: (0, _constants.color)('black') } },
            _react2.default.createElement(_md.MdQueryBuilder, null)
          ),
          _react2.default.createElement(
            'div',
            { style: { display: 'flex', marginLeft: 20, marginBottom: cancel_bootstrap_margin } },
            _react2.default.createElement('input', {
              type: 'text',
              className: cx('period-picker__input'),
              placeholder: 'De',
              value: this.state.hour_from,
              onChange: function onChange(event) {
                _this2.setState({ hour_from: event.target.value });
              }
            }),
            _react2.default.createElement('input', {
              type: 'text',
              className: cx('period-picker__input'),
              placeholder: 'A',
              value: this.state.hour_to,
              onChange: function onChange(event) {
                _this2.setState({ hour_to: event.target.value });
              },
              style: { marginLeft: 20 }
            })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: cx('period-picker__times-fields', 'period-picker__times-fields_week') },
          ["L", "M", "M", "J", "V", "S", "D"].map(function (day, index) {
            return _react2.default.createElement(WeekDay, { day: day, key: index, selected: _this2.state.week[index], select_day: function select_day() {
                return _this2.select_day(index);
              } });
          })
        )
      );
    }
  }]);
  return PeriodPicker;
}(_react.Component);

var WeekDay = function WeekDay(props) {
  return _react2.default.createElement(
    'div',
    { className: cx('period-picker__week-day', { 'period-picker__week-day_selected': props.selected }) },
    _react2.default.createElement(
      'span',
      { onClick: props.select_day },
      props.day
    )
  );
};

exports.default = PeriodPicker;