@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-beta.3

package/lib/cjs/calendar/monthCalendar.js

@@ -1,474 +0,0 @@
-"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 _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-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, _isEqual2.default)(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

@@ -1,51 +0,0 @@
-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;
-}