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

package/lib/es/rating/foundation.js

@@ -1,263 +0,0 @@
-/* eslint-disable no-param-reassign */
-import BaseFoundation from '../base/foundation';
-import warning from '../utils/warning';
-export default class RatingFoundation extends BaseFoundation {
-  constructor(adapter) {
-    super(Object.assign(Object.assign({}, RatingFoundation.defaultAdapter), adapter));
-
-    this.handleStarFocusVisible = event => {
-      const {
-        target
-      } = event;
-      const {
-        count
-      } = this.getProps(); // when rating 0 is focus visible
-
-      try {
-        if (target.matches(':focus-visible')) {
-          this._adapter.setEmptyStarFocusVisible(true);
-        }
-      } catch (error) {
-        warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible');
-      }
-    }; // e: FocusEvent
-
-
-    this.handleStarBlur = e => {
-      const {
-        emptyStarFocusVisible
-      } = this.getStates();
-
-      if (emptyStarFocusVisible) {
-        this._adapter.setEmptyStarFocusVisible(false);
-      }
-    };
-  }
-
-  init() {
-    const {
-      autoFocus,
-      disabled
-    } = this.getProps();
-
-    if (autoFocus && !disabled) {
-      this._adapter.focus();
-    }
-  }
-
-  _getScroll(w, top) {
-    let ret = top ? w.pageYOffset : w.pageXOffset;
-    const method = top ? 'scrollTop' : 'scrollLeft';
-
-    if (typeof ret !== 'number') {
-      const d = w.document; // ie6,7,8 standard mode
-
-      ret = d.documentElement[method];
-
-      if (typeof ret !== 'number') {
-        // quirks mode
-        ret = d.body[method];
-      }
-    }
-
-    return ret;
-  }
-
-  _getClientPosition(elem) {
-    let x, y;
-    const doc = elem.ownerDocument;
-    const {
-      body
-    } = doc;
-    const docElem = doc && doc.documentElement;
-    const box = elem.getBoundingClientRect();
-    x = box.left;
-    y = box.top;
-    x -= docElem.clientLeft || body.clientLeft || 0;
-    y -= docElem.clientTop || body.clientTop || 0;
-    return {
-      left: x,
-      top: y
-    };
-  }
-
-  _getOffsetLeft(el) {
-    const pos = this._getClientPosition(el);
-
-    const doc = el.ownerDocument;
-    const w = doc.defaultView || doc.parentWindow;
-    pos.left += this._getScroll(w);
-    return pos.left;
-  }
-
-  getStarValue(index, pos) {
-    const {
-      allowHalf
-    } = this.getProps();
-
-    const direction = this._adapter.getContext('direction');
-
-    const reverse = direction === 'rtl';
-    let value = index + 1;
-
-    if (allowHalf) {
-      const starEle = this._adapter.getStarDOM(index);
-
-      const leftDis = this._getOffsetLeft(starEle);
-
-      const width = starEle.clientWidth;
-
-      if (reverse && pos - leftDis > width / 2) {
-        value -= 0.5;
-      } else if (!reverse && pos - leftDis < width / 2) {
-        value -= 0.5;
-      }
-    }
-
-    return value;
-  }
-
-  handleHover(event, index) {
-    const currValue = this.getStarValue(index, event.pageX);
-    const {
-      clearedValue,
-      hoverValue
-    } = this.getStates();
-
-    if (currValue !== hoverValue && currValue !== clearedValue) {
-      this._adapter.notifyHoverChange(currValue, null);
-    }
-  }
-
-  handleMouseLeave() {
-    this._adapter.notifyHoverChange(undefined, null);
-  }
-
-  handleClick(event, index) {
-    const {
-      allowClear
-    } = this.getProps();
-    const {
-      value
-    } = this.getStates();
-    const newValue = this.getStarValue(index, event.pageX);
-    const isReset = allowClear ? newValue === value : false;
-
-    this._adapter.updateValue(isReset ? 0 : newValue);
-
-    if (isReset) {
-      this._adapter.notifyHoverChange(undefined, newValue);
-    } else {
-      this._adapter.clearValue(null);
-    }
-  }
-
-  handleFocus(e) {
-    this._adapter.notifyFocus(e);
-  }
-
-  handleBlur(e) {
-    this._adapter.notifyBlur(e);
-  }
-
-  handleKeyDown(event, value) {
-    const {
-      key
-    } = event;
-    const {
-      count,
-      allowHalf
-    } = this.getProps();
-
-    const direction = this._adapter.getContext('direction');
-
-    const reverse = direction === 'rtl';
-    const step = allowHalf ? 0.5 : 1;
-    let tempValue;
-    let newValue;
-
-    if (key === 'ArrowRight' || key === 'ArrowUp') {
-      tempValue = value + (reverse ? -step : step);
-    } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
-      tempValue = value + (reverse ? step : -step);
-    }
-
-    if (tempValue > count) {
-      newValue = 0;
-    } else if (tempValue < 0) {
-      newValue = count;
-    } else {
-      newValue = tempValue;
-    }
-
-    if (['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(key)) {
-      this._adapter.notifyKeyDown(event);
-
-      this._adapter.updateValue(newValue);
-
-      this.changeFocusStar(newValue, event);
-      event.preventDefault();
-
-      this._adapter.notifyHoverChange(undefined, null);
-    }
-  }
-
-  changeFocusStar(value, event) {
-    const {
-      count,
-      allowHalf,
-      preventScroll
-    } = this.getProps();
-    const index = Math.ceil(value) - 1;
-    const starElement = [...event.currentTarget.childNodes].map(item => item.childNodes[0].childNodes);
-
-    if (index < 0) {
-      starElement[count][0].focus({
-        preventScroll
-      });
-    } else {
-      starElement[index][allowHalf ? value * 10 % 10 === 5 ? 0 : 1 : 0].focus({
-        preventScroll
-      });
-    }
-  }
-
-}
-export class RatingItemFoundation extends BaseFoundation {
-  constructor(adapter) {
-    super(Object.assign(Object.assign({}, RatingItemFoundation.defaultAdapter), adapter));
-
-    this.handleFocusVisible = (event, star) => {
-      const {
-        target
-      } = event; // when rating 0 is focus visible
-
-      try {
-        if (target.matches(':focus-visible')) {
-          if (star === 'first') {
-            this._adapter.setFirstStarFocus(true);
-          } else {
-            this._adapter.setSecondStarFocus(true);
-          }
-        }
-      } catch (error) {
-        warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible');
-      }
-    }; // e: FocusEvent
-
-
-    this.handleBlur = (e, star) => {
-      const {
-        firstStarFocus,
-        secondStarFocus
-      } = this.getStates();
-
-      if (star === 'first') {
-        firstStarFocus && this._adapter.setFirstStarFocus(false);
-      } else {
-        secondStarFocus && this._adapter.setSecondStarFocus(false);
-      }
-    };
-  }
-
-}

