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

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

@@ -1,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { strings } from '@douyinfe/semi-foundation/lib/cjs/anchor/constants';
-import AnchorFoundation, { AnchorAdapter } from '@douyinfe/semi-foundation/lib/cjs/anchor/foundation';
-import BaseComponent from '../_base/baseComponent';
-import Link from './link';
-import '@douyinfe/semi-foundation/lib/cjs/anchor/anchor.css';
-import { ArrayElement } from '../_base/base';
-export { LinkProps } from './link';
-export interface AnchorProps {
-    autoCollapse?: boolean;
-    className?: string;
-    defaultAnchor?: string;
-    getContainer?: () => HTMLElement | Window;
-    maxHeight?: string | number;
-    maxWidth?: string | number;
-    offsetTop?: number;
-    position?: ArrayElement<typeof strings.POSITION_SET>;
-    railTheme?: ArrayElement<typeof strings.SLIDE_COLOR>;
-    scrollMotion?: boolean;
-    showTooltip?: boolean;
-    size?: ArrayElement<typeof strings.SIZE>;
-    style?: React.CSSProperties;
-    targetOffset?: number;
-    onChange?: (currentLink: string, previousLink: string) => void;
-    onClick?: (e: React.MouseEvent<HTMLElement>, currentLink: string) => void;
-}
-export interface AnchorState {
-    activeLink: string;
-    links: string[];
-    clickLink: boolean;
-    scrollHeight: string;
-    slideBarTop: string;
-}
-declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
-    static Link: typeof Link;
-    static PropTypes: {
-        size: PropTypes.Requireable<"default" | "small">;
-        railTheme: PropTypes.Requireable<"primary" | "tertiary" | "muted">;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        scrollMotion: PropTypes.Requireable<boolean>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-        offsetTop: PropTypes.Requireable<number>;
-        targetOffset: PropTypes.Requireable<number>;
-        showTooltip: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
-        maxWidth: PropTypes.Requireable<string | number>;
-        maxHeight: PropTypes.Requireable<string | number>;
-        getContainer: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        defaultAnchor: PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        size: string;
-        railTheme: string;
-        className: string;
-        scrollMotion: boolean;
-        autoCollapse: boolean;
-        offsetTop: number;
-        targetOffset: number;
-        showTooltip: boolean;
-        maxWidth: "200px";
-        maxHeight: "750px";
-        getContainer: (...args: any[]) => void;
-        onChange: (...args: any[]) => void;
-        onClick: (...args: any[]) => void;
-        defaultAnchor: string;
-    };
-    foundation: AnchorFoundation;
-    anchorID: string;
-    scrollContainer: HTMLElement | Window;
-    childMap: Record<string, Set<string>>;
-    handler: () => void;
-    clickHandler: () => void;
-    constructor(props: AnchorProps);
-    get adapter(): AnchorAdapter<AnchorProps, AnchorState>;
-    addLink: (link: string) => void;
-    removeLink: (link: string) => void;
-    handleScroll: () => void;
-    handleClick: (e: React.MouseEvent<HTMLElement>, link: string) => void;
-    handleClickLink: () => void;
-    setChildMap: () => void;
-    setScrollHeight: () => void;
-    updateScrollHeight: (prevState: AnchorState, state: AnchorState) => void;
-    updateChildMap: (prevState: AnchorState, state: AnchorState) => void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: AnchorProps, prevState: AnchorState): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-export default Anchor;

package/lib/cjs/anchor/index.js

