bee-front-components 1.0.0

package/lib/components/QueryBar/TableQueryBar.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @name 表格搜索栏
+ * @description 用于通用性表格进行筛选搜索
+ * @param {TableQueryBarHookProps & TableQueryBarHookCustomProps} 该组件所用参数与choerodon UI组件中Table的queryBar参数一致
+ * @param {React.ReactNode} extra 表格头部额外内容（默认置于右侧）
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {string} dividerClass 分割线自定义样式
+ * @param {React.ReactNode} customHeader 自定义表格头部操作区域
+ * @author czy
+ */
+import React from "react";
+import { LabelAlign } from "choerodon-ui/pro/lib/form/enum";
+import type { TableQueryBarHookProps, TableQueryBarHookCustomProps } from "choerodon-ui/pro/lib/table/Table";
+type ITableQueryBarProps = TableQueryBarHookProps & TableQueryBarHookCustomProps;
+export interface IProps extends ITableQueryBarProps {
+    /** 表格头部额外内容（默认置于右侧） */
+    extra?: React.ReactNode;
+    /** 自定义表格头部操作区域 */
+    customHeader?: React.ReactNode;
+    /** 是否显示分割线 */
+    isShowDivider?: boolean;
+    /** 分割线自定义样式 */
+    dividerClass?: string;
+    /** 是否显示展开收起按钮 */
+    isShowCollapseBtn?: boolean;
+    /** 标签对齐方式 */
+    labelAlign?: LabelAlign;
+    /** 查询按钮样式 */
+    queryButtonStyle?: React.CSSProperties;
+}
+declare const TableQueryBar: (props: IProps) => React.JSX.Element;
+export default TableQueryBar;

package/lib/components/QueryBar/TableQueryBar.js

