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

package/lib/cjs/avatar/avatarGroup.js

@@ -0,0 +1,171 @@
+"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 _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/avatar/constants");
+
+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 sizeSet = _constants.strings.SIZE;
+const shapeSet = _constants.strings.SHAPE;
+const overlapFromSet = _constants.strings.OVERLAP_FROM;
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class AvatarGroup extends _react.PureComponent {
+  getAllAvatars() {
+    const {
+      children
+    } = this.props;
+    return (0, _isArray.default)(children) ? children : [children];
+  }
+
+  getMergeAvatars(avatars) {
+    const {
+      maxCount
+    } = this.props;
+    let renderAvatars = avatars;
+    const restNumber = avatars.length - maxCount;
+    const normalAvatars = (0, _slice.default)(avatars).call(avatars, 0, maxCount);
+    const restAvatars = (0, _slice.default)(avatars).call(avatars, maxCount);
+
+    if (restNumber > 0) {
+      const more = this.renderMoreAvatar(restNumber, restAvatars);
+      normalAvatars.push(more);
+      renderAvatars = normalAvatars;
+    }
+
+    return renderAvatars;
+  }
+
+  renderMoreAvatar(restNumber, restAvatars) {
+    const {
+      renderMore
+    } = this.props;
+    const moreCls = (0, _classnames.default)("".concat(prefixCls, "-item-more"));
+
+    let moreAvatar = /*#__PURE__*/_react.default.createElement(_index.default, {
+      className: moreCls,
+      key: "_+n"
+    }, "+".concat(restNumber));
+
+    if ((0, _isFunction2.default)(renderMore)) {
+      moreAvatar = /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: "_+n"
+      }, renderMore(restNumber, restAvatars));
+    }
+
+    return moreAvatar;
+  }
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const _a = this.props,
+          {
+      children,
+      maxCount,
+      overlapFrom,
+      size,
+      shape,
+      renderMore
+    } = _a,
+          rest = __rest(_a, ["children", "maxCount", "overlapFrom", "size", "shape", "renderMore"]);
+
+    let inner;
+    const groupCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-group")]: true
+    });
+
+    if (children) {
+      var _context;
+
+      const avatars = this.getAllAvatars();
+      inner = (0, _map.default)(_context = (0, _isNumber2.default)(maxCount) ? this.getMergeAvatars(avatars) : avatars).call(_context, (itm, index) => {
+        var _context2, _context3;
+
+        const className = (0, _classnames.default)((0, _get2.default)(itm.props, 'className'), {
+          [(0, _concat.default)(_context2 = "".concat(prefixCls, "-item-start-")).call(_context2, index)]: overlapFrom === 'start',
+          [(0, _concat.default)(_context3 = "".concat(prefixCls, "-item-end-")).call(_context3, index)]: overlapFrom === 'end'
+        });
+        return /*#__PURE__*/_react.default.cloneElement(itm, (0, _assign.default)((0, _assign.default)({}, rest), {
+          className,
+          size,
+          shape,
+          key: index
+        }));
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: groupCls
+    }, inner);
+  }
+
+}
+
+exports.default = AvatarGroup;
+AvatarGroup.defaultProps = {
+  size: 'medium',
+  shape: 'circle',
+  overlapFrom: 'start'
+};
+AvatarGroup.propTypes = {
+  children: _propTypes.default.node,
+  shape: _propTypes.default.oneOf(shapeSet),
+  size: _propTypes.default.oneOf(sizeSet),
+  maxCount: _propTypes.default.number,
+  renderMore: _propTypes.default.func,
+  overlapFrom: _propTypes.default.oneOf(overlapFromSet)
+};

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AvatarAdapter } from '@douyinfe/semi-foundation/lib/cjs/avatar/foundation';
+import '@douyinfe/semi-foundation/lib/cjs/avatar/avatar.css';
+import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
+import BaseComponent from '../_base/baseComponent';
+import { AvatarProps } from './interface';
+export * from './interface';
+export interface AvatarState {
+    isImgExist: boolean;
+    hoverContent: React.ReactNode;
+}
+export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
+    static defaultProps: {
+        size: string;
+        color: string;
+        shape: string;
+        onClick: typeof noop;
+        onMouseEnter: typeof noop;
+        onMouseLeave: typeof noop;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        color: PropTypes.Requireable<string>;
+        shape: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        hoverMask: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        imgAttr: PropTypes.Requireable<object>;
+        src: PropTypes.Requireable<string>;
+        srcSet: PropTypes.Requireable<string>;
+        alt: PropTypes.Requireable<string>;
+        onError: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    constructor(props: AvatarProps);
+    get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: AvatarProps): void;
+    componentWillUnmount(): void;
+    onEnter(): void;
+    onLeave(): void;
+    handleError(): void;
+    render(): JSX.Element;
+}

