@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/calendar/dayCalendar.js

@@ -14,14 +14,11 @@ const prefixCls = `${cssClasses.PREFIX}-day`;
 export default class DayCalendar extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.checkWeekend = val => this.foundation.checkWeekend(val);
-
     this.renderAllDayEvents = events => {
       if (this.props.allDayEventsRender) {
         return this.props.allDayEventsRender(this.props.events);
       }
-
       const list = events.map((event, ind) => {
         const {
           children,
@@ -38,7 +35,6 @@ export default class DayCalendar extends BaseComponent {
       });
       return list;
     };
-
     this.handleClick = (e, val) => {
       const {
         onClick
@@ -46,7 +42,6 @@ export default class DayCalendar extends BaseComponent {
       const value = this.foundation.formatCbValue(val);
       onClick && onClick(e, value);
     };
-
     this.renderAllDay = events => {
       const allDayCls = `${cssClasses.PREFIX}-all-day`;
       const contentCls = cls(`${allDayCls}-content`, {
@@ -65,7 +60,6 @@ export default class DayCalendar extends BaseComponent {
         className: `${cssClasses.PREFIX}-event-items`
       }, this.renderAllDayEvents(events)))));
     };
-
     this.foundation = new CalendarFoundation(this.adapter);
     this.state = {
       scrollHeight: 0,
@@ -79,7 +73,6 @@ export default class DayCalendar extends BaseComponent {
     this.scrollDom = /*#__PURE__*/React.createRef();
     this.isWeekend = false;
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       updateScrollHeight: scrollHeight => {
@@ -99,7 +92,6 @@ export default class DayCalendar extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
     const {
@@ -109,20 +101,16 @@ export default class DayCalendar extends BaseComponent {
     this.foundation.notifyScrollHeight(scrollHeight);
     this.foundation.parseDailyEvents();
   }
-
   componentDidUpdate(prevProps, prevState) {
     const prevEventKeys = prevState.cachedKeys;
     const nowEventKeys = this.props.events.map(event => event.key);
-
     if (!_isEqual(prevEventKeys, nowEventKeys) || !_isEqual(prevProps.displayValue, this.props.displayValue)) {
       this.foundation.parseDailyEvents();
     }
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   render() {
     // eslint-disable-next-line max-len
     const {
@@ -171,7 +159,6 @@ export default class DayCalendar extends BaseComponent {
       dateGridRender: dateGridRender
     }))));
   }
-
 }
 DayCalendar.propTypes = {
   displayValue: PropTypes.instanceOf(Date),

package/lib/es/calendar/dayCol.js

@@ -8,15 +8,12 @@ import BaseComponent from '../_base/baseComponent';
 import localeContext from '../locale/context';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
 const prefixCls = `${cssClasses.PREFIX}-grid`;
-
 function pad(d) {
   return d < 10 ? `0${d.toString()}` : d.toString();
 }
-
 export default class DayCol extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.renderEvents = () => {
       const {
         events,
@@ -31,11 +28,9 @@ export default class DayCol extends BaseComponent {
         } = event;
         const top = startPos * scrollHeight;
         const height = (endPos - startPos) * scrollHeight;
-
         if (!height) {
           return undefined;
         }
-
         const style = {
           top: `${top}px`,
           height: `${height}px`
@@ -48,7 +43,6 @@ export default class DayCol extends BaseComponent {
       });
       return list;
     };
-
     this.renderCurrTime = () => {
       const {
         currPos
@@ -73,11 +67,9 @@ export default class DayCol extends BaseComponent {
         key: key
       }, circle, line);
     };
-
     this.handleClick = (e, val) => {
       this.props.handleClick(e, val);
     };
-
     this.renderGrid = () => {
       const showCurrTime = this.props.showCurrTime ? this.state.showCurrTime : false;
       const {
@@ -115,23 +107,19 @@ export default class DayCol extends BaseComponent {
         className: `${cssClasses.PREFIX}-event-items`
       }, this.renderEvents())));
     };
-
     this.state = {
       currPos: 0,
       showCurrTime: false
     };
     this.foundation = new CalendarFoundation(this.adapter);
   }
-
   componentDidMount() {
     this.foundation.init();
     this.foundation.initCurrTime();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       updateCurrPos: currPos => {
@@ -146,12 +134,10 @@ export default class DayCol extends BaseComponent {
       }
     });
   }
-
   render() {
     const grid = this.renderGrid();
     return grid;
   }
-
 }
 DayCol.propTypes = {
   events: PropTypes.array,

package/lib/es/calendar/index.js

@@ -1,14 +1,11 @@
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
@@ -17,16 +14,15 @@ import WeekCalendar from './weekCalendar';
 import MonthCalendar from './monthCalendar';
 import RangeCalendar from './rangeCalendar';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
-export * from './interface'; // eslint-disable-next-line @typescript-eslint/ban-types
-
+export * from './interface';
+// eslint-disable-next-line @typescript-eslint/ban-types
 class Calendar extends BaseComponent {
   render() {
     const _a = this.props,
-          {
-      mode
-    } = _a,
-          rest = __rest(_a, ["mode"]);
-
+      {
+        mode
+      } = _a,
+      rest = __rest(_a, ["mode"]);
     const component = {
       month: /*#__PURE__*/React.createElement(MonthCalendar, null),
       week: /*#__PURE__*/React.createElement(WeekCalendar, null),
@@ -35,9 +31,7 @@ class Calendar extends BaseComponent {
     };
     return /*#__PURE__*/React.cloneElement(component[mode], Object.assign({}, rest));
   }
-
 }
-
 Calendar.propTypes = {
   displayValue: PropTypes.instanceOf(Date),
   header: PropTypes.node,

package/lib/es/calendar/interface.d.ts

@@ -22,19 +22,19 @@ export interface CalendarProps extends BaseProps {
     dateGridRender?: (dateString?: string, date?: Date) => React.ReactNode;
     allDayEventsRender?: (events: EventObject[]) => React.ReactNode;
 }
-export declare type DayCalendarProps = Omit<CalendarProps, 'mode'>;
-declare type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender';
+export type DayCalendarProps = Omit<CalendarProps, 'mode'>;
+type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender';
 export interface DayColProps extends Pick<CalendarProps, DayCalendarPropsKeys>, BaseProps {
     scrollHeight: number;
     currPos: number;
     isWeekend: boolean;
     handleClick: (e: React.MouseEvent, val: [Date, number, number, number]) => void;
 }
-export declare type MonthCalendarProps = Omit<CalendarProps, 'range' | 'showCurrTime' | 'scrollTop' | 'renderTimeDisplay'>;
-export declare type RangeCalendarProps = CalendarProps;
+export type MonthCalendarProps = Omit<CalendarProps, 'range' | 'showCurrTime' | 'scrollTop' | 'renderTimeDisplay'>;
+export type RangeCalendarProps = CalendarProps;
 export interface TimeColProps {
     className?: string;
     renderTimeDisplay?: CalendarProps['renderTimeDisplay'];
 }
-export declare type WeekCalendarProps = CalendarProps;
+export type WeekCalendarProps = CalendarProps;
 export {};

package/lib/es/calendar/monthCalendar.js

@@ -1,12 +1,11 @@
 import _isEqual from "lodash/isEqual";
-
 /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import { IconClose } from '@douyinfe/semi-icons'; // eslint-disable-next-line max-len
-
+import { IconClose } from '@douyinfe/semi-icons';
+// eslint-disable-next-line max-len
 import CalendarFoundation from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/calendar/constants';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -15,27 +14,22 @@ import BaseComponent from '../_base/baseComponent';
 import Popover from '../popover';
 import Button from '../iconButton';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
-
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
   return `${res}%`;
 };
-
 const prefixCls = `${cssClasses.PREFIX}-month`;
 const contentPadding = 60;
 const contentHeight = 24;
 export default class monthCalendar extends BaseComponent {
   constructor(props) {
     var _this;
-
     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
@@ -43,11 +37,9 @@ export default class monthCalendar extends BaseComponent {
       const value = this.foundation.formatCbValue(val);
       onClick && onClick(e, value);
     };
-
     this.showCard = (e, key) => {
       this.foundation.showCard(e, key);
     };
-
     this.renderHeader = dateFnsLocale => {
       const {
         markWeekend,
@@ -78,12 +70,10 @@ export default class monthCalendar extends BaseComponent {
         }, /*#__PURE__*/React.createElement("span", null, weekday));
       }))));
     };
