Skip to content

Commit bf907fa

Browse files
megaboichwuweiweiwu
megaboich
authored and
wuweiweiwu
committed
doc: Added example of expand lazy loading to storybook advanced section (frontend-collective#297)
* Added example of expand lazy loading to storybook advanced section * Added jest test snapshot
1 parent 44ef919 commit bf907fa

File tree

3 files changed

+385
-0
lines changed

3 files changed

+385
-0
lines changed

‎examples/storybooks/__snapshots__/storyshots.test.js.snap

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -724,6 +724,347 @@ exports[`Storyshots Advanced Drag out to remove 1`] = `
724724
</div>
725725
`;
726726

727+
exports[`Storyshots Advanced Expand with lazy loading of child nodes 1`] = `
728+
<div>
729+
<div
730+
style={
731+
Object {
732+
"height": 300,
733+
}
734+
}
735+
>
736+
<div
737+
className="rst__tree"
738+
style={
739+
Object {
740+
"height": "100%",
741+
}
742+
}
743+
>
744+
<div>
745+
<div
746+
aria-label="grid"
747+
aria-readonly={true}
748+
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
749+
id={undefined}
750+
onScroll={[Function]}
751+
role="grid"
752+
style={
753+
Object {
754+
"WebkitOverflowScrolling": "touch",
755+
"boxSizing": "border-box",
756+
"direction": "ltr",
757+
"height": 99999,
758+
"overflowX": "hidden",
759+
"overflowY": "hidden",
760+
"position": "relative",
761+
"width": 200,
762+
"willChange": "transform",
763+
}
764+
}
765+
tabIndex={0}
766+
>
767+
<div
768+
className="ReactVirtualized__Grid__innerScrollContainer"
769+
role="rowgroup"
770+
style={
771+
Object {
772+
"height": 186,
773+
"maxHeight": 186,
774+
"maxWidth": 200,
775+
"overflow": "hidden",
776+
"pointerEvents": "",
777+
"position": "relative",
778+
"width": "auto",
779+
}
780+
}
781+
>
782+
<div
783+
className="rst__node"
784+
style={
785+
Object {
786+
"height": 62,
787+
"left": 0,
788+
"position": "absolute",
789+
"top": 0,
790+
"width": "100%",
791+
}
792+
}
793+
>
794+
<div
795+
className="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
796+
style={
797+
Object {
798+
"width": 44,
799+
}
800+
}
801+
/>
802+
<div
803+
className="rst__nodeContent"
804+
style={
805+
Object {
806+
"left": 44,
807+
}
808+
}
809+
>
810+
<div
811+
style={
812+
Object {
813+
"height": "100%",
814+
}
815+
}
816+
>
817+
<div>
818+
<button
819+
aria-label="Collapse"
820+
className="rst__collapseButton"
821+
onClick={[Function]}
822+
style={
823+
Object {
824+
"left": -22,
825+
}
826+
}
827+
type="button"
828+
/>
829+
<div
830+
className="rst__lineChildren"
831+
style={
832+
Object {
833+
"width": 44,
834+
}
835+
}
836+
/>
837+
</div>
838+
<div
839+
className="rst__rowWrapper"
840+
>
841+
<div
842+
className="rst__row"
843+
style={
844+
Object {
845+
"opacity": 1,
846+
}
847+
}
848+
>
849+
<div
850+
className="rst__moveHandle"
851+
/>
852+
<div
853+
className="rst__rowContents"
854+
>
855+
<div
856+
className="rst__rowLabel"
857+
>
858+
<span
859+
className="rst__rowTitle"
860+
>
861+
Chicken
862+
</span>
863+
</div>
864+
<div
865+
className="rst__rowToolbar"
866+
/>
867+
</div>
868+
</div>
869+
</div>
870+
</div>
871+
</div>
872+
</div>
873+
<div
874+
className="rst__node"
875+
style={
876+
Object {
877+
"height": 62,
878+
"left": 0,
879+
"position": "absolute",
880+
"top": 62,
881+
"width": "100%",
882+
}
883+
}
884+
>
885+
<div
886+
className="rst__lineBlock rst__lineFullVertical"
887+
style={
888+
Object {
889+
"width": 44,
890+
}
891+
}
892+
/>
893+
<div
894+
className="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
895+
style={
896+
Object {
897+
"width": 44,
898+
}
899+
}
900+
/>
901+
<div
902+
className="rst__nodeContent"
903+
style={
904+
Object {
905+
"left": 88,
906+
}
907+
}
908+
>
909+
<div
910+
style={
911+
Object {
912+
"height": "100%",
913+
}
914+
}
915+
>
916+
<div
917+
className="rst__rowWrapper"
918+
>
919+
<div
920+
className="rst__row"
921+
style={
922+
Object {
923+
"opacity": 1,
924+
}
925+
}
926+
>
927+
<div
928+
className="rst__moveHandle"
929+
/>
930+
<div
931+
className="rst__rowContents"
932+
>
933+
<div
934+
className="rst__rowLabel"
935+
>
936+
<span
937+
className="rst__rowTitle"
938+
>
939+
Egg
940+
</span>
941+
</div>
942+
<div
943+
className="rst__rowToolbar"
944+
/>
945+
</div>
946+
</div>
947+
</div>
948+
</div>
949+
</div>
950+
</div>
951+
<div
952+
className="rst__node"
953+
style={
954+
Object {
955+
"height": 62,
956+
"left": 0,
957+
"position": "absolute",
958+
"top": 124,
959+
"width": "100%",
960+
}
961+
}
962+
>
963+
<div
964+
className="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
965+
style={
966+
Object {
967+
"width": 44,
968+
}
969+
}
970+
/>
971+
<div
972+
className="rst__nodeContent"
973+
style={
974+
Object {
975+
"left": 44,
976+
}
977+
}
978+
>
979+
<div
980+
style={
981+
Object {
982+
"height": "100%",
983+
}
984+
}
985+
>
986+
<div>
987+
<button
988+
aria-label="Expand"
989+
className="rst__expandButton"
990+
onClick={[Function]}
991+
style={
992+
Object {
993+
"left": -22,
994+
}
995+
}
996+
type="button"
997+
/>
998+
</div>
999+
<div
1000+
className="rst__rowWrapper"
1001+
>
1002+
<div
1003+
className="rst__row"
1004+
style={
1005+
Object {
1006+
"opacity": 1,
1007+
}
1008+
}
1009+
>
1010+
<div
1011+
className="rst__moveHandle"
1012+
/>
1013+
<div
1014+
className="rst__rowContents"
1015+
>
1016+
<div
1017+
className="rst__rowLabel"
1018+
>
1019+
<span
1020+
className="rst__rowTitle"
1021+
>
1022+
Spaceship
1023+
</span>
1024+
</div>
1025+
<div
1026+
className="rst__rowToolbar"
1027+
/>
1028+
</div>
1029+
</div>
1030+
</div>
1031+
</div>
1032+
</div>
1033+
</div>
1034+
</div>
1035+
</div>
1036+
</div>
1037+
</div>
1038+
</div>
1039+
<br />
1040+
<form
1041+
action="https://codesandbox.io/api/v1/sandboxes/define"
1042+
id="codesandbox-form"
1043+
method="POST"
1044+
>
1045+
<input
1046+
id="codesandbox-parameters"
1047+
name="parameters"
1048+
type="hidden"
1049+
/>
1050+
</form>
1051+
<button
1052+
className="sandboxButton"
1053+
onClick={[Function]}
1054+
>
1055+
PLAY WITH THIS CODE →
1056+
</button>
1057+
<a
1058+
className="sourceLink"
1059+
href="https://github.com/frontend-collective/react-sortable-tree/blob/master/examples/storybooks/expand-lazy-loading.js"
1060+
rel="noopener noreferrer"
1061+
target="_top"
1062+
>
1063+
VIEW SOURCE →
1064+
</a>
1065+
</div>
1066+
`;
1067+
7271068
exports[`Storyshots Advanced Playing with generateNodeProps 1`] = `
7281069
<div>
7291070
<div>

‎examples/storybooks/expand-lazy-loading.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { Component } from 'react';
2+
import SortableTree from '../../src';
3+
// In your own app, you would need to use import styles once in the app
4+
// import 'react-sortable-tree/styles.css';
5+
6+
export default class App extends Component {
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = {
11+
treeData: [
12+
{ title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] },
13+
{
14+
title: 'Spaceship',
15+
children: ({ done }) => {
16+
setTimeout(() => {
17+
done([
18+
{ title: 'Orbiter' },
19+
{ title: 'Main Engines' },
20+
{ title: 'External Tank' },
21+
{ title: 'Solid Rocket Boosters' },
22+
]);
23+
}, 1000);
24+
},
25+
},
26+
],
27+
};
28+
}
29+
30+
render() {
31+
return (
32+
<div style={{ height: 300 }}>
33+
<SortableTree
34+
treeData={this.state.treeData}
35+
onChange={treeData => this.setState({ treeData })}
36+
/>
37+
</div>
38+
);
39+
}
40+
}

0 commit comments

Comments
 (0)