Skip to content

Commit 9aeaf3d

Browse files
TdyPTdyP
authored
* Clean some website reminiscents * Upgrade to [email protected]. Fixes frontend-collective#665 Co-authored-by: Teddy <[email protected]>
1 parent 1c1ed8c commit 9aeaf3d

File tree

9 files changed

+307
-44
lines changed

9 files changed

+307
-44
lines changed

‎__mocks__/react-dnd-html5-backend.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/* eslint-disable import/no-extraneous-dependencies */
2-
import TestBackend from 'react-dnd-test-backend';
2+
import { TestBackend } from 'react-dnd-test-backend';
33

4-
module.exports = TestBackend;
4+
module.exports = { HTML5Backend: TestBackend };

‎package.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
"version": "2.7.1",
44
"description": "Drag-and-drop sortable component for nested data and hierarchies",
55
"scripts": {
6-
"start": "parcel website/index.html",
76
"prebuild": "yarn run lint && yarn run clean",
87
"build": "rollup -c",
98
"build:storybook": "build-storybook -o build",
109
"clean": "rimraf dist",
1110
"clean:storybook": "rimraf build",
12-
"lint": "eslint src website",
11+
"lint": "eslint src",
1312
"prettier": "prettier --write \"{src,example/src,stories}/**/*.{js,css,md}\"",
1413
"prepublishOnly": "yarn run test && yarn run build",
1514
"release": "standard-version",
@@ -69,8 +68,8 @@
6968
"frontend-collective-react-dnd-scrollzone": "^1.0.2",
7069
"lodash.isequal": "^4.5.0",
7170
"prop-types": "^15.6.1",
72-
"react-dnd": "^9.4.0",
73-
"react-dnd-html5-backend": "^10.0.2",
71+
"react-dnd": "^11.1.3",
72+
"react-dnd-html5-backend": "^11.1.3",
7473
"react-lifecycles-compat": "^3.0.4",
7574
"react-virtualized": "^9.21.2"
7675
},
@@ -112,7 +111,7 @@
112111
"prettier": "^1.19.1",
113112
"react": "^16.11.0",
114113
"react-addons-shallow-compare": "^15.6.2",
115-
"react-dnd-test-backend": "^10.0.2",
114+
"react-dnd-test-backend": "^11.1.3",
116115
"react-dnd-touch-backend": "^9.4.0",
117116
"react-dom": "^16.11.0",
118117
"react-hot-loader": "^4.12.17",

‎src/react-sortable-tree.js‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
import React, { Component } from 'react';
2-
import PropTypes from 'prop-types';
3-
import { AutoSizer, List } from 'react-virtualized';
4-
import isEqual from 'lodash.isequal';
51
import withScrolling, {
2+
createHorizontalStrength,
63
createScrollingComponent,
74
createVerticalStrength,
8-
createHorizontalStrength,
95
} from 'frontend-collective-react-dnd-scrollzone';
10-
import { DndProvider, DndContext } from 'react-dnd';
11-
import HTML5Backend from 'react-dnd-html5-backend';
6+
import isEqual from 'lodash.isequal';
7+
import PropTypes from 'prop-types';
8+
import React, { Component } from 'react';
9+
import { DndContext, DndProvider } from 'react-dnd';
10+
import { HTML5Backend } from 'react-dnd-html5-backend';
1211
import { polyfill } from 'react-lifecycles-compat';
12+
import { AutoSizer, List } from 'react-virtualized';
1313
import 'react-virtualized/styles.css';
14-
import TreeNode from './tree-node';
1514
import NodeRendererDefault from './node-renderer-default';
16-
import TreePlaceholder from './tree-placeholder';
1715
import PlaceholderRendererDefault from './placeholder-renderer-default';
18-
import {
19-
walk,
20-
changeNodeAtPath,
21-
removeNode,
22-
insertNode,
23-
find,
24-
toggleExpandedForAll,
25-
} from './utils/tree-data-utils';
26-
import {
27-
memoizedInsertNode,
28-
memoizedGetFlatDataFromTree,
29-
memoizedGetDescendantCount,
30-
} from './utils/memoized-tree-data-utils';
31-
import { slideRows } from './utils/generic-utils';
16+
import './react-sortable-tree.css';
17+
import TreeNode from './tree-node';
18+
import TreePlaceholder from './tree-placeholder';
19+
import classnames from './utils/classnames';
3220
import {
3321
defaultGetNodeKey,
3422
defaultSearchMethod,
3523
} from './utils/default-handlers';
3624
import DndManager from './utils/dnd-manager';
37-
import classnames from './utils/classnames';
38-
import './react-sortable-tree.css';
25+
import { slideRows } from './utils/generic-utils';
26+
import {
27+
memoizedGetDescendantCount,
28+
memoizedGetFlatDataFromTree,
29+
memoizedInsertNode,
30+
} from './utils/memoized-tree-data-utils';
31+
import {
32+
changeNodeAtPath,
33+
find,
34+
insertNode,
35+
removeNode,
36+
toggleExpandedForAll,
37+
walk,
38+
} from './utils/tree-data-utils';
3939