@@ -0,0 +1,115 @@
+import _Form from "@hzero-front-ui/c7n-ui/lib/FormPro";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * @name 表格搜索栏
+ * @description 用于通用性表格进行筛选搜索
+ * @param {TableQueryBarHookProps & TableQueryBarHookCustomProps} 该组件所用参数与choerodon UI组件中Table的queryBar参数一致
+ * @param {React.ReactNode} extra 表格头部额外内容（默认置于右侧）
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {string} dividerClass 分割线自定义样式
+ * @param {React.ReactNode} customHeader 自定义表格头部操作区域
+ * @author czy
+ */
+import React, { useMemo, useState } from "react";
+import classNames from "classnames";
+import { LabelAlign, LabelLayout } from "choerodon-ui/pro/lib/form/enum";
+import { ButtonColor, FuncType } from "choerodon-ui/pro/lib/button/enum";
+import { Button } from "../Buttons";
+import styles from "./index.module.less?modules";
+const TableQueryBar = props => {
+  var _ref;
+  const extra = props.extra,
+    customHeader = props.customHeader,
+    isShowDivider = props.isShowDivider,
+    dividerClass = props.dividerClass,
+    queryFields = props.queryFields,
+    queryDataSet = props.queryDataSet,
+    _props$queryFieldsLim = props.queryFieldsLimit,
+    queryFieldsLimit = _props$queryFieldsLim === void 0 ? 3 : _props$queryFieldsLim,
+    dataSet = props.dataSet,
+    buttons = props.buttons,
+    _props$labelLayout = props.labelLayout,
+    labelLayout = _props$labelLayout === void 0 ? "horizontal" : _props$labelLayout,
+    _props$isShowCollapse = props.isShowCollapseBtn,
+    isShowCollapseBtn = _props$isShowCollapse === void 0 ? true : _props$isShowCollapse,
+    _props$labelAlign = props.labelAlign,
+    labelAlign = _props$labelAlign === void 0 ? "left" : _props$labelAlign,
+    _props$queryButtonSty = props.queryButtonStyle,
+    queryButtonStyle = _props$queryButtonSty === void 0 ? {} : _props$queryButtonSty;
+  const isShowOptBox = useMemo(() => !!customHeader || (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 || !!extra, [customHeader, buttons, extra]); // 是否显示表格顶部操作区域
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1]; // 是否显示更多
+
+  // 表格查询
+  function handleQuery() {
+    dataSet === null || dataSet === void 0 ? void 0 : dataSet.unSelectAll();
+    dataSet === null || dataSet === void 0 ? void 0 : dataSet.query();
+  }
+
+  // 查询重置
+  function handleReset() {
+    queryDataSet === null || queryDataSet === void 0 ? void 0 : queryDataSet.reset();
+    handleQuery();
+  }
+
+  // 点击展开或收起按钮
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.tableQueryBar
+  }, ((_ref = queryFields || []) === null || _ref === void 0 ? void 0 : _ref.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.formContainer
+  }, /*#__PURE__*/React.createElement(_Form, {
+    className: styles.searchForm,
+    columns: queryFieldsLimit,
+    dataSet: queryDataSet,
+    labelLayout: labelLayout,
+    labelAlign: labelAlign,
+    useColon: false
+  }, !showMore && isShowCollapseBtn ? queryFields === null || queryFields === void 0 ? void 0 : queryFields.slice(0, queryFieldsLimit) : queryFields), /*#__PURE__*/React.createElement("div", {
+    className: styles.buttonContainer,
+    style: queryButtonStyle
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: "icon-biaogechaxun",
+    funcType: "raised",
+    className: styles.queryBtn,
+    dataSet: dataSet,
+    color: "primary",
+    onClick: handleQuery
+  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
+    icon: "icon-biaogechongzhi",
+    funcType: "raised",
+    className: styles.resetBtn,
+    color: "default",
+    onClick: handleReset
+  }, "\u91CD\u7F6E"), isShowCollapseBtn && (queryFields === null || queryFields === void 0 ? void 0 : queryFields.length) > queryFieldsLimit && /*#__PURE__*/React.createElement(Button, {
+    className: styles.collapseBtn,
+    funcType: "link",
+    onClick: () => {
+      setShowMore(!showMore);
+      dataSet === null || dataSet === void 0 ? void 0 : dataSet.reset();
+    }
+  }, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u6536\u8D77"), /*#__PURE__*/React.createElement("i", {
+    className: "iconfont icon-shouqi",
+    style: {
+      marginLeft: 4,
+      fontSize: 12
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u5C55\u5F00"), /*#__PURE__*/React.createElement("i", {
+    className: "iconfont icon-gengduo",
+    style: {
+      marginLeft: 4,
+      fontSize: 12
+    }
+  }))))), isShowDivider && /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.divider, dividerClass)
+  })), isShowOptBox && /*#__PURE__*/React.createElement("div", {
+    className: styles.optBox
+  }, customHeader || /*#__PURE__*/React.createElement(React.Fragment, null, buttons && /*#__PURE__*/React.createElement("div", {
+    className: styles.btns
+  }, buttons), extra && /*#__PURE__*/React.createElement("div", {
+    className: styles.extra
+  }, extra))));
+};
+export default TableQueryBar;

package/lib/components/QueryBar/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @name 表格搜索栏
+ * @description 用于通用性表格进行筛选搜索
+ * @param {TableQueryBarHookProps & TableQueryBarHookCustomProps} 该组件所用参数与choerodon UI组件中Table的queryBar参数一致
+ * @param {React.ReactNode} extra 表格头部额外内容（默认置于右侧）
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {string} dividerClass 分割线自定义样式
+ * @param {React.ReactNode} customHeader 自定义表格头部操作区域
+ * @author czy
+ */
+import React from "react";
+import type { TableQueryBarHookProps, TableQueryBarHookCustomProps } from "choerodon-ui/pro/lib/table/Table";
+type ITableQueryBarProps = TableQueryBarHookProps & TableQueryBarHookCustomProps;
+interface IProps extends ITableQueryBarProps {
+    /** 表格头部额外内容（默认置于右侧） */
+    extra?: React.ReactNode;
+    /** 自定义表格头部操作区域 */
+    customHeader?: React.ReactNode;
+    /** 是否显示分割线 */
+    isShowDivider?: boolean;
+    /** 分割线自定义样式 */
+    dividerClass?: string;
+}
+declare const TableQueryBar: (props: IProps) => React.JSX.Element;
+export default TableQueryBar;

package/lib/components/QueryBar/index.js

