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

package/lib/cjs/anchor/index.js

@@ -0,0 +1,338 @@
+"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 _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+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 _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, _throttle2.default)(this.handleScroll, 100);
+    this.clickHandler = (0, _debounce2.default)(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: _noop2.default,
+  onChange: _noop2.default,
+  onClick: _noop2.default,
+  defaultAnchor: ''
+};
+var _default = Anchor;
+exports.default = _default;

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,174 @@
+"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;