@douyinfe/semi-ui 2.1.0-beta.3 → 2.1.0-next.3

package/lib/cjs/calendar/rangeCalendar.js

@@ -0,0 +1,329 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/calendar/foundation"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _context10 = _interopRequireDefault(require("../locale/context"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/calendar/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _dayCol = _interopRequireDefault(require("./dayCol"));
+
+var _timeCol = _interopRequireDefault(require("./timeCol"));
+
+var _eventUtil = require("@douyinfe/semi-foundation/lib/cjs/calendar/eventUtil");
+
+require("@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css");
+
+// eslint-disable-next-line max-len
+const toPercent = num => {
+  const res = num < 1 ? num * 100 : 100;
+  return "".concat(res, "%");
+};
+
+const prefixCls = "".concat(_constants.cssClasses.PREFIX, "-week");
+const allDayCls = "".concat(_constants.cssClasses.PREFIX, "-all-day");
+
+class RangeCalendar extends _baseComponent.default {
+  constructor(props) {
+    var _context8;
+
+    super(props);
+
+    this.handleClick = (e, val) => {
+      const {
+        onClick
+      } = this.props;
+      const value = this.foundation.formatCbValue(val);
+      onClick && onClick(e, value);
+    };
+
+    this.renderDayGrid = () => {
+      const {
+        parsedEvents
+      } = this.state;
+      const events = parsedEvents.day;
+      const {
+        week
+      } = this.RangeData;
+      const {
+        markWeekend,
+        dateGridRender
+      } = this.props;
+      const inner = (0, _map.default)(week).call(week, day => {
+        const dateString = day.date.toString();
+        const dayEvents = events.has(dateString) ? events.get(dateString) : [];
+        const parsed = this.foundation.getParseDailyEvents(dayEvents, day.date);
+        return /*#__PURE__*/_react.default.createElement(_dayCol.default, {
+          key: "".concat(dateString, "-weekday"),
+          displayValue: day.date,
+          scrollHeight: this.state.scrollHeight,
+          handleClick: this.handleClick,
+          events: parsed.day,
+          showCurrTime: this.props.showCurrTime,
+          isWeekend: markWeekend && day.isWeekend,
+          dateGridRender: dateGridRender
+        });
+      });
+      return inner;
+    };
+
+    this.renderHeader = dateFnsLocale => {
+      var _context, _context2;
+
+      const {
+        markWeekend,
+        range
+      } = this.props;
+      const {
+        month,
+        week
+      } = this.foundation.getRangeData(range[0], dateFnsLocale);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-header")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: (0, _concat.default)(_context = (0, _concat.default)(_context2 = "".concat(_constants.cssClasses.PREFIX, "-tag ")).call(_context2, prefixCls, "-tag ")).call(_context, prefixCls, "-sticky-left")
+      }, /*#__PURE__*/_react.default.createElement("span", null, month)), /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        className: "".concat(prefixCls, "-grid")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(prefixCls, "-grid-row")
+      }, (0, _map.default)(week).call(week, day => {
+        const {
+          date,
+          dayString,
+          weekday,
+          isToday
+        } = day;
+        const listCls = (0, _classnames.default)({
+          ["".concat(_constants.cssClasses.PREFIX, "-today")]: isToday,
+          ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
+        });
+        return /*#__PURE__*/_react.default.createElement("li", {
+          key: "".concat(date.toString(), "-weekheader"),
+          className: listCls
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "".concat(_constants.cssClasses.PREFIX, "-today-date")
+        }, dayString), /*#__PURE__*/_react.default.createElement("span", null, weekday));
+      }))));
+    };
+
+    this.renderAllDayEvents = events => {
+      const list = (0, _map.default)(events).call(events, (event, ind) => {
+        var _context3;
+
+        const {
+          leftPos,
+          width,
+          topInd,
+          children
+        } = event;
+        const top = "".concat(topInd, "em");
+        const style = {
+          left: toPercent(leftPos),
+          width: toPercent(width),
+          top
+        };
+        return /*#__PURE__*/_react.default.createElement("li", {
+          className: (0, _concat.default)(_context3 = "".concat(_constants.cssClasses.PREFIX, "-event-item ")).call(_context3, _constants.cssClasses.PREFIX, "-event-allday"),
+          key: "allDay-".concat(ind),
+          style: style
+        }, children);
+      });
+      return list;
+    };
+
+    this.renderAllDay = locale => {
+      var _context4, _context5, _context6, _context7;
+
+      const {
+        allDay
+      } = this.state.parsedEvents;
+      const parsed = this.foundation.parseRangeAllDayEvents(allDay);
+      const maxRowHeight = (0, _eventUtil.calcRowHeight)(parsed);
+      const style = {
+        height: "".concat(maxRowHeight, "em")
+      };
+      const {
+        markWeekend
+      } = this.props;
+      const {
+        week
+      } = this.RangeData;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(allDayCls),
+        style: style
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = "".concat(_constants.cssClasses.PREFIX, "-tag ")).call(_context5, allDayCls, "-tag ")).call(_context4, prefixCls, "-sticky-left")
+      }, /*#__PURE__*/_react.default.createElement("span", null, locale.allDay)), /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        className: (0, _concat.default)(_context6 = "".concat(_constants.cssClasses.PREFIX, "-content ")).call(_context6, allDayCls, "-content")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(allDayCls, "-skeleton")
+      }, (0, _map.default)(_context7 = (0, _keys.default)(week)).call(_context7, (date, ind) => {
+        const listCls = (0, _classnames.default)({
+          ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && week[date].isWeekend
+        });
+        return /*#__PURE__*/_react.default.createElement("li", {
+          key: "".concat(date, "-weekgrid"),
+          className: listCls
+        });
+      })), /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(_constants.cssClasses.PREFIX, "-event-items")
+      }, this.renderAllDayEvents(parsed))));
+    };
+
+    this.state = {
+      scrollHeight: 0,
+      parsedEvents: {
+        day: new _map2.default(),
+        allDay: new _map2.default()
+      },
+      cachedKeys: []
+    };
+    this.foundation = new _foundation.default(this.adapter);
+    this.dom = /*#__PURE__*/_react.default.createRef();
+    this.scrollDom = /*#__PURE__*/_react.default.createRef();
+    this.handleClick = (0, _bind.default)(_context8 = this.handleClick).call(_context8, this);
+    this.allDayRowHeight = 1;
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setRangeData: data => {
+        this.RangeData = data;
+      },
+      getRangeData: () => this.RangeData,
+      updateScrollHeight: scrollHeight => {
+        this.setState({
+          scrollHeight
+        });
+      },
+      setParsedEvents: parsedEvents => {
+        this.setState({
+          parsedEvents: parsedEvents
+        });
+      },
+      cacheEventKeys: cachedKeys => {
+        this.setState({
+          cachedKeys
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+    const {
+      scrollHeight
+    } = this.scrollDom.current;
+    this.dom.current.scrollTop = this.props.scrollTop;
+    this.foundation.notifyScrollHeight(scrollHeight);
+    this.foundation.parseRangeEvents();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _context9;
+
+    const prevEventKeys = prevState.cachedKeys;
+    const nowEventKeys = (0, _map.default)(_context9 = this.props.events).call(_context9, event => event.key);
+
+    if (!(0, _isEqual2.default)(prevEventKeys, nowEventKeys)) {
+      this.foundation.parseRangeEvents();
+    }
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    const {
+      renderTimeDisplay,
+      className,
+      height,
+      width,
+      style,
+      header
+    } = this.props;
+    const weekCls = (0, _classnames.default)(prefixCls, className);
+    const weekStyle = (0, _assign.default)({
+      height,
+      width
+    }, style);
+    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Calendar"
+    }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/_react.default.createElement("div", {
+      className: weekCls,
+      style: weekStyle,
+      ref: this.dom
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-sticky-top")
+    }, header, this.renderHeader(dateFnsLocale), this.renderAllDay(locale)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-scroll-wrapper")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-scroll"),
+      ref: this.scrollDom
+    }, /*#__PURE__*/_react.default.createElement(_timeCol.default, {
+      className: "".concat(prefixCls, "-sticky-left"),
+      renderTimeDisplay: renderTimeDisplay
+    }), this.renderDayGrid()))));
+  }
+
+}
+
+exports.default = RangeCalendar;
+RangeCalendar.propTypes = {
+  // displayValue: PropTypes.instanceOf(Date),
+  range: _propTypes.default.array,
+  header: _propTypes.default.node,
+  events: _propTypes.default.array,
+  mode: _propTypes.default.string,
+  showCurrTime: _propTypes.default.bool,
+  markWeekend: _propTypes.default.bool,
+  scrollTop: _propTypes.default.number,
+  renderTimeDisplay: _propTypes.default.func,
+  dateGridRender: _propTypes.default.func,
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  style: _propTypes.default.object,
+  className: _propTypes.default.string
+};
+RangeCalendar.defaultProps = {
+  events: [],
+  mode: 'range'
+};
+RangeCalendar.contextType = _context10.default;