@@ -0,0 +1,102 @@
+import _Button from "@hzero-front-ui/c7n-ui/lib/ButtonPro";
+import _Form from "@hzero-front-ui/c7n-ui/lib/FormPro";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * @name 表格搜索栏
+ * @description 用于通用性表格进行筛选搜索
+ * @param {TableQueryBarHookProps & TableQueryBarHookCustomProps} 该组件所用参数与choerodon UI组件中Table的queryBar参数一致
+ * @param {React.ReactNode} extra 表格头部额外内容（默认置于右侧）
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {string} dividerClass 分割线自定义样式
+ * @param {React.ReactNode} customHeader 自定义表格头部操作区域
+ * @author czy
+ */
+import React, { useMemo, useState } from "react";
+import classNames from "classnames";
+import { LabelLayout } from "choerodon-ui/pro/lib/form/enum";
+import { ButtonColor, FuncType } from "choerodon-ui/pro/lib/button/enum";
+import styles from "./index.module.less?modules";
+const TableQueryBar = props => {
+  var _ref;
+  const extra = props.extra,
+    customHeader = props.customHeader,
+    isShowDivider = props.isShowDivider,
+    dividerClass = props.dividerClass,
+    queryFields = props.queryFields,
+    queryDataSet = props.queryDataSet,
+    _props$queryFieldsLim = props.queryFieldsLimit,
+    queryFieldsLimit = _props$queryFieldsLim === void 0 ? 3 : _props$queryFieldsLim,
+    dataSet = props.dataSet,
+    buttons = props.buttons,
+    _props$labelLayout = props.labelLayout,
+    labelLayout = _props$labelLayout === void 0 ? "horizontal" : _props$labelLayout;
+  const isShowOptBox = useMemo(() => !!customHeader || (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 || !!extra, [customHeader, buttons, extra]); // 是否显示表格顶部操作区域
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1]; // 是否显示更多
+
+  // 表格查询
+  function handleQuery() {
+    dataSet === null || dataSet === void 0 ? void 0 : dataSet.unSelectAll();
+    dataSet === null || dataSet === void 0 ? void 0 : dataSet.query();
+  }
+
+  // 查询重置
+  function handleReset() {
+    queryDataSet === null || queryDataSet === void 0 ? void 0 : queryDataSet.reset();
+    handleQuery();
+  }
+
+  // 点击展开或收起按钮
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.tableQueryBar
+  }, ((_ref = queryFields || []) === null || _ref === void 0 ? void 0 : _ref.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.formContainer
+  }, /*#__PURE__*/React.createElement(_Form, {
+    className: styles.searchForm,
+    columns: queryFieldsLimit,
+    dataSet: queryDataSet,
+    labelLayout: labelLayout,
+    useColon: false
+  }, showMore ? queryFields : queryFields === null || queryFields === void 0 ? void 0 : queryFields.slice(0, queryFieldsLimit)), /*#__PURE__*/React.createElement("div", {
+    className: styles.buttonContainer
+  }, /*#__PURE__*/React.createElement(_Button, {
+    className: styles.queryBtn,
+    dataSet: dataSet,
+    color: "primary",
+    onClick: handleQuery
+  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(_Button, {
+    className: styles.resetBtn,
+    onClick: handleReset
+  }, "\u91CD\u7F6E"), (queryFields === null || queryFields === void 0 ? void 0 : queryFields.length) > queryFieldsLimit && /*#__PURE__*/React.createElement(_Button, {
+    className: styles.collapseBtn,
+    funcType: "link",
+    onClick: () => {
+      setShowMore(!showMore);
+      dataSet === null || dataSet === void 0 ? void 0 : dataSet.reset();
+    }
+  }, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u6536\u8D77"), /*#__PURE__*/React.createElement("i", {
+    className: "iconfont icon-shouqi",
+    style: {
+      marginLeft: 4,
+      fontSize: 12
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u5C55\u5F00"), /*#__PURE__*/React.createElement("i", {
+    className: "iconfont icon-gengduo",
+    style: {
+      marginLeft: 4,
+      fontSize: 12
+    }
+  }))))), isShowDivider && /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.divider, dividerClass)
+  })), isShowOptBox && /*#__PURE__*/React.createElement("div", {
+    className: styles.optBox
+  }, customHeader || /*#__PURE__*/React.createElement(React.Fragment, null, buttons && /*#__PURE__*/React.createElement("div", {
+    className: styles.btns
+  }, buttons), extra && /*#__PURE__*/React.createElement("div", {
+    className: styles.extra
+  }, extra))));
+};
+export default TableQueryBar;

package/lib/components/QueryBar/index.module.less

