@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

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

@@ -0,0 +1,11 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    readonly SIZE: readonly ["small", "default"];
+    readonly SLIDE_COLOR: readonly ["primary", "tertiary", "muted"];
+    readonly MAX_WIDTH: "200px";
+    readonly MAX_HEIGHT: "750px";
+    readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+};
+export { cssClasses, strings };

package/lib/cjs/anchor/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-anchor`
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['small', 'default'],
+  SLIDE_COLOR: ['primary', 'tertiary', 'muted'],
+  MAX_WIDTH: '200px',
+  MAX_HEIGHT: '750px',
+  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver']
+};
+exports.strings = strings;

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

@@ -0,0 +1,40 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    addLink: (link: string) => void;
+    removeLink: (link: string) => void;
+    setChildMap: (value: Record<string, Set<string>>) => void;
+    setScrollHeight: (heigh: string) => void;
+    setSlideBarTop: (height: number) => void;
+    setClickLink: (value: boolean) => void;
+    setActiveLink: (link: string, cb: () => void) => void;
+    setClickLinkWithCallBack: (value: boolean, link: string, cb: (link: string) => void) => void;
+    getContainer: () => HTMLElement | Window;
+    getContainerBoundingTop: () => number;
+    getLinksBoundingTop: () => number[];
+    getAnchorNode: (selector: string) => HTMLElement;
+    getContentNode: (selector: string) => HTMLElement;
+    notifyChange: (currentLink: string, previousLink: string) => void;
+    notifyClick: (e: any, link: string) => void;
+    canSmoothScroll: () => boolean;
+}
+export default class AnchorFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AnchorAdapter<P, S>, P, S> {
+    constructor(adapter: AnchorAdapter<P, S>);
+    init: () => void;
+    destroy: () => void;
+    addLink: (link: string) => void;
+    removeLink: (link: string) => void;
+    setActiveLink: (link: string, prevLink: string, shouldNotify?: boolean) => void;
+    setScrollHeight: () => void;
+    updateScrollHeight: (prevState: any, state: any) => void;
+    setChildMap: () => void;
+    updateChildMap: (prevState: any, state: any) => void;
+    getLinksTop: () => number[];
+    handleScroll: () => void;
+    handleClick: (e: any, link: string, shouldNotify?: boolean) => void;
+    handleClickLink: () => void;
+    _getLinkToMap: (link: any, parents: string[], linkMap: {
+        [key: string]: Set<string>;
+    }) => void;
+    _scrollIntoView: (link: string) => void;
+    _setActiveSlide: () => void;
+}

package/lib/cjs/anchor/foundation.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class AnchorFoundation extends _foundation.default {
+  constructor(adapter) {
+    var _this;
+
+    super(Object.assign(Object.assign({}, AnchorFoundation.defaultAdapter), adapter));
+    _this = this;
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    this.init = () => {}; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+    this.destroy = () => {};
+
+    this.addLink = link => {
+      this._adapter.addLink(link);
+    };
+
+    this.removeLink = link => {
+      this._adapter.removeLink(link);
+    };
+
+    this.setActiveLink = function (link, prevLink) {
+      let shouldNotify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+      const activeLink = _this._adapter.getState('activeLink');
+
+      const onChange = _this._adapter.getProp('onChange');
+
+      if (activeLink !== link) {
+        _this._adapter.setActiveLink(link, _this._setActiveSlide);
+
+        if (onChange && shouldNotify) {
+          _this._adapter.notifyChange(link, prevLink);
+        }
+      }
+    }; // Adjust rail height according to text link content height
+
+
+    this.setScrollHeight = () => {
+      const anchorWrapper = `.${prefixCls}-link-wrapper`;
+
+      const anchorNode = this._adapter.getAnchorNode(anchorWrapper);
+
+      if (anchorNode) {
+        const scrollHeight = `${anchorNode.scrollHeight}px`;
+
+        this._adapter.setScrollHeight(scrollHeight);
+      }
+    };
+
+    this.updateScrollHeight = (prevState, state) => {
+      const prevLinks = prevState.links.join('');
+      const links = state.links.join('');
+
+      if (prevLinks !== links) {
+        this.setScrollHeight();
+      }
+    };
+
+    this.setChildMap = () => {
+      const children = this._adapter.getProp('children');
+
+      const childMap = {};
+
+      if ((0, _isArray2.default)(children)) {
+        for (const link of children) {
+          this._getLinkToMap(link, [], childMap);
+        }
+      } else {
+        this._getLinkToMap(children, [], childMap);
+      }
+
+      this._adapter.setChildMap(childMap);
+    };
+
+    this.updateChildMap = (prevState, state) => {
+      const prevLinks = prevState.links.join('');
+      const links = state.links.join('');
+
+      if (prevLinks !== links) {
+        this.setChildMap();
+      }
+    };
+
+    this.getLinksTop = () => this._adapter.getLinksBoundingTop();
+
+    this.handleScroll = () => {
+      const {
+        clickLink,
+        links,
+        activeLink: prevActiveLink
+      } = this.getStates(); // TODO check this._adapter -> this.
+      // ActiveLink Determined by the clicked link
+
+      if (clickLink) {
+        return;
+      }
+
+      const elTop = this.getLinksTop();
+      let lastNegative = -Infinity;
+      let lastNegativeIndex = -1;
+
+      for (let i = 0; i < elTop.length; i++) {
+        if (elTop[i] < 0 && elTop[i] > lastNegative) {
+          lastNegative = elTop[i];
+          lastNegativeIndex = i;
+        }
+      }
+
+      const activeLink = links[lastNegativeIndex];
+      this.setActiveLink(activeLink, prevActiveLink);
+    };
+
+    this.handleClick = function (e, link) {
+      let shouldNotify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+      const destNode = _this._adapter.getContentNode(link);
+
+      const prevLink = _this._adapter.getState('activeLink');
+
+      _this.setActiveLink(link, prevLink, shouldNotify);
+
+      if (destNode) {
+        try {
+          _this._adapter.setClickLinkWithCallBack(true, link, _this._scrollIntoView);
+        } catch (error) {}
+      }
+
+      shouldNotify && _this._adapter.notifyClick(e, link);
+    };
+
+    this.handleClickLink = () => {
+      this._adapter.setClickLink(false);
+    }; // Get the child nodes of each link
+
+
+    this._getLinkToMap = (link, parents, linkMap) => {
+      const node = link && link.props;
+
+      if (!node || !node.href) {
+        return;
+      }
+
+      if (!(node.href in linkMap)) {
+        linkMap[node.href] = new Set();
+      } // Every ancestor kept a map
+
+
+      for (const parent of parents) {
+        linkMap[parent].add(node.href);
+      }
+
+      if (node.children && node.children.length) {
+        parents.push(node.href); // Maintain child node map
+
+        for (const child of node.children) {
+          this._getLinkToMap(child, parents, linkMap);
+        }
+
+        parents.pop();
+      }
+    };
+
+    this._scrollIntoView = link => {
+      const {
+        scrollMotion,
+        targetOffset
+      } = this.getProps(); // TODO check this._adapter -> this.
+
+      const behavior = scrollMotion ? 'smooth' : 'auto';
+
+      const canSmoothScroll = this._adapter.canSmoothScroll();
+
+      if (link) {
+        const destNode = this._adapter.getContentNode(link);
+
+        const scrollOpts = {
+          /**
+           * Behavior defines scrolling behavior
+           *  - Optional'auto '|' smooth '| Function
+           *  - Function Custom scrolling behavior
+           *    - Enter parameters as actions, each action contains an element that should be scrolled
+           *    - Actions include scrolling containers to the outermost scrollable container (document.body), the scrollable capacity needs to meet
+           *      1. The parent of the scroll container (directly or indirectly)
+           *      2. There is a scroll axis (clientHeight < scrollHeight | | clientWidth < scrollWidth)
+           *      3.overflowX or overflowY has a value and is not visible or clip
+           *       For details, please see https://github.com/stipsan/compute-scroll-into-view
+           *
+           * behavior定义滚动行为
+           *  - 可选 'auto' | 'smooth' | Function
+           *  - Function 自定义滚动行为
+           *    - 入参为 actions，每个action包含一个应该滚动的元素
+           *    - actions包括滚动容器到最外层的可滚动容器（document.body），可滚动容需满足
+           *      1. 滚动容器的父级（直接或间接）
+           *      2. 有滚动轴（clientHeight < scrollHeight || clientWidth < scrollWidth）
+           *      3. overflowX 或 overflowY 有值且不为 visible 或 clip
+           *      详情请看https://github.com/stipsan/compute-scroll-into-view
+           */
+          behavior: actions => {
+            // We just need to scroll the innermost target container
+            const innermostAction = (0, _get2.default)(actions, '0');
+            const el = (0, _get2.default)(innermostAction, 'el');
+            const top = (0, _get2.default)(innermostAction, 'top');
+
+            if (el) {
+              const offsetTop = top - targetOffset;
+
+              if (el.scroll && canSmoothScroll) {
+                el.scroll({
+                  top: offsetTop,
+                  behavior
+                });
+              } else {
+                el.scrollTop = offsetTop;
+              }
+            }
+          },
+          block: 'start'
+        };
+
+        if (destNode) {
+          (0, _scrollIntoViewIfNeeded.default)(destNode, scrollOpts);
+        }
+      }
+    };
+
+    this._setActiveSlide = () => {
+      const activeClass = `.${_constants.cssClasses.PREFIX}-link-title-active`;
+
+      const linkNode = this._adapter.getAnchorNode(activeClass);
+
+      if (linkNode) {
+        const height = linkNode.offsetTop;
+
+        this._adapter.setSlideBarTop(height);
+      }
+    };
+  }
+
+}
+
+exports.default = AnchorFoundation;

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

@@ -0,0 +1,14 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { AnchorAdapter } from './foundation';
+export interface LinkAdapter extends DefaultAdapter {
+    addLink: AnchorAdapter['addLink'];
+    removeLink: AnchorAdapter['removeLink'];
+}
+export default class LinkFoundation extends BaseFoundation<LinkAdapter> {
+    constructor(adapter: LinkAdapter);
+    init(): void;
+    destroy(): void;
+    handleAddLink(): void;
+    handleUpdateLink(href: string, prevHref: string): void;
+    handleRemoveLink(): void;
+}

package/lib/cjs/anchor/linkFoundation.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class LinkFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  init() {// this.setInitValue();
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+  handleAddLink() {
+    const href = this._adapter.getProp('href');
+
+    this._adapter.addLink(href);
+  }
+
+  handleUpdateLink(href, prevHref) {
+    if (href !== prevHref) {
+      this._adapter.removeLink(prevHref);
+
+      this._adapter.addLink(href);
+    }
+  }
+
+  handleRemoveLink() {
+    const href = this._adapter.getProp('href');
+
+    this._adapter.removeLink(href);
+  }
+
+}
+
+exports.default = LinkFoundation;

package/lib/cjs/autoComplete/constants.d.ts

@@ -0,0 +1,12 @@
+declare const cssClasses: {
+    PREFIX: string;
+    PREFIX_OPTION: string;
+    PREFIX_GROUP: string;
+};
+declare const strings: {
+    readonly SIZE: readonly ["small", "large", "default"];
+    readonly POSITION: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
+    readonly OPTIONS: readonly ["children", "value"];
+    readonly STATUS: readonly ["default", "error", "warning", "success"];
+};
+export { cssClasses, strings };

package/lib/cjs/autoComplete/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../tooltip/constants");
+
+var _constants2 = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: `${_constants2.BASE_CLASS_PREFIX}-autocomplete`,
+  PREFIX_OPTION: `${_constants2.BASE_CLASS_PREFIX}-autoComplete-option`,
+  PREFIX_GROUP: `${_constants2.BASE_CLASS_PREFIX}-autoComplete-group`
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['small', 'large', 'default'],
+  POSITION: _constants.strings.POSITION_SET,
+  OPTIONS: ['children', 'value'],
+  STATUS: _constants2.VALIDATE_STATUS
+};
+exports.strings = strings;

package/lib/cjs/autoComplete/foundation.d.ts

@@ -0,0 +1,66 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    registerKeyDown: (callback: (event: any) => void) => void;
+    unregisterKeyDown: (callback: (event: any) => void) => void;
+    updateFocusIndex: (focusIndex: number) => void;
+    notifyKeyDown: (e: any) => void;
+}
+export interface DataItem {
+    [x: string]: any;
+    value?: string | number;
+    label?: any;
+}
+export interface StateOptionItem extends DataItem {
+    show?: boolean;
+    key?: string | number;
+}
+export declare type AutoCompleteData = Array<DataItem | string>;
+export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string, any>> extends KeyboardAdapter<P, S> {
+    getTriggerWidth: () => number | undefined;
+    setOptionWrapperWidth: (width: number) => void;
+    updateInputValue: (inputValue: string | number) => void;
+    toggleListVisible: (isShow: boolean) => void;
+    updateOptionList: (optionList: Array<StateOptionItem>) => void;
+    updateSelection: (selection: Map<any, any>) => void;
+    notifySearch: (inputValue: string) => void;
+    notifyChange: (value: string | number) => void;
+    notifySelect: (option: StateOptionItem | string | number) => void;
+    notifyDropdownVisibleChange: (isVisible: boolean) => void;
+    notifyClear: () => void;
+    notifyFocus: (event?: any) => void;
+    notifyBlur: (event?: any) => void;
+    rePositionDropdown: () => void;
+    persistEvent: (event: any) => void;
+}
+declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
+    private _keydownHandler;
+    constructor(adapter: AutoCompleteAdapter<P, S>);
+    isPanelOpen: boolean;
+    init(): void;
+    destroy(): void;
+    _setDropdownWidth(): void;
+    handleInputClick(e?: MouseEvent): void;
+    openDropdown(): void;
+    closeDropdown(e?: any): void;
+    _generateList(data: AutoCompleteData): Array<StateOptionItem>;
+    handleSearch(inputValue: string): void;
+    handleSelect(option: StateOptionItem, optionIndex?: number): void;
+    updateSelection(option: StateOptionItem): void;
+    notifySelect(option: StateOptionItem): void;
+    _backwardLabelInValue(): any;
+    handleDataChange(newData: any[]): void;
+    handleValueChange(propValue: any): void;
+    _modifyFocusIndex(searchValue: any): void;
+    _modifyFocusIndexOnPanelOpen(): void;
+    _getRenderSelectedItem(): any;
+    handleClear(): void;
+    bindKeyBoardEvent(): void;
+    _handleKeyDown(event: KeyboardEvent): void;
+    _getEnableFocusIndex(offset: number): void;
+    _handleArrowKeyDown(offset: number): void;
+    _handleEnterKeyDown(): void;
+    handleOptionMouseEnter(optionIndex: number): void;
+    handleFocus(e: FocusEvent): void;
+    handleBlur(e: any): void;
+}
+export default AutoCompleteFoundation;