├── Makefile
├── README.md
├── css
└── app.css
├── index.html
├── package.json
└── src
├── app.jsx
└── quotes.js
/Makefile:
--------------------------------------------------------------------------------
1 |
2 | .PHONY: js bundle clean server
3 | .DEFAULT_GOAL := bundle
4 |
5 | BUILD=babel --optional runtime --stage 2 src --out-dir build
6 | BUILD_CSS=postcss --use autoprefixer css/* -d build
7 |
8 | BUNDLE_ARGS=./build/app.js -t babelify -o build/bundle.js --verbose --debug
9 |
10 | css: build/app.css
11 |
12 | js: build/app.js
13 |
14 | bundle: build/bundle.js build/app.css
15 |
16 | watch: build
17 | ($(BUILD) --watch & watchify $(BUNDLE_ARGS) & $(BUILD_CSS) --watch & wait)
18 |
19 | clean:
20 | rm -r build
21 |
22 | server:
23 | browser-sync start --server --files="build/bundle.js, build/app.css"
24 |
25 | # ts:
26 | # tsc --watch --experimentalAsyncFunctions --target ES6 --jsx react app.tsx --outDir build
27 |
28 |
29 | build:
30 | mkdir -p build
31 |
32 | build/app.js: build
33 | $(BUILD)
34 |
35 | build/bundle.js: build/app.js
36 | browserify $(BUNDLE_ARGS)
37 |
38 | build/app.css: build
39 | $(BUILD_CSS)
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [Sortable List Demo](https://hayeah.github.io/react-motion-SortableList)
2 |
3 | # Sortable List
4 |
5 | (proof-of-concept!)
6 |
7 | This is a generalization of the react-motion sortable list demo. It supports arbitrary number of items, and each item can have different heights.
8 |
9 | # API
10 |
11 | ```
12 |
13 | {(key) => ... }
14 |
15 | ```
16 |
17 | Where data is a map of string to data (i.e. `{[string]: any}`). The data items can be polymorphic.
18 |
19 | Like react-motion, we use the insertion order of the keys to determine the items ordering.
20 |
21 | # How it works
22 |
23 | The sortable list tracks the height of its children, and lay them out vertically one after another.
24 |
25 | Since we know the dimensions and locations of all children, it's easy to animate them using react-motion whenever the order of the children changes.
26 |
27 | On drag, we look at the mouse position and iterates through the list to find an insertion point. Once we know the new ordering, the same code that does the layout animates everything into place.
28 |
29 | Ditto with shuffling items.
30 |
31 | # TODO
32 |
33 | + Can add and remove items.
34 | + Trello-esque scrolling for long list of items.
35 | + React-Native port.
36 |
37 | # Dev Guide
38 |
39 | `npm install` to install dependencies.
40 |
41 | `make` or `make bundle` to build the project. Open index.html.
42 |
43 | `make watch` to continuously build the project.
44 |
45 | `make server` to launch a livereload server.
46 |
--------------------------------------------------------------------------------
/css/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | body {
7 | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
8 | font-weight: 300;
9 | color: #4D4F7D;
10 | }
11 |
12 | * {
13 | box-sizing: border-box;
14 | }
15 |
16 | a {
17 | color: #4D4F7D;
18 | text-decoration: underline;
19 | }
20 |
21 | a:hover {
22 | color: #A8A9D1;
23 | }
24 |
25 | .container {
26 | display: flex;
27 | flex-direction: column;
28 | justify-content: center;
29 | align-items: center;
30 |
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | right: 0;
35 | bottom: 0;
36 |
37 | background-color: #000445;
38 | }
39 |
40 | .sortable-list {
41 | position: relative;
42 | list-style: none;
43 | padding: 0;
44 | margin: 0;
45 | width: 300px;
46 | }
47 |
48 | .sortable-list li {
49 | width: 100%;
50 | padding: 10px;
51 | margin-bottom: 10px;
52 | border: 1px solid #B9BBFF;
53 | color: #B9BBFF;
54 | }
55 |
56 | h1.shuffle-button {
57 | /*background: rgba(0,0,0,0.5);*/
58 | padding: 5px 20px;
59 | border: 2px solid #B9BBFF;
60 | color: #B9BBFF;
61 | border-radius: 5px;
62 | }
63 |
64 | h1.shuffle-button:hover {
65 | color: #A8A9D1;
66 | border: 2px solid #A8A9D1;
67 | }
68 |
69 | .colophon {
70 | font-size: 14px;
71 | }
72 |
73 | .colophon a {
74 | font-size: 14px;
75 | margin-right: 0.5em;
76 | }
77 |
78 | .noselect {
79 | -webkit-touch-callout: none;
80 | user-select: none;
81 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React Motion Sortable List
5 |
6 |
7 |
8 |
9 |
10 | {children}
29 | );
30 | },
31 |
32 | });
33 |
34 | let List = React.createClass({
35 | getInitialState() {
36 | const {items} = this.props;
37 | return {
38 | layouts: {},
39 | items,
40 | // The key of the current item we are moving.
41 | movingItemKey: null,
42 | movingY: null,
43 | };
44 | },
45 |
46 | componentWillReceiveProps(props) {
47 | const {items} = props;
48 | this.setState({items});
49 | },
50 |
51 | handleItemLayout(key,layout) {
52 | const {layouts} = this.state;
53 | this.setState(({layouts}) => {
54 | return {
55 | layouts: {
56 | ...layouts,
57 | [key]: layout,
58 | }
59 | };
60 | });
61 | },
62 |
63 | componentDidMount() {
64 | window.addEventListener("mousemove",this.handleMouseMove);
65 | window.addEventListener("mouseup",this.handleMouseUp);
66 | },
67 |
68 | handleMouseMove(e) {
69 | const {movingItemKey} = this.state;
70 | if(movingItemKey == null) {
71 | return;
72 | }
73 |
74 | let y = this.distanceFromListTop(e.pageY);
75 |
76 | // 1. search through items to find where to insert
77 | const {items,layouts} = this.state;
78 |
79 | let curHeight = 0;
80 | let marginBottom = 10;
81 |
82 | let rowKey;
83 | let keys = Object.keys(items);
84 | for(let i = 0; i < keys.length; i++) {
85 | const key = keys[i];
86 | const layout = layouts[key];
87 | curHeight = curHeight + layout.offsetHeight + marginBottom;
88 | if(y < curHeight) {
89 | rowKey = key;
90 | break;
91 | }
92 | }
93 | // Cursor is outside the last item. Use the last item's key.
94 | if(rowKey == null) {
95 | rowKey = keys[keys.length-1];
96 | }
97 |
98 | this.setState({movingY: y});
99 |
100 | // 2. swap items if necessary
101 | if(rowKey !== movingItemKey) {
102 | this.setState({
103 | items: reorderKeys(this.state.items,keys => {
104 | let a, b;
105 | keys.forEach((key,i) => {
106 | // console.log("compare key",key,rowKey,movingItemKey,i);
107 | if(key == rowKey) {
108 | a = i
109 | }
110 |
111 | if(key == movingItemKey) {
112 | b = i
113 | }
114 | });
115 |
116 | const tmp = keys[a];
117 | keys[a] = keys[b];
118 | keys[b] = tmp;
119 | return keys;
120 | }),
121 | });
122 |
123 | }
124 | },
125 |
126 | distanceFromListTop(pageY) {
127 | const listDom = this.refs.list.getDOMNode();
128 | const y = pageY - listDom.offsetTop;
129 | return y;
130 | },
131 |
132 | handleMouseUp() {
133 | this.setState({
134 | movingItemKey: null,
135 | movingY: null,
136 | });
137 | },
138 |
139 | handleMousedownOnItem(key,{pageY}) {
140 | let y = this.distanceFromListTop(pageY);
141 | this.setState({
142 | movingItemKey: key,
143 | movingY: y,
144 | });
145 | },
146 |
147 | render() {
148 |
149 | const dataRenderer = this.props.children;
150 | if(typeof dataRenderer != 'function') {
151 | throw "must be a function"
152 | }
153 |
154 | const {items,movingItemKey,movingY} = this.state;
155 |
156 | // calculate positions using layout dimensions.
157 | let curHeight = 0;
158 | let marginBottom = 10;
159 | const children = Object.keys(items).map((key) => {
160 | const item = items[key];
161 |
162 | let layout = this.state.layouts[key];
163 |
164 | let style;
165 | if(layout) {
166 | style = {
167 | position: 'absolute',
168 | top: {val: curHeight},
169 | scale: {val: 1},
170 | opacity: 1,
171 | }
172 |
173 | curHeight = curHeight + layout.offsetHeight + marginBottom;
174 | } else {
175 | style = {
176 | position: 'absolute',
177 | top: {val: 0},
178 | scale: {val: 1},
179 | opacity: 1,
180 | }
181 | }
182 |
183 | const isSelected = movingItemKey === key;
184 |
185 | if(isSelected) {
186 | style = {
187 | ...style,
188 | scale: {val: 1.1},
189 | backgroundColor: '#33366A',
190 | top: {
191 | val: movingY - layout.offsetHeight/2,
192 | config: []
193 | },
194 | }
195 | }
196 |
197 | return (
198 |
203 | {
204 | ({top,scale,backgroundColor}) => {
205 | let style = {
206 | position: 'absolute',
207 | top: 0,
208 | backgroundColor: backgroundColor,
209 | transform: `translate3d(0,${top.val}px,0) scale(${scale.val})`,
210 | // < Safari 8
211 | '-webkit-transform': `translate3d(0,${top.val}px,0) scale(${scale.val})`,
212 | zIndex: isSelected ? 99 : 0,
213 | }
214 | return (
215 | -
219 | {dataRenderer(item)}
220 |
221 | );
222 | }
223 | }
224 |
225 |
226 | )
227 | });
228 |
229 | const contentHeight = curHeight;
230 |
231 | // console.log(items,children);
232 |
233 | return (
234 |
240 |
241 | );
242 | }
243 | });
244 |
245 | const App = React.createClass({
246 | shuffle() {
247 | console.log("shuffle yo!");
248 | const {items} = this.state;
249 |
250 | this.setState({
251 | items: reorderKeys(items,keys => {
252 | var keys2= shuffle(keys);
253 | console.log(keys2);
254 | return keys
255 | }),
256 | });
257 | },
258 |
259 | getInitialState() {
260 | let items = {};
261 |
262 | QUOTES.slice(0,8).forEach((quote,i) => {
263 | // Javascript hash preserves insertion order except for "numeric" keys.
264 | // Add a random prefix to avoid that.
265 | items[`@${i}`] = quote;
266 | });
267 |
268 | return {
269 | items: items,
270 | }
271 | },
272 |
273 | render() {
274 | const {items} = this.state;
275 | // console.log(items);
276 | return (
277 |
278 |
React Motion Sortable List
279 |
280 | {item => {item} }
281 |
282 |
283 |
Shuffle
284 |
285 |
290 |