@d-matrix/utils 1.18.1 → 1.20.0

package/dist/array.d.ts

@@ -0,0 +1,2 @@
+export declare function arrayMoveMutable<T>(array: T[], fromIndex: number, toIndex: number): void;
+export declare function arrayMoveImmutable<T>(array: T[], fromIndex: number, toIndex: number): T[];

package/dist/array.js

@@ -0,0 +1,13 @@
+export function arrayMoveMutable(array, fromIndex, toIndex) {
+    const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
+    if (startIndex >= 0 && startIndex < array.length) {
+        const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
+        const [item] = array.splice(fromIndex, 1);
+        array.splice(endIndex, 0, item);
+    }
+}
+export function arrayMoveImmutable(array, fromIndex, toIndex) {
+    const newArray = [...array];
+    arrayMoveMutable(newArray, fromIndex, toIndex);
+    return newArray;
+}

package/dist/index.d.ts

@@ -11,3 +11,4 @@ export * as operator from './operator';
 export * as decimal from './decimal';
 export * as object from './object';
 export * as echarts from './echarts';
+export * as array from './array';

package/dist/index.js

@@ -11,3 +11,4 @@ export * as operator from './operator';
 export * as decimal from './decimal';
 export * as object from './object';
 export * as echarts from './echarts';
+export * as array from './array';

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/package.json

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

package/readme.md

@@ -19,6 +19,7 @@ A dozen of utils for Front-End Development
 - [operator](#operator)
 - [decimal](#decimal)
 - [object](#object)
+- [array](#array)
 - [echarts](#echarts)
 
 ### clipboard
@@ -178,6 +179,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`
@@ -466,6 +485,30 @@ removeZeroValueKeys({ a: '', b: 'abc', c: undefined, d: null, e: NaN, f: -1, g:
 // { b: 'abc', f: -1 }
 ```
 
+## array
+
+- `arrayMoveImmutable<T>(array: T[], fromIndex: number, toIndex: number): T[]`
+
+```js
+import { arrayMoveImmutable } from '@d-matrix/utils';
+
+const input = ['a', 'b', 'c'];
+
+const array1 = arrayMoveImmutable(input, 1, 2);
+console.log(array1);
+//=> ['a', 'c', 'b']
+
+const array2 = arrayMoveImmutable(input, -1, 0);
+console.log(array2);
+//=> ['c', 'a', 'b']
+
+const array3 = arrayMoveImmutable(input, -2, -3);
+console.log(array3);
+//=> ['b', 'a', 'c']
+```
+
+- `arrayMoveMutable<T>(array: T[], fromIndex: number, toIndex: number): void`
+
 ## echarts
 
 - `mergeOption(defaults: EChartsOption, overrides: EChartsOption, option?: deepmerge.Options): EChartsOption`