package/lib/cjs/calendar/timeCol.d.ts

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css';
+import { TimeColProps } from './interface';
+import { Locale } from '../locale/interface';
+export default class timeCol extends PureComponent<TimeColProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static contextType: React.Context<Locale>;
+    formatTime(item: number): React.ReactNode;
+    renderTime(): JSX.Element;
+    render(): JSX.Element;
+}

package/lib/cjs/calendar/timeCol.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _context3 = _interopRequireDefault(require("../locale/context"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/calendar/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const prefixCls = "".concat(_constants.cssClasses.PREFIX, "-time");
+
+class timeCol extends _react.PureComponent {
+  formatTime(item) {
+    const {
+      renderTimeDisplay
+    } = this.props;
+
+    if (typeof renderTimeDisplay === 'function') {
+      return renderTimeDisplay(item);
+    } else {
+      const replaceTime = (template, time) => template.replace('${time}', String(time));
+
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Calendar",
+        key: "locale-".concat(item)
+      }, locale => {
+        let time = item < 12 ? replaceTime(locale.AM, item) : replaceTime(locale.PM, item - 12);
+
+        if (item === 12) {
+          time = replaceTime(locale.PM, item);
+        }
+
+        return time;
+      });
+    }
+  }
+
+  renderTime() {
+    var _context, _context2;
+
+    const {
+      className
+    } = this.props;
+    const wrapperCls = (0, _classnames.default)(className, "".concat(prefixCls));
+    const list = (0, _map.default)(_context = [...(0, _keys.default)(_context2 = Array(24)).call(_context2)]).call(_context, item => this.formatTime(item));
+    (0, _splice.default)(list).call(list, 0, 1, '');
+    const inner = (0, _map.default)(list).call(list, (item, index) => /*#__PURE__*/_react.default.createElement("li", {
+      key: "time-".concat(index),
+      className: "".concat(prefixCls, "-item")
+    }, /*#__PURE__*/_react.default.createElement("span", null, item)));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls
+    }, /*#__PURE__*/_react.default.createElement("ul", {
+      className: "".concat(prefixCls, "-items")
+    }, inner));
+  }
+
+  render() {
+    const time = this.renderTime();
+    return time;
+  }
+
+}
+
+exports.default = timeCol;
+timeCol.propTypes = {
+  className: _propTypes.default.string,
+  renderTimeDisplay: _propTypes.default.func
+};
+timeCol.contextType = _context3.default;

