ui-utils-kit

ui-utils-kit

Version 1.3.14
Published 5 months ago
78.3 kB
No dependencies
MIT license

Install

npm i ui-utils-kit

yarn add ui-utils-kit

pnpm add ui-utils-kit

Overview

ui-utils-kit 是一个高效的偏业务前端工具函数库

Index

Variables

Functions

Classes

Mutex

Namespaces

Variables

variable business_captureElementAsImage

const business_captureElementAsImage: (
 element: HTMLElement,
 canvasConfig?: Options,
 outputOptions?: OutputOptions
) => Promise<CaptureResult>;

variable CheckStatus

const CheckStatus: {
 readonly Unchecked: '0';
 readonly HalfChecked: '1';
 readonly Checked: '2';
};

variable common_createSelfCorrectingClock

const common_createSelfCorrectingClock: (interval?: number) => SelfCorrectingClock;

variable common_createSelfCorrectingCountdown

const common_createSelfCorrectingCountdown: (
 targetTimestamp: number,
 interval?: number
) => SelfCorrectingCountdown;

variable common_desensitize

const common_desensitize: (
 value: string,
 type: 'mobile' | 'idcard' | 'email' | 'bankcard' | 'name'
) => string;

variable common_Mutex

const common_Mutex: typeof Mutex;

variable common_safeJsonParse

const common_safeJsonParse: <T>(jsonString: string, defaultValue: T) => [Error, T];

variable tree_buildTree

const tree_buildTree: (nodes: TreeNode[]) => TreeNode[];

variable tree_mergeTrees

const tree_mergeTrees: (treeArr?: TreeNode[], nodes?: TreeNode[]) => TreeNode[];

variable tree_removeNodesFromTree

const tree_removeNodesFromTree: (
 treeArr?: TreeNode[],
 selectedNodes?: TreeNode[]
) => TreeNode[];

variable tree_searchTreeWithRelations

const tree_searchTreeWithRelations: (
 treeArr?: TreeNode[],
 keywords?: string,
 mark?: boolean
) => TreeNode[];

variable tree_selectRelatedNodes

const tree_selectRelatedNodes: (
 treeData: TreeNode[],
 selectedNodes?: TreeNode[]
) => TreeNode[];

variable tree_treeToArr

const tree_treeToArr: (data: TreeNode[]) => TreeNode[];

variable tree_updateTreeCheckStatus

const tree_updateTreeCheckStatus: (
 tree: TreeNode[],
 selectedNodes: TreeNode[]
) => TreeNode[];

variable tree_updateTreeCheckStatusFlat

const tree_updateTreeCheckStatusFlat: (
 tree: TreeNode[],
 selectedNodes: TreeNode[]
) => TreeNode[];

Functions

function buildTree

buildTree: (nodes: TreeNode[]) => TreeNode[];

构建树形结构
Parameter nodes
树节点数组，每个节点包含 id 和 pid 等属性
Returns
{Array} - 树形结构数组

function captureElementAsImage

captureElementAsImage: (
 element: HTMLElement | null,
 canvasConfig?: Options,
 outputOptions?: OutputOptions
) => Promise<CaptureResult>;

将 DOM 元素转换为图片（canvas），并支持自动下载或返回 Blob 格式数据。
Parameter element
需要捕捉的 DOM 元素。
Parameter canvasConfig
html2canvas 的配置项，例如 scale、backgroundColor 等。
Parameter outputOptions
输出选项。
Returns
返回 Promise，包含 { canvas, dataUrl, blob } 对象。

function createSelfCorrectingClock

createSelfCorrectingClock: (interval?: number) => SelfCorrectingClock;

创建零漂移的自校正实时时钟
Parameter interval
更新间隔（毫秒），默认 1000

function createSelfCorrectingCountdown

createSelfCorrectingCountdown: (
 targetTimestamp: number,
 interval?: number
) => SelfCorrectingCountdown;

创建零漂移的自校正倒计时器
Parameter targetTimestamp
目标时间戳（毫秒）
Parameter interval
更新间隔（毫秒），默认值为 1000
Returns
自校正倒计时管理器实例，包含获取剩余时间和停止定时器的方法

function desensitize

desensitize: (
 value: string,
 type: 'mobile' | 'idcard' | 'email' | 'bankcard' | 'name'
) => string;

数据脱敏函数
Parameter value
原始数据
Parameter type
脱敏类型
Returns
脱敏后的数据

function mergeTrees

mergeTrees: (treeArr?: TreeNode[], nodes?: TreeNode[]) => TreeNode[];

