@d-matrix/utils 1.18.0 → 1.19.0

package/dist/echarts.js

@@ -68,7 +68,7 @@ export function fill(dataSource, xAxisField, yAxisField) {
  */
 export const getDiffRate = (first, maxDiff, decimalPlaces = 2, splitNumber = 5) => {
     let diffRate = 1.2;
-    if (first === 0)
+    if (first === 0 || maxDiff === 0)
         return diffRate;
     const minDiff = 1 / Math.pow(10, decimalPlaces);
     function calc(f, d) {

package/dist/react/index.d.ts

@@ -7,3 +7,5 @@ export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
 export * from './useForwardRef';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';

package/dist/react/index.js

@@ -7,3 +7,5 @@ export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
 export * from './useForwardRef';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';

package/dist/react/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/react/useIsomorphicLayoutEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/react/useMediaQuery.d.ts

@@ -0,0 +1,14 @@
+declare type UseMediaQueryOptions = {
+    /**
+     * The default value to return if the hook is being run on the server.
+     * @default false
+     */
+    defaultValue?: boolean;
+    /**
+     * If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
+     * @default true
+     */
+    initializeWithValue?: boolean;
+};
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
+export {};

package/dist/react/useMediaQuery.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+const IS_SERVER = typeof window === 'undefined';
+export function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}

package/dist/types.d.ts

@@ -13,3 +13,5 @@ export declare type FunctionPropertyNames<T> = {
 export declare type NonFunctionPropertyNames<T> = {
     [P in keyof T]-?: T[P] extends Function ? never : P;
 }[keyof T];
+/** 获取对象中key的值，返回由这些值组成的union type */
+export declare type ValueOf<T> = T[keyof T];

package/package.json

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

package/readme.md

@@ -99,7 +99,7 @@ const Test = () => {
 
 - `EnhancedComponent.prototype.setStateAsync(state)`
 
-setState 方法的同步版本
+`setState()`方法的同步版本
 
 ```ts
 import { react } from '@d-matrix/utils';
@@ -178,6 +178,24 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithRef<'in
 });
 ```
 
+- `useMediaQuery(query, options?): boolean`
+
+使用[Match Media API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 检测当前document是否匹配media query
+
+```ts
+import { useMediaQuery } from '@d-matrix/utils/react'
+
+export default function Component() {
+  const matches = useMediaQuery('(min-width: 768px)')
+
+  return (
+    <div>
+      {`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}
+    </div>
+  )
+}
+```
+
 ### dom
 
 - `scrollToTop(element: Element | null | undefined): void`
@@ -302,6 +320,24 @@ const t1 = {
 type T1 =  FunctionPropertyNames<typeof t1>; // 'result'
 ```
 
+- `ValueOf<T>`
+
+获取对象中`key`的值，返回由这些值组成的union type
+
+```ts
+const map = {
+  0: '0m',
+  1: '1m',
+  2: '2m',
+  3: '3m',
+  4: '4m',
+  5: '5m',
+  6: '6m',
+} as const;
+
+type T0 = ValueOf<typeof map>; // '0m' | '1m' | '2m' | '3m' | '4m' | '5m' | '6m'
+```
+
 ### algorithm
 
 - `moveMulti<T extends unknown>(arr: T[], indexes: number[], start: number): T[]`