@@ -0,0 +1,58 @@
+// 表格搜索框
+.tableQueryBar {
+  :global {
+    .c7n-pro-field-label.c7n-pro-field-label.c7n-pro-field-label {
+      & > label,
+      & + td .c7n-pro-field-wrapper {
+        padding: 0 0.16rem 0.12rem 0 !important;
+      }
+    }
+  }
+  // 搜索框表单
+  .formContainer {
+    overflow-y: auto;
+    .flex(@align: flex-start, @wrap: nowrap);
+    width: 100%;
+    max-height: 1.36rem;
+    margin-bottom: 0.04rem; // 补齐距离下边框的16px间隔
+
+    .searchForm {
+      flex: 1;
+    }
+
+    .buttonContainer {
+      .flex(@justify: flex-end);
+      flex-shrink: 0;
+      // 内部按钮排列默认存在margin-left: var(--btn-group-spacing); 默认值0.1rem = 10px
+      gap: 0.06rem;
+      margin: 0 0 0.12rem 0.56rem;
+      padding: 0;
+      position: sticky;
+      top: 0px;
+      .queryBtn,
+      .resetBtn {
+        .flex;
+        width: 0.88rem;
+        height: 0.36rem;
+      }
+      .collapseBtn {
+        .flex;
+      }
+    }
+  }
+  .divider {
+    width: 100%;
+    height: 0.01rem;
+    background-color: @borderColor;
+    margin-bottom: 0.16rem;
+  }
+  // 表格顶部操作区域
+  .optBox {
+    .flex(@justify: space-between);
+    width: 100%;
+    margin-bottom: 0.16rem;
+    .btns {
+      .flex(@justify: flex-start, @wrap: nowrap);
+    }
+  }
+}

package/lib/components/RemainDay/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @name 显示剩余时间
+ * @description 用于自定义标识显示某项任务的剩余天数
+ * @param { string } className 自定义外层类名
+ * @param { 'text' | 'tag' } mode 展示形式 'text'以纯文本形式展示 'tag'以标签形式展示于表格中
+ * @param { number | string } value 剩余时间
+ * @param { boolean } isShowZero 是否显示剩余0天
+ * @author lichen
+ */
+import React from "react";
+interface IProps {
+    /** 自定义外层类名 */
+    className?: string;
+    /** 展示形式 'text'以纯文本形式展示 'tag'以标签形式展示于表格中 */
+    mode?: "text" | "tag";
+    /** 剩余时间 */
+    value: number | string;
+    /** 是否显示剩余0天 */
+    isShowZero?: boolean;
+}
+declare const RemainDay: React.FC<IProps>;
+export default RemainDay;

package/lib/components/RemainDay/index.js

@@ -0,0 +1,47 @@
+/**
+ * @name 显示剩余时间
+ * @description 用于自定义标识显示某项任务的剩余天数
+ * @param { string } className 自定义外层类名
+ * @param { 'text' | 'tag' } mode 展示形式 'text'以纯文本形式展示 'tag'以标签形式展示于表格中
+ * @param { number | string } value 剩余时间
+ * @param { boolean } isShowZero 是否显示剩余0天
+ * @author lichen
+ */
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import styles from "./index.module.less?modules";
+const RemainDay = props => {
+  const className = props.className,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? "tag" : _props$mode,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
+    isShowZero = props.isShowZero;
+  const RemainTag = useCallback(() => {
+    if (!isShowZero) {
+      return null;
+    }
+    const remainDay = Number(value) || 0;
+    // 表格中标签显示
+    if (mode === "tag") {
+      if (remainDay < 0) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: styles.delayTag
+        }, "\u8D85\u671F", -remainDay, "\u5929");
+      }
+      return /*#__PURE__*/React.createElement("span", {
+        className: remainDay <= 5 ? styles.warnTag : styles.normalTag
+      }, "\u5269", remainDay, "\u5929");
+    }
+    // 普通文字显示
+    return remainDay < 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, "\u8D85\u671F", /*#__PURE__*/React.createElement("span", {
+      className: styles.delayText
+    }, -remainDay), "\u5929") : /*#__PURE__*/React.createElement(React.Fragment, null, "\u8FD8\u5269", /*#__PURE__*/React.createElement("span", {
+      className: remainDay <= 5 ? styles.warnText : styles.normalText
+    }, remainDay), "\u5929");
+  }, [value, mode]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.remainDayWrap, className)
+  }, /*#__PURE__*/React.createElement(RemainTag, null));
+};
+export default RemainDay;

