From 2cad33b9529894947abafacef2471632096ac268 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Thu, 12 Aug 2021 17:14:38 +0800 Subject: [PATCH] refactor: extract some utils function to utils --- .../GroupDetail/Panel/GroupPanelTree.tsx | 51 +---------- .../Panel/__tests__/GroupPanelTree.spec.tsx | 47 +---------- .../GroupDetail/Panel/__tests__/utils.spec.ts | 84 +++++++++++++++++++ .../modals/GroupDetail/Panel/utils.ts | 47 +++++++++++ 4 files changed, 134 insertions(+), 95 deletions(-) create mode 100644 web/src/components/modals/GroupDetail/Panel/__tests__/utils.spec.ts create mode 100644 web/src/components/modals/GroupDetail/Panel/utils.ts diff --git a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx index f271ce0b..dcfa7fea 100644 --- a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx +++ b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx @@ -1,59 +1,12 @@ import React, { useCallback, useMemo, useRef } from 'react'; -import { - GroupPanelType, - GroupPanel as GroupPanelInfo, - showToasts, -} from 'tailchat-shared'; +import { GroupPanel as GroupPanelInfo, showToasts } from 'tailchat-shared'; import { Tree } from 'antd'; import type { NodeDragEventParams } from 'rc-tree/lib/contextTypes'; import type { DataNode, EventDataNode } from 'antd/lib/tree'; import type { Key } from 'rc-tree/lib/interface'; import type { AllowDrop } from 'rc-tree/lib/Tree'; import _cloneDeep from 'lodash/cloneDeep'; -import _isNil from 'lodash/isNil'; - -/** - * 将一维的面板列表构筑成立体的数组 - */ -function buildTreeDataWithGroupPanel( - groupPanels: GroupPanelInfo[] -): DataNode[] { - return groupPanels - .filter((panel) => panel.type === GroupPanelType.GROUP) - .map((section) => ({ - key: section.id, - title: section.name, - isLeaf: false, - children: groupPanels - .filter((panel) => panel.parentId === section.id) - .map((panel) => ({ - key: panel.id, - title: panel.name, - isLeaf: true, - })), - })); -} - -/** - * 重新构建面板顺序 - */ -export function rebuildGroupPanelOrder( - groupPanels: GroupPanelInfo[] -): GroupPanelInfo[] { - const originGroupPanels = _cloneDeep(groupPanels); - const newPanel = originGroupPanels.filter((panel) => _isNil(panel.parentId)); // 第一层 - const len = newPanel.length; - for (let i = len - 1; i >= 0; i--) { - const currentId = newPanel[i].id; - newPanel.splice( - i + 1, - 0, - ...originGroupPanels.filter((p) => p.parentId === currentId) - ); - } - - return newPanel; -} +import { buildTreeDataWithGroupPanel, rebuildGroupPanelOrder } from './utils'; interface GroupPanelTree { groupPanels: GroupPanelInfo[]; diff --git a/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx b/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx index f263e273..dbdb7ec0 100644 --- a/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx +++ b/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx @@ -2,7 +2,7 @@ jest.mock('tailchat-shared/i18n'); import { render } from '@testing-library/react'; import React from 'react'; import { GroupPanel, GroupPanelType } from 'tailchat-shared'; -import { GroupPanelTree, rebuildGroupPanelOrder } from '../GroupPanelTree'; +import { GroupPanelTree } from '../GroupPanelTree'; const testGroupPanels: GroupPanel[] = [ { @@ -51,48 +51,3 @@ describe('GroupPanelTree', () => { expect(wrapper.container).toMatchSnapshot(); }); }); - -describe('rebuildGroupPanelOrder', () => { - test('ref is changed', () => { - expect(rebuildGroupPanelOrder(testGroupPanels)).not.toBe(testGroupPanels); - expect(rebuildGroupPanelOrder(testGroupPanels)[0]).not.toBe( - testGroupPanels[0] - ); - }); - - test('keep order if right', () => { - expect(rebuildGroupPanelOrder(testGroupPanels)).toEqual(testGroupPanels); - }); - - test('child should after parent', () => { - expect( - rebuildGroupPanelOrder([testGroupPanels[1], testGroupPanels[0]]) - ).toEqual([testGroupPanels[0], testGroupPanels[1]]); - }); - - test('switch position should keep origin order', () => { - expect( - rebuildGroupPanelOrder([ - testGroupPanels[1], - testGroupPanels[2], - testGroupPanels[0], - ]) - ).toEqual([testGroupPanels[0], testGroupPanels[1], testGroupPanels[2]]); - }); - - test('switch position should keep origin order(group)', () => { - expect( - rebuildGroupPanelOrder([ - testGroupPanels[1], - testGroupPanels[2], - testGroupPanels[0], - testGroupPanels[3], - ]) - ).toEqual([ - testGroupPanels[0], - testGroupPanels[1], - testGroupPanels[2], - testGroupPanels[3], - ]); - }); -}); diff --git a/web/src/components/modals/GroupDetail/Panel/__tests__/utils.spec.ts b/web/src/components/modals/GroupDetail/Panel/__tests__/utils.spec.ts new file mode 100644 index 00000000..0387f124 --- /dev/null +++ b/web/src/components/modals/GroupDetail/Panel/__tests__/utils.spec.ts @@ -0,0 +1,84 @@ +import { GroupPanel, GroupPanelType } from 'tailchat-shared'; +import { rebuildGroupPanelOrder } from '../utils'; + +const testGroupPanels: GroupPanel[] = [ + { + id: '00', + name: 'section-1', + type: GroupPanelType.GROUP, + }, + { + id: '01', + name: 'panel-01', + type: GroupPanelType.TEXT, + parentId: '00', + }, + { + id: '02', + name: 'panel-02', + type: GroupPanelType.TEXT, + parentId: '00', + }, + { + id: '10', + name: 'section-2', + type: GroupPanelType.GROUP, + }, + { + id: '11', + name: 'panel-11', + type: GroupPanelType.TEXT, + parentId: '10', + }, + { + id: '12', + name: 'panel-12', + type: GroupPanelType.TEXT, + parentId: '10', + }, +]; + +describe('rebuildGroupPanelOrder', () => { + test('ref is changed', () => { + expect(rebuildGroupPanelOrder(testGroupPanels)).not.toBe(testGroupPanels); + expect(rebuildGroupPanelOrder(testGroupPanels)[0]).not.toBe( + testGroupPanels[0] + ); + }); + + test('keep order if right', () => { + expect(rebuildGroupPanelOrder(testGroupPanels)).toEqual(testGroupPanels); + }); + + test('child should after parent', () => { + expect( + rebuildGroupPanelOrder([testGroupPanels[1], testGroupPanels[0]]) + ).toEqual([testGroupPanels[0], testGroupPanels[1]]); + }); + + test('switch position should keep origin order', () => { + expect( + rebuildGroupPanelOrder([ + testGroupPanels[1], + testGroupPanels[2], + testGroupPanels[0], + ]) + ).toEqual([testGroupPanels[0], testGroupPanels[1], testGroupPanels[2]]); + }); + + test('switch position should keep origin order(group)', () => { + expect( + rebuildGroupPanelOrder([ + testGroupPanels[1], + testGroupPanels[2], + testGroupPanels[0], + testGroupPanels[3], + ]) + ).toEqual([ + testGroupPanels[0], + testGroupPanels[1], + testGroupPanels[2], + testGroupPanels[3], + ]); + }); +}); diff --git a/web/src/components/modals/GroupDetail/Panel/utils.ts b/web/src/components/modals/GroupDetail/Panel/utils.ts new file mode 100644 index 00000000..781d4728 --- /dev/null +++ b/web/src/components/modals/GroupDetail/Panel/utils.ts @@ -0,0 +1,47 @@ +import _isNil from 'lodash/isNil'; +import { GroupPanelType, GroupPanel as GroupPanelInfo } from 'tailchat-shared'; +import type { DataNode } from 'antd/lib/tree'; +import _cloneDeep from 'lodash/cloneDeep'; + +/** + * 将一维的面板列表构筑成立体的数组 + */ +export function buildTreeDataWithGroupPanel( + groupPanels: GroupPanelInfo[] +): DataNode[] { + return groupPanels + .filter((panel) => panel.type === GroupPanelType.GROUP) + .map((section) => ({ + key: section.id, + title: section.name, + isLeaf: false, + children: groupPanels + .filter((panel) => panel.parentId === section.id) + .map((panel) => ({ + key: panel.id, + title: panel.name, + isLeaf: true, + })), + })); +} + +/** + * 重新构建面板顺序 + */ +export function rebuildGroupPanelOrder( + groupPanels: GroupPanelInfo[] +): GroupPanelInfo[] { + const originGroupPanels = _cloneDeep(groupPanels); + const newPanel = originGroupPanels.filter((panel) => _isNil(panel.parentId)); // 第一层 + const len = newPanel.length; + for (let i = len - 1; i >= 0; i--) { + const currentId = newPanel[i].id; + newPanel.splice( + i + 1, + 0, + ...originGroupPanels.filter((p) => p.parentId === currentId) + ); + } + + return newPanel; +}