@lingxiteam/ebe-utils 0.0.1

package/lib/public/src/utils/hooks/useStyle.ts

@@ -0,0 +1,139 @@
+import { setWith } from 'lodash';
+import type React from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface AppViewProps {
+  style?: CSSProperties;
+  src?: string;
+  fileCode?: string;
+  backgroundType?: any;
+}
+
+const getImageSize = async (
+  url: string,
+): Promise<{ width: number; height: number }> => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = url;
+    image.onload = () => {
+      resolve({
+        width: image.width,
+        height: image.height,
+      });
+    };
+    image.onerror = (err) => {
+      reject(err);
+    };
+  });
+};
+
+export { getImageSize };
+
+const useStyle = (
+  props: AppViewProps,
+  ref: React.MutableRefObject<HTMLDivElement | null | undefined>,
+) => {
+  const { src: imgSrc, style, backgroundType = {} } = props;
+  const { mode, type, color, startColor, endColor } = backgroundType || {};
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (imgSrc && type === 'image') {
+      (async () => {
+        try {
+          setSize(await getImageSize(imgSrc));
+        } catch (error) {
+          console.log(error);
+        }
+      })();
+    }
+  }, [imgSrc, type]);
+
+  const getImageStyle = useCallback((): CSSProperties => {
+    // 不设置图片时，要使用真实宽高
+    if (!imgSrc) {
+      return {};
+    }
+    switch (mode) {
+      case 'scaleToFill':
+        return {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+      case 'widthFix': {
+        const iStyle: CSSProperties = {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+        const viewWidth = ref.current?.getBoundingClientRect().width;
+
+        if (viewWidth && size.width) {
+          iStyle.height = (size.height / size.width) * viewWidth;
+          if (!iStyle.overflowY) {
+            iStyle.overflowY = 'auto';
+          }
+        }
+        return iStyle;
+      }
+      case 'heightFix': {
+        const iStyle: CSSProperties = {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+        const viewHeight = ref.current?.getBoundingClientRect().height;
+        if (viewHeight && size.height) {
+          iStyle.width = (size.width / size.height) * viewHeight;
+          if (!iStyle.overflowX) {
+            iStyle.overflowX = 'auto';
+          }
+        }
+        return iStyle;
+      }
+      default:
+        break;
+    }
+    return {};
+  }, [imgSrc, mode, ref, size]);
+
+  return useMemo(() => {
+    const targetStyle: any = JSON.parse(JSON.stringify(style || {}));
+    // / 兼容旧数据，如果没有背景类型，有imgSrc，说明需要设置背景图片，
+    if (!type) {
+      if (imgSrc) {
+        setWith(targetStyle, ['backgroundImage'], `url(${imgSrc})`);
+      }
+      return targetStyle;
+    }
+    if (targetStyle.backgroundColor) {
+      targetStyle.backgroundColor = undefined;
+    }
+    if (targetStyle.backgroundImage) {
+      targetStyle.backgroundImage = undefined;
+    }
+    if (type === 'cleanColor') {
+      targetStyle.backgroundColor = color;
+    } else if (type === 'hGradient') {
+      targetStyle.background = `linear-gradient(to right, ${startColor}, ${endColor})`;
+    } else if (type === 'vGradient') {
+      targetStyle.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
+    } else if (type === 'image') {
+      const imageStyle: any = getImageStyle();
+      Object.keys(imageStyle).forEach((key) => {
+        targetStyle[key] = imageStyle[key];
+      });
+    }
+    return targetStyle;
+  }, [color, endColor, getImageStyle, startColor, style, type]);
+};
+
+export default useStyle;

package/lib/public/src/utils/hooks/useTrackedEffect.ts

@@ -0,0 +1,39 @@
+// 以下内容来自 ahooks3 用作优化调试使用
+/* eslint-disable no-nested-ternary */
+import type { DependencyList } from 'react';
+import { useEffect, useRef } from 'react';
+
+type Effect<T extends DependencyList> = (
+  changes?: number[],
+  previousDeps?: T,
+  currentDeps?: T,
+) => void | (() => void);
+
+const diffTwoDeps = (deps1?: DependencyList, deps2?: DependencyList) => {
+  // Let's do a reference equality check on 2 dependency list.
+  // If deps1 is defined, we iterate over deps1 and do comparison on each element with equivalent element from deps2
+  // As this func is used only in this hook, we assume 2 deps always have same length.
+  return deps1
+    ? deps1
+        .map((_ele, idx) => (!Object.is(deps1[idx], deps2?.[idx]) ? idx : -1))
+        .filter((ele) => ele >= 0)
+    : deps2
+    ? deps2.map((_ele, idx) => idx)
+    : [];
+};
+
+const useTrackedEffect = <T extends DependencyList>(
+  effect: Effect<T>,
+  deps?: [...T],
+) => {
+  const previousDepsRef = useRef<T>();
+
+  useEffect(() => {
+    const changes = diffTwoDeps(previousDepsRef.current, deps);
+    const previousDeps = previousDepsRef.current;
+    previousDepsRef.current = deps;
+    return effect(changes, previousDeps, deps);
+  }, deps);
+};
+
+export default useTrackedEffect;

package/lib/public/src/utils/hooks/useUpdate.ts

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+
+const useUpdate = () => {
+  const [, setState] = useState({});
+
+  return useCallback(() => setState({}), []);
+};
+
+export default useUpdate;

package/lib/public/src/utils/hooks/useUpdateDeepEffect.ts

@@ -0,0 +1,22 @@
+import { isEqual } from 'lodash';
+import { useRef } from 'react';
+import { useUpdateEffect } from './useUpdateEffect';
+
+const ObjectIsEqual = (pre: any, next: any) => {
+  // 值相等，引用值相等， 或者真实值相等 都无需刷新
+  if (isEqual(pre, next)) {
+    return true;
+  }
+  return false;
+};
+
+export const useUpdateDeepEffect = (effect: () => any, dep: any) => {
+  const memoPrevRef = useRef();
+
+  useUpdateEffect(() => {
+    if (!ObjectIsEqual(memoPrevRef.current, dep)) {
+      effect();
+    }
+    memoPrevRef.current = dep;
+  }, [dep]);
+};

package/lib/public/src/utils/hooks/useUpdateEffect.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * 首次渲染不执行
+ * @param effect
+ * @param deps
+ */
+export const useUpdateEffect = (effect: () => any, deps: any[]) => {
+  const isLoad = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!isLoad.current) {
+      isLoad.current = true;
+      return undefined;
+    }
+    return effect();
+  }, deps);
+};

