@zcrkey/js-utils 0.0.3 → 0.0.5

package/docs/api/treeUtil/index.tsx

@@ -0,0 +1,266 @@
+/**
+ * title: 基本使用
+ */
+
+import { CrTreeUtil } from '@zcrkey/js-utils';
+import React, { useState } from 'react';
+
+const listData = [
+  { id: '1', parentId: null, name: '节点 1' },
+  { id: '1-1', parentId: '1', name: '节点 1-1' },
+  { id: '1-1-1', parentId: '1-1', name: '节点 1-1-1' },
+  { id: '1-1-2', parentId: '1-1', name: '节点 1-1-2' },
+  { id: '1-2', parentId: '1', name: '节点 1-2' },
+  { id: '1-2-1', parentId: '1-2', name: '节点 1-2-1' },
+  { id: '1-2-1-1', parentId: '1-2-1', name: '节点 1-2-1-1' },
+
+  { id: '2', parentId: null, name: '节点 2' },
+  { id: '2-1', parentId: '2', name: '节点 2-1' },
+  { id: '2-1-1', parentId: '2-1', name: '节点 2-1-1' },
+  { id: '2-1-2', parentId: '2-1', name: '节点 2-1-2' },
+  { id: '2-2', parentId: '2', name: '节点 2-2' },
+
+  { id: '3', parentId: null, name: '节点 3' },
+  { id: '3-1', parentId: '3', name: '节点 3-1' },
+  { id: '3-1-1', parentId: '3-1', name: '节点 3-1-1' },
+  { id: '3-1-1-1', parentId: '3-1-1', name: '节点 3-1-1-1' },
+  { id: '3-2', parentId: '3', name: '节点 3-2' },
+  { id: '3-2-1', parentId: '3-2', name: '节点 3-2-1' },
+
+  { id: '4', parentId: null, name: '节点 4' },
+];
+
+const treeData = [
+  {
+    id: '1',
+    parentId: null,
+    name: '节点 1',
+    children: [
+      {
+        id: '1-1',
+        parentId: '1',
+        name: '节点 1-1',
+        children: [
+          {
+            id: '1-1-1',
+            parentId: '1-1',
+            name: '节点 1-1-1',
+          },
+          {
+            id: '1-1-2',
+            parentId: '1-1',
+            name: '节点 1-1-2',
+          },
+        ],
+      },
+      {
+        id: '1-2',
+        parentId: '1',
+        name: '节点 1-2',
+        children: [
+          {
+            id: '1-2-1',
+            parentId: '1-2',
+            name: '节点 1-2-1',
+            children: [
+              {
+                id: '1-2-1-1',
+                parentId: '1-2-1',
+                name: '节点 1-2-1-1',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    parentId: null,
+    name: '节点 2',
+    children: [
+      {
+        id: '2-1',
+        parentId: '2',
+        name: '节点 2-1',
+        children: [
+          {
+            id: '2-1-1',
+            parentId: '2-1',
+            name: '节点 2-1-1',
+          },
+          {
+            id: '2-1-2',
+            parentId: '2-1',
+            name: '节点 2-1-2',
+          },
+        ],
+      },
+      {
+        id: '2-2',
+        parentId: '2',
+        name: '节点 2-2',
+      },
+    ],
+  },
+  {
+    id: '3',
+    parentId: null,
+    name: '节点 3',
+    children: [
+      {
+        id: '3-1',
+        parentId: '3',
+        name: '节点 3-1',
+        children: [
+          {
+            id: '3-1-1',
+            parentId: '3-1',
+            name: '节点 3-1-1',
+            children: [
+              {
+                id: '3-1-1-1',
+                parentId: '3-1-1',
+                name: '节点 3-1-1-1',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '3-2',
+        parentId: '3',
+        name: '节点 3-2',
+        children: [
+          {
+            id: '3-2-1',
+            parentId: '3-2',
+            name: '节点 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '4',
+    parentId: null,
+    name: '节点 4',
+  },
+];
+
+export default () => {
+  const [result, setResult] = useState<any>({});
+
+  const listToTree = () => {
+    let res = CrTreeUtil.listToTree(listData, {
+      isDeepCopy: true,
+    });
+    setResult({
+      ...result,
+      listToTree: res,
+    });
+  };
+
+  const treeToList = () => {
+    let res = CrTreeUtil.treeToList(treeData, {
+      isDeepCopy: true,
+    });
+    setResult({
+      ...result,
+      treeToList: res,
+    });
+  };
+
+  const getFlatParentDatas = () => {
+    let res = CrTreeUtil.getFlatParentDatas(listData, '3-1-1-1', {
+      valueField: 'id',
+      getData: (item: any) => item,
+    });
+    setResult({
+      ...result,
+      getFlatParentDatas: res,
+    });
+  };
+
+  return (
+    <>
+      <div className="flex flex-direction">
+        <div>列表数据转树型数据</div>
+        <div className="text-lg">CrTreeUtil.listToTree</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={listToTree}
+          >
+            调用
+          </button>
+          <div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(listData, null, 2)}
+              </pre>
+            </div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(result.listToTree, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>树型数据转列表数据</div>
+        <div className="text-lg">CrTreeUtil.treeToList</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={treeToList}
+          >
+            调用
+          </button>
+          <div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(treeData, null, 2)}
+              </pre>
+            </div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(result.treeToList, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>获取扁平化父级数据</div>
+        <div className="text-lg">CrTreeUtil.getFlatParentDatas</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={getFlatParentDatas}
+          >
+            调用
+          </button>
+          <div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                值：'3-1-1-1' 数据源：{JSON.stringify(listData, null, 2)}
+              </pre>
+            </div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(result.getFlatParentDatas, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/docs/api/util/index.md

@@ -0,0 +1,6 @@
+# CrUtil 实用函数
+
+实用函数
+
+<code src="./index.tsx"></code>
+<code src="./is.tsx"></code>

package/docs/api/util/index.tsx

@@ -0,0 +1,405 @@
+/**
+ * title: 基本使用
+ */
+
+import { CrUtil } from '@zcrkey/js-utils';
+import React, { useState } from 'react';
+
+export default () => {
+  const [result, setResult] = useState<any>({});
+
+  const trim = () => {
+    let value1 = ' XXX ';
+    let value2 = 'XXX ';
+    let value3 = ' XXX';
+    let value4 = ' X X X ';
+    let res: any[] = [
+      `${value1} => ${CrUtil.trim(value1)}`,
+      `${value2} => ${CrUtil.trim(value2)}`,
+      `${value3} => ${CrUtil.trim(value3)}`,
+      `${value4} => ${CrUtil.trim(value4)}`,
+    ];
+    setResult({
+      ...result,
+      trim: res,
+    });
+  };
+
+  const getArrayDimension = () => {
+    let value1: any[] = [];
+    let value2: any[] = [[], 1];
+    let value3: any[] = [[], 1, [[], 34]];
+    let value4: any[] = [1, 2, 3];
+    let res: any[] = [
+      `${JSON.stringify(value1)} => ${CrUtil.getArrayDimension(value1)}维`,
+      `${JSON.stringify(value2)} => ${CrUtil.getArrayDimension(value2)}维`,
+      `${JSON.stringify(value3)} => ${CrUtil.getArrayDimension(value3)}维`,
+      `${JSON.stringify(value4)} => ${CrUtil.getArrayDimension(value4)}维`,
+    ];
+    setResult({
+      ...result,
+      getArrayDimension: res,
+    });
+  };
+
+  const deepCopy = () => {
+    let value1: any[] = [
+      {
+        number: 1,
+        string: 'zcr',
+        obj: {},
+        arr: [1, 2, 3],
+      },
+    ];
+    let value2: any = {
+      number: 1,
+      string: 'zcr',
+      obj: {
+        a: 123,
+      },
+      arr: [],
+    };
+
+    let value3 = CrUtil.deepCopy(value1);
+    let value4 = CrUtil.deepCopy(value2);
+
+    value3[0].arr.push(4);
+    value4.obj.a = 456;
+
+    let res: any[] = [
+      `${JSON.stringify(value1)} => ${JSON.stringify(value3)}`,
+      `${JSON.stringify(value2)} => ${JSON.stringify(value4)}`,
+    ];
+    setResult({
+      ...result,
+      deepCopy: res,
+    });
+  };
+
+  const compareVersion = () => {
+    let v1 = '1.2.3';
+    let v2 = '1.0.3';
+    let res: any[] = [
+      `${v1}和${v2} => ${CrUtil.compareVersion(v1, v2)}`,
+      `${v2}和${v1} => ${CrUtil.compareVersion(v2, v1)}`,
+      `${v1}和${v1} => ${CrUtil.compareVersion(v1, v1)}`,
+    ];
+    setResult({
+      ...result,
+      compareVersion: res,
+    });
+  };
+
+  const compareDataDiff = () => {
+    let data1: any = {
+      a: 1,
+      b: 1,
+      d: 4,
+      arr: [1],
+      arr2: [1, 2],
+      arr3: [{ aa: 1 }],
+      arr4: [{ aa: 2 }, { cc: 2 }],
+    };
+    let data2: any = {
+      a: 1,
+      b: 2,
+      c: 3,
+      arr: [1, 2],
+      arr2: [1],
+      arr3: [{ aa: 2 }, { cc: 2 }],
+      arr4: [{ aa: 1 }],
+    };
+    let res: any[] = [
+      `${JSON.stringify(data1)}和${JSON.stringify(data2)} => ${JSON.stringify(
+        CrUtil.compareDataDiff(data1, data2),
+      )}`,
+    ];
+    setResult({
+      ...result,
+      compareDataDiff: res,
+    });
+  };
+
+  const paramsSerializer = () => {
+    let v1 = { a: '1', b: {}, c: [] };
+    let v2 = { a: '1', b: { b1: 1, b2: 'zcr' }, c: [1, 2, 3] };
+    let res: any[] = [
+      `${JSON.stringify(v1)} => ${CrUtil.paramsSerializer(v1)}`,
+      `${JSON.stringify(v2)} => ${CrUtil.paramsSerializer(v2)}`,
+    ];
+    setResult({
+      ...result,
+      paramsSerializer: res,
+    });
+  };
+
+  const paramsParse = () => {
+    let v1 = `a=1`;
+    let v2 = `a=1&b%5Bb1%5D=1&b%5Bb2%5D=zcr&c%5B0%5D=1&c%5B1%5D=2&c%5B2%5D=3`;
+    let res: any[] = [
+      `${v1} => ${JSON.stringify(CrUtil.paramsParse(v1))}`,
+      `${v2} => ${JSON.stringify(CrUtil.paramsParse(v2))}`,
+    ];
+    setResult({
+      ...result,
+      paramsParse: res,
+    });
+  };
+
+  const listData = [
+    // { id: 1, name: '1', parentId: 0 },
+    // { id: 2, name: '1-1', parentId: 1 },
+    // { id: 3, name: '1-2', parentId: 1 },
+    // { id: 4, name: '1-1-1', parentId: 2 },
+    // { id: 5, name: '1-1-2', parentId: 2 },
+    { id: 1, parentId: null, name: 'Root A' },
+    { id: 2, parentId: 1, name: 'Child A1' },
+    { id: 3, parentId: 1, name: 'Child A2' },
+    { id: 4, parentId: 2, name: 'Grandchild A1-1' },
+    { id: 5, parentId: 0, name: 'Root B' },
+    { id: 6, parentId: 5, name: 'Child B1' },
+    { id: 7, parentId: 999, name: 'Orphan Node' },
+  ];
+
+  const listToTreeData = () => {
+    let res = CrUtil.listToTreeData(listData, {
+      isDeepCopy: true,
+    });
+    setResult({
+      ...result,
+      listToTreeData: res,
+    });
+  };
+
+  const urls = [
+    'https://example.com/#/?a=1&b=2',
+    'https://example.com/page?foo=1#/?a=1&b=2',
+    'https://example.com/page#/?a=1&b=2',
+    'https://example.com/page#/page?a=123&b=456',
+    'http://10.0.9.200:8862/index.html#/menu?clientType=pc',
+    'http://10.0.9.200:8862/index.html#/url=http://https://example.com?a=1&b=2&c=3&d=4',
+    'http://10.0.9.200:8862/index.html#/?url=http://https://example.com?a=1&b=2&c=3&d=4',
+    'https://example.com',
+    'https://example.com/path/to/resource',
+    'https://example.com?foo=bar&baz=qux',
+    'https://example.com#section2',
+    'https://example.com/path?foo=1#bar=2&baz=3',
+    'https://example.com/page?url=http%3A%2F%2Fother.com%3Fa%3D1%26b%3D2',
+    'https://example.com/page?foo=1&bar=2#id=3&name=Tom',
+    'https://example.com/page#id=2&flag',
+    'https://example.com/page',
+  ];
+
+  const getQueryParams = () => {
+    let res = [];
+    for (let url of urls) {
+      res.push(CrUtil.getQueryParams(url));
+    }
+    setResult({
+      ...result,
+      getQueryParams: res,
+    });
+  };
+
+  function stringifyFirstLevelOnly(obj: Record<string, any>): string {
+    if (obj === null || typeof obj !== 'object') {
+      return JSON.stringify(obj);
+    }
+    const entries = Object.keys(obj).map((key) => {
+      const valueStr = JSON.stringify(obj[key]);
+      return `  "${key}": ${valueStr}`;
+    });
+    return `{\n${entries.join(',\n')}\n}`;
+  }
+
+  return (
+    <>
+      <div className="flex flex-direction">
+        <div>获取URL参数</div>
+        <div className="text-lg">CrUtil.getQueryParams</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={getQueryParams}
+          >
+            调用
+          </button>
+          <div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(urls, null, 2)}
+              </pre>
+            </div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {stringifyFirstLevelOnly(result.getQueryParams)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>去掉字符串前后所有空格</div>
+        <div className="text-lg">CrUtil.trim</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={trim}
+          >
+            调用
+          </button>
+          <pre>
+            {result.trim &&
+              result.trim.map((str: string) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </pre>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>获取数组为几维数组</div>
+        <div className="text-lg">CrUtil.getArrayDimension</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={getArrayDimension}
+          >
+            调用
+          </button>
+          <div>
+            {result.getArrayDimension &&
+              result.getArrayDimension.map((str: number) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>深拷贝</div>
+        <div className="text-lg">CrUtil.deepCopy</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={deepCopy}
+          >
+            调用
+          </button>
+          <div>
+            {result.deepCopy &&
+              result.deepCopy.map((str: string) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>比较数据差异</div>
+        <div className="text-lg">CrUtil.compareDataDiff</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={compareDataDiff}
+          >
+            调用
+          </button>
+          <div>
+            {result.compareDataDiff &&
+              result.compareDataDiff.map((str: string) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>版本号比较</div>
+        <div className="text-lg">CrUtil.compareVersion</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={compareVersion}
+          >
+            调用
+          </button>
+          <div>
+            {result.compareVersion &&
+              result.compareVersion.map((str: string) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>参数序列化</div>
+        <div className="text-lg">CrUtil.paramsSerializer</div>
+        <div>参数解析</div>
+        <div className="text-lg">CrUtil.paramsParse</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={paramsSerializer}
+          >
+            序列化
+          </button>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={paramsParse}
+          >
+            参数解析
+          </button>
+          <div>
+            {result.paramsSerializer &&
+              result.paramsSerializer.map((str: string) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </div>
+          <div>
+            {result.paramsParse &&
+              result.paramsParse.map((str: string) => {
+                return <div key={str}>{str}</div>;
+              })}
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+      <div className="flex flex-direction">
+        <div>列表数据转树型数据</div>
+        <div className="text-lg">CrUtil.listToTreeData</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={listToTreeData}
+          >
+            调用
+          </button>
+          <div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(listData, null, 2)}
+              </pre>
+            </div>
+            <div style={{ display: 'inline-grid', width: '50%' }}>
+              <pre style={{ marginBottom: '0px' }}>
+                {JSON.stringify(result.listToTreeData, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};