package/lib/es/scrollList/constants.d.ts

@@ -1,12 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-    SELECTED: string;
-};
-declare const strings: {
-    readonly MODE: readonly ["normal", "wheel"];
-};
-declare const numbers: {
-    DEFAULT_ITEM_HEIGHT: number;
-    DEFAULT_SCROLL_DURATION: number;
-};
-export { cssClasses, strings, numbers };

package/lib/es/scrollList/constants.js

@@ -1,13 +0,0 @@
-import { BASE_CLASS_PREFIX } from '../base/constants';
-const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-scrolllist"),
-  SELECTED: "".concat(BASE_CLASS_PREFIX, "-scrolllist-item-selected")
-};
-const strings = {
-  MODE: ['normal', 'wheel']
-};
-const numbers = {
-  DEFAULT_ITEM_HEIGHT: 36,
-  DEFAULT_SCROLL_DURATION: 120
-};
-export { cssClasses, strings, numbers };

package/lib/es/scrollList/foundation.d.ts

@@ -1,3 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export default class ScrollListFoundation extends BaseFoundation<DefaultAdapter> {
-}

package/lib/es/scrollList/foundation.js

@@ -1,2 +0,0 @@
-import BaseFoundation from '../base/foundation';
-export default class ScrollListFoundation extends BaseFoundation {}

package/lib/es/scrollList/itemFoundation.d.ts