package/lib/public/src/utils/hooks/useWhyDidYouUpdate.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+
+export type IProps = Record<string, any>;
+
+export default function useWhyDidYouUpdate(
+  componentName: string,
+  props: IProps,
+) {
+  const prevProps = useRef<IProps>({});
+
+  useEffect(() => {
+    if (prevProps.current) {
+      const allKeys = Object.keys({ ...prevProps.current, ...props });
+      const changedProps: IProps = {};
+
+      allKeys.forEach((key) => {
+        if (!Object.is(prevProps.current[key], props[key])) {
+          changedProps[key] = {
+            from: prevProps.current[key],
+            to: props[key],
+          };
+        }
+      });
+
+      if (Object.keys(changedProps).length) {
+        console.log('[why-did-you-update]', componentName, changedProps);
+      }
+    }
+
+    prevProps.current = props;
+  });
+}

package/lib/public/src/utils/i18n/i18n.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line max-len
+export const getCalendarLocale = (
+  getLocale: (
+    t: string,
+    placelhoder?: string,
+    tempValue?: Record<string, any>,
+  ) => string | undefined,
+  t: string,
+  tempValue?: Record<string, any>,
+) => {
+  if (t === 'confirm') {
+    return getLocale(t, '', tempValue);
+  }
+  return getLocale(`Calendar.${t}`, '', tempValue);
+};

package/lib/public/src/utils/i18n/index.ts

@@ -0,0 +1,7 @@
+import { localeMonitor } from './localeMonitor';
+import { useLocale } from './useLocale';
+
+export const i18n = {
+  useLocale,
+  localeMonitor,
+};

package/lib/public/src/utils/i18n/locale/app/en_US.ts

