@seafile/seafile-calendar 0.0.1 → 0.0.3-Apoi0.1

package/es/year/YearPanel.js

@@ -0,0 +1,194 @@
+import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
+import _inherits from 'babel-runtime/helpers/inherits';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+var ROW = 4;
+var COL = 3;
+
+function goYear(direction) {
+  var value = this.state.value.clone();
+  value = value.add(direction, 'year');
+  this.setState({
+    value: value
+  });
+}
+
+function chooseYear(year) {
+  var value = this.state.value.clone();
+  value = value.year(year);
+  value = value.month(this.state.value.month());
+  this.setState({
+    value: value
+  });
+  this.props.onSelect(value);
+}
+
+var YearPanel = function (_React$Component) {
+  _inherits(YearPanel, _React$Component);
+
+  function YearPanel(props) {
+    _classCallCheck(this, YearPanel);
+
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+    _this.prefixCls = props.rootPrefixCls + '-year-panel';
+    _this.state = {
+      value: props.value || props.defaultValue
+    };
+    _this.nextDecade = goYear.bind(_this, 10);
+    _this.previousDecade = goYear.bind(_this, -10);
+    return _this;
+  }
+
+  YearPanel.prototype.years = function years() {
+    var value = this.state.value;
+    var currentYear = value.year();
+    var startYear = parseInt(currentYear / 10, 10) * 10;
+    var previousYear = startYear - 1;
+    var years = [];
+    var index = 0;
+    for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
+      years[rowIndex] = [];
+      for (var colIndex = 0; colIndex < COL; colIndex++) {
+        var year = previousYear + index;
+        var content = String(year);
+        years[rowIndex][colIndex] = {
+          content: content,
+          year: year,
+          title: content
+        };
+        index++;
+      }
+    }
+    return years;
+  };
+
+  YearPanel.prototype.render = function render() {
+    var _this2 = this;
+
+    var props = this.props;
+    var value = this.state.value;
+    var locale = props.locale,
+        renderFooter = props.renderFooter;
+
+    var years = this.years();
+    var currentYear = value.year();
+    var startYear = parseInt(currentYear / 10, 10) * 10;
+    var endYear = startYear + 9;
+    var prefixCls = this.prefixCls;
+
+    var yeasEls = years.map(function (row, index) {
+      var tds = row.map(function (yearData) {
+        var _classNameMap;
+
+        var classNameMap = (_classNameMap = {}, _classNameMap[prefixCls + '-cell'] = 1, _classNameMap[prefixCls + '-selected-cell'] = yearData.year === currentYear, _classNameMap);
+        return React.createElement(
+          'td',
+          {
+            role: 'gridcell',
+            title: yearData.title,
+            key: yearData.content,
+            onClick: chooseYear.bind(_this2, yearData.year),
+            className: classnames(classNameMap)
+          },
+          React.createElement(
+            'a',
+            {
+              className: prefixCls + '-year'
+            },
+            yearData.content
+          )
+        );
+      });
+      return React.createElement(
+        'tr',
+        { key: index, role: 'row' },
+        tds
+      );
+    });
+
+    var footer = renderFooter && renderFooter('year');
+
+    return React.createElement(
+      'div',
+      { className: this.prefixCls },
+      React.createElement(
+        'div',
+        null,
+        React.createElement(
+          'div',
+          { className: prefixCls + '-header' },
+          React.createElement('a', {
+            className: prefixCls + '-prev-decade-btn',
+            role: 'button',
+            onClick: this.previousDecade,
+            title: locale.previousDecade
+          }),
+          React.createElement(
+            'a',
+            {
+              className: prefixCls + '-decade-select',
+              role: 'button',
+              onClick: props.onDecadePanelShow,
+              title: locale.decadeSelect
+            },
+            React.createElement(
+              'span',
+              { className: prefixCls + '-decade-select-content' },
+              startYear,
+              '-',
+              endYear
+            ),
+            React.createElement(
+              'span',
+              { className: prefixCls + '-decade-select-arrow' },
+              'x'
+            )
+          ),
+          React.createElement('a', {
+            className: prefixCls + '-next-decade-btn',
+            role: 'button',
+            onClick: this.nextDecade,
+            title: locale.nextDecade
+          })
+        ),
+        React.createElement(
+          'div',
+          { className: prefixCls + '-body' },
+          React.createElement(
+            'table',
+            { className: prefixCls + '-table', cellSpacing: '0', role: 'grid' },
+            React.createElement(
+              'tbody',
+              { className: prefixCls + '-tbody' },
+              yeasEls
+            )
+          )
+        ),
+        footer && React.createElement(
+          'div',
+          { className: prefixCls + '-footer' },
+          footer
+        )
+      )
+    );
+  };
+
+  return YearPanel;
+}(React.Component);
+
+export default YearPanel;
+
+
+YearPanel.propTypes = {
+  rootPrefixCls: PropTypes.string,
+  value: PropTypes.object,
+  defaultValue: PropTypes.object,
+  renderFooter: PropTypes.func
+};
+
+YearPanel.defaultProps = {
+  onSelect: function onSelect() {}
+};

package/index.d.ts

@@ -4,7 +4,7 @@
 // Definitions: https://github.com/react-component/calendar
 
 import * as React from 'react';
-import { Moment } from 'moment';
+import { Dayjs } from 'dayjs';
 
 export type Mode = 'time' | 'date' | 'month' | 'year' | 'decade';
 
@@ -12,9 +12,9 @@ export interface Props {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
-  defaultValue?: Moment;
-  value?: Moment;
-  selectedValue?: Moment;
+  defaultValue?: Dayjs;
+  value?: Dayjs;
+  selectedValue?: Dayjs;
   mode?: Mode;
   locale?: object;
   format?: string | string[];
@@ -22,20 +22,21 @@ export interface Props {
   showWeekNumber?: boolean;
   showToday?: boolean;
   showOk?: boolean;
-  onSelect?: (date: Moment) => void;
+  onSelect?: (date: Dayjs) => void;
   onOk?: () => void;
   onKeyDown?: () => void;
+  onClickRightPanelTime?: () => void;
   timePicker?: React.ReactNode;
   dateInputPlaceholder?: string;
   onClear?: () => void;
-  onChange?: (date: Moment | null) => void;
-  onPanelChange?: (date: Moment | null, mode: Mode) => void;
-  disabledDate?: (current: Moment | undefined) => boolean;
-  disabledTime?: (current: Moment | undefined) => object;
-  dateRender?: (current: Moment, value: Moment) => React.ReactNode;
+  onChange?: (date: Dayjs | null) => void;
+  onPanelChange?: (date: Dayjs | null, mode: Mode) => void;
+  disabledDate?: (current: Dayjs | undefined) => boolean;
+  disabledTime?: (current: Dayjs | undefined) => object;
+  dateRender?: (current: Dayjs, value: Dayjs) => React.ReactNode;
   renderFooter?: () => React.ReactNode;
   renderSidebar?: () => React.ReactNode;
-  inputMode?:String
+  inputMode?: string;
 }
 
 export default class ReactCalendar extends React.Component<Props> {}