-
     this.renderEvents = events => {
       if (!events) {
         return undefined;
       }
-
       const list = events.map((event, ind) => {
         const {
           leftPos,
@@ -105,7 +95,6 @@ export default class monthCalendar extends BaseComponent {
       });
       return list;
     };
-
     this.renderCollapsed = (events, itemInfo, listCls, month) => {
       const {
         itemLimit,
@@ -118,8 +107,8 @@ export default class monthCalendar extends BaseComponent {
       } = itemInfo;
       const key = date.toString();
       const remained = events.filter(i => Boolean(i)).length - itemLimit;
-      const cardCls = `${prefixCls}-event-card`; // const top = contentPadding / 2 + this.state.itemLimit * contentHeight;
-
+      const cardCls = `${prefixCls}-event-card`;
+      // const top = contentPadding / 2 + this.state.itemLimit * contentHeight;
       const shouldRenderCard = remained > 0;
       const closer = /*#__PURE__*/React.createElement(Button, {
         className: `${cardCls}-close`,
@@ -175,16 +164,13 @@ export default class monthCalendar extends BaseComponent {
         onClick: e => this.handleClick(e, [date])
       }, this.formatDayString(date, month, dayString), shouldRenderCard ? text : null, this.renderCusDateGrid(date)));
     };
-
     this.formatDayString = (dateObj, month, date) => {
       const {
         renderDateDisplay
       } = this.props;
-
       if (renderDateDisplay) {
         return renderDateDisplay(dateObj);
       }
-
       if (date === '1') {
         return /*#__PURE__*/React.createElement(LocaleConsumer, {
           componentName: "Calendar"
@@ -194,7 +180,6 @@ export default class monthCalendar extends BaseComponent {
           className: `${cssClasses.PREFIX}-today-date`
         }, "\u00A0", date), locale.datestring));
       }
-
       return (
         /*#__PURE__*/
         // eslint-disable-next-line max-len
@@ -205,19 +190,15 @@ export default class monthCalendar extends BaseComponent {
         }, 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 {
@@ -262,17 +243,14 @@ export default class monthCalendar extends BaseComponent {
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
         }, _this.formatDayString(date, month, dayString), _this.renderCusDateGrid(date));
-
         if (!shouldRenderCollapsed) {
           return inner;
         }
-
         return _this.renderCollapsed(day[ind], each, listCls, month);
       })), /*#__PURE__*/React.createElement("ul", {
         className: `${cssClasses.PREFIX}-event-items`
       }, display ? _this.renderEvents(display) : null));
     };
