@formily-design/shared 1.0.0

package/src/keycode.ts

@@ -0,0 +1,150 @@
+export enum KeyCode {
+  Backspace = 'Backspace',
+  Tab = 'Tab',
+  Enter = 'Enter',
+  Shift = 'Shift',
+  Control = 'Control',
+  Alt = 'Alt',
+  CapsLock = 'CapsLock',
+  Escape = 'Escape',
+  Space = ' ',
+  PageUp = 'PageUp',
+  PageDown = 'PageDown',
+  End = 'End',
+  Home = 'Home',
+  ArrowLeft = 'ArrowLeft',
+  ArrowUp = 'ArrowUp',
+  ArrowRight = 'ArrowRight',
+  ArrowDown = 'ArrowDown',
+  Left = 'Left',
+  Up = 'Up',
+  Right = 'Right',
+  Down = 'Down',
+  Insert = 'Insert',
+  Delete = 'Delete',
+  Zero = '0',
+  ClosedParen = ')',
+  One = '1',
+  ExclamationMark = '!',
+  Two = '2',
+  AtSign = '@',
+  Three = '3',
+  PoundSign = '£',
+  Hash = '#',
+  Four = '4',
+  DollarSign = '$',
+  Five = '5',
+  PercentSign = '%',
+  Six = '6',
+  Caret = '^',
+  Hat = '^',
+  Seven = '7',
+  Ampersand = '&',
+  Eight = '8',
+  Star = '*',
+  Asterisk = '*',
+  Nine = '9',
+  OpenParen = '(',
+  a = 'a',
+  b = 'b',
+  c = 'c',
+  d = 'd',
+  e = 'e',
+  f = 'f',
+  g = 'g',
+  h = 'h',
+  i = 'i',
+  j = 'j',
+  k = 'k',
+  l = 'l',
+  m = 'm',
+  n = 'n',
+  o = 'o',
+  p = 'p',
+  q = 'q',
+  r = 'r',
+  s = 's',
+  t = 't',
+  u = 'u',
+  v = 'v',
+  w = 'w',
+  x = 'x',
+  y = 'y',
+  z = 'z',
+  A = 'A',
+  B = 'B',
+  C = 'C',
+  D = 'D',
+  E = 'E',
+  F = 'F',
+  G = 'G',
+  H = 'H',
+  I = 'I',
+  J = 'J',
+  K = 'K',
+  L = 'L',
+  M = 'M',
+  N = 'N',
+  O = 'O',
+  P = 'P',
+  Q = 'Q',
+  R = 'R',
+  S = 'S',
+  T = 'T',
+  U = 'U',
+  V = 'V',
+  W = 'W',
+  X = 'X',
+  Y = 'Y',
+  Z = 'Z',
+  Meta = 'Meta',
+  LeftWindowKey = 'Meta',
+  RightWindowKey = 'Meta',
+  Numpad0 = '0',
+  Numpad1 = '1',
+  Numpad2 = '2',
+  Numpad3 = '3',
+  Numpad4 = '4',
+  Numpad5 = '5',
+  Numpad6 = '6',
+  Numpad7 = '7',
+  Numpad8 = '8',
+  Numpad9 = '9',
+  Multiply = '*',
+  Add = '+',
+  Subtract = '-',
+  DecimalPoint = '.',
+  MSDecimalPoint = 'Decimal',
+  Divide = '/',
+  F1 = 'F1',
+  F2 = 'F2',
+  F3 = 'F3',
+  F4 = 'F4',
+  F5 = 'F5',
+  F6 = 'F6',
+  F7 = 'F7',
+  F8 = 'F8',
+  F9 = 'F9',
+  F10 = 'F10',
+  F11 = 'F11',
+  F12 = 'F12',
+  NumLock = 'NumLock',
+  ScrollLock = 'ScrollLock',
+  SemiColon = ';',
+  Equals = '=',
+  Comma = ',',
+  Dash = '-',
+  Period = '.',
+  UnderScore = '_',
+  PlusSign = '+',
+  ForwardSlash = '/',
+  Tilde = '~',
+  GraveAccent = '`',
+  OpenBracket = '[',
+  ClosedBracket = ']',
+  Quote = "'",
+}
+
+export const getKeyCodeFromEvent = (event: KeyboardEvent): KeyCode => {
+  return event.key as any
+}

