@hzab/utils 1.1.5 → 1.1.7

package/src/options.ts

@@ -1,226 +1,248 @@
-import { cloneDeep } from "lodash-es";
-
-import { checkEmpty, handleEmptyVal, IHandleEmptyValOpt } from "./empty-val";
-
-export interface IFieldNames {
-  value?: string;
-  label?: string;
-  children?: string;
-}
-
-export interface IFindOptionOpt extends IHandleEmptyValOpt {
-  fieldNames?: IFieldNames;
-  // 是否返回完整的路径数组
-  isPathList?: boolean;
-  pathList?: Array<any>;
-  labelList?: Array<string>;
-  parent?: any;
-}
-
-export interface IGetArrayLabels extends IFindOptionOpt {
-  split?: string;
-}
-
-export interface IGetValLabelOpt extends IHandleEmptyValOpt {
-  showEmpty?: boolean;
-}
-
-export type formatOptionsOptT = {
-  fieldNames?: IFieldNames;
-  sourceFieldNames?: IFieldNames;
-  /**
-   * 是否清除其他参数
-   */
-  isClear?: boolean;
-};
-
-export const DEF_FIELD_NAMES = {
-  value: "value",
-  label: "label",
-  children: "children",
-};
-
-/**
- * 获取无限级数据的选中项
- * @param val
- * @param options
- * @param opt
- * @returns
- */
-export const findOptionByVal = function (
-  val,
-  options,
-  opt: IFindOptionOpt = {
-    // 是否返回完整的路径数组
-    isPathList: false,
-    pathList: [],
-    labelList: [],
-    parent: undefined,
-    fieldNames: {
-      label: "label",
-      value: "value",
-      children: "children",
-    },
-  },
-) {
-  if (!options) {
-    console.warn("getDeepData 请传入 options");
-    return;
-  }
-  const { fieldNames, isPathList, pathList = [], labelList = [] } = opt || {};
-  const { label = "label", value = "value", children = "children" } = fieldNames || {};
-  const res = options.find((it) => it[value] === val);
-  if (res) {
-    if (isPathList) {
-      pathList.unshift(res);
-      labelList.unshift(res[label]);
-      return {
-        last: res,
-        pathList,
-        labelList,
-      };
-    }
-    return res;
-  }
-  const len = options.length;
-  for (let i = 0; i < len; i++) {
-    const item = options[i];
-    const childList = item[children];
-    if (Array.isArray(childList) && childList.length > 0) {
-      const res = findOptionByVal(val, childList, {
-        ...opt,
-        parent: item,
-        pathList,
-        labelList,
-      });
-      if (res) {
-        if (isPathList) {
-          pathList.unshift(item);
-          labelList.unshift(item[label]);
-          return {
-            last: res.last,
-            labelList,
-            pathList,
-          };
-        }
-        return res;
-      }
-    }
-  }
-};
-
-/**
- * 获取 options 中 val 对应的 label
- * @param {*} val
- * @param {Array<Object>} options
- * @param {Object} opt
- * @returns
- */
-export const getOptionLabel = function (val, options = [], opt: IFindOptionOpt = {}) {
-  const { fieldNames = DEF_FIELD_NAMES } = opt || {};
-  return findOptionByVal(val, options, opt)?.[fieldNames?.label || DEF_FIELD_NAMES.label];
-};
-
-/**
- * 获取 options 中的指定项 的 label
- * @param {*} val
- * @param {*} options
- * @param {*} opt
- * @returns
- */
-export function getValLabel(val, options = [], opt: IGetValLabelOpt = {}) {
-  const { showEmpty } = opt;
-  if (showEmpty && checkEmpty(val, opt)) {
-    return handleEmptyVal(val, opt);
-  }
-  return getOptionLabel(val, options, opt);
-}
-
-/**
- * 获取 options 中的指定项 的 label 数组
- * @param {*} values
- * @param {*} options
- * @param {*} opt
- * @returns
- */
-export function getArrayLabels(values, options, opt: IGetArrayLabels = {}) {
-  if (checkEmpty(values, opt)) {
-    return handleEmptyVal(values, opt);
-  }
-  const { split = "、" } = opt || {};
-  let _values = values;
-  if (!Array.isArray(_values)) {
-    _values = [_values];
-  }
-  return _values
-    ?.map((val) => getOptionLabel(val, options, opt) ?? val)
-    ?.filter((it) => (it ?? it) || false)
-    ?.join(split);
-}
-
-/**
- * 格式化 options 数组
- */
-export const formatOptions = function (options, opt: formatOptionsOptT = {}) {
-  if (!Array.isArray(options)) {
-    console.warn("formatOptions Error: options not Array");
-    return options;
-  }
-
-  const {
-    fieldNames = DEF_FIELD_NAMES,
-    sourceFieldNames = DEF_FIELD_NAMES,
-    // 是否清除其他参数
-    isClear,
-  } = opt || {};
-
-  const { label, value, children } = fieldNames;
-  const { label: sLabel, value: sValue, children: sChildren } = sourceFieldNames;
-
-  const _options = cloneDeep(options);
-  const resOptions = [];
-  _options.forEach((it) => {
-    const _it = isClear ? {} : { ...it };
-    _it[value] = it[sValue];
-    _it[label] = it[sLabel];
-    resOptions.push(_it);
-    const childList = it[sChildren];
-    if (childList) {
-      _it[children] = formatOptions(childList, opt);
-    }
-  });
-  return resOptions;
-};
-
-/**
- * 根据 val 获取对应的 options 项数据，并进行数据归一化处理
- * value, label, children
- * @param {string|number|boolean} val
- * @param {Object} field
- */
-export const getOptItByVal = function (val, options, opt) {
-  const { fieldNames } = opt || {};
-  const { value = "value", label = "label", children = "children" } = fieldNames || {};
-  for (let i = 0; i < options.length; i++) {
-    const it = options[i];
-    if (it?.[value] === val) {
-      return {
-        ...it,
-        value: it?.[value],
-        label: it?.[label],
-        children: it?.[children],
-      };
-    }
-    // 递归处理
-    const _children = it?.[children];
-    if (Array.isArray(_children) && _children.length > 0) {
-      const child = getOptItByVal(val, _children, opt);
-      return {
-        ...child,
-        value: child?.[value],
-        label: child?.[label],
-        children: child?.[children],
-      };
-    }
-  }
-};
+import { cloneDeep } from "lodash-es";
+
+import type { IHandleEmptyValOpt } from "./empty-val";
+import { checkEmpty, handleEmptyVal } from "./empty-val";
+
+export interface IFieldNames {
+  value?: string;
+  label?: string;
+  children?: string;
+}
+
+export interface IFindOptionOpt extends IHandleEmptyValOpt {
+  fieldNames?: IFieldNames;
+  // 是否返回完整的路径数组
+  isPathList?: boolean;
+  pathList?: Array<any>;
+  labelList?: Array<string>;
+  parent?: any;
+}
+
+export interface IGetArrayLabels extends IFindOptionOpt {
+  split?: string;
+}
+
+export interface IGetValLabelOpt extends IHandleEmptyValOpt {
+  showEmpty?: boolean;
+}
+
+export type formatOptionsOptT = {
+  fieldNames?: IFieldNames;
+  sourceFieldNames?: IFieldNames;
+  /**
+   * 是否清除其他参数
+   */
+  isClear?: boolean;
+};
+
+export const DEF_FIELD_NAMES = {
+  value: "value",
+  label: "label",
+  children: "children",
+};
+
+/**
+ * 获取无限级数据的选中项
+ * @param val
+ * @param options
+ * @param opt
+ * @returns
+ */
+export const findOptionByVal = function (
+  val,
+  options,
+  opt: IFindOptionOpt = {
+    // 是否返回完整的路径数组
+    isPathList: false,
+    pathList: [],
+    labelList: [],
+    parent: undefined,
+    fieldNames: {
+      label: "label",
+      value: "value",
+      children: "children",
+    },
+  },
+) {
+  if (!options) {
+    console.warn("getDeepData 请传入 options");
+    return;
+  }
+  const { fieldNames, isPathList, pathList = [], labelList = [] } = opt || {};
+  const { label = "label", value = "value", children = "children" } = fieldNames || {};
+  const res = options.find((it) => it[value] === val);
+  if (res) {
+    if (isPathList) {
+      pathList.unshift(res);
+      labelList.unshift(res[label]);
+      return {
+        last: res,
+        pathList,
+        labelList,
+      };
+    }
+    return res;
+  }
+  const len = options.length;
+  for (let i = 0; i < len; i++) {
+    const item = options[i];
+    const childList = item[children];
+    if (Array.isArray(childList) && childList.length > 0) {
+      const res = findOptionByVal(val, childList, {
+        ...opt,
+        parent: item,
+        pathList,
+        labelList,
+      });
+      if (res) {
+        if (isPathList) {
+          pathList.unshift(item);
+          labelList.unshift(item[label]);
+          return {
+            last: res.last,
+            labelList,
+            pathList,
+          };
+        }
+        return res;
+      }
+    }
+  }
+};
+
+/**
+ * 在命中项上写出标准 value / label / children（保留原字段）。
+ * 与 `getOptItByVal` 的归一化语义一致；供 `normalizeOption(findOptionByVal(...))` 组合使用。
+ * @param item 命中的 option 项
+ * @param fieldNames 自定义字段名映射
+ */
+export function normalizeOption<T extends Record<string, any>>(
+  item: T,
+  fieldNames?: IFieldNames,
+): T & { value: unknown; label: unknown; children: unknown } {
+  const { value = "value", label = "label", children = "children" } = fieldNames || {};
+  return {
+    ...item,
+    value: item?.[value],
+    label: item?.[label],
+    children: item?.[children],
+  };
+}
+
+/**
+ * 获取 options 中 val 对应的 label
+ * @param {*} val
+ * @param {Array<Object>} options
+ * @param {Object} opt
+ * @returns
+ */
+export const getOptionLabel = function (val, options = [], opt: IFindOptionOpt = {}) {
+  const { fieldNames = DEF_FIELD_NAMES } = opt || {};
+  return findOptionByVal(val, options, opt)?.[fieldNames?.label || DEF_FIELD_NAMES.label];
+};
+
+/**
+ * 获取 options 中的指定项 的 label
+ * @param {*} val
+ * @param {*} options
+ * @param {*} opt
+ * @returns
+ */
+export function getValLabel(val, options = [], opt: IGetValLabelOpt = {}) {
+  const { showEmpty } = opt;
+  if (showEmpty && checkEmpty(val, opt)) {
+    return handleEmptyVal(val, opt);
+  }
+  return getOptionLabel(val, options, opt);
+}
+
+/**
+ * 获取 options 中的指定项 的 label 数组
+ * @param {*} values
+ * @param {*} options
+ * @param {*} opt
+ * @returns
+ */
+export function getArrayLabels(values, options, opt: IGetArrayLabels = {}) {
+  if (checkEmpty(values, opt)) {
+    return handleEmptyVal(values, opt);
+  }
+  const { split = "、" } = opt || {};
+  let _values = values;
+  if (!Array.isArray(_values)) {
+    _values = [_values];
+  }
+  return _values
+    ?.map((val) => getOptionLabel(val, options, opt) ?? val)
+    ?.filter((it) => (it ?? it) || false)
+    ?.join(split);
+}
+
+/**
+ * 格式化 options 数组
+ */
+export const formatOptions = function (options, opt: formatOptionsOptT = {}) {
+  if (!Array.isArray(options)) {
+    console.warn("formatOptions Error: options not Array");
+    return options;
+  }
+
+  const {
+    fieldNames = DEF_FIELD_NAMES,
+    sourceFieldNames = DEF_FIELD_NAMES,
+    // 是否清除其他参数
+    isClear,
+  } = opt || {};
+
+  const { label, value, children } = fieldNames;
+  const { label: sLabel, value: sValue, children: sChildren } = sourceFieldNames;
+
+  const _options = cloneDeep(options);
+  const resOptions = [];
+  _options.forEach((it) => {
+    const _it = isClear ? {} : { ...it };
+    _it[value] = it[sValue];
+    _it[label] = it[sLabel];
+    resOptions.push(_it);
+    const childList = it[sChildren];
+    if (childList) {
+      _it[children] = formatOptions(childList, opt);
+    }
+  });
+  return resOptions;
+};
+
+/**
+ * 根据 val 获取对应的 options 项数据，并进行数据归一化处理
+ * value, label, children
+ * @param {string|number|boolean} val
+ * @param {Object} field
+ */
+export const getOptItByVal = function (val, options, opt) {
+  const { fieldNames } = opt || {};
+  const { value = "value", label = "label", children = "children" } = fieldNames || {};
+  for (let i = 0; i < options.length; i++) {
+    const it = options[i];
+    if (it?.[value] === val) {
+      return {
+        ...it,
+        value: it?.[value],
+        label: it?.[label],
+        children: it?.[children],
+      };
+    }
+    // 递归处理
+    const _children = it?.[children];
+    if (Array.isArray(_children) && _children.length > 0) {
+      const child = getOptItByVal(val, _children, opt);
+      if (child) {
+        return {
+          ...child,
+          value: child?.[value],
+          label: child?.[label],
+          children: child?.[children],
+        };
+      }
+    }
+  }
+};

