@zcrkey/js-utils 0.0.4 → 0.0.5

package/docs/api/storage/session.tsx

@@ -0,0 +1,85 @@
+/**
+ * title: sessionStorage
+ */
+
+import { CrStorage } from '@zcrkey/js-utils';
+import React, { useState } from 'react';
+
+const LOGIN_USER = 'loginUser';
+
+export default () => {
+  const [data, setData] = useState<any>();
+
+  const onSet = () => {
+    CrStorage.setSessionItem(LOGIN_USER, {
+      name: 'zcr',
+      sex: '男',
+      age: 18,
+    });
+  };
+
+  const onGet = () => {
+    setData(CrStorage.getSessionItem(LOGIN_USER));
+  };
+
+  const onClear = () => {
+    CrStorage.removeSessionItem(LOGIN_USER);
+    setData('');
+  };
+
+  const onAllClear = () => {
+    CrStorage.clearSession();
+    setData('');
+  };
+
+  return (
+    <>
+      <div className="flex flex-direction">
+        <div className="text-lg">CrUtil.setSessionItem</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={onSet}
+          >
+            设置用户数据
+          </button>
+        </div>
+        <div className="text-lg">CrUtil.getSessionItem</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={onGet}
+          >
+            获取用户数据
+          </button>
+        </div>
+        <div className="text-lg">CrUtil.removeSessionItem</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={onClear}
+          >
+            清除用户数据
+          </button>
+        </div>
+      </div>
+      <div className="text-lg">CrUtil.clearSession</div>
+      <div>
+        <button
+          type="button"
+          className="cr-btn line-blue radius"
+          onClick={onAllClear}
+        >
+          清除全部
+        </button>
+      </div>
+
+      <div className="divider"></div>
+
+      <p>用户数据：{JSON.stringify(data)}</p>
+    </>
+  );
+};

package/docs/api/treeUtil/index.md

@@ -0,0 +1,5 @@
+# CrTreeUtil 树工具类
+
+树工具类
+
+<code src="./index.tsx"></code>

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>