4040
let treeIdCounter = 1;
4141

@@ -950,9 +950,9 @@ const SortableTreeWithoutDndContext = props => (
950950

951951
const SortableTree = props => (
952952
<DndProvider backend={HTML5Backend}>
953-
<SortableTreeWithoutDndContext {...props}/>
953+
<SortableTreeWithoutDndContext {...props} />
954954
</DndProvider>
955-
)
955+
);
956956

957957
// Export the tree component without the react-dnd DragDropContext,
958958
// for when component is used with other components using react-dnd.

‎stories/__snapshots__/storyshots.test.js.snap‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -666,6 +666,235 @@ exports[`Storyshots Advanced Drag out to remove 1`] = `
666666
</div>
667667
`;
668668

669+
exports[`Storyshots Advanced Minimal implementation without Dnd Context 1`] = `
670+
<div
671+
style={
672+
Object {
673+
"height": 300,
674+
}
675+
}
676+
>
677+
<div
678+
className="rst__tree"
679+
style={
680+
Object {
681+
"height": "100%",
682+
}
683+
}
684+
>
685+
<div>
686+
<div
687+
aria-label="grid"
688+
aria-readonly={true}
689+
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
690+
onScroll={[Function]}
691+
role="grid"
692+
style={
693+
Object {
694+
"WebkitOverflowScrolling": "touch",
695+
"boxSizing": "border-box",
696+
"direction": "ltr",
697+
"height": 99999,
698+
"overflowX": "hidden",
699+
"overflowY": "hidden",
700+
"position": "relative",
701+
"width": 200,
702+
"willChange": "transform",
703+
}
704+
}
705+
tabIndex={0}
706+
>
707+
<div
708+
className="ReactVirtualized__Grid__innerScrollContainer"
709+
role="rowgroup"
710+
style={
711+
Object {
712+
"height": 124,
713+
"maxHeight": 124,
714+
"maxWidth": 200,
715+
"overflow": "hidden",
716+
"pointerEvents": "",
717+
"position": "relative",
718+
"width": "auto",
719+
}
720+
}
721+
>
722+
<div
723+
className="rst__node"
724+
style={
725+
Object {
726+
"height": 62,
727+
"left": 0,
728+
"position": "absolute",
729+
"top": 0,
730+
"width": "100%",
731+
}
732+
}
733+
>
734+
<div
735+
className="rst__lineBlock rst__lineHalfHorizontalRight"
736+
style={
737+
Object {
738+
"width": 44,
739+
}
740+
}
741+
/>
742+
<div
743+
className="rst__nodeContent"
744+
style={
745+
Object {
746+
"left": 44,
747+
}
748+
}
749+
>
750+
<div
751+
style={
752+
Object {
753+
"height": "100%",
754+
}
755+
}
756+
>
757+
<div>
758+
<button
759+
aria-label="Collapse"
760+
className="rst__collapseButton"
761+
onClick={[Function]}
762+
style={
763+
Object {
764+
"left": -22,
765+
}
766+
}
767+
type="button"
768+
/>
769+
<div
770+
className="rst__lineChildren"
771+
style={
772+
Object {
773+
"width": 44,
774+
}
775+
}
776+
/>
777+
</div>
778+
<div
779+
className="rst__rowWrapper"
780+
>
781+
<div
782+
className="rst__row"
783+
style={
784+
Object {
785+
"opacity": 1,
786+
}
787+
}
788+
>
789+
<div
790+
className="rst__moveHandle"
791+
/>
792+
<div
793+
className="rst__rowContents"
794+
>
795+
<div
796+
className="rst__rowLabel"
797+
>
798+
<span
799+
className="rst__rowTitle"
800+
>
801+
Chicken
802+
</span>
803+
</div>
804+
<div
805+
className="rst__rowToolbar"
806+
/>
807+
</div>
808+
</div>
809+
</div>
810+
</div>
811+
</div>
812+
</div>
813+
<div
814+
className="rst__node"
815+
style={
816+
Object {
817+
"height": 62,
818+
"left": 0,
819+
"position": "absolute",
820+
"top": 62,
821+
"width": "100%",
822+
}
823+
}
824+
>
825+
<div
826+
className="rst__lineBlock"
827+
style={
828+
Object {
829+
"width": 44,
830+
}
831+
}
832+
/>
833+
<div
834+
className="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
835+
style={
836+
Object {
837+
"width": 44,
838+
}
839+
}
840+
/>
841+
<div
842+
className="rst__nodeContent"
843+
style={
844+
Object {
845+
"left": 88,
846+
}
847+
}
848+
>
849+
<div
850+
style={
851+
Object {
852+
"height": "100%",
853+
}
854+
}
855+
>
856+
<div
857+
className="rst__rowWrapper"
858+
>
859+
<div
860+
className="rst__row"
861+
style={
862+
Object {
863+
"opacity": 1,
864+
}
865+
}
866+
>
867+
<div
868+
className="rst__moveHandle"
869+
/>
870+
<div
871+
className="rst__rowContents"
872+
>
873+
<div
874+
className="rst__rowLabel"
875+
>
876+
<span
877+
className="rst__rowTitle"
878+
>
879+
Egg
880+
</span>
881+
</div>
882+
<div
883+
className="rst__rowToolbar"
884+
/>
885+
</div>
886+
</div>
887+
</div>
888+
</div>
889+
</div>
890+
</div>
891+
</div>
892+
</div>
893+
</div>
894+
</div>
895+
</div>
896+
`;
897+
669898
exports[`Storyshots Advanced Playing with generateNodeProps 1`] = `
670899
<div>
671900
<div

‎stories/barebones-no-context.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { Component } from 'react';
2+
import { DndProvider } from 'react-dnd';
3+
import { HTML5Backend } from 'react-dnd-html5-backend';
4+
import { SortableTreeWithoutDndContext as SortableTree } from '../src';
5+
// In your own app, you would need to use import styles once in the app
6+
// import 'react-sortable-tree/styles.css';
7+
8+
export default class App extends Component {
9+
constructor(props) {
10+
super(props);
11+
12+
this.state = {
13+
treeData: [
14+
{ title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] },
15+
],
16+
};
17+
}
18+
19+
render() {
20+
return (
21+
<div style={{ height: 300 }}>
22+
<DndProvider backend={HTML5Backend}>
23+
<SortableTree
24+
treeData={this.state.treeData}
25+
onChange={treeData => this.setState({ treeData })}
26+
/>
27+
</DndProvider>
28+
</div>
29+
);
30+
}
31+
}

‎stories/drag-out-to-remove.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* eslint-disable react/no-multi-comp */
2-
import React, { Component } from 'react';
32
import PropTypes from 'prop-types';
3+
import React, { Component } from 'react';
44
import { DndProvider, DropTarget } from 'react-dnd';
5-
import HTML5Backend from 'react-dnd-html5-backend';
5+
import { HTML5Backend } from 'react-dnd-html5-backend';
66
import { SortableTreeWithoutDndContext as SortableTree } from '../src';
77
// In your own app, you would need to use import styles once in the app
88
// import 'react-sortable-tree/styles.css';

0 commit comments

Comments
 (0)