@@ -1,334 +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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
-
-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 _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/anchor/constants");
-
-var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/anchor/foundation"));
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _link = _interopRequireDefault(require("./link"));
-
-var _anchorContext = _interopRequireDefault(require("./anchor-context"));
-
-require("@douyinfe/semi-foundation/lib/cjs/anchor/anchor.css");
-
-var _lodashEs = require("lodash-es");
-
-var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
-
-const prefixCls = _constants.cssClasses.PREFIX;
-
-class Anchor extends _baseComponent.default {
-  constructor(props) {
-    super(props);
-
-    this.addLink = link => {
-      this.foundation.addLink(link);
-    };
-
-    this.removeLink = link => {
-      this.foundation.removeLink(link);
-    };
-
-    this.handleScroll = () => {
-      this.foundation.handleScroll();
-    };
-
-    this.handleClick = (e, link) => {
-      this.foundation.handleClick(e, link);
-    }; // Set click to false after scrolling
-
-
-    this.handleClickLink = () => {
-      this.foundation.handleClickLink();
-    };
-
-    this.setChildMap = () => {
-      this.foundation.setChildMap();
-    };
-
-    this.setScrollHeight = () => {
-      this.foundation.setScrollHeight();
-    };
-
-    this.updateScrollHeight = (prevState, state) => {
-      this.foundation.updateScrollHeight(prevState, state);
-    };
-
-    this.updateChildMap = (prevState, state) => {
-      this.foundation.updateChildMap(prevState, state);
-    };
-
-    this.state = {
-      activeLink: '',
-      links: [],
-      clickLink: false,
-      scrollHeight: '100%',
-      slideBarTop: '0'
-    };
-    this.foundation = new _foundation.default(this.adapter);
-    this.childMap = {};
-  }
-
-  get adapter() {
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      addLink: value => {
-        this.setState(prevState => ({
-          links: [...prevState.links, value]
-        }));
-      },
-      removeLink: link => {
-        this.setState(prevState => {
-          var _context;
-
-          const links = (0, _slice.default)(_context = prevState.links).call(_context);
-          const index = (0, _indexOf.default)(links).call(links, link);
-
-          if (index !== -1) {
-            (0, _splice.default)(links).call(links, index, 1);
-            return {
-              links
-            };
-          }
-
-          return undefined;
-        });
-      },
-      setChildMap: value => {
-        this.childMap = value;
-      },
-      setScrollHeight: height => {
-        this.setState({
-          scrollHeight: height
-        });
-      },
-      setSlideBarTop: height => {
-        this.setState({
-          slideBarTop: "".concat(height, "px")
-        });
-      },
-      setClickLink: value => {
-        this.setState({
-          clickLink: value
-        });
-      },
-      setActiveLink: (link, cb) => {
-        this.setState({
-          activeLink: link
-        }, () => {
-          cb();
-        });
-      },
-      setClickLinkWithCallBack: (value, link, cb) => {
-        this.setState({
-          clickLink: value
-        }, () => {
-          cb(link);
-        });
-      },
-      getContainer: () => {
-        const {
-          getContainer
-        } = this.props;
-        const container = getContainer();
-        return container ? container : window;
-      },
-      getContainerBoundingTop: () => {
-        const container = this.adapter.getContainer();
-
-        if ('getBoundingClientRect' in container) {
-          return container.getBoundingClientRect().top;
-        }
-
-        return 0;
-      },
-      getLinksBoundingTop: () => {
-        const {
-          links
-        } = this.state;
-        const {
-          offsetTop
-        } = this.props;
-        const containerTop = this.adapter.getContainerBoundingTop();
-        const elTop = (0, _map.default)(links).call(links, link => {
-          let node = null;
-
-          try {
-            // Get links from containers
-            node = document.querySelector(link);
-          } catch (e) {}
-
-          return node && node.getBoundingClientRect().top - containerTop - offsetTop || -Infinity;
-        });
-        return elTop;
-      },
-      getAnchorNode: selector => {
-        var _context2;
-
-        const selectors = (0, _concat.default)(_context2 = "#".concat(this.anchorID, " ")).call(_context2, selector);
-        return document.querySelector(selectors);
-      },
-      getContentNode: selector => document.querySelector(selector),
-      notifyChange: (currentLink, previousLink) => this.props.onChange(currentLink, previousLink),
-      notifyClick: (e, link) => this.props.onClick(e, link),
-      canSmoothScroll: () => 'scrollBehavior' in document.body.style
-    });
-  }
-
-  componentDidMount() {
-    const {
-      defaultAnchor = ''
-    } = this.props;
-    this.anchorID = (0, _uuid.default)('semi-anchor').replace('.', '');
-    this.scrollContainer = this.adapter.getContainer();
-    this.handler = (0, _lodashEs.throttle)(this.handleScroll, 100);
-    this.clickHandler = (0, _lodashEs.debounce)(this.handleClickLink, 100);
-    this.scrollContainer.addEventListener('scroll', this.handler);
-    this.scrollContainer.addEventListener('scroll', this.clickHandler);
-    this.setScrollHeight();
-    this.setChildMap();
-    Boolean(defaultAnchor) && this.foundation.handleClick(null, defaultAnchor, false);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    this.updateScrollHeight(prevState, this.state);
-    this.updateChildMap(prevState, this.state);
-  }
-
-  componentWillUnmount() {
-    this.scrollContainer.removeEventListener('scroll', this.handler);
-    this.scrollContainer.removeEventListener('scroll', this.clickHandler);
-  }
-
-  render() {
-    var _context3, _context4, _context5, _context6;
-
-    const {
-      size,
-      railTheme,
-      style,
-      className,
-      children,
-      maxWidth,
-      maxHeight,
-      showTooltip,
-      position,
-      autoCollapse
-    } = this.props;
-    const {
-      activeLink,
-      scrollHeight,
-      slideBarTop
-    } = this.state;
-    const wrapperCls = (0, _classnames.default)(prefixCls, className, {
-      [(0, _concat.default)(_context3 = "".concat(prefixCls, "-size-")).call(_context3, size)]: size
-    });
-    const slideCls = (0, _classnames.default)("".concat(prefixCls, "-slide"), (0, _concat.default)(_context4 = "".concat(prefixCls, "-slide-")).call(_context4, railTheme));
-    const slideBarCls = (0, _classnames.default)("".concat(prefixCls, "-slide-bar"), {
-      [(0, _concat.default)(_context5 = "".concat(prefixCls, "-slide-bar-")).call(_context5, size)]: size,
-      [(0, _concat.default)(_context6 = "".concat(prefixCls, "-slide-bar-")).call(_context6, railTheme)]: railTheme,
-      ["".concat(prefixCls, "-slide-bar-active")]: activeLink
-    });
-    const anchorWrapper = "".concat(prefixCls, "-link-wrapper");
-    const wrapperStyle = (0, _assign.default)((0, _assign.default)({}, style), {
-      maxWidth,
-      maxHeight
-    });
-    return /*#__PURE__*/_react.default.createElement(_anchorContext.default.Provider, {
-      value: {
-        activeLink,
-        showTooltip,
-        position,
-        childMap: this.childMap,
-        autoCollapse,
-        size,
-        onClick: (e, link) => this.handleClick(e, link),
-        addLink: this.addLink,
-        removeLink: this.removeLink
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapperCls,
-      style: wrapperStyle,
-      id: this.anchorID
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: slideCls,
-      style: {
-        height: scrollHeight
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: slideBarCls,
-      style: {
-        top: slideBarTop
-      }
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: anchorWrapper
-    }, children)));
-  }
-
-}
-
-Anchor.Link = _link.default;
-Anchor.PropTypes = {
-  size: _propTypes.default.oneOf(_constants.strings.SIZE),
-  railTheme: _propTypes.default.oneOf(_constants.strings.SLIDE_COLOR),
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  scrollMotion: _propTypes.default.bool,
-  autoCollapse: _propTypes.default.bool,
-  offsetTop: _propTypes.default.number,
-  targetOffset: _propTypes.default.number,
-  showTooltip: _propTypes.default.bool,
-  position: _propTypes.default.oneOf(_constants.strings.POSITION_SET),
-  maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  getContainer: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  defaultAnchor: _propTypes.default.string
-};
-Anchor.defaultProps = {
-  size: 'default',
-  railTheme: 'primary',
-  className: '',
-  scrollMotion: false,
-  autoCollapse: false,
-  offsetTop: 0,
-  targetOffset: 0,
-  showTooltip: false,
-  maxWidth: _constants.strings.MAX_WIDTH,
-  maxHeight: _constants.strings.MAX_HEIGHT,
-  getContainer: _lodashEs.noop,
-  onChange: _lodashEs.noop,
-  onClick: _lodashEs.noop,
-  defaultAnchor: ''
-};
-var _default = Anchor;
-exports.default = _default;