合并节点数组到已有的树形结构中
Parameter treeArr
现有的树形结构数组，每个元素包含一个 id 和 pid 属性
Parameter nodes
要合并的节点数组，每个节点包含一个 id 和 pid 属性
Returns
{Array} - 合并后的树形结构数组

function removeNodesFromTree

removeNodesFromTree: (
 treeArr?: TreeNode[],
 selectedNodes?: TreeNode[]
) => TreeNode[];

从树形结构中移除指定的节点
Parameter treeArr
当前的扁平树形结构数组，每个节点对象包含 id 和 pid 属性
Parameter selectedNodes
要移除的节点数组，每个节点包含 id 和 pid 属性
Returns
{Array} - 过滤后的扁平树形结构数组，其中移除了指定的节点及其子节点（如果父节点被移除）

function safeJsonParse

safeJsonParse: <T>(jsonString: string, defaultValue: T) => [Error | null, T];

安全地解析 JSON 字符串。
Parameter jsonString
要解析的 JSON 字符串。
Parameter defaultValue
解析失败时返回的默认值。
Returns
一个元组，第一个元素为错误对象（若无错误则为 null），第二个元素为解析结果或默认值。

function searchTreeWithRelations

searchTreeWithRelations: (
 treeArr?: TreeNode[],
 keywords?: string,
 mark?: boolean
) => TreeNode[];

在树形结构中根据关键词查找相关节点，并返回包含匹配节点、父节点和子节点的结果。
Parameter treeArr
树形数据数组，每个元素应为一个节点对象，节点对象至少包含 id, pid, name 属性。
Parameter keywords
用于查找的关键词，匹配节点的 name 属性。
Parameter mark
是否在结果中标记 isMatched 属性。
Returns
{Array} - 返回匹配的节点数组，包含匹配的节点及其父节点和子节点，顺序为父节点在前、子节点在后。

function selectRelatedNodes

selectRelatedNodes: (
 treeData: TreeNode[],
 selectedNodes?: TreeNode[]
) => TreeNode[];

从树形结构中选择与给定选中节点相关的所有父节点和子节点
Parameter treeData
树形结构数组，每个节点对象包含 id 和 pid 属性
Parameter selectedNodes
选中的节点数组，每个节点对象包含 id 和 pid 属性
Returns
{Array} - 包含选中节点、其父节点和子节点的数组

function treeToArr

treeToArr: (data: TreeNode[]) => TreeNode[];

将树形结构转换为扁平化数组
Parameter data
树形数据，包含 id, name 和可选的 children 属性
Returns
{Array} - 扁平化的数组，包含节点的 id, name, 和 pid

function updateTreeCheckStatus

updateTreeCheckStatus: (
 tree: TreeNode[],
 selectedNodes: TreeNode[]
) => TreeNode[];

更新树结构的节点选中状态。该函数处理具有多个根节点的树结构，当选中或取消选中某些节点时，更新整个树的状态。父节点的状态会根据其子节点的状态自动变为选中、半选或未选中。
Parameter tree
树结构的数组，每个节点包含 id, name, pid, children, check 属性。
Parameter selectedNodes
选中的节点数组，每个节点同样包含 id, name, pid, children, check 属性。
Returns
{TreeNode[]} 返回更新后的树结构数组。

function updateTreeCheckStatusFlat

updateTreeCheckStatusFlat: (
 tree: TreeNode[],
 selectedNodes: TreeNode[]
) => TreeNode[];

更新扁平数组格式的树结构的节点选中状态。该函数处理扁平数组形式的树结构，当选中或取消选中某些节点时，更新整个树的状态。父节点的状态会根据其子节点的状态自动变为选中、半选或未选中。
Parameter tree
扁平数组格式的树结构，每个节点包含 id, name, pid, check 属性，children 属性可以为空。
Parameter selectedNodes
选中的节点数组，每个节点同样包含 id, name, pid, check 属性。
Returns
{TreeNode[]} 返回更新后的扁平数组格式的树结构。

Classes

class Mutex

class Mutex {}

模拟互斥锁（Mutex）机制，用于控制异步操作对共享资源的访问

method isLocked

isLocked: () => boolean;

查询当前锁的状态
Returns
boolean - true 表示已锁定，false 表示未锁定

method lock

lock: () => Promise<void>;

获取锁。如果当前已锁定，则将请求加入队列，等待解锁后依次获取。
Returns
Promise - 当获取到锁时，Promise 被 resolve。

method queueLength