@@ -0,0 +1,77 @@
+import merge from 'lodash/merge';
+import { baseEnUS } from '../base';
+
+export default merge(baseEnUS, {
+  'Calendar.end': 'end',
+  'Calendar.start': 'start',
+  'Calendar.title': 'date selection',
+  'Calendar.startEnd': 'start/end',
+  'Calendar.weekdays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+  'Calendar.monthTitle': '@{year}/@{month}',
+  'Calendar.rangePrompt': 'Maximum selection of @{maxRange} days',
+  'SearchView.title': 'Please select the search time range',
+  'ProcessTrack.empty': 'No process data available',
+  'LoadMoreListView.canRelease': 'Release to refresh',
+  'LoadMoreListView.pulling': 'Pull down to refresh',
+  'LoadMoreListView.complete': 'Refresh complete',
+  'LoadMoreListView.refreshing': 'Refreshing',
+  'DatePicker.yearTip': 'Select Year',
+  'DatePicker.monthTip': 'Please Select Time',
+  'DatePicker.dayTip': 'Please Select Time',
+  'DatePicker.timeTip': 'Please Select Time',
+  'DatePicker.minuteTip': 'Select Date and Time',
+  'BannerModal.scaleMax': 'Scaled to maximum',
+  'BannerModal.scaleMin': 'Scaled to minimum',
+  'NoPermission.description':
+    'You do not have access permission, please contact the administrator~',
+  'NotFound.description':
+    'Sorry, the page you are trying to access does not exist.',
+  'Modal.missParams':
+    'Modal operation failed: Missing page instance ID or page path.',
+  'DformRangePicker.startLessEnd':
+    'The start time should not be greater than the end time.',
+  'DformRangePicker.yearTip': 'Select Year',
+  'DformRangePicker.monthTip': 'Please Select Time',
+  'DformRangePicker.timeTip': 'Please Select Time',
+  'DformRangePicker.dateTip': 'Please Select Time',
+  'DformRangePicker.onlyTime': 'Please Select Time',
+  'DformRangePicker.date': 'Please Select Time',
+  'DformRangePicker.year': '@{year}',
+  'DformRangePicker.month': '@{month}',
+  'DformRangePicker.day': '@{day}',
+  'DformRangePicker.hour': '@{hour}',
+  'DformRangePicker.minute': '@{minute}',
+  'DformRangePicker.second': '@{second}',
+  'DformRangePicker.selectEnd': 'Select End Time',
+  'DformRangePicker.selectStart': 'Select Start Time',
+  'DformInputNumber.selectPlaceholder': 'Please enter @{title}',
+  'DformInput.selectPlaceholder': 'please enter @{title}',
+  'DformTextArea.selectPlaceholder': 'please enter @{title}',
+  'DformImagePicker.selectPlaceholder': 'please upload @{title}',
+  'DformFile.selectPlaceholder': 'please upload @{title}',
+  'VerificationCode.text': 'Send verification code',
+  'VerificationCode.refresh': 'Refresh',
+  'DynamicList.dataError': 'Dynamic list data format error!',
+  'DynamicList.clickToMore': 'click to load more',
+  'DynamicList.noMore': 'no more available',
+  'Carousel.switchEmpty':
+    'The carousel component has no content and cannot be switched',
+  'Carousel.isLast': 'It is the last item',
+  'Carousel.isFirst': 'Already the first item',
+  'Carousel.noExist': 'The carousel component does not have this item',
+  'StepBar.wait': 'Waiting state',
+  'StepBar.process': 'Processing status',
+  'StepBar.finish': 'Complete status',
+  'StepBar.error': 'Error status',
+  'DformFile.noAllow': 'File type @{type} is not allowed to be uploaded',
+  'DformFile.fileSizeExceeded': 'File upload size exceeded',
+  'DformFile.somePicFailed': 'Some pictures failed to upload',
+  'DformFile.noUrl': 'The current data has no url/fileId',
+  'DformFile.updateTime': 'Upload time',
+  'DformPicker.searchPlaceholder':
+    'Please enter the options you want to search for',
+  'DynamicTable.more': 'more',
+  'DynamicTable.total': 'total',
+  uploading: 'uploading',
+  'Chart.configData': 'Please configure data source',
+});

package/lib/public/src/utils/i18n/locale/app/index.ts