package/lib/cjs/avatar/index.js

@@ -0,0 +1,259 @@
+"use strict";
+
+var _context7;
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _exportNames = {};
+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 _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/avatar/constants");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/avatar/foundation"));
+
+require("@douyinfe/semi-foundation/lib/cjs/avatar/avatar.css");
+
+var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _interface = require("./interface");
+
+_forEachInstanceProperty(_context7 = _Object$keys(_interface)).call(_context7, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interface[key];
+    }
+  });
+});
+
+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 sizeSet = _constants.strings.SIZE;
+const shapeSet = _constants.strings.SHAPE;
+const colorSet = _constants.strings.COLOR;
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class Avatar extends _baseComponent.default {
+  constructor(props) {
+    var _context, _context2, _context3;
+
+    super(props);
+    this.state = {
+      isImgExist: true,
+      hoverContent: ''
+    };
+    this.onEnter = (0, _bind.default)(_context = this.onEnter).call(_context, this);
+    this.onLeave = (0, _bind.default)(_context2 = this.onLeave).call(_context2, this);
+    this.handleError = (0, _bind.default)(_context3 = this.handleError).call(_context3, this);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      notifyImgState: isImgExist => {
+        this.setState({
+          isImgExist
+        });
+      },
+      notifyEnter: e => {
+        const {
+          hoverMask
+        } = this.props;
+        const hoverContent = hoverMask;
+        this.setState({
+          hoverContent
+        }, () => {
+          const {
+            onMouseEnter
+          } = this.props;
+          onMouseEnter && onMouseEnter(e);
+        });
+      },
+      notifyLeave: e => {
+        this.setState({
+          hoverContent: ''
+        }, () => {
+          const {
+            onMouseLeave
+          } = this.props;
+          onMouseLeave && onMouseLeave(e);
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation = new _foundation.default(this.adapter);
+    this.foundation.init();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.src && this.props.src !== prevProps.src) {
+      const image = new Image(0, 0);
+      image.src = this.props.src;
+
+      image.onload = () => {
+        this.setState({
+          isImgExist: true
+        });
+      };
+
+      image.onerror = () => {
+        this.setState({
+          isImgExist: false
+        });
+      };
+
+      image.onabort = () => {
+        this.setState({
+          isImgExist: false
+        });
+      };
+    }
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  onEnter() {
+    this.foundation.handleEnter();
+  }
+
+  onLeave() {
+    this.foundation.handleLeave();
+  }
+
+  handleError() {
+    this.foundation.handleImgLoadError();
+  }
+
+  render() {
+    var _context4, _context5, _context6;
+
+    // eslint-disable-next-line max-len, no-unused-vars
+    const _a = this.props,
+          {
+      shape,
+      children,
+      size,
+      color,
+      className,
+      hoverMask,
+      onClick,
+      imgAttr,
+      src,
+      srcSet,
+      style,
+      alt
+    } = _a,
+          others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
+
+    const {
+      isImgExist,
+      hoverContent
+    } = this.state;
+    const isImg = src && isImgExist;
+    const avatarCls = (0, _classnames.default)(prefixCls, {
+      [(0, _concat.default)(_context4 = "".concat(prefixCls, "-")).call(_context4, shape)]: shape,
+      [(0, _concat.default)(_context5 = "".concat(prefixCls, "-")).call(_context5, size)]: size,
+      [(0, _concat.default)(_context6 = "".concat(prefixCls, "-")).call(_context6, color)]: color && !isImg,
+      ["".concat(prefixCls, "-img")]: isImg
+    }, className);
+    let content = children;
+    const hoverRender = hoverContent ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-hover")
+    }, hoverContent) : null;
+
+    if (isImg) {
+      content = /*#__PURE__*/_react.default.createElement("img", (0, _assign.default)({
+        src: src,
+        srcSet: srcSet,
+        onError: this.handleError,
+        alt: alt
+      }, imgAttr));
+    } else if (typeof children === 'string') {
+      content = /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(prefixCls, "-content")
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(prefixCls, "-label")
+      }, children));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({}, others, {
+      style: style,
+      className: avatarCls,
+      onClick: onClick,
+      onMouseEnter: this.onEnter,
+      onMouseLeave: this.onLeave
+    }), content, hoverRender);
+  }
+
+}
+
+exports.default = Avatar;
+Avatar.defaultProps = {
+  size: 'medium',
+  color: 'grey',
+  shape: 'circle',
+  onClick: _function.noop,
+  onMouseEnter: _function.noop,
+  onMouseLeave: _function.noop
+};
+Avatar.propTypes = {
+  children: _propTypes.default.node,
+  color: _propTypes.default.oneOf(colorSet),
+  shape: _propTypes.default.oneOf(shapeSet),
+  size: _propTypes.default.oneOf(sizeSet),
+  hoverMask: _propTypes.default.node,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  imgAttr: _propTypes.default.object,
+  src: _propTypes.default.string,
+  srcSet: _propTypes.default.string,
+  alt: _propTypes.default.string,
+  onError: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func
+};

