@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/anchor/foundation.js

@@ -0,0 +1,270 @@
+"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 _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+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");
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class AnchorFoundation extends _foundation.default {
+  constructor(adapter) {
+    var _this;
+
+    super((0, _assign.default)((0, _assign.default)({}, 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 = ".".concat(prefixCls, "-link-wrapper");
+
+      const anchorNode = this._adapter.getAnchorNode(anchorWrapper);
+
+      if (anchorNode) {
+        const scrollHeight = "".concat(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.default();
+      } // 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 = ".".concat(_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,50 @@
+"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 _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class LinkFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, 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/anchor/rtl.scss

@@ -0,0 +1,18 @@
+$module: #{$prefix}-anchor;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-slide {
+            right: $spacing-anchor_slide-left;
+            left: auto;
+        }
+
+        &-link {
+            padding-right: $spacing-anchor_link-paddingLeft;
+            padding-left: auto;
+        }
+    }
+}

package/lib/cjs/anchor/variables.scss

@@ -0,0 +1,27 @@
+// Color
+$color-anchor_slide_default-bg-default: var(--semi-color-border); // 滑轨背景颜色
+$color-anchor_slide_primary-bg-active: var(--semi-color-primary); // 选中颜色 - Primary
+$color-anchor_slide_tertiary-bg-active: var(--semi-color-tertiary); // 选中颜色 - Tietrary
+$color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 - Muted
+
+$color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
+$color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
+$color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
+$color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
+
+// Spacing
+$spacing-anchor_slide-left: $spacing-none; // 滑轨左侧位置
+$spacing-anchor_slide-top: $spacing-none; // 滑轨顶部位置
+$spacing-anchor_slide_default-Y: $spacing-extra-tight; // 选项间距 - 默认
+$spacing-anchor_slide_small-Y: $spacing-extra-tight; // 选项间距 - 紧凑
+$spacing-anchor_link-paddingLeft: $spacing-tight; // 选项文字左边距
+$spacing-anchor_link_title-paddingTop: $spacing-extra-tight; // 选项文字顶部内边距
+$spacing-anchor_link_title-paddingBottom: $spacing-extra-tight; // 选项文字底部内边距
+
+// Size
+$width-anchor_slide_default: 2px; // 滑轨宽度
+$height-anchor_slide_default: 20px; // 选项高度 - 默认
+$height-anchor_slide_small: 16px; // 选项高度 - 小尺寸
+
+// Radius
+$radius-anchor_slide: 1px; // 滑轨圆角

package/lib/cjs/autoComplete/autoComplete.css

@@ -0,0 +1,103 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-select-option {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--semi-color-text-0);
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.semi-select-option-icon {
+  width: 12px;
+  color: transparent;
+  visibility: hidden;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.semi-select-option-text {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: pre;
+}
+.semi-select-option-keyword {
+  color: var(--semi-color-primary);
+  background-color: inherit;
+  font-weight: 600;
+}
+.semi-select-option:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-select-option-empty {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+  justify-content: center;
+}
+.semi-select-option-empty:hover {
+  background-color: inherit;
+}
+.semi-select-option-empty:active {
+  background-color: inherit;
+}
+.semi-select-option-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-select-option-disabled:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option-selected {
+  font-weight: 600;
+}
+.semi-select-option-selected .semi-select-option-icon {
+  visibility: visible;
+  color: var(--semi-color-text-2);
+}
+.semi-select-option-focused {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option:first-of-type {
+  margin-top: 4px;
+}
+.semi-select-option:last-of-type {
+  margin-bottom: 4px;
+}
+
+.semi-autocomplete {
+  cursor: text;
+  display: inline-flex;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+.semi-autocomplete-option-list {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon {
+  display: flex;
+}
+.semi-autocomplete-loading-wrapper {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  cursor: not-allowed;
+}
+.semi-autocomplete-loading-wrapper .semi-spin {
+  width: 100%;
+}
+
+.semi-rtl .semi-autocomplete,
+.semi-portal-rtl .semi-autocomplete {
+  direction: rtl;
+}

package/lib/cjs/autoComplete/autoComplete.scss

@@ -0,0 +1,38 @@
+@import "./variables.scss";
+@import "../select/option.scss";
+
+$module: #{$prefix}-autocomplete;
+
+.#{$module} {
+    cursor: text;
+    display: inline-flex;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    &-option-list {
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        &-chosen {
+            .#{$module}-option-icon {
+                display: flex;
+            }
+        }
+    }
+
+    &-loading-wrapper {
+        // padding-left: $spacing-base;
+        // padding-right: $spacing-base;
+        padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
+        padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
+        cursor: not-allowed;
+        // height: $spacing-extra-loose;
+        // @include all-center;
+        .#{$prefix}-spin {
+            width: 100%;
+        }
+    }
+
+}
+
+@import './rtl.scss';

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

@@ -0,0 +1,10 @@
+declare const cssClasses: {
+    PREFIX: 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"];
+    readonly OPTIONS: readonly ["children", "value"];
+    readonly STATUS: readonly ["default", "error", "warning", "success"];
+};
+export { cssClasses, strings };

package/lib/cjs/autoComplete/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_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: "".concat(_constants2.BASE_CLASS_PREFIX, "-autocomplete")
+};
+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,62 @@
+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;
+}
+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;
+}
+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>);
+    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;
+    _getRenderSelectedItem(): any;
+    handleClear(): void;
+    bindKeyBoardEvent(): void;
+    unBindKeyBoardEvent(): 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: FocusEvent): void;
+}
+export default AutoCompleteFoundation;