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

package/lib/cjs/calendar/monthCalendar.js

@@ -0,0 +1,474 @@
+"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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodashEs = require("lodash-es");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/calendar/foundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/calendar/constants");
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _context6 = _interopRequireDefault(require("../locale/context"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _iconButton = _interopRequireDefault(require("../iconButton"));
+
+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, "-month");
+const contentPadding = 60;
+const contentHeight = 24;
+
+class monthCalendar extends _baseComponent.default {
+  constructor(props) {
+    var _this, _context4;
+
+    super(props);
+    _this = this;
+
+    this.calcItemLimit = () => {
+      this.contentCellHeight = this.cellDom.current.getBoundingClientRect().height;
+      return Math.max(0, Math.ceil((this.contentCellHeight - contentPadding) / contentHeight));
+    };
+
+    this.handleClick = (e, val) => {
+      const {
+        onClick
+      } = this.props;
+      const value = this.foundation.formatCbValue(val);
+      onClick && onClick(e, value);
+    };
+
+    this.showCard = (e, key) => {
+      this.foundation.showCard(e, key);
+    };
+
+    this.renderHeader = dateFnsLocale => {
+      var _context;
+
+      const {
+        markWeekend,
+        displayValue
+      } = this.props;
+      this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-header")
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        className: "".concat(prefixCls, "-grid")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(prefixCls, "-grid-row")
+      }, (0, _map.default)(_context = this.monthlyData[0]).call(_context, day => {
+        const {
+          weekday
+        } = day;
+        const listCls = (0, _classnames.default)({
+          ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
+        });
+        return /*#__PURE__*/_react.default.createElement("li", {
+          key: "".concat(weekday, "-monthheader"),
+          className: listCls
+        }, /*#__PURE__*/_react.default.createElement("span", null, weekday));
+      }))));
+    };
+
+    this.renderEvents = events => {
+      if (!events) {
+        return undefined;
+      }
+
+      const list = (0, _map.default)(events).call(events, (event, ind) => {
+        var _context2;
+
+        const {
+          leftPos,
+          width,
+          topInd,
+          key,
+          children
+        } = event;
+        const style = {
+          left: toPercent(leftPos),
+          width: toPercent(width),
+          top: "".concat(topInd, "em")
+        };
+        return /*#__PURE__*/_react.default.createElement("li", {
+          className: (0, _concat.default)(_context2 = "".concat(_constants.cssClasses.PREFIX, "-event-item ")).call(_context2, _constants.cssClasses.PREFIX, "-event-month"),
+          key: key || "".concat(ind, "-monthevent"),
+          style: style
+        }, children);
+      });
+      return list;
+    };
+
+    this.renderCollapsed = (events, itemInfo, listCls, month) => {
+      const {
+        itemLimit,
+        showCard
+      } = this.state;
+      const {
+        weekday,
+        dayString,
+        date
+      } = itemInfo;
+      const key = date.toString();
+      const remained = (0, _filter.default)(events).call(events, i => Boolean(i)).length - itemLimit;
+      const cardCls = "".concat(prefixCls, "-event-card"); // const top = contentPadding / 2 + this.state.itemLimit * contentHeight;
+
+      const shouldRenderCard = remained > 0;
+
+      const closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+        className: "".concat(cardCls, "-close"),
+        onClick: e => this.closeCard(e, key),
+        type: "tertiary",
+        icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+        theme: "borderless",
+        size: "small"
+      });
+
+      const header = /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-header-info")
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-header-info-weekday")
+      }, weekday), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-header-info-date")
+      }, dayString));
+
+      const content = /*#__PURE__*/_react.default.createElement("div", {
+        className: cardCls
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-content")
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-header")
+      }, header, closer), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-body")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(cardCls, "-list")
+      }, (0, _map.default)(events).call(events, item => /*#__PURE__*/_react.default.createElement("li", {
+        key: item.key || "".concat(item.start.toString(), "-event")
+      }, item.children))))));
+
+      const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
+
+      const text = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Calendar"
+      }, locale => /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(cardCls, "-wrapper"),
+        style: {
+          bottom: 0
+        },
+        onClick: e => this.showCard(e, key)
+      }, locale.remaining.replace('${remained}', String(remained))));
+
+      return /*#__PURE__*/_react.default.createElement(_popover.default, {
+        key: "".concat(date.valueOf()),
+        content: content,
+        position: pos,
+        trigger: "custom",
+        visible: showCard && showCard[key] && showCard[key][0],
+        ref: ref => this.cardRef.set(key, ref)
+      }, /*#__PURE__*/_react.default.createElement("li", {
+        key: date,
+        className: listCls,
+        onClick: e => this.handleClick(e, [date])
+      }, this.formatDayString(month, dayString), shouldRenderCard ? text : null, this.renderCusDateGrid(date)));
+    };
+
+    this.formatDayString = (month, date) => {
+      if (date === '1') {
+        return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+          componentName: "Calendar"
+        }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement("span", {
+          className: "".concat(prefixCls, "-date")
+        }, month, /*#__PURE__*/_react.default.createElement("span", {
+          className: "".concat(_constants.cssClasses.PREFIX, "-today-date")
+        }, "\u00A0", date), locale.datestring));
+      }
+
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line max-len
+        _react.default.createElement("span", {
+          className: "".concat(prefixCls, "-date")
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "".concat(_constants.cssClasses.PREFIX, "-today-date")
+        }, date))
+      );
+    };
+
+    this.renderCusDateGrid = date => {
+      const {
+        dateGridRender
+      } = this.props;
+
+      if (!dateGridRender) {
+        return null;
+      }
+
+      return dateGridRender(date.toString(), date);
+    };
+
+    this.renderWeekRow = function (index, weekDay) {
+      let events = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const {
+        markWeekend
+      } = _this.props;
+      const {
+        itemLimit
+      } = _this.state;
+      const {
+        display,
+        day
+      } = events;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        className: "".concat(prefixCls, "-weekrow"),
+        ref: _this.cellDom,
+        key: "".concat(index, "-weekrow")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(prefixCls, "-skeleton")
+      }, (0, _map.default)(weekDay).call(weekDay, each => {
+        const {
+          date,
+          dayString,
+          isToday,
+          isSameMonth,
+          isWeekend,
+          month,
+          ind
+        } = each;
+        const listCls = (0, _classnames.default)({
+          ["".concat(_constants.cssClasses.PREFIX, "-today")]: isToday,
+          ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && isWeekend,
+          ["".concat(prefixCls, "-same")]: isSameMonth
+        });
+        const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
+
+        const inner = /*#__PURE__*/_react.default.createElement("li", {
+          key: "".concat(date, "-weeksk"),
+          className: listCls,
+          onClick: e => _this.handleClick(e, [date])
+        }, _this.formatDayString(month, dayString), _this.renderCusDateGrid(date));
+
+        if (!shouldRenderCollapsed) {
+          return inner;
+        }
+
+        return _this.renderCollapsed(day[ind], each, listCls, month);
+      })), /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(_constants.cssClasses.PREFIX, "-event-items")
+      }, display ? _this.renderEvents(display) : null));
+    };
+
+    this.renderMonthGrid = () => {
+      var _context3;
+
+      const {
+        parsedEvents
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        className: "".concat(prefixCls, "-week")
+      }, /*#__PURE__*/_react.default.createElement("ul", {
+        className: "".concat(prefixCls, "-grid-col")
+      }, (0, _map.default)(_context3 = (0, _keys.default)(this.monthlyData)).call(_context3, weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
+    };
+
+    this.state = {
+      itemLimit: 0,
+      showCard: {},
+      parsedEvents: {},
+      cachedKeys: []
+    };
+    this.cellDom = /*#__PURE__*/_react.default.createRef();
+    this.foundation = new _foundation.default(this.adapter);
+    this.handleClick = (0, _bind.default)(_context4 = this.handleClick).call(_context4, this);
+    this.cardRef = new _map2.default();
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      registerClickOutsideHandler: (key, cb) => {
+        const clickOutsideHandler = e => {
+          const cardInstance = this.cardRef && this.cardRef.get(key); // eslint-disable-next-line react/no-find-dom-node
+
+          const cardDom = _reactDom.default.findDOMNode(cardInstance);
+
+          if (cardDom && !cardDom.contains(e.target)) {
+            cb();
+          }
+        };
+
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('mousedown', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+      },
+      setMonthlyData: data => {
+        this.monthlyData = data;
+      },
+      getMonthlyData: () => this.monthlyData,
+      notifyClose: (e, key) => {
+        const updates = {};
+        updates[key] = [false];
+        this.setState(prevState => ({
+          showCard: (0, _assign.default)((0, _assign.default)({}, prevState.showCard), updates)
+        }));
+        this.props.onClose && this.props.onClose(e);
+      },
+      openCard: (key, spacing) => {
+        const updates = {};
+        const pos = spacing ? 'leftTopOver' : 'rightTopOver';
+        updates[key] = [true, pos];
+        this.setState(prevState => ({
+          showCard: (0, _assign.default)({}, updates)
+        }));
+      },
+      setParsedEvents: parsedEvents => {
+        this.setState({
+          parsedEvents
+        });
+      },
+      setItemLimit: itemLimit => {
+        this.setState({
+          itemLimit
+        });
+      },
+      cacheEventKeys: cachedKeys => {
+        this.setState({
+          cachedKeys
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+    const itemLimit = this.calcItemLimit();
+    this.foundation.parseMonthlyEvents(itemLimit);
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _context5;
+
+    const prevEventKeys = prevState.cachedKeys;
+    const nowEventKeys = (0, _map.default)(_context5 = this.props.events).call(_context5, event => event.key);
+    let itemLimitUpdate = false;
+    let {
+      itemLimit
+    } = this.state;
+
+    if (prevProps.height !== this.props.height) {
+      itemLimit = this.calcItemLimit();
+
+      if (prevState.itemLimit !== itemLimit) {
+        itemLimitUpdate = true;
+      }
+    }
+
+    if (!(0, _lodashEs.isEqual)(prevEventKeys, nowEventKeys) || itemLimitUpdate) {
+      this.foundation.parseMonthlyEvents(itemLimit || this.props.events);
+    }
+  }
+
+  closeCard(e, key) {
+    this.foundation.closeCard(e, key);
+  }
+
+  render() {
+    const {
+      className,
+      height,
+      width,
+      style,
+      header
+    } = this.props;
+    const monthCls = (0, _classnames.default)(prefixCls, className);
+    const monthStyle = (0, _assign.default)({
+      height,
+      width
+    }, style);
+    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Calendar"
+    }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/_react.default.createElement("div", {
+      className: monthCls,
+      key: this.state.itemLimit,
+      style: monthStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-sticky-top")
+    }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-grid-wrapper")
+    }, this.renderMonthGrid())));
+  }
+
+}
+
+exports.default = monthCalendar;
+monthCalendar.propTypes = {
+  displayValue: _propTypes.default.instanceOf(Date),
+  header: _propTypes.default.node,
+  events: _propTypes.default.array,
+  mode: _propTypes.default.string,
+  markWeekend: _propTypes.default.bool,
+  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,
+  dateGridRender: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  onClose: _propTypes.default.func
+};
+monthCalendar.defaultProps = {
+  displayValue: new Date(),
+  events: [],
+  mode: 'month'
+};
+monthCalendar.contextType = _context6.default;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CalendarFoundation, { ParsedEvents, CalendarAdapter, RangeData, ParsedRangeEvent } from '@douyinfe/semi-foundation/lib/cjs/calendar/foundation';
+import BaseComponent from '../_base/baseComponent';
+import '@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css';
+import { RangeCalendarProps } from './interface';
+import { Locale } from '../locale/interface';
+export interface RangeCalendarState {
+    scrollHeight: number;
+    parsedEvents: ParsedEvents;
+    cachedKeys: Array<string>;
+}
+export default class RangeCalendar extends BaseComponent<RangeCalendarProps, RangeCalendarState> {
+    static propTypes: {
+        range: PropTypes.Requireable<any[]>;
+        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: {
+        events: ParsedEvents[];
+        mode: string;
+    };
+    static contextType: React.Context<Locale>;
+    dom: React.RefObject<HTMLDivElement>;
+    scrollDom: React.RefObject<HTMLDivElement>;
+    isWeekend: boolean;
+    allDayRowHeight: number;
+    RangeData: RangeData;
+    foundation: CalendarFoundation;
+    constructor(props: RangeCalendarProps);
+    get adapter(): CalendarAdapter<RangeCalendarProps, RangeCalendarState>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RangeCalendarProps, prevState: RangeCalendarState): void;
+    componentWillUnmount(): void;
+    handleClick: (e: React.MouseEvent, val: [Date, number, number, number]) => void;
+    renderDayGrid: () => JSX.Element[];
+    renderHeader: (dateFnsLocale: Locale['dateFnsLocale']) => JSX.Element;
+    renderAllDayEvents: (events: Array<ParsedRangeEvent>) => JSX.Element[];
+    renderAllDay: (locale: Locale['Calendar']) => JSX.Element;
+    render(): JSX.Element;
+}