-
     this.renderMonthGrid = () => {
       const {
         parsedEvents
@@ -285,7 +263,6 @@ export default class monthCalendar extends BaseComponent {
         className: `${prefixCls}-grid-col`
       }, Object.keys(this.monthlyData).map(weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
-
     this.state = {
       itemLimit: 0,
       showCard: {},
@@ -297,20 +274,17 @@ export default class monthCalendar extends BaseComponent {
     this.handleClick = this.handleClick.bind(this);
     this.cardRef = new Map();
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, 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 cardInstance = this.cardRef && this.cardRef.get(key);
+          // eslint-disable-next-line react/no-find-dom-node
           const cardDom = ReactDOM.findDOMNode(cardInstance);
-
           if (cardDom && !cardDom.contains(e.target)) {
             cb();
           }
         };
-
         this.clickOutsideHandler = clickOutsideHandler;
         document.addEventListener('mousedown', clickOutsideHandler, false);
       },
@@ -354,17 +328,14 @@ export default class monthCalendar extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
     const itemLimit = this.calcItemLimit();
     this.foundation.parseMonthlyEvents(itemLimit);
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   componentDidUpdate(prevProps, prevState) {
     const prevEventKeys = prevState.cachedKeys;
     const nowEventKeys = this.props.events.map(event => event.key);
@@ -372,24 +343,19 @@ export default class monthCalendar extends BaseComponent {
     let {
       itemLimit
     } = this.state;
-
     if (prevProps.height !== this.props.height) {
       itemLimit = this.calcItemLimit();
-
       if (prevState.itemLimit !== itemLimit) {
         itemLimitUpdate = true;
       }
     }
-
     if (!_isEqual(prevEventKeys, nowEventKeys) || itemLimitUpdate || !_isEqual(prevProps.displayValue, this.props.displayValue)) {
       this.foundation.parseMonthlyEvents(itemLimit || this.props.events);
     }
   }
-
   closeCard(e, key) {
     this.foundation.closeCard(e, key);
   }
-
   render() {
     const {
       className,
@@ -418,7 +384,6 @@ export default class monthCalendar extends BaseComponent {
       className: `${prefixCls}-grid-wrapper`
     }, this.renderMonthGrid())));
   }
-
 }
 monthCalendar.propTypes = {
   displayValue: PropTypes.instanceOf(Date),

package/lib/es/calendar/rangeCalendar.js

@@ -1,8 +1,8 @@
 import _isEqual from "lodash/isEqual";
 import React, { Fragment } from 'react';
 import cls from 'classnames';
-import PropTypes from 'prop-types'; // eslint-disable-next-line max-len
-
+import PropTypes from 'prop-types';
+// eslint-disable-next-line max-len
 import CalendarFoundation from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
 import LocaleConsumer from '../locale/localeConsumer';
 import localeContext from '../locale/context';
@@ -12,18 +12,15 @@ import DayCol from './dayCol';
 import TimeCol from './timeCol';
 import { calcRowHeight } from '@douyinfe/semi-foundation/lib/es/calendar/eventUtil';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
-
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
   return `${res}%`;
 };
-
 const prefixCls = `${cssClasses.PREFIX}-week`;
 const allDayCls = `${cssClasses.PREFIX}-all-day`;
 export default class RangeCalendar extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.handleClick = (e, val) => {
       const {
         onClick
@@ -31,7 +28,6 @@ export default class RangeCalendar extends BaseComponent {
       const value = this.foundation.formatCbValue(val);
       onClick && onClick(e, value);
     };
-
     this.renderDayGrid = () => {
       const {
         parsedEvents
@@ -61,7 +57,6 @@ export default class RangeCalendar extends BaseComponent {
       });
       return inner;
     };
-
     this.renderHeader = dateFnsLocale => {
       const {
         markWeekend,
@@ -101,12 +96,10 @@ export default class RangeCalendar extends BaseComponent {
         }, dateContent);
       }))));
     };
