@d-matrix/utils 1.17.0 → 1.18.0

package/dist/echarts.d.ts

@@ -17,17 +17,20 @@ export declare function fill<T extends Record<string, any>, XAxisField extends k
  * 判断max-min是否被5等分(是否小于0.01)，小于0.01表示不能被5等分，基础倍率增加0.1后，再次判断，直到被5等分
  * @param first
  * @param maxDiff
+ * @param decimalPlaces
+ * @param splitNumber
  * @returns 最大差值倍率
  */
-export declare const getDiffRate: (first: number, maxDiff: number, splitNumber?: number) => number;
+export declare const getDiffRate: (first: number, maxDiff: number, decimalPlaces?: number, splitNumber?: number) => number;
 /**
  * 计算echarts YAxis的max和min属性，以达到根据实际数据动态调整，使折线图的波动明显。且第一个点始终在Y轴中间位置
  * @param data 原始数据
  * @param key Y轴字段
+ * @param decimalPlaces Y轴值的精度(小数位数)
  * @param splitNumber Y轴splitNumber属性
  * @returns
  */
-export declare function calcYAxisRange<T extends Record<string, any>, Key extends keyof T>(data: T[], key: Key, splitNumber?: number): {
+export declare function calcYAxisRange<T extends Record<string, any>, Key extends keyof T>(data: T[], key: Key, decimalPlaces?: number, splitNumber?: number): {
     max: number;
     min: number;
 };

package/dist/echarts.js

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-import Decimal from 'decimal.js-light';
 import deepmerge from 'deepmerge';
 import { trueTypeOf } from './operator';
 const combineMerge = (target, source, options) => {
@@ -63,13 +62,14 @@ export function fill(dataSource, xAxisField, yAxisField) {
  * 判断max-min是否被5等分(是否小于0.01)，小于0.01表示不能被5等分，基础倍率增加0.1后，再次判断，直到被5等分
  * @param first
  * @param maxDiff
+ * @param decimalPlaces
+ * @param splitNumber
  * @returns 最大差值倍率
  */
-export const getDiffRate = (first, maxDiff, splitNumber = 5) => {
+export const getDiffRate = (first, maxDiff, decimalPlaces = 2, splitNumber = 5) => {
     let diffRate = 1.2;
     if (first === 0)
         return diffRate;
-    const decimalPlaces = new Decimal(first).dp();
     const minDiff = 1 / Math.pow(10, decimalPlaces);
     function calc(f, d) {
         const max = f + d * diffRate;
@@ -86,10 +86,11 @@ export const getDiffRate = (first, maxDiff, splitNumber = 5) => {
  * 计算echarts YAxis的max和min属性，以达到根据实际数据动态调整，使折线图的波动明显。且第一个点始终在Y轴中间位置
  * @param data 原始数据
  * @param key Y轴字段
+ * @param decimalPlaces Y轴值的精度(小数位数)
  * @param splitNumber Y轴splitNumber属性
  * @returns
  */
-export function calcYAxisRange(data, key, splitNumber = 5) {
+export function calcYAxisRange(data, key, decimalPlaces = 2, splitNumber = 5) {
     var _a, _b;
     const maxValue = (_a = Math.max(...data.map((o) => o[key]))) !== null && _a !== void 0 ? _a : 0;
     const minValue = (_b = Math.min(...data.map((o) => o[key]))) !== null && _b !== void 0 ? _b : 0;
@@ -104,7 +105,7 @@ export function calcYAxisRange(data, key, splitNumber = 5) {
     // 例如：first = 1, max = 1.3, min = 0.6, maxDiff = abs(min - first) = 0.4
     const maxDiff = Math.max(Math.abs(maxValue - firstValue), Math.abs(minValue - firstValue));
     // 差值缩放比例
-    const diffRate = getDiffRate(firstValue, maxDiff, splitNumber);
+    const diffRate = getDiffRate(firstValue, maxDiff, decimalPlaces, splitNumber);
     const max = firstValue + (maxDiff === 0 ? firstValue / 6 : maxDiff * diffRate);
     const min = firstValue - (maxDiff === 0 ? firstValue / 6 : maxDiff * diffRate);
     return { max, min };

package/dist/react/index.d.ts

@@ -6,3 +6,4 @@ export * from './useCopyToClipboard';
 export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
+export * from './useForwardRef';

package/dist/react/index.js

@@ -6,3 +6,4 @@ export * from './useCopyToClipboard';
 export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
+export * from './useForwardRef';

package/dist/react/types.d.ts

@@ -1,2 +1,3 @@
-import type { ForwardRefExoticComponent } from 'react';
+import type { ForwardRefExoticComponent, NamedExoticComponent, ComponentPropsWithoutRef, ComponentPropsWithRef, RefAttributes, ElementType } from 'react';
+export declare type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<ComponentPropsWithoutRef<T> & RefAttributes<infer Method>> ? Method : ComponentPropsWithRef<T> extends RefAttributes<infer Method> ? Method : never;
 export declare type InferRef<T> = T extends ForwardRefExoticComponent<infer Ref> ? Ref extends React.RefAttributes<infer RefElement> ? RefElement : never : never;

package/dist/react/useForwardRef.d.ts

@@ -0,0 +1,9 @@
+import { ForwardedRef } from 'react';
+/**
+ * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
+ * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
+ * @param ref
+ * @param initialValue
+ * @returns
+ */
+export declare const useForwardRef: <T>(ref: ForwardedRef<T>, initialValue?: any) => import("react").MutableRefObject<T>;

package/dist/react/useForwardRef.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+/**
+ * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
+ * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
+ * @param ref
+ * @param initialValue
+ * @returns
+ */
+export const useForwardRef = (ref, initialValue = null) => {
+    const targetRef = useRef(initialValue);
+    useEffect(() => {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(targetRef.current);
+        }
+        else {
+            ref.current = targetRef.current;
+        }
+    }, [ref]);
+    return targetRef;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d-matrix/utils",
   "sideEffects": false,
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "A dozen of utils for Front-End Development",
   "main": "dist/index.js",
   "scripts": {

package/readme.md

@@ -164,6 +164,20 @@ const Parent = () => {
 };
 ```
 
+- `useForwardRef = <T>(ref: ForwardedRef<T>, initialValue: any = null): React.MutableRefObject<T>`
+
+解决使用`React.forwardRef`后，在调用`ref.current.someMethod()`时, 出现`Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void'` TS类型错误，具体问题见[这里](https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript)
+
+```ts
+const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithRef<'input'>>((props, ref) => {
+  const forwardRef = useForwardRef<HTMLInputElement>(ref);
+  useEffect(() => {
+    forwardRef.current.focus();
+  });
+  return <input type="text" ref={forwardRef} value={props.value} />;
+});
+```
+
 ### dom
 
 - `scrollToTop(element: Element | null | undefined): void`
@@ -446,7 +460,7 @@ deep merge Echarts配置，用法见[测试用例](./tests//echarts/echarts.cy.t
 
 填充的点的Y轴值为前一个点的值, 时间示例: [9:23, 9:27] => [9:23, 9:25, 9:27, 9:30]，更多，见[测试用例](./tests/echarts/fill.cy.ts)
 
-- `calcYAxisRange<T extends Record<string, any>, Key extends keyof T>(data: T[], key: Key, splitNumber = 5): { max:number; min:number }`
+- `calcYAxisRange<T extends Record<string, any>, Key extends keyof T>(data: T[], key: Key, decimalPlaces = 2, splitNumber = 5): { max:number; min:number }`
 
 计算echarts YAxis的max和min属性，以达到根据实际数据动态调整，使折线图的波动明显。且第一个点始终在Y轴中间位置，[效果图](https://raw.githubusercontent.com/mrdulin/pic-bucket-01/master/Dingtalk_20240724140535.jpg)