@@ -0,0 +1,9 @@
+import enUS from './en_US';
+import zhCN from './zh_CN';
+import zhHK from './zh_HK';
+
+export default {
+  zhCN,
+  enUS,
+  zhHK,
+};

package/lib/public/src/utils/i18n/locale/app/otherLocale.ts

@@ -0,0 +1,2 @@
+export { default as enUS } from './en_US';
+export { default as zhHK } from './zh_HK';

package/lib/public/src/utils/i18n/locale/app/zh_CN.ts

@@ -0,0 +1,65 @@
+import merge from 'lodash/merge';
+import { baseZHCN } from '../base';
+
+export default merge(baseZHCN, {
+  'Calendar.end': '结束',
+  'Calendar.start': '开始',
+  'Calendar.title': '日期选择',
+  'Calendar.startEnd': '开始/结束',
+  'Calendar.weekdays': ['日', '一', '二', '三', '四', '五', '六'],
+  'Calendar.monthTitle': '@{year}年@{month}月',
+  'Calendar.rangePrompt': '最多选择 @{maxRange} 天',
+  'Calendar.confirm': '确定',
+  'SearchView.title': '请选择搜索时间范围',
+  'ProcessTrack.empty': '暂无流程数据',
+  'LoadMoreListView.canRelease': '松开刷新',
+  'LoadMoreListView.pulling': '下拉刷新',
+  'LoadMoreListView.complete': '刷新完成',
+  'LoadMoreListView.refreshing': '正在刷新',
+  'DatePicker.yearTip': '选择年份',
+  'DatePicker.monthTip': '选择年份和月份',
+  'DatePicker.dayTip': '选择年月日',
+  'DatePicker.timeTip': '选择时间',
+  'DatePicker.minuteTip': '选择日期和时间',
+  'BannerModal.scaleMax': '已缩放至最大',
+  'BannerModal.scaleMin': '已缩放至最小',
+  'NoPermission.description': '您还没有访问权限，请联系管理员～',
+  'NotFound.description': '抱歉，您访问的页面不存在',
+  'Modal.missParams': '弹窗操作失败：缺少页面实例ID或页面路径',
+  'DformRangePicker.startLessEnd': '开始时间不能大于结束时间。',
+  'DformRangePicker.yearTip': '选择年份',
+  'DformRangePicker.monthTip': '选择年份和月份',
+  'DformRangePicker.timeTip': '选择年月日时分',
+  'DformRangePicker.dateTip': '选择时间',
+  'DformRangePicker.onlyTime': '选择时间',
+  'DformRangePicker.date': '选择年月日',
+  'DformRangePicker.selectEnd': '请选择结束时间',
+  'DformRangePicker.selectStart': '请选择开始时间',
+  'DformInputNumber.selectPlaceholder': '请输入@{title}',
+  'DformInput.selectPlaceholder': '请输入@{title}',
+  'DformTextArea.selectPlaceholder': '请输入@{title}',
+  'DformImagePicker.selectPlaceholder': '请上传@{title}',
+  'DformFile.selectPlaceholder': '请上传@{title}',
+  'VerificationCode.text': '发送验证码',
+  'VerificationCode.refresh': '重新获取',
+  'DynamicList.dataError': '动态列表数据格式错误！',
+  'DynamicList.clickToMore': '点击加载更多',
+  'DynamicList.noMore': '没有更多了',
+  'Carousel.switchEmpty': '轮播图组件没有内容，无法切换',
+  'Carousel.isLast': '已是最后一项',
+  'Carousel.isFirst': '已是第一项',
+  'Carousel.noExist': '轮播图组件没有此项',
+  'StepBar.wait': '等待状态',
+  'StepBar.process': '处理中状态',
+  'StepBar.finish': '完成状态',
+  'StepBar.error': '错误状态',
+  'DformFile.noAllow': '不允许上传文件类型@{type}',
+  'DformFile.fileSizeExceeded': '超过文件设置上传大小',
+  'DformFile.somePicFailed': '部分图片上传失败',
+  'DformFile.noUrl': '当前数据没有url/fileId',
+  'DformFile.updateTime': '上传时间',
+  'DformPicker.searchPlaceholder': '请输入要搜索的选项',
+  'DynamicTable.more': '查看更多',
+  'DynamicTable.total': '合计',
+  uploading: '正在上传',
+});