package/lib/cjs/anchor/link.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import BaseComponent from '../_base/baseComponent';
-import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/lib/cjs/anchor/linkFoundation';
-export interface LinkProps {
-    href?: string;
-    title?: string | React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    disabled?: boolean;
-}
-export default class Link extends BaseComponent<LinkProps, {}> {
-    static propTypes: {
-        href: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        href: string;
-        title: string;
-        className: string;
-    };
-    static contextType: React.Context<import("./anchor-context").AnchorContextType>;
-    foundation: LinkFoundation;
-    constructor(props: LinkProps);
-    get adapter(): LinkAdapter;
-    handleAddLink(): void;
-    handleRemoveLink(): void;
-    handleUpdateLink(href: string, prevHref: string): void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: LinkProps): void;
-    componentWillUnmount(): void;
-    renderTitle: () => React.ReactNode;
-    renderChildren: () => React.ReactNode;
-    render(): JSX.Element;
-}

package/lib/cjs/anchor/link.js

@@ -1,174 +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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/anchor/constants");
-
-var _linkFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/anchor/linkFoundation"));
-
-var _anchorContext = _interopRequireDefault(require("./anchor-context"));
-
-var _index = _interopRequireDefault(require("../typography/index"));
-
-const prefixCls = _constants.cssClasses.PREFIX; // eslint-disable-next-line @typescript-eslint/ban-types
-
-class Link extends _baseComponent.default {
-  constructor(props) {
-    super(props);
-
-    this.renderTitle = () => {
-      const {
-        href,
-        title,
-        disabled = false
-      } = this.props;
-      const {
-        activeLink,
-        showTooltip,
-        position,
-        size
-      } = this.context;
-      const active = activeLink === href;
-      const linkTitleCls = (0, _classnames.default)("".concat(prefixCls, "-link-tooltip"), {
-        ["".concat(prefixCls, "-link-tooltip-small")]: size === 'small',
-        ["".concat(prefixCls, "-link-tooltip-active")]: active,
-        ["".concat(prefixCls, "-link-tooltip-disabled")]: disabled
-      });
-      const toolTipOpt = position ? {
-        position
-      } : {};
-
-      if (showTooltip) {
-        return /*#__PURE__*/_react.default.createElement(_index.default.Text, {
-          size: size === 'default' ? 'normal' : 'small',
-          ellipsis: {
-            showTooltip: {
-              opts: (0, _assign.default)({}, toolTipOpt)
-            }
-          },
-          type: 'tertiary',
-          className: linkTitleCls
-        }, title);
-      } else {
-        return title;
-      }
-    };
-
-    this.renderChildren = () => {
-      const {
-        activeLink,
-        childMap
-      } = this.context;
-      const {
-        href,
-        children
-      } = this.props;
-
-      if (!this.context.autoCollapse) {
-        return this.props.children;
-      }
-
-      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? children : null;
-    };
-
-    this.foundation = new _linkFoundation.default(this.adapter);
-  }
-
-  get adapter() {
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      addLink: href => {
-        this.context.addLink(href);
-      },
-      removeLink: href => {
-        this.context.removeLink(href);
-      }
-    });
-  }
-
-  handleAddLink() {
-    this.foundation.handleAddLink();
-  }
-
-  handleRemoveLink() {
-    this.foundation.handleRemoveLink();
-  }
-
-  handleUpdateLink(href, prevHref) {
-    this.foundation.handleUpdateLink(href, prevHref);
-  }
-
-  componentDidMount() {
-    this.handleAddLink();
-  }
-
-  componentDidUpdate(prevProps) {
-    const prevHref = prevProps.href;
-    const {
-      href
-    } = this.props;
-    this.handleUpdateLink(href, prevHref);
-  }
-
-  componentWillUnmount() {
-    this.handleRemoveLink();
-  }
-
-  render() {
-    const {
-      href,
-      className,
-      style,
-      disabled = false
-    } = this.props;
-    const {
-      activeLink,
-      onClick
-    } = this.context;
-    const active = activeLink === href;
-    const linkCls = (0, _classnames.default)("".concat(prefixCls, "-link"), className);
-    const linkTitleCls = (0, _classnames.default)("".concat(prefixCls, "-link-title"), {
-      ["".concat(prefixCls, "-link-title-active")]: active,
-      ["".concat(prefixCls, "-link-title-disabled")]: disabled
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: linkCls,
-      style: style
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: linkTitleCls,
-      onClick: e => !disabled && onClick(e, href)
-    }, this.renderTitle()), this.renderChildren());
-  }
-
-}
-
-exports.default = Link;
-Link.propTypes = {
-  href: _propTypes.default.string,
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  className: _propTypes.default.string,
-  style: _propTypes.default.object
-};
-Link.defaultProps = {
-  href: '#',
-  title: '',
-  className: ''
-};
-Link.contextType = _anchorContext.default;