tui-date-picker-react/dist/index.modern.js

React plugin for tui-date-picker

import React__default, { useRef, useState, useEffect, createElement } from 'react';
import DatePicker from 'tui-date-picker';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';

function _extends() {
  _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;
  };

  return _extends.apply(this, arguments);
}

var TuiDatePicker = function TuiDatePicker(props) {
  var date = props.date,
      format = props.format,
      showAlways = props.showAlways,
      timePicker = props.timePicker,
      style = props.style,
      language = props.language,
      type = props.type,
      onChange = props.onChange,
      onClose = props.onClose,
      onDraw = props.onDraw,
      onOpen = props.onOpen;
  var tuiWrapperRef = useRef(null);
  var tuiInputRef = useRef(null);

  var _useState = useState(),
      tui = _useState[0],
      setTui = _useState[1];

  useEffect(function () {
    if (tui === undefined) {
      setTui(new DatePicker(tuiWrapperRef.current || '#wrapper', _extends(_extends({}, props), {}, {
        date: date,
        input: {
          element: tuiInputRef.current || '#datepicker-input',
          format: format || 'yyyy-MM-dd'
        },
        showAlways: showAlways || false,
        timePicker: timePicker || false,
        language: language,
        type: type || 'date'
      })));
    } else {
      tui.on('change', function () {
        return typeof onChange === 'function' ? onChange(tui.getDate()) : undefined;
      });
      tui.on('close', function () {
        return typeof onClose === 'function' ? onClose() : undefined;
      });
      tui.on('draw', function (event) {
        return typeof onDraw === 'function' ? onDraw(event) : undefined;
      });
      tui.on('open', function () {
        return typeof onOpen === 'function' ? onOpen() : undefined;
      });
    }

    return function () {
      if (tui !== undefined) {
        tui.destroy();
      }
    };
  });
  return createElement("div", {
    style: style
  }, createElement("div", {
    className: 'tui-datepicker-input tui-datetime-input tui-has-focus'
  }, createElement("input", {
    type: 'text',
    ref: tuiInputRef,
    id: 'datepicker-input',
    "aria-label": 'Date-Time'
  }), createElement("span", {
    className: 'tui-ico-date'
  })), createElement("div", {
    id: 'wrapper',
    ref: tuiWrapperRef
  }));
};

var TuiDateRangePicker = function TuiDateRangePicker(props) {
  var today = props.today,
      tomorrow = props.tomorrow,
      to = props.to,
      style = props.style,
      onChange = props.onChange;

  var _useState = useState(),
      rangePicker = _useState[0],
      setRangePicker = _useState[1];

  var startPickerContainerRef = useRef(null);
  var startPickerInputRef = useRef(null);
  var endPickerContainerRef = useRef(null);
  var endPickerInputRef = useRef(null);
  useEffect(function () {
    if (rangePicker === undefined) {
      setRangePicker(DatePicker.createRangePicker(_extends(_extends({}, props), {}, {
        startpicker: {
          date: today || new Date(),
          input: startPickerInputRef.current || '#startpicker-input',
          container: startPickerContainerRef.current || '#startpicker-container'
        },
        endpicker: {
          date: tomorrow || new Date(),
          input: endPickerInputRef.current || '#endpicker-input',
          container: endPickerContainerRef.current || '#endpicker-container'
        }
      })));
    } else {
      rangePicker.on('change:start', function () {
        return typeof onChange === 'function' ? onChange([rangePicker.getStartDate(), rangePicker.getEndDate()]) : undefined;
      });
      rangePicker.on('change:end', function () {
        return typeof onChange === 'function' ? onChange([rangePicker.getStartDate(), rangePicker.getEndDate()]) : undefined;
      });
    }

    return function () {
      if (rangePicker !== undefined) {
        rangePicker.destroy();
      }
    };
  });
  return React__default.createElement("div", {
    style: style
  }, React__default.createElement("div", {
    className: 'tui-datepicker-input tui-datetime-input tui-has-focus'
  }, React__default.createElement("input", {
    id: 'startpicker-input',
    type: 'text',
    "aria-label": 'Date',
    ref: startPickerInputRef
  }), React__default.createElement("span", {
    className: 'tui-ico-date'
  }), React__default.createElement("div", {
    id: 'startpicker-container',
    ref: startPickerContainerRef
  })), to || React__default.createElement("span", null, "to"), React__default.createElement("div", {
    className: 'tui-datepicker-input tui-datetime-input tui-has-focus'
  }, React__default.createElement("input", {
    id: 'endpicker-input',
    type: 'text',
    "aria-label": 'Date',
    ref: endPickerInputRef
  }), React__default.createElement("span", {
    className: 'tui-ico-date'
  }), React__default.createElement("div", {
    id: 'endpicker-container',
    ref: endPickerContainerRef
  })));
};

var TuiDatePicker$1 = function TuiDatePicker$1(props) {
  return React__default.createElement(TuiDatePicker, Object.assign({}, props));
};
var TuiDateRangePicker$1 = function TuiDateRangePicker$1(props) {
  return React__default.createElement(TuiDateRangePicker, Object.assign({}, props));
};

export default TuiDatePicker;
export { TuiDatePicker$1 as TuiDatePicker, TuiDateRangePicker$1 as TuiDateRangePicker };
//# sourceMappingURL=index.modern.js.map