package/lib/public/src/utils/i18n/locale/app/zh_HK.ts

@@ -0,0 +1,66 @@
+import merge from 'lodash/merge';
+import { baseZHHK } from '../base';
+
+export default merge(baseZHHK, {
+  'Calendar.end': '結束',
+  'Calendar.start': '開始',
+  'Calendar.title': '日期選擇',
+  'Calendar.startEnd': '開始/結束',
+  'Calendar.weekdays': ['日', '一', '二', '三', '四', '五', '六'],
+  'Calendar.monthTitle': '@{year}年@{month}月',
+  'Calendar.rangePrompt': '最多選擇 @{maxRange} 天',
+  'Calendar.confirm': '確定',
+  'SearchView.title': '請選擇搜索時間範圍',
+  'ProcessTrack.empty': '暫無流程數據',
+  'LoadMoreListView.canRelease': '鬆開刷新',
+  'LoadMoreListView.pulling': '下拉刷新',
+  'LoadMoreListView.complete': '刷新完成',
+  'LoadMoreListView.refreshing': '正在刷新',
+  'DatePicker.yearTip': '選擇年份',
+  'DatePicker.monthTip': '選擇年份和月份',
+  'DatePicker.dayTip': '選擇年月日',
+  'DatePicker.timeTip': '選擇時間',
+  'DatePicker.minuteTip': '選擇日期和時間',
+  'BannerModal.scaleMax': '已縮放至最大',
+  'BannerModal.scaleMin': '已縮放至最小',
+  'NoPermission.description': '您還沒有訪問權限，請聯繫管理員～',
+  'NotFound.description': '抱歉，您訪問的頁面不存在',
+  'Modal.missParams': '彈窗操作失敗：缺少頁面實例ID或頁面路徑。',
+  'DformRangePicker.startLessEnd': '開始時間不能大於結束時間。',
+  'DformRangePicker.yearTip': '選擇年份',
+  'DformRangePicker.monthTip': '選擇年份和月份',
+  'DformRangePicker.timeTip': '選擇年月日時分',
+  'DformRangePicker.dateTip': '選擇時間',
+  'DformRangePicker.onlyTime': '選擇時間',
+  'DformRangePicker.date': '選擇年月日',
+  'DformRangePicker.selectEnd': '請選擇結束時間',
+  'DformRangePicker.selectStart': '請選擇開始時間',
+  'DformInputNumber.selectPlaceholder': '請輸入@{title}',
+  'DformInput.selectPlaceholder': '請輸入@{title}',
+  'DformTextArea.selectPlaceholder': '請輸入@{title}',
+  'DformImagePicker.selectPlaceholder': '請上傳@{title}',
+  'DformFile.selectPlaceholder': '請上傳@{title}',
+  'VerificationCode.text': '發送驗證碼',
+  'VerificationCode.refresh': '重新獲取',
+  'DynamicList.dataError': '動態列表資料格式錯誤！',
+  'DynamicList.clickToMore': '點擊載入更多',
+  'DynamicList.noMore': '沒有更多了',
+  'Carousel.switchEmpty': '輪播圖元件沒有內容，無法切換',
+  'Carousel.isLast': '已是最後一項',
+  'Carousel.isFirst': '已是第一項',
+  'Carousel.noExist': '輪播圖組件沒有此項目',
+  'StepBar.wait': '等待狀態',
+  'StepBar.process': '處理中狀態',
+  'StepBar.finish': '完成狀態',
+  'StepBar.error': '錯誤狀態',
+  'DformFile.noAllow': '不允許上傳文件類型@{type}',
+  'DformFile.fileSizeExceeded': '超過檔案設定上傳大小',
+  'DformFile.somePicFailed': '部分图片上传失败',
+  'DformFile.noUrl': '目前資料沒有url/fileId',
+  'DformFile.updateTime': '上傳時間',
+  'DformPicker.searchPlaceholder': '请输入要搜索的选项',
+  'DynamicTable.more': '查看更多',
+  'DynamicTable.total': '合計',
+  uploading: '正在上傳',
+  'Chart.configData': '請配置資料來源',
+});