package/src/sizeAdapter.ts

@@ -0,0 +1,108 @@
+/**
+ * 获取视窗宽高
+ * @returns
+ */
+export function getClientStyle() {
+  return {
+    width: document.documentElement.clientWidth || document.body.clientWidth,
+    height: document.documentElement.clientHeight || document.body.clientHeight,
+  };
+}
+
+/**
+ * 视窗宽高
+ */
+export const clientStyle = getClientStyle();
+
+window.addEventListener("resize", () => {
+  const { width, height } = getClientStyle();
+  clientStyle.width = width;
+  clientStyle.height = height;
+});
+
+/**
+ * 获取当前视窗 1vw、1vh 对应的 px
+ */
+export function getViewportPX() {
+  const { width, height } = clientStyle;
+  return {
+    wPx: width / 100,
+    hPx: height / 100,
+  };
+}
+
+// 视觉稿默认的宽高 px
+// TODO: 按需修改
+export const DEFAULT_SIZE = {
+  width: 750,
+  height: 1334,
+};
+
+export function setDefaultSize(width, height) {
+  DEFAULT_SIZE.width = width || 750;
+  DEFAULT_SIZE.height = height || 1334;
+}
+
+/**
+ * 获取视窗与视觉稿的比例
+ * @param current
+ * @param defaultVal
+ * @returns
+ */
+export function getClientRate(current, defaultVal) {
+  return parseFloat(current) / defaultVal;
+}
+
+/**
+ * 获取默认宽度对应的 vw 值
+ */
+export function getVW(pxNum = 0) {
+  return `${getClientRate(pxNum, DEFAULT_SIZE.width) * 100}vw`;
+}
+
+/**
+ * 获取默认高度对应的 vh 值
+ */
+export function getVH(pxNum = 0) {
+  return `${getClientRate(pxNum, DEFAULT_SIZE.height) * 100}vh`;
+}
+
+/**
+ * 获取默认宽度对应的 px 值
+ * 适用于必须传入 px 值的情况，如 ECharts
+ */
+export function getWpx(pxNum = 0) {
+  return getClientRate(pxNum, DEFAULT_SIZE.width) * clientStyle.width;
+}
+
+/**
+ * 获取默认高度对应的 px 值
+ * 适用于必须传入 px 值的情况，如 ECharts
+ */
+export function getHpx(pxNum = 0) {
+  return getClientRate(pxNum, DEFAULT_SIZE.height) * clientStyle.height;
+}
+
+/**
+ * 通过 vw 获取对应的 px
+ * @param {number} vw
+ */
+export function getHPxByVW(vw = 0) {
+  let _vw = vw;
+  if (typeof _vw === "string") {
+    _vw = parseFloat(_vw);
+  }
+  return clientStyle.width * (_vw / 100);
+}
+
+/**
+ * 通过 vh 获取对应的 px
+ * @param {number} vh
+ */
+export function getWPxByVH(vh = 0) {
+  let _vh = vh;
+  if (typeof _vh === "string") {
+    _vh = parseFloat(_vh);
+  }
+  return clientStyle.height * (_vh / 100);
+}

