coreui/lib/components/CalendarInput/CalendarInput.js

Platform Core UI

'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 _react2 = _interopRequireDefault(_react);

var _Shared = require('../../Shared');

var _Shared2 = _interopRequireDefault(_Shared);

var _reactWidgets = require('coreui-deps/lib/react-widgets');

var _reactWidgets2 = _interopRequireDefault(_reactWidgets);

var _CalendarInput = require('../../theme/components/CalendarInput');

var _CalendarInput2 = _interopRequireDefault(_CalendarInput);

var _dedupe = require('classnames/dedupe');

var _dedupe2 = _interopRequireDefault(_dedupe);

var _mapProps = require('recompose/mapProps');

var _mapProps2 = _interopRequireDefault(_mapProps);

var _ramda = require('ramda');

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

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

var RWCalendar = _reactWidgets2.default.Calendar;

var systemStyles = {};

var CalendarInputContainer = (0, _mapProps2.default)(function (_ref) {
  var className = _ref.className,
      sheet = _ref.sheet,
      style = _ref.style,
      theme = _ref.theme,
      rest = _objectWithoutProperties(_ref, ['className', 'sheet', 'style', 'theme']);

  return _extends({
    className: (0, _dedupe2.default)(sheet.classes.calendarInput, theme.classes.calendarInput, className),
    style: (0, _ramda.merge)(theme.styles.calendarInput, style)
  }, rest);
})(RWCalendar);

var StyledCalendarInput = _Shared2.default.injectSheet(systemStyles)(CalendarInputContainer);

/**
 * You must configure a [localizer](http://jquense.github.io/react-widgets/docs/#/i18n) to use this component!
 */
var CalendarInput = function CalendarInput(props) {
  return _react2.default.createElement(
    StyledCalendarInput,
    props,
    props.children
  );
};

var classes = _CalendarInput2.default.classes;
var options = _CalendarInput2.default.options;
var styles = _CalendarInput2.default.styles;

CalendarInput.defaultProps = {
  finalView: 'century',
  footer: false,
  initialView: 'month',
  isRtl: false,
  messages: { moveBack: 'navigate back', moveForward: 'navigate forward' },
  theme: { classes: classes, options: options, styles: styles }
};

CalendarInput.displayName = 'CalendarInput';

CalendarInput.propTypes = {
  /**
   * A formatter for century, the default formats the first and last year of the century like: 1900 - 1999.
   */
  centuryFormat: _react.PropTypes.string,

  children: _react.PropTypes.node,

  culture: _react.PropTypes.string,
  /**
   * Default current date at which the calendar opens. If none is provided, opens at today's date or the `value` date (if any).
   */
  currentDate: _react.PropTypes.instanceOf(Date),
  /**
   * A formatter for day of the month
   */
  dateFormat: _react.PropTypes.string,
  /**
   * Provide a custom component to render the days of the month. The Component is provided the following props
   * - `date`: a `Date` object for the day of the month to render
   * - `label`: a formatted `String` of the date to render. To adjust the format of the `label` string use the `dateFormat` prop, listed below.
   */
  dayComponent: _react.PropTypes.element,
  /**
   * A formatter calendar days of the week, the default formats each day as a Narrow name: "Mo", "Tu", etc.
   */
  dayFormat: _react.PropTypes.string,
  /**
   * A formatter for decade, the default formats the first and last year of the decade like: 2000 - 2009.
   */
  decadeFormat: _react.PropTypes.string,

  disabled: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.array]),
  /**
   * The highest level view the calendar can navigate up to. This value should be higher than `initialView`
   * Acceptable values are: `"month"` `"year"` `"decade"` `"century"`
   */
  finalView: _react.PropTypes.string,
  /**
   * Show or hide the Calendar footer.
   */
  footer: _react.PropTypes.bool,
  /**
   * A formatter for the Calendar footer, formats Today's Date as a string.
   */
  footerFormat: _react.PropTypes.string,
  /**
   * A formatter for the header button of the month view
   */
  headerFormat: _react.PropTypes.string,
  /**
   * The starting and lowest level view the calendar can navigate down to.
   */
  initialView: _react.PropTypes.string,
  /**
   * mark whether the widget should render right-to-left. This property can also be implicitly passed to the widget through a `childContext` prop (`isRtl`) this allows higher level application components to specify the direction.
   */
  isRtl: _react.PropTypes.bool,
  /**
   * The maximum date that the Calendar can navigate to.
   */
  max: _react.PropTypes.instanceOf(Date),
  /**
   * Object hash containing display text and/or text for screen readers. Use the `messages` object to localize widget text and increase accessibility.
   */
  messages: _react.PropTypes.shape({
    /**
     * title and screen reader text for the left arrow button
     */
    moveBack: _react.PropTypes.string,
    /**
     * title and screen reader text for the right arrow button
     */
    moveForward: _react.PropTypes.string
  }),
  /**
   * The minimum date that the Calendar can navigate from.
   */
  min: _react.PropTypes.instanceOf(Date),
  /**
   * A formatter for month name.
   */
  monthFormat: _react.PropTypes.string,
  /**
   * Change event Handler that is called when the value is changed. The handler is called with the Date object
   */
  onChange: _react.PropTypes.func,
  /**
   * Change event Handler that is called when the currentDate is changed. The handler is called with the currentDate object
   */
  onCurrentDateChange: _react.PropTypes.func,
  /**
   * Callback fired when the Calendar navigates between views, or forward and backwards in time.
   */
  onNavigate: _react.PropTypes.func,

  readOnly: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.array]),

  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object]),
  /**
   * The current selected date, should be a Date object or null.
   */
  value: _react.PropTypes.instanceOf(Date),
  /**
   * A formatter for the year.
   */
  yearFormat: _react.PropTypes.string
};

_Shared2.default.registerComponent('CalendarInput', CalendarInput);

exports.default = CalendarInput;