package/lib/cjs/avatar/interface.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BaseProps } from '../_base/baseComponent';
+export declare type AvatarShape = 'circle' | 'square';
+export declare type AvatarSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
+export declare type AvatarColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow';
+export interface AvatarProps extends BaseProps {
+    children?: React.ReactNode;
+    color?: AvatarColor;
+    shape?: AvatarShape;
+    size?: AvatarSize;
+    hoverMask?: React.ReactNode;
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    onError?: React.MouseEventHandler;
+    onClick?: React.MouseEventHandler;
+    onMouseEnter?: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+    imgAttr?: React.ImgHTMLAttributes<HTMLImageElement>;
+}
+export declare type AvatarGroupShape = 'circle' | 'square';
+export declare type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export declare type AvatarGroupOverlapFrom = 'start' | 'end';
+export interface AvatarGroupProps {
+    children?: React.ReactNode;
+    shape?: AvatarGroupShape;
+    size?: AvatarGroupSize;
+    overlapFrom?: AvatarGroupOverlapFrom;
+    maxCount?: number;
+    renderMore?: (restNumber?: number, restAvatars?: React.ReactNode[]) => React.ReactNode;
+}

package/lib/cjs/avatar/interface.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import BaseComponent from '../_base/baseComponent';
+import PropTypes from 'prop-types';
+import { BackTopAdapter } from '@douyinfe/semi-foundation/lib/cjs/backtop/foundation';
+import '@douyinfe/semi-foundation/lib/cjs/backtop/backtop.css';
+export interface BackTopProps {
+    target?: () => any;
+    visibilityHeight?: number;
+    duration?: number;
+    onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export interface BackTopState {
+    visible?: boolean;
+}
+export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
+    static defaultProps: {
+        visibilityHeight: number;
+        target: () => Window & typeof globalThis;
+        duration: number;
+    };
+    static propTypes: {
+        target: PropTypes.Requireable<(...args: any[]) => any>;
+        visibilityHeight: PropTypes.Requireable<number>;
+        duration: PropTypes.Requireable<number>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+    };
+    constructor(props: BackTopProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    get adapter(): BackTopAdapter;
+    handleClick(e: React.MouseEvent<HTMLDivElement>): void;
+    renderDefault(): JSX.Element;
+    render(): JSX.Element;
+}