queueLength: () => number;

获取当前等待队列的长度
Returns
number - 等待队列中的请求数量

method unlock

unlock: () => void;

释放锁。如果有等待队列，则唤醒队列中的下一个请求；否则将锁状态设为未锁定。

Namespaces

namespace business

namespace business {}

variable captureElementAsImage

const captureElementAsImage: (
 element: HTMLElement,
 canvasConfig?: Options,
 outputOptions?: OutputOptions
) => Promise<CaptureResult>;

namespace common

namespace common {}

variable createSelfCorrectingClock

const createSelfCorrectingClock: (interval?: number) => SelfCorrectingClock;

variable createSelfCorrectingCountdown

const createSelfCorrectingCountdown: (
 targetTimestamp: number,
 interval?: number
) => SelfCorrectingCountdown;

variable desensitize

const desensitize: (
 value: string,
 type: 'mobile' | 'idcard' | 'email' | 'bankcard' | 'name'
) => string;

variable Mutex

const Mutex: typeof Mutex;

variable safeJsonParse

const safeJsonParse: <T>(jsonString: string, defaultValue: T) => [Error, T];

type Mutex

type common_Mutex = Mutex;

namespace tree

namespace tree {}

variable buildTree

const buildTree: (nodes: TreeNode[]) => TreeNode[];

variable mergeTrees

const mergeTrees: (treeArr?: TreeNode[], nodes?: TreeNode[]) => TreeNode[];

variable removeNodesFromTree

const removeNodesFromTree: (
 treeArr?: TreeNode[],
 selectedNodes?: TreeNode[]
) => TreeNode[];

variable searchTreeWithRelations

const searchTreeWithRelations: (
 treeArr?: TreeNode[],
 keywords?: string,
 mark?: boolean
) => TreeNode[];

variable selectRelatedNodes

const selectRelatedNodes: (
 treeData: TreeNode[],
 selectedNodes?: TreeNode[]
) => TreeNode[];

variable treeToArr

const treeToArr: (data: TreeNode[]) => TreeNode[];

variable updateTreeCheckStatus

const updateTreeCheckStatus: (
 tree: TreeNode[],
 selectedNodes: TreeNode[]
) => TreeNode[];

variable updateTreeCheckStatusFlat

const updateTreeCheckStatusFlat: (
 tree: TreeNode[],
 selectedNodes: TreeNode[]
) => TreeNode[];

Package Files (1)

dist/index.d.ts

Dependencies (0)

No dependencies.

Dev Dependencies (1)

html2canvas-pro

Peer Dependencies (1)

html2canvas-pro

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ui-utils-kit.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ui-utils-kit)

HTML

<a href="https://www.jsdocs.io/package/ui-utils-kit"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 4 months ago.
Package analyzed in 4048 ms.
Missing or incorrect documentation? Open an issue for this package.

ui-utils-kit

Install

Overview

Index

Variables

Functions

Classes

Namespaces

Variables

variable business_captureElementAsImage

variable CheckStatus

variable common_createSelfCorrectingClock

variable common_createSelfCorrectingCountdown

variable common_desensitize

variable common_Mutex

variable common_safeJsonParse

variable tree_buildTree

variable tree_mergeTrees

variable tree_removeNodesFromTree

variable tree_searchTreeWithRelations

variable tree_selectRelatedNodes

variable tree_treeToArr

variable tree_updateTreeCheckStatus

variable tree_updateTreeCheckStatusFlat

Functions

function buildTree

Parameter nodes

Returns

function captureElementAsImage

Parameter element

Parameter canvasConfig

Parameter outputOptions

Returns

function createSelfCorrectingClock

Parameter interval

function createSelfCorrectingCountdown

Parameter targetTimestamp

Parameter interval

Returns

function desensitize

Parameter value

Parameter type

Returns

function mergeTrees

Parameter treeArr

Parameter nodes

Returns

function removeNodesFromTree

Parameter treeArr

Parameter selectedNodes

Returns

function safeJsonParse

Parameter jsonString

Parameter defaultValue

Returns

function searchTreeWithRelations

Parameter treeArr

Parameter keywords

Parameter mark

Returns

function selectRelatedNodes

Parameter treeData

Parameter selectedNodes

Returns

function treeToArr

Parameter data

Returns

function updateTreeCheckStatus

Parameter tree

Parameter selectedNodes

Returns

function updateTreeCheckStatusFlat

Parameter tree

Parameter selectedNodes

Returns

Classes

class Mutex

method isLocked

Returns

method lock