@@ -1,74 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export interface Item {
-    [x: string]: any;
-    transform?: (value: any, text: string) => string;
-    value: any;
-    text?: string;
-    disabled?: boolean;
-}
-export interface ScrollItemAdapter<P = Record<string, any>, S = Record<string, any>, I = Item> extends DefaultAdapter<P, S> {
-    setPrependCount: (prependCount: number) => void;
-    setAppendCount: (appendCount: number) => void;
-    setSelectedNode: (el: HTMLElement) => void;
-    isDisabledIndex: (i: number) => boolean;
-    notifySelectItem: (data: I) => void;
-    scrollToCenter: (selectedNode: Element, scrollWrapper?: Element, duration?: number) => void;
-}
-export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>, I = Item> extends BaseFoundation<ScrollItemAdapter<P, S, I>, P, S> {
-    _cachedSelectedNode: HTMLElement;
-    selectIndex(index: number, listWrapper: HTMLElement): void;
-    selectNode(node: HTMLElement, listWrapper: HTMLElement): void;
-    /**
-     *
-     * @param {HTMLElement} listWrapper
-     * @param {HTMLElement} scrollWrapper
-     * @param {number} ratio
-     * @returns {boolean}
-     */
-    shouldAppend(listWrapper: HTMLElement, scrollWrapper: HTMLElement, ratio?: number): number | false;
-    /**
-     *
-     * @param {HTMLElement} listWrapper
-     * @param {HTMLElement} scrollWrapper
-     * @param {number} ratio
-     *
-     * @returns {boolean}
-     */
-    shouldPrepend(listWrapper: HTMLElement, scrollWrapper: HTMLElement, ratio?: number): number;
-    /**
-     *
-     * @param {HTMLElement} listWrapper
-     * @param {HTMLElement} wrapper
-     * @param {Function} [callback]
-     */
-    initWheelList(listWrapper: HTMLElement, wrapper: HTMLElement, callback: () => void): void;
-    /**
-     *
-     * @param {HTMLElement} listWrapper
-     * @param {HTMLElement} wrapper
-     * @param {HTMLElement} [nearestNode]
-     */
-    adjustInfiniteList(listWrapper: HTMLElement, wrapper: HTMLElement, nearestNode: HTMLElement): void;
-    /**
-     *
-     * @param {HTMLElement} listWrapper
-     * @param {HTMLElement} selector
-     *
-     */
-    getNearestNodeInfo(listWrapper: HTMLElement, selector: HTMLElement): {
-        nearestNode: HTMLElement;
-        nearestIndex: number;
-    };
-    /**
-     *
-     * @param {HTMLElement} listWrapper
-     *
-     * @param {HTMLElement|null}
-     */
-    getTargetNode(e: any, listWrapper: HTMLElement): {
-        targetNode: HTMLLIElement;
-        targetIndex: number;
-        indexInList: number;
-        infoInList: any;
-    };
-}

package/lib/es/scrollList/itemFoundation.js