package/lib/cjs/calendar/weekCalendar.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CalendarFoundation, { CalendarAdapter, EventObject, ParsedEvents, ParsedRangeEvent, WeeklyData } from '@douyinfe/semi-foundation/lib/cjs/calendar/foundation';
+import BaseComponent from '../_base/baseComponent';
+import { WeekCalendarProps } from './interface';
+import '@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css';
+import { Locale } from '../locale/interface';
+export interface WeekCalendarState {
+    scrollHeight: number;
+    parsedEvents: ParsedEvents;
+    cachedKeys: Array<string>;
+}
+export default class WeekCalendar extends BaseComponent<WeekCalendarProps, WeekCalendarState> {
+    static propTypes: {
+        displayValue: PropTypes.Requireable<Date>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        events: PropTypes.Requireable<any[]>;
+        mode: PropTypes.Requireable<string>;
+        showCurrTime: PropTypes.Requireable<boolean>;
+        markWeekend: PropTypes.Requireable<boolean>;
+        scrollTop: PropTypes.Requireable<number>;
+        renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
+        dateGridRender: PropTypes.Requireable<(...args: any[]) => any>;
+        width: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<string | number>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        displayValue: Date;
+        events: EventObject[];
+        mode: string;
+    };
+    static contextType: React.Context<Locale>;
+    dom: React.RefObject<HTMLDivElement>;
+    scrollDom: React.RefObject<HTMLDivElement>;
+    allDayRowHeight: number;
+    weeklyData: WeeklyData;
+    foundation: CalendarFoundation;
+    constructor(props: WeekCalendarProps);
+    get adapter(): CalendarAdapter<WeekCalendarProps, WeekCalendarState>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: WeekCalendarProps, prevState: WeekCalendarState): void;
+    componentWillUnmount(): void;
+    checkWeekend: (val: Date) => boolean;
+    handleClick: (e: React.MouseEvent, val: [Date, number, number, number]) => void;
+    renderDayGrid: () => JSX.Element[];
+    renderHeader: (dateFnsLocale: any) => JSX.Element;
+    renderAllDayEvents: (events: ParsedRangeEvent[]) => JSX.Element[];
+    renderAllDay: (locale: Locale['Calendar']) => JSX.Element;
+    render(): JSX.Element;
+}