package/src/lru.ts

@@ -0,0 +1,322 @@
+/**
+ * A doubly linked list-based Least Recently Used (LRU) cache. Will keep most
+ * recently used items while discarding least recently used items when its limit
+ * is reached.
+ *
+ * Licensed under MIT. Copyright (c) 2010 Rasmus Andersson <http://hunch.se/>
+ * See README.md for details.
+ *
+ * Illustration of the design:
+ *
+ *       entry             entry             entry             entry
+ *       ______            ______            ______            ______
+ *      | head |.newer => |      |.newer => |      |.newer => | tail |
+ *      |  A   |          |  B   |          |  C   |          |  D   |
+ *      |______| <= older.|______| <= older.|______| <= older.|______|
+ *
+ *  removed  <--  <--  <--  <--  <--  <--  <--  <--  <--  <--  <--  added
+ */
+/* eslint-disable */
+
+const NEWER = Symbol('newer')
+const OLDER = Symbol('older')
+
+function Entry(key: any, value: any) {
+  this.key = key
+  this.value = value
+  this[NEWER] = undefined
+  this[OLDER] = undefined
+}
+
+export class LRUMap<K, V> {
+  size: number
+  limit: number
+  oldest: any
+  newest: any
+  _keymap: Map<K, { key: K; value: V }>
+  constructor(limit: number, entries?: any) {
+    if (typeof limit !== 'number') {
+      // called as (entries)
+      entries = limit
+      limit = 0
+    }
+
+    this.size = 0
+    this.limit = limit
+    this.oldest = this.newest = undefined
+    this._keymap = new Map()
+
+    if (entries) {
+      this.assign(entries)
+      if (limit < 1) {
+        this.limit = this.size
+      }
+    }
+  }
+
+  private _markEntryAsUsed(entry: any) {
+    if (entry === this.newest) {
+      // Already the most recenlty used entry, so no need to update the list
+      return
+    }
+    // HEAD--------------TAIL
+    //   <.older   .newer>
+    //  <--- add direction --
+    //   A  B  C  <D>  E
+    if (entry[NEWER]) {
+      if (entry === this.oldest) {
+        this.oldest = entry[NEWER]
+      }
+      entry[NEWER][OLDER] = entry[OLDER] // C <-- E.
+    }
+    if (entry[OLDER]) {
+      entry[OLDER][NEWER] = entry[NEWER] // C. --> E
+    }
+    entry[NEWER] = undefined // D --x
+    entry[OLDER] = this.newest // D. --> E
+    if (this.newest) {
+      this.newest[NEWER] = entry // E. <-- D
+    }
+    this.newest = entry
+  }
+
+  assign(entries: any) {
+    let entry: any
+    let limit = this.limit || Number.MAX_VALUE
+    this._keymap.clear()
+    const it = entries[Symbol.iterator]()
+    for (let itv = it.next(); !itv.done; itv = it.next()) {
+      const e = new Entry(itv.value[0], itv.value[1])
+      this._keymap.set(e.key, e)
+      if (!entry) {
+        this.oldest = e
+      } else {
+        entry[NEWER] = e
+        e[OLDER] = entry
+      }
+      entry = e
+      if (limit-- === 0) {
+        throw new Error('overflow')
+      }
+    }
+    this.newest = entry
+    this.size = this._keymap.size
+  }
+
+  get(key: K) {
+    // First, find our cache entry
+    const entry = this._keymap.get(key)
+    if (!entry) {
+      return
+    } // Not cached. Sorry.
+    // As <key> was found in the cache, register it as being requested recently
+    this._markEntryAsUsed(entry)
+    return entry.value
+  }
+
+  set(key: K, value: V) {
+    let entry = this._keymap.get(key)
+
+    if (entry) {
+      // update existing
+      entry.value = value
+      this._markEntryAsUsed(entry)
+      return this
+    }
+
+    // new entry
+    this._keymap.set(key, (entry = new Entry(key, value)))
+
+    if (this.newest) {
+      // link previous tail to the new tail (entry)
+      this.newest[NEWER] = entry
+      entry[OLDER] = this.newest
+    } else {
+      // we're first in -- yay
+      this.oldest = entry
+    }
+
+    // add new entry to the end of the linked list -- it's now the freshest entry.
+    this.newest = entry
+    ++this.size
+    if (this.size > this.limit) {
+      // we hit the limit -- remove the head
+      this.shift()
+    }
+
+    return this
+  }
+
+  shift() {
+    // todo: handle special case when limit == 1
+    const entry = this.oldest
+    if (entry) {
+      if (this.oldest[NEWER]) {
+        // advance the list
+        this.oldest = this.oldest[NEWER]
+        this.oldest[OLDER] = undefined
+      } else {
+        // the cache is exhausted
+        this.oldest = undefined
+        this.newest = undefined
+      }
+      // Remove last strong reference to <entry> and remove links from the purged
+      // entry being returned:
+      entry[NEWER] = entry[OLDER] = undefined
+      this._keymap.delete(entry.key)
+      --this.size
+      return [entry.key, entry.value]
+    }
+  }
+
+  find(key: K) {
+    const e = this._keymap.get(key)
+    return e ? e.value : undefined
+  }
+
+  has(key: K) {
+    return this._keymap.has(key)
+  }
+
+  delete(key: any) {
+    const entry = this._keymap.get(key)
+    if (!entry) {
+      return
+    }
+    this._keymap.delete(entry.key)
+    if (entry[NEWER] && entry[OLDER]) {
+      // relink the older entry with the newer entry
+      entry[OLDER][NEWER] = entry[NEWER]
+      entry[NEWER][OLDER] = entry[OLDER]
+    } else if (entry[NEWER]) {
+      // remove the link to us
+      entry[NEWER][OLDER] = undefined
+      // link the newer entry to head
+      this.oldest = entry[NEWER]
+    } else if (entry[OLDER]) {
+      // remove the link to us
+      entry[OLDER][NEWER] = undefined
+      // link the newer entry to head
+      this.newest = entry[OLDER]
+    } else {
+      // if(entry[OLDER] === undefined && entry.newer === undefined) {
+      this.oldest = this.newest = undefined
+    }
+
+    this.size--
+    return entry.value
+  }
+
+  clear() {
+    // Not clearing links should be safe, as we don't expose live links to user
+    this.oldest = this.newest = undefined
+    this.size = 0
+    this._keymap.clear()
+  }
+
+  keys() {
+    return new KeyIterator(this.oldest)
+  }
+
+  values() {
+    return new ValueIterator(this.oldest)
+  }
+
+  entries() {}
+
+  forEach(fun: (value: any, key: any, ctx: object) => void, thisObj: any) {
+    if (typeof thisObj !== 'object') {
+      thisObj = this
+    }
+    let entry = this.oldest
+    while (entry) {
+      fun.call(thisObj, entry.value, entry.key, this)
+      entry = entry[NEWER]
+    }
+  }
+
+  toJSON() {
+    const s = new Array(this.size)
+    let i = 0
+    let entry = this.oldest
+    while (entry) {
+      s[i++] = { key: entry.key, value: entry.value }
+      entry = entry[NEWER]
+    }
+    return s
+  }
+
+  toString() {
+    let s = ''
+    let entry = this.oldest
+    while (entry) {
+      s += String(entry.key) + ':' + entry.value
+      entry = entry[NEWER]
+      if (entry) {
+        s += ' < '
+      }
+    }
+    return s
+  }
+
+  [Symbol.iterator]() {
+    return new EntryIterator(this.oldest)
+  }
+}
+
+class EntryIterator {
+  entry: any
+  constructor(oldestEntry: any) {
+    this.entry = oldestEntry
+  }
+  [Symbol.iterator]() {
+    return this
+  }
+  next() {
+    const ent = this.entry
+    if (ent) {
+      this.entry = ent[NEWER]
+      return { done: false, value: [ent.key, ent.value] }
+    } else {
+      return { done: true, value: undefined }
+    }
+  }
+}
+
+class KeyIterator {
+  entry: any
+  constructor(oldestEntry: any) {
+    this.entry = oldestEntry
+  }
+  [Symbol.iterator]() {
+    return this
+  }
+  next() {
+    const ent = this.entry
+    if (ent) {
+      this.entry = ent[NEWER]
+      return { done: false, value: ent.key }
+    } else {
+      return { done: true, value: undefined }
+    }
+  }
+}
+
+class ValueIterator {
+  entry: any
+  constructor(oldestEntry: any) {
+    this.entry = oldestEntry
+  }
+  [Symbol.iterator]() {
+    return this
+  }
+  next() {
+    const ent = this.entry
+    if (ent) {
+      this.entry = ent[NEWER]
+      return { done: false, value: ent.value }
+    } else {
+      return { done: true, value: undefined }
+    }
+  }
+}