package/src/upload/OfflineUpload.ts

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import { Axios, AxiosRequestConfig } from "axios";
+import type { Axios, AxiosRequestConfig } from "axios";
 
 import { axios } from "@hzab/data-model";
 
@@ -141,7 +141,7 @@ export function getSignature(opt: IGetSignatureOpt = {}) {
 
 export interface IGetPreviewUrlsOpt {
   previewUrl?: string;
-  params?: Object;
+  params?: object;
   axios?: Axios;
   axiosConf?: AxiosRequestConfig;
 }

package/src/upload/OssUploadUtil.ts

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import { Axios, AxiosResponse, AxiosRequestConfig } from "axios";
+import type { Axios, AxiosResponse, AxiosRequestConfig } from "axios";
 
 import { axios } from "@hzab/data-model";
 import { formatDirStr } from "./uploadUtils";

package/src/upload/fileDataNormalization.ts

@@ -66,11 +66,11 @@ export interface INormalizationOpt {
   /** 子项数据模式： 格式化对象 | file 文件格式 | url 地址 | JSON 序列化字符串 */
   itemMode: "object" | "file" | "url" | "jsonStr";
   /** 预览配置参数 */
-  previewConfig?: Object;
+  previewConfig?: object;
   /** 设置预览 URL 的回调 */
   getPreviewUrl?: (file, opt) => string;
   /** 缩略图配置参数 */
-  thumbnailUrlConf?: Object;
+  thumbnailUrlConf?: object;
   /** 设置缩略图 URL 的回调 */
   getThumbnailUrl?: (file, opt) => string;
 }
@@ -105,7 +105,7 @@ export const normalizationFileObj = (data: IFile, opt: INormalizationOpt) => {
     console.warn("Upload handleInputData 请传入正确的数据");
     return data;
   }
-  let file = {
+  const file = {
     ...fileTpl,
   };
   // 对象字符串 转为 对象

package/src/upload/ossUpload.ts

@@ -1,5 +1,6 @@
 import { mergeDirStr, getFileNameByFileObj } from "./uploadUtils";
-import OssUploadUtil, { axios, IUploadOpt } from "./OssUploadUtil";
+import type { IUploadOpt } from "./OssUploadUtil";
+import OssUploadUtil, { axios } from "./OssUploadUtil";
 
 /**
  * oss 上传工具类
@@ -14,7 +15,7 @@ class OssUpload extends OssUploadUtil {
 
   upload(file, opt: IUploadOpt = {}): Promise<{ fileUrl: string }> {
     const fileName = getFileNameByFileObj(file, opt);
-    return this._upload(file, { ...opt, fileName });
+    return this._upload(file, { fileName, ...opt });
   }
 }
 

package/src/upload/uploadUtils.ts

@@ -117,15 +117,20 @@ export const getFileNameByFileObj = (file: IFileNameSource, opt?: IGetFileNameBy
   } = opt || {};
 
   const _fullFileName = file.name || fileName || "";
+
   const { mainPart, ext } = getFileNameExt(_fullFileName);
 
   console.log("getFileTypeExt(file.type)", file.type, getFileTypeExt(file.type));
 
   const _fileName = mainPart || _fullFileName || getFileName(file.url) || "file";
+
   const _ext = ext || getFileTypeExt(file.type);
 
   const hashStr = useHashName ? nanoidNumALetters() : "";
-  const nm = mergeFileName(_fileName + "." + _ext, (_fileName.indexOf("~kid-") < 0 ? `~kid-${hashStr}-${file.createTime || dayjs().valueOf()}-${ext}` : ""));
+  const nm = mergeFileName(
+    _fileName + "." + _ext,
+    _fileName.indexOf("~kid-") < 0 ? `~kid-${hashStr}-${file.createTime || dayjs().valueOf()}-${ext}` : "",
+  );
 
   return nm;
 };