package/lib/components/RemainDay/index.module.less

@@ -0,0 +1,42 @@
+// 剩余时间组件样式
+.remainTag() {
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.remainDayWrap {
+  color: @primaryWord;
+}
+
+// 逾期标签
+.delayTag {
+  .remainTag;
+  color: @errorColor;
+  background-color: @errorLightColor;
+}
+.delayText {
+  font-weight: bold;
+  color: @errorColor;
+}
+
+// 警示标签
+.warnTag {
+  .remainTag;
+  color: @warnColor;
+  background-color: @warnLightColor;
+}
+.warnText {
+  font-weight: bold;
+  color: @warnColor;
+}
+
+// 正常标签
+.normalTag {
+  .remainTag;
+  color: @primaryColor;
+  background-color: @primaryLightColor;
+}
+.normalText {
+  font-weight: bold;
+  color: @successColor;
+}

package/lib/components/Scanner/hooks/useKeyboardScanner.d.ts

@@ -0,0 +1,14 @@
+interface IUseKeyboardScannerOptions {
+    /** 是否启用扫码 该参数设置false后不会监听键盘 */
+    enabled?: boolean;
+    /** 单字符最大间隔 扫码枪通常输入较快 以此来区分是普通人工输入还是扫码枪输入 */
+    maxInterval?: number;
+    /** 最小扫码长度 */
+    minLength?: number;
+    /** 扫码结束键 */
+    endKey?: string;
+    /** 扫码成功的回调 */
+    onScan: (value: string) => void;
+}
+export declare function useKeyboardScanner(props: IUseKeyboardScannerOptions): void;
+export {};

package/lib/components/Scanner/hooks/useKeyboardScanner.js

@@ -0,0 +1,95 @@
+/**
+ * @name 扫码枪扫码相关逻辑操作
+ */
+import { useEffect, useRef } from "react";
+// 扫码枪扫码逻辑
+export function useKeyboardScanner(props) {
+  const _props$enabled = props.enabled,
+    enabled = _props$enabled === void 0 ? true : _props$enabled,
+    _props$maxInterval = props.maxInterval,
+    maxInterval = _props$maxInterval === void 0 ? 50 : _props$maxInterval,
+    _props$minLength = props.minLength,
+    minLength = _props$minLength === void 0 ? 1 : _props$minLength,
+    _props$endKey = props.endKey,
+    endKey = _props$endKey === void 0 ? "Enter" : _props$endKey,
+    onScan = props.onScan;
+  const bufferRef = useRef(""); // 字符缓冲区 存放扫码枪正在输入的字符串信息
+  const lastKeyTimeRef = useRef(null); // 记录上一次按键的时间戳，用来计算两次按键间隔
+  const timerRef = useRef(null); // 超时计时器 超时后没继续输入则清空缓冲区
+
+  // 状态重置 当识别完成、超时、关闭hook或组件卸载时清空全部状态与计时器
+  function reset() {
+    bufferRef.current = "";
+    lastKeyTimeRef.current = null;
+    if ((timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) !== null) {
+      var _window;
+      (_window = window) === null || _window === void 0 ? void 0 : _window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }
+  useEffect(() => {
+    // 关闭扫码监听，清空缓存，不绑定事件
+    if (!enabled) {
+      reset();
+      return;
+    }
+
+    // handleKeyDown 键盘按下事件
+    function handleKeyDown(event) {
+      var _window3;
+      const now = Date.now();
+      const currentKey = (event === null || event === void 0 ? void 0 : event.key) || "";
+      // 判断扫码结束(默认 Enter键)
+      if (currentKey === endKey) {
+        var _bufferRef$current;
+        const value = (_bufferRef$current = bufferRef.current) === null || _bufferRef$current === void 0 ? void 0 : _bufferRef$current.trim();
+        // 扫描识别到的字符长度大于最小长度则
+        if (value.length >= minLength) {
+          onScan(value);
+        }
+        reset();
+        return;
+      }
+
+      // 除此之外过滤掉Shift、Ctrl等功能类按键
+      if ((currentKey === null || currentKey === void 0 ? void 0 : currentKey.length) !== 1) {
+        return;
+      }
+
+      // 如果用户正在 Input/Textarea/Select 中手工输入默认不拦截
+      const target = event === null || event === void 0 ? void 0 : event.target;
+      if (target) {
+        var _target$tagName, _ref;
+        const tagName = target === null || target === void 0 ? void 0 : (_target$tagName = target.tagName) === null || _target$tagName === void 0 ? void 0 : _target$tagName.toLowerCase();
+        if ((_ref = ["input", "textarea", "select"]) !== null && _ref !== void 0 && _ref.includes(tagName) || target !== null && target !== void 0 && target.isContentEditable) {
+          return;
+        }
+      }
+
+      // 判断是不是连续快速输入
+      if ((lastKeyTimeRef === null || lastKeyTimeRef === void 0 ? void 0 : lastKeyTimeRef.current) !== null) {
+        const interval = now - (lastKeyTimeRef === null || lastKeyTimeRef === void 0 ? void 0 : lastKeyTimeRef.current);
+        // 如果间隔超过阈值则认为非扫码枪连续输入
+        if (interval > maxInterval) {
+          reset();
+        }
+      }
+      bufferRef.current += currentKey;
+      lastKeyTimeRef.current = now;
+
+      // 如果一定时间内没有继续输入则清空本次缓存
+      if (timerRef.current !== null) {
+        var _window2;
+        (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.clearTimeout(timerRef === null || timerRef === void 0 ? void 0 : timerRef.current);
+      }
+      timerRef.current = (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.setTimeout(() => {
+        reset();
+      }, maxInterval + 30);
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      reset();
+    };
+  }, [props]);
+}

package/lib/components/Scanner/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @name 扫码工具
+ * @description 用于通过扫码枪或摄像头识别二维码中的相关信息
+ * @param {ScannerMode} mode 扫码识别类型
+ * @param {boolean} enabled 是否启用扫码组件功能
+ * @param {boolean} closeAfterScan 是否在扫码成功后自动关闭摄像头 默认true
+ * @param {number} keyboardInterval 扫码枪单次输入最大间隔，单位ms 默认 50ms
+ * @param {number} minLength 扫码枪最小字符长度 默认为1
+ * @param {string} cameraTitle 摄像头标题
+ * @param {boolean} showScanArea 是否显示扫码框
+ * @param {boolean} continuous 扫码成功后是否允许继续扫描
+ * @param {boolean} showButton 是否显示扫码按钮 仅camera或auto模式有效
+ * @param {string} buttonText 扫码按钮文字
+ * @param {string} scanerTip 扫码提示文字
+ * @param {function} onScan 扫码成功回调
+ * @param {function} onError 扫码异常回调
+ * @param {function} onClose 摄像头关闭回调
+ * @author lichen
+ */
+import React from "react";
+export declare enum ScannerMode {
+    /** 自动扫码 识别当前如果为PC端则启用keyboard 如果Pad/手机则启用camera */
+    auto = "auto",
+    /** 使用扫码枪扫码 */
+    keyboard = "keyboard",
+    /** 使用摄像头扫码 */
+    camera = "camera"
+}
+interface IScannerProps {
+    /** 扫码模式 */
+    mode?: ScannerMode;
+    /** 是否启用扫码组件功能 */
+    enabled?: boolean;
+    /** 是否在扫码成功后自动关闭摄像头 默认true */
+    closeAfterScan?: boolean;
+    /** 扫码枪单次输入最大间隔，单位ms 默认 50ms */
+    keyboardInterval?: number;
+    /** 扫码枪最小字符长度 默认3 */
+    minLength?: number;
+    /** 摄像头标题 */
+    cameraTitle?: string;
+    /** 是否显示扫码框 */
+    showScanArea?: boolean;
+    /** 扫码成功后是否允许继续扫描 */
+    continuous?: boolean;
+    /** 是否显示扫码按钮 仅camera或auto模式有效 */
+    showButton?: boolean;
+    /** 扫码按钮文字 */
+    buttonText?: string;
+    /** 扫码提示文字 */
+    scanerTip?: string;
+    /** 扫码成功回调 */
+    onScan?: (value: string) => void;
+    /** 扫码异常回调 */
+    onError?: (error: Error) => void;
+    /** 摄像头关闭回调 */
+    onClose?: () => void;
+}
+declare const Scanner: React.FC<IScannerProps>;
+export default Scanner;