package/src/observer.ts

@@ -0,0 +1,38 @@
+export class LayoutObserver {
+  private resizeObserver: ResizeObserver
+
+  private performanceObserver: PerformanceObserver
+
+  private mutationObserver: MutationObserver
+
+  private connected = false
+
+  constructor(observer: () => void = () => {}) {
+    this.resizeObserver = new ResizeObserver(() => observer())
+    this.performanceObserver = new PerformanceObserver(() => {
+      observer()
+    })
+    this.mutationObserver = new MutationObserver(() => observer())
+  }
+
+  observe = (target: HTMLElement | Element) => {
+    this.resizeObserver.observe(target)
+    this.performanceObserver.observe({
+      entryTypes: ['paint', 'element', 'layout-shift', 'event'],
+    })
+    this.mutationObserver.observe(target, {
+      attributeFilter: ['style'],
+      attributes: true,
+    })
+    this.connected = true
+  }
+
+  disconnect = () => {
+    if (this.connected) {
+      this.resizeObserver.disconnect()
+      this.performanceObserver.disconnect()
+      this.mutationObserver.disconnect()
+    }
+    this.connected = false
+  }
+}

package/src/request-idle.ts

@@ -0,0 +1,22 @@
+import 'requestidlecallback'
+import { globalThisPolyfill } from './globalThisPolyfill'
+
+export interface IIdleDeadline {
+  didTimeout: boolean
+  timeRemaining: () => DOMHighResTimeStamp
+}
+
+export interface IdleCallbackOptions {
+  timeout?: number
+}
+
+export const requestIdle = (
+  callback: (params: IIdleDeadline) => void,
+  options?: IdleCallbackOptions
+): number => {
+  return globalThisPolyfill['requestIdleCallback'](callback, options)
+}
+
+export const cancelIdle = (id: number) => {
+  globalThisPolyfill['cancelIdleCallback'](id)
+}