@@ -1,298 +0,0 @@
-import _findIndex from "lodash/findIndex";
-import _find from "lodash/find";
-import _slice from "lodash/slice";
-import BaseFoundation from '../base/foundation';
-import isElement from '../utils/isElement';
-import { append, prepend } from '../utils/dom';
-export default class ItemFoundation extends BaseFoundation {
-  constructor() {
-    super(...arguments);
-    this._cachedSelectedNode = null;
-  }
-
-  selectIndex(index, listWrapper) {
-    const {
-      type,
-      list
-    } = this.getProps();
-
-    if (index > -1 && Array.isArray(list) && list.length && isElement(listWrapper)) {
-      const indexInData = index % list.length;
-      const item = list[indexInData];
-      const node = listWrapper.children[index];
-
-      this._adapter.setSelectedNode(node);
-
-      this._adapter.notifySelectItem(Object.assign(Object.assign({}, item), {
-        value: item.value,
-        type,
-        index: indexInData
-      }));
-    }
-  }
-
-  selectNode(node, listWrapper) {
-    const {
-      type,
-      list: data
-    } = this.getProps();
-
-    if (isElement(node) && isElement(listWrapper)) {
-      const indexInList = _findIndex(listWrapper.children, ele => ele === node);
-
-      const indexInData = indexInList % data.length;
-
-      const cachedIndexInList = _findIndex(listWrapper.children, ele => ele === this._cachedSelectedNode);
-
-      const cachedIndexData = cachedIndexInList % data.length;
-      const item = data[indexInData];
-
-      this._adapter.setSelectedNode(node);
-
-      this._adapter.scrollToCenter(node); // Avoid triggerring notifySelectItem twice,
-      // because that scroll event will be trigger
-      // when you click to select an item.
-
-
-      if (this._cachedSelectedNode !== node) {
-        this._cachedSelectedNode = node;
-
-        if (cachedIndexData !== indexInData) {
-          this._adapter.notifySelectItem(Object.assign(Object.assign({}, item), {
-            value: item.value,
-            type,
-            index: indexInData
-          }));
-        }
-      }
-    }
-  }
-  /**
-   *
-   * @param {HTMLElement} listWrapper
-   * @param {HTMLElement} scrollWrapper
-   * @param {number} ratio
-   * @returns {boolean}
-   */
-
-
-  shouldAppend(listWrapper, scrollWrapper) {
-    let ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-    const tag = 'li';
-
-    if (isElement(listWrapper) && isElement(scrollWrapper)) {
-      const itemNodes = listWrapper.querySelectorAll(tag);
-      const lastNode = itemNodes[itemNodes.length - 1];
-      const {
-        list
-      } = this.getProps();
-
-      if (lastNode) {
-        const scrollRect = scrollWrapper.getBoundingClientRect();
-        const lastRect = lastNode.getBoundingClientRect();
-        const listHeight = lastRect.height * list.length;
-        let baseTop = lastRect.top;
-        let count = 0;
-
-        while (baseTop <= scrollRect.top + scrollRect.height * ratio) {
-          count += 1;
-          baseTop += listHeight;
-        }
-
-        return count;
-      }
-    }
-
-    return false;
-  }
-  /**
-   *
-   * @param {HTMLElement} listWrapper
-   * @param {HTMLElement} scrollWrapper
-   * @param {number} ratio
-   *
-   * @returns {boolean}
-   */
-
-
-  shouldPrepend(listWrapper, scrollWrapper) {
-    let ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-    const tag = 'li';
-
-    if (isElement(listWrapper) && isElement(scrollWrapper)) {
-      const itemNodes = listWrapper.querySelectorAll(tag);
-      const firstNode = itemNodes[0];
-      const {
-        list
-      } = this.getProps();
-
-      if (firstNode) {
-        const scrollRect = scrollWrapper.getBoundingClientRect();
-        const firstRect = firstNode.getBoundingClientRect();
-        const listHeight = firstRect.height * list.length;
-        let baseTop = firstRect.top;
-        let count = 0;
-
-        while (baseTop + firstRect.height >= scrollRect.top - scrollRect.height * ratio) {
-          count += 1;
-          baseTop -= listHeight;
-        }
-
-        return count;
-      }
-    }
-
-    return 0;
-  }
-  /**
-   *
-   * @param {HTMLElement} listWrapper
-   * @param {HTMLElement} wrapper
-   * @param {Function} [callback]
-   */
-
-
-  initWheelList(listWrapper, wrapper, callback) {
-    const {
-      list
-    } = this.getProps();
-
-    if (isElement(wrapper) && isElement(listWrapper) && list && list.length) {
-      const allNodes = listWrapper.children;
-
-      const baseNodes = _slice(allNodes, 0, list.length);
-
-      const prependCount = this.shouldPrepend(listWrapper, wrapper);
-      const appendCount = this.shouldAppend(listWrapper, wrapper); // this._adapter.setPrependCount(prependCount);
-      // this._adapter.setAppendCount(appendCount);
-
-      this._adapter.setState({
-        prependCount,
-        appendCount
-      }, callback);
-    }
-  }
-  /**
-   *
-   * @param {HTMLElement} listWrapper
-   * @param {HTMLElement} wrapper
-   * @param {HTMLElement} [nearestNode]
-   */
-
-
-  adjustInfiniteList(listWrapper, wrapper, nearestNode) {
-    const {
-      list
-    } = this.getProps();
-    const nodeTag = 'li';
-
-    if (isElement(wrapper) && isElement(listWrapper) && list && list.length) {
-      const allNodes = listWrapper.querySelectorAll(nodeTag);
-      const total = allNodes.length;
-      const ratio = 1;
-      const prependCount = this.shouldPrepend(listWrapper, wrapper, ratio);
-      const appendCount = this.shouldAppend(listWrapper, wrapper, ratio); // while (this.shouldPrepend(listWrapper, wrapper, nearestNode)) {
-
-      if (prependCount) {
-        // move last nodes to first position
-        for (let i = 0; i < prependCount; i++) {
-          const nodes = _slice(allNodes, total - list.length * (i + 1), total - list.length * i);
-
-          prepend(listWrapper, ...nodes);
-        }
-      } // while (this.shouldAppend(listWrapper, wrapper, nearestNode)) {
-
-
-      if (appendCount) {
-        for (let i = 0; i < appendCount; i++) {
-          const nodes = _slice(allNodes, i * list.length, (i + 1) * list.length);
-
-          append(listWrapper, ...nodes);
-        }
-      }
-    }
-  }
-  /**
-   *
-   * @param {HTMLElement} listWrapper
-   * @param {HTMLElement} selector
-   *
-   */
-
-
-  getNearestNodeInfo(listWrapper, selector) {
-    if (isElement(listWrapper) && isElement(selector)) {
-      const selectorRect = selector.getBoundingClientRect();
-      const selectorTop = selectorRect.top;
-      const itemNodes = listWrapper.querySelectorAll('li');
-      let nearestNode = null;
-      let nearestIndex = -1;
-      let nearestDistance = Infinity;
-      Array.from(itemNodes).map((node, index) => {
-        const rect = node.getBoundingClientRect();
-        const rectTop = rect.top;
-        const absDistance = Math.abs(rectTop - selectorTop);
-
-        if (absDistance < nearestDistance && !this._adapter.isDisabledIndex(index)) {
-          nearestDistance = absDistance;
-          nearestNode = node;
-          nearestIndex = index;
-        }
-      });
-      return {
-        nearestNode,
-        nearestIndex
-      };
-    }
-
-    return undefined;
-  }
-  /**
-   *
-   * @param {HTMLElement} listWrapper
-   *
-   * @param {HTMLElement|null}
-   */
-
-
-  getTargetNode(e, listWrapper) {
-    if (e && isElement(listWrapper)) {
-      const targetTagName = 'li';
-      const currentTarget = e.target;
-      const itemNodes = listWrapper.querySelectorAll(targetTagName);
-      const list = this.getProp('list');
-      const length = Array.isArray(list) ? list.length : 0;
-      let targetIndex = -1;
-      let indexInList = -1;
-      let infoInList = null;
-
-      const targetNode = _find(itemNodes, (node, index) => {
-        if (node === currentTarget || node.contains(currentTarget)) {
-          targetIndex = index;
-
-          if (length > 0) {
-            indexInList = index % length;
-          }
-
-          return true;
-        }
-
-        return undefined;
-      });
-
-      if (indexInList > -1) {
-        infoInList = list[indexInList];
-      }
-
-      return {
-        targetNode,
-        targetIndex,
-        indexInList,
-        infoInList
-      };
-    }
-
-    return null;
-  }
-
-}

package/lib/es/scrollList/scrollTo.d.ts

@@ -1,3 +0,0 @@
-import { Animation } from '@douyinfe/semi-animation';
-declare const scrollTo: (element: HTMLElement, to: number, duration: number) => Animation;
-export default scrollTo;

package/lib/es/scrollList/scrollTo.js

@@ -1,24 +0,0 @@
-import { Animation } from '@douyinfe/semi-animation';
-
-const scrollTo = (element, to, duration) => {
-  const animation = new Animation({
-    from: {
-      scrollTop: element.scrollTop
-    },
-    to: {
-      scrollTop: to
-    }
-  }, {
-    duration
-  });
-  animation.on('frame', _ref => {
-    let {
-      scrollTop
-    } = _ref;
-    element.scrollTop = scrollTop;
-  }); // animation.start();
-
-  return animation;
-};
-
-export default scrollTo;