useSelectHistory

• Category: Composables
• Relate: onSelectionChange
• Dependencies: @lark-base-open/js-sdk
• Last Changed: 2 weeks ago

Notice

This function needs to use in Base, please use this website as a plugin in a Base to see the demo.

Demo

Source

Show demo code

demo.vue

<script setup lang="ts">
import { useSelectHistory } from "@qww0302/use-bitable"

const history = useSelectHistory({
  max: 10
})
</script>

<template>
  <p>History length: {{ history.length }}</p>
  <div style="overflow: auto;max-height: 200px;">
    <ul>
      <li
        v-for="(item, index) in history.slice().reverse()"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

Usage

useSelectHistory is used to record the user's selection history, and the default recording limit is unlimited (Infinity).

import { useSelectHistory } from "@qww0302/use-bitable"

const history = useSelectHistory()

Set the recording limit

You can set the recording limit through options.max. When the number of records exceeds the limit, the earliest record will be automatically deleted.

TIP

It is recommended to set a reasonable limit to avoid occupying too much memory.

import { useSelectHistory } from "@qww0302/use-bitable"

const history = useSelectHistory({
  /**
   * The default value is Infinity
   */
  max: 10,
})

Type Declarations

import { Selection } from "@lark-base-open/js-sdk"
export type TimeStamp = number
export interface SelectHistory {
  select: Selection
  time: TimeStamp
}
export interface useSelectHistoryOptions {
  /**
   * Max history length
   *
   * 最大历史记录长度
   *
   * @default Infinity
   */
  max?: number
}
/**
 * Reactive bitable selection history
 *
 * 响应式的 `bitable` 选中项历史记录
 *
 * @param options
 * @returns
 */
export declare function useSelectHistory(
  options?: useSelectHistoryOptions,
): import("vue").Ref<
  {
    select: {
      baseId: string | null
      tableId: string | null
      viewId: string | null
      fieldId: string | null
      recordId: string | null
    }
    time: number
  }[]
>