package/src/scroller.ts

@@ -0,0 +1,113 @@
+import { IPoint } from './coordinate'
+import { createUniformSpeedAnimation, calcSpeedFactor } from './animation'
+import { isFn, isWindow } from './types'
+
+const MAX_SPEED = 80 // px/s
+
+export type ScrollDirection = 'begin' | 'end'
+
+export interface IAutoScrollBasicInfo {
+  direction: ScrollDirection
+  speedFactor: number
+  speed: number
+}
+
+export const calcAutoScrollBasicInfo = (
+  point: IPoint,
+  axis: 'x' | 'y',
+  viewport: DOMRect,
+  maxSpeed = MAX_SPEED
+): IAutoScrollBasicInfo | null => {
+  const { left, right, top, bottom } = viewport
+  const { x, y } = point
+
+  let begin: number
+  let end: number
+  let pos: number
+  let speedFactor: number
+  if (axis === 'x') {
+    begin = left
+    end = right
+    pos = x
+  } else {
+    begin = top
+    end = bottom
+    pos = y
+  }
+
+  const scrollerSize = end - begin
+
+  const moveDistance = scrollerSize > 400 ? 100 : scrollerSize / 3
+  if (end - pos < moveDistance) {
+    return {
+      direction: 'end',
+      speedFactor,
+      speed: maxSpeed * calcSpeedFactor(end - pos, moveDistance),
+    }
+  } else if (pos - begin < moveDistance) {
+    return {
+      direction: 'begin',
+      speedFactor,
+      speed: maxSpeed * calcSpeedFactor(pos - begin, moveDistance),
+    }
+  }
+
+  return null
+}
+
+export const updateScrollValue = (
+  element: HTMLElement | Window,
+  axis: 'x' | 'y',
+  value: number,
+  callback?: (scrollValue: number) => void
+) => {
+  if (element) {
+    if (!isWindow(element)) {
+      if (axis === 'x') {
+        if (element.scrollLeft + value > element.scrollWidth) return
+        element.scrollLeft += value
+        if (isFn(callback)) {
+          callback(element.scrollLeft)
+        }
+      } else {
+        if (element.scrollTop + value > element.scrollHeight) return
+        element.scrollTop += value
+        if (isFn(callback)) {
+          callback(element.scrollTop)
+        }
+      }
+    } else {
+      if (axis === 'x') {
+        element.scrollBy({
+          left: value,
+          behavior: 'smooth',
+        })
+      } else {
+        element.scrollBy({
+          top: value,
+          behavior: 'smooth',
+        })
+      }
+      if (isFn(callback)) {
+        callback(value)
+      }
+    }
+  }
+}
+
+export const scrollAnimate = (
+  element: HTMLElement | Window,
+  axis: 'x' | 'y',
+  direction: 'begin' | 'end',
+  speed: number,
+  callback?: (scrollValue: number) => void
+) => {
+  return createUniformSpeedAnimation(speed, (delta) => {
+    updateScrollValue(
+      element,
+      axis,
+      direction === 'begin' ? 0 - delta : delta,
+      callback
+    )
+  })
+}

