Skip to content

Commit 3317aee

Browse files
mortalYoungmortalYoung
authored
feat: develop a Split Pane component (#509)
* feat: develop a Split Pane component * feat: improve Split * feat: support to set resize strategy for panes * test: add unit tests for SplitPane * feat: add exports in components/index * test: update tests * refactor: use built-in splitPane component in collapse and editor (#510) * refactor: use built-in splitPane component in collapse and editor * feat: improve collapse * feat: support resize strategy for Split Pane * test: update tests * test: add unit tests for Collapse Component * fix: editor cannot resize * test: update snapshots * feat: support to set minSize and maxSize * feat: support maxSize and minSize in Pane * feat: improve Split * test: fix circular dependency * test: update tests * test: update snapshots * docs: add Split component stories * fix: improve the mouse move function in SplitPane * test: update tests * fix: replace react-split-pane in editor group * test: update tests * fix: fix the first editor in group can resize * fix: fix unrelated size changed will trigger resize * test: update tests * fix: improve resize stratygy on editor groups * fix: remove useless style * fix: use focusBorder as the backup of sash.hoverBorder
1 parent 0be561d commit 3317aee

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+3697
-1825
lines changed

‎src/components/collapse/__tests__/__snapshots__/index.test.tsx.snap

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test The Collapse Component Match Snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="mo-collapse"
7+
>
8+
<div
9+
class="mo-split"
10+
>
11+
<div
12+
class="mo-split__sash"
13+
>
14+
<div
15+
class="mo-split__sash__item mo-split__sash__item--disabled mo-split__sash__item--horizontal"
16+
role="Resizer"
17+
style="height: 4px; top: -2px;"
18+
/>
19+
<div
20+
class="mo-split__sash__item mo-split__sash__item--disabled mo-split__sash__item--horizontal"
21+
role="Resizer"
22+
style="height: 4px; top: 24px;"
23+
/>
24+
<div
25+
class="mo-split__sash__item mo-split__sash__item--disabled mo-split__sash__item--horizontal"
26+
role="Resizer"
27+
style="height: 4px; top: 50px;"
28+
/>
29+
</div>
30+
<div
31+
class="mo-split__pane"
32+
>
33+
<div
34+
class="mo-split__pane__item mo-split__pane__item--visible mo-collapse__pane"
35+
style="top: 0px; height: 26px;"
36+
>
37+
<div
38+
class="mo-collapse__item"
39+
data-collapse-id="mock1"
40+
>
41+
<div
42+
class="mo-collapse__header"
43+
tabindex="0"
44+
>
45+
<span
46+
class="codicon codicon-chevron-right"
47+
/>
48+
<span
49+
class="mo-collapse__header__title"
50+
>
51+
test1
52+
</span>
53+
<div
54+
class="mo-collapse__extra"
55+
/>
56+
</div>
57+
<div
58+
class="mo-collapse__content"
59+
data-collapse-index="0"
60+
tabindex="0"
61+
/>
62+
</div>
63+
</div>
64+
<div
65+
class="mo-split__pane__item mo-split__pane__item--visible mo-collapse__pane"
66+
style="top: 26px; height: 26px;"
67+
>
68+
<div
69+
class="mo-collapse__item"
70+
data-collapse-id="mock2"
71+
>
72+
<div
73+
class="mo-collapse__header"
74+
tabindex="0"
75+
>
76+
<span
77+
class="codicon codicon-chevron-right"
78+
/>
79+
<span
80+
class="mo-collapse__header__title"
81+
>
82+
test2
83+
</span>
84+
<div
85+
class="mo-collapse__extra"
86+
/>
87+
</div>
88+
<div
89+
class="mo-collapse__content"
90+
data-collapse-index="1"
91+
tabindex="0"
92+
/>
93+
</div>
94+
</div>
95+
<div
96+
class="mo-split__pane__item mo-split__pane__item--visible mo-collapse__pane"
97+
style="top: 52px; height: 26px;"
98+
>
99+
<div
100+
class="mo-collapse__item"
101+
data-collapse-id="mock2"
102+
>
103+
<div
104+
class="mo-collapse__header"
105+
tabindex="0"
106+
>
107+
<span
108+
class="codicon codicon-chevron-right"
109+
/>
110+
<span
111+
class="mo-collapse__header__title"
112+
>
113+
test2
114+
</span>
115+
<div
116+
class="mo-collapse__extra"
117+
/>
118+
</div>
119+
<div
120+
class="mo-collapse__content"
121+
data-collapse-index="2"
122+
tabindex="0"
123+
/>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
</DocumentFragment>
130+
`;

0 commit comments

Comments
 (0)