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

package/lib/es/rating/foundation.js

@@ -0,0 +1,263 @@
+/* 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

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

@@ -0,0 +1,13 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-scrolllist`,
+  SELECTED: `${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

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

package/lib/es/scrollList/foundation.js

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

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

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

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

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

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