package/src/subscribable.ts

@@ -0,0 +1,60 @@
+import { isFn } from './types'
+
+const UNSUBSCRIBE_ID_SYMBOL = Symbol('UNSUBSCRIBE_ID_SYMBOL')
+
+export interface ISubscriber<Payload = any> {
+  (payload: Payload): void | boolean
+}
+
+export class Subscribable<ExtendsType = any> {
+  private subscribers: {
+    index?: number
+    [key: number]: ISubscriber
+  } = {
+    index: 0,
+  }
+
+  dispatch<T extends ExtendsType = any>(event: T, context?: any) {
+    let interrupted = false
+    for (const key in this.subscribers) {
+      if (isFn(this.subscribers[key])) {
+        event['context'] = context
+        if (this.subscribers[key](event) === false) {
+          interrupted = true
+        }
+      }
+    }
+    return interrupted ? false : true
+  }
+
+  subscribe(subscriber: ISubscriber) {
+    let id: number
+    if (isFn(subscriber)) {
+      id = this.subscribers.index + 1
+      this.subscribers[id] = subscriber
+      this.subscribers.index++
+    }
+
+    const unsubscribe = () => {
+      this.unsubscribe(id)
+    }
+
+    unsubscribe[UNSUBSCRIBE_ID_SYMBOL] = id
+
+    return unsubscribe
+  }
+
+  unsubscribe = (id?: number | string | (() => void)) => {
+    if (id === undefined || id === null) {
+      for (const key in this.subscribers) {
+        this.unsubscribe(key)
+      }
+      return
+    }
+    if (!isFn(id)) {
+      delete this.subscribers[id]
+    } else {
+      delete this.subscribers[id[UNSUBSCRIBE_ID_SYMBOL]]
+    }
+  }
+}