-
     this.renderAllDayEvents = events => {
       if (this.props.allDayEventsRender) {
         return this.props.allDayEventsRender(this.props.events);
       }
-
       const list = events.map((event, ind) => {
         const {
           leftPos,
@@ -128,7 +121,6 @@ export default class RangeCalendar extends BaseComponent {
       });
       return list;
     };
-
     this.renderAllDay = locale => {
       const {
         allDayEventsRender
@@ -168,7 +160,6 @@ export default class RangeCalendar extends BaseComponent {
         className: `${cssClasses.PREFIX}-event-items`
       }, this.renderAllDayEvents(parsed))));
     };
-
     this.state = {
       scrollHeight: 0,
       parsedEvents: {
@@ -183,7 +174,6 @@ export default class RangeCalendar extends BaseComponent {
     this.handleClick = this.handleClick.bind(this);
     this.allDayRowHeight = 1;
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       setRangeData: data => {
@@ -207,7 +197,6 @@ export default class RangeCalendar extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
     const {
@@ -217,20 +206,16 @@ export default class RangeCalendar extends BaseComponent {
     this.foundation.notifyScrollHeight(scrollHeight);
     this.foundation.parseRangeEvents();
   }
-
   componentDidUpdate(prevProps, prevState) {
     const prevEventKeys = prevState.cachedKeys;
     const nowEventKeys = this.props.events.map(event => event.key);
-
     if (!_isEqual(prevEventKeys, nowEventKeys) || !_isEqual(prevProps.range, this.props.range)) {
       this.foundation.parseRangeEvents();
     }
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   render() {
     const {
       renderTimeDisplay,
@@ -263,7 +248,6 @@ export default class RangeCalendar extends BaseComponent {
       renderTimeDisplay: renderTimeDisplay
     }), this.renderDayGrid()))));
   }
-
 }
 RangeCalendar.propTypes = {
   // displayValue: PropTypes.instanceOf(Date),

package/lib/es/calendar/timeCol.js

@@ -11,27 +11,22 @@ export default class timeCol extends PureComponent {
     const {
       renderTimeDisplay
     } = this.props;
-
     if (typeof renderTimeDisplay === 'function') {
       return renderTimeDisplay(item);
     } else {
       const replaceTime = (template, time) => template.replace('${time}', String(time));
-
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Calendar",
         key: `locale-${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() {
     const {
       className
@@ -49,12 +44,10 @@ export default class timeCol extends PureComponent {
       className: `${prefixCls}-items`
     }, inner));
   }
-
   render() {
     const time = this.renderTime();
     return time;
   }
-
 }
 timeCol.propTypes = {
   className: PropTypes.string,