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

package/lib/cjs/calendar/weekCalendar.js

@@ -0,0 +1,331 @@
+"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");
+
+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 WeekCalendar extends _baseComponent.default {
+  constructor(props) {
+    var _context8;
+
+    super(props);
+
+    this.checkWeekend = val => this.foundation.checkWeekend(val);
+
+    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.weeklyData;
+      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,
+        displayValue
+      } = this.props;
+      const {
+        month,
+        week
+      } = this.foundation.getWeeklyData(displayValue, 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,
+          key
+        } = 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.parseWeeklyAllDayEvents(allDay);
+      const maxRowHeight = (0, _eventUtil.calcRowHeight)(parsed);
+      const style = {
+        height: "".concat(maxRowHeight, "em")
+      };
+      const {
+        markWeekend
+      } = this.props;
+      const {
+        week
+      } = this.weeklyData;
+      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), {
+      setWeeklyData: data => {
+        this.weeklyData = data;
+      },
+      getWeeklyData: () => this.weeklyData,
+      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.parseWeeklyEvents();
+  }
+
+  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.parseWeeklyEvents();
+    }
+  }
+
+  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 = WeekCalendar;
+WeekCalendar.propTypes = {
+  displayValue: _propTypes.default.instanceOf(Date),
+  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
+};
+WeekCalendar.defaultProps = {
+  displayValue: new Date(),
+  events: [],
+  mode: 'week'
+};
+WeekCalendar.contextType = _context10.default;

package/lib/cjs/card/cardGroup.d.ts

@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export declare type CardGroupType = 'grid';
+export interface CardGroupProps {
+    /** Card group style class name */
+    className?: string;
+    /** Card Spacing */
+    spacing?: number | number[];
+    /** Card group inline style */
+    style?: React.CSSProperties;
+    /** Card set type */
+    type?: CardGroupType;
+}
+declare class CardGroup extends PureComponent<CardGroupProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        spacing: PropTypes.Requireable<number | any[]>;
+        style: PropTypes.Requireable<object>;
+        type: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        spacing: number;
+    };
+    render(): JSX.Element;
+}
+export default CardGroup;

package/lib/cjs/card/cardGroup.js

@@ -0,0 +1,87 @@
+"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 _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/card/constants");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _space = _interopRequireDefault(require("../space"));
+
+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; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const prefixcls = _constants.cssClasses.PREFIX;
+
+class CardGroup extends _react.PureComponent {
+  render() {
+    const _a = this.props,
+          {
+      children,
+      className,
+      spacing,
+      style,
+      type
+    } = _a,
+          others = __rest(_a, ["children", "className", "spacing", "style", "type"]);
+
+    const isGrid = type === 'grid';
+    const cardGroupCls = (0, _classnames.default)("".concat(prefixcls, "-group"), className, {
+      ["".concat(prefixcls, "-group-grid")]: isGrid
+    });
+    return /*#__PURE__*/_react.default.createElement(_space.default, (0, _assign.default)({
+      spacing: isGrid ? 0 : spacing,
+      wrap: true,
+      className: cardGroupCls,
+      style: style
+    }, others), children);
+  }
+
+}
+
+CardGroup.propTypes = {
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.array]),
+  style: _propTypes.default.object,
+  type: _propTypes.default.oneOf(_constants.strings.TYPE)
+};
+CardGroup.defaultProps = {
+  spacing: 16
+};
+var _default = CardGroup;
+exports.default = _default;

package/lib/cjs/card/index.d.ts

@@ -0,0 +1,75 @@
+import { PureComponent, ReactNode, CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/card/card.css';
+import Meta from './meta';
+export declare type Shadows = 'hover' | 'always';
+export { MetaProps } from './meta';
+export { CardGroupProps } from './cardGroup';
+export interface CardProps {
+    /** Operation group at the bottom of the card content area */
+    actions?: ReactNode[];
+    /** Card content area inline style */
+    bodyStyle?: CSSProperties;
+    /** Whether there is an outer border */
+    bordered?: boolean;
+    /** Style class name */
+    className?: string;
+    /** Cover */
+    cover?: ReactNode;
+    /** Additional additions to the right of the title */
+    headerExtraContent?: ReactNode;
+    /** Custom end of page */
+    footer?: ReactNode;
+    /** Whether there is an edge between the bottom of the page and the content area */
+    footerLine?: boolean;
+    /** Inline style at the end of the page */
+    footerStyle?: CSSProperties;
+    /** Custom head */
+    header?: ReactNode;
+    /** Whether there is an edge line between the head and the content area */
+    headerLine?: boolean;
+    /** Head inline style */
+    headerStyle?: CSSProperties;
+    /** Whether to preload */
+    loading?: boolean;
+    /** Set shadow */
+    shadows?: Shadows;
+    /** Card inline style */
+    style?: CSSProperties;
+    /** Title */
+    title?: ReactNode;
+}
+declare class Card extends PureComponent<CardProps> {
+    static Meta: typeof Meta;
+    static propTypes: {
+        actions: PropTypes.Requireable<any[]>;
+        bodyStyle: PropTypes.Requireable<object>;
+        bordered: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        cover: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footerLine: PropTypes.Requireable<boolean>;
+        footerStyle: PropTypes.Requireable<object>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        headerExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        headerLine: PropTypes.Requireable<boolean>;
+        headerStyle: PropTypes.Requireable<object>;
+        loading: PropTypes.Requireable<boolean>;
+        shadows: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    static defaultProps: {
+        bordered: boolean;
+        footerLine: boolean;
+        headerLine: boolean;
+        loading: boolean;
+    };
+    renderHeader: () => ReactNode;
+    renderCover: () => ReactNode;
+    renderBody: () => ReactNode;
+    renderFooter: () => ReactNode;
+    render(): ReactNode;
+}
+export default Card;