12 |
Absolute Grid
13 |
Sortable, filterable, zoomable, ReactJS grid component using an absolute transform3d layout for React. Read more here.
14 |
15 |
Sample display items courtesy of InVisionApp
16 |
22 |
23 |
24 |
this.container = node}
131 | >
132 | {gridItems}
133 |
134 | );
135 | }
136 |
137 | componentDidMount() {
138 | //If responsive, listen for resize
139 | if(this.props.responsive){
140 | window.addEventListener('resize', this.onResize);
141 | }
142 | this.onResize();
143 | }
144 |
145 | componentWillUnmount() {
146 | window.removeEventListener('resize', this.onResize);
147 | }
148 |
149 | onResize = () => {
150 | if (window.requestAnimationFrame) {
151 | window.requestAnimationFrame(this.getDOMWidth);
152 | } else {
153 | setTimeout(this.getDOMWidth, 66);
154 | }
155 | }
156 |
157 | getDOMWidth = () => {
158 | const width = this.container && this.container.clientWidth;
159 |
160 | if(this.state.layoutWidth !== width){
161 | this.setState({layoutWidth: width});
162 | }
163 |
164 | }
165 |
166 |
167 | }
168 | }
169 |
--------------------------------------------------------------------------------
/lib/BaseDisplayObject.jsx:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, { Component, PureComponent } from 'react';
4 |
5 | import LayoutManager from './LayoutManager.js';
6 | import PropTypes from 'prop-types';
7 |
8 | export default function createDisplayObject(DisplayObject, displayProps, forceImpure) {
9 |
10 | const Comp = forceImpure ? Component : PureComponent;
11 |
12 | return class extends Comp {
13 | static propTypes = {
14 | item: PropTypes.object,
15 | style: PropTypes.object,
16 | index: PropTypes.number,
17 | dragEnabled: PropTypes.bool,
18 | dragManager: PropTypes.object,
19 | itemsLength: PropTypes.number
20 | }
21 |
22 | state = {}
23 |
24 | updateDrag(x, y) {
25 | //Pause Animation lets our item return to a snapped position without being animated
26 | let pauseAnimation = false;
27 | if(!this.props.dragManager.dragItem){
28 | pauseAnimation = true;
29 | setTimeout(() => {
30 | this.setState({pauseAnimation: false});
31 | }, 20);
32 | }
33 | this.setState({
34 | dragX: x,
35 | dragY: y,
36 | pauseAnimation: pauseAnimation
37 | });
38 | }
39 |
40 | onDrag = (e) => {
41 | if(this.props.dragManager){
42 | this.props.dragManager.startDrag(e, this.domNode, this.props.item, this.updateDrag.bind(this));
43 | }
44 | }
45 |
46 | getStyle() {
47 | const options = {
48 | itemWidth: this.props.itemWidth,
49 | itemHeight: this.props.itemHeight,
50 | verticalMargin: this.props.verticalMargin,
51 | zoom: this.props.zoom
52 | };
53 | const layout = new LayoutManager(options, this.props.layoutWidth);
54 | const style = layout.getStyle(this.props.index,
55 | this.props.animation,
56 | this.props.item[this.props.filterProp]);
57 | //If this is the object being dragged, return a different style
58 | if (this.props.dragManager.dragItem &&
59 | this.props.dragManager.dragItem[this.props.keyProp] === this.props.item[this.props.keyProp]) {
60 | const dragStyle = this.props.dragManager.getStyle(this.state.dragX, this.state.dragY);
61 | return {...style, ...dragStyle};
62 | } else if (this.state && this.state.pauseAnimation) {
63 | const pauseAnimationStyle = {...style};
64 | pauseAnimationStyle.WebkitTransition = 'none';
65 | pauseAnimationStyle.MozTransition = 'none';
66 | pauseAnimationStyle.msTransition = 'none';
67 | pauseAnimationStyle.transition = 'none';
68 | return pauseAnimationStyle;
69 | }
70 | return style;
71 | }
72 |
73 | componentDidMount() {
74 | if (this.props.dragEnabled) {
75 | this.domNode.addEventListener('mousedown', this.onDrag);
76 | this.domNode.addEventListener('touchstart', this.onDrag);
77 | this.domNode.setAttribute('data-key', this.props.item[this.props.keyProp]);
78 | }
79 | }
80 |
81 | componentWillUnmount() {
82 | if (this.props.dragEnabled) {
83 | this.props.dragManager.endDrag();
84 | this.domNode.removeEventListener('mousedown', this.onDrag);
85 | this.domNode.removeEventListener('touchstart', this.onDrag);
86 | }
87 | }
88 |
89 | render() {
90 | return (
91 | this.domNode = node}
92 | style={this.getStyle()}>
93 |
98 |
99 | );
100 | }
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/lib/DragManager.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | export default class DragManager {
4 |
5 | dragItem;
6 | initialMouseX;
7 | initialMouseY;
8 | initialEventX;
9 | initialEventY;
10 | dragX;
11 | dragY;
12 | keyProp;
13 |
14 | constructor(moveFn, dragStartFn, dragEndFn, dragMoveFn, keyProp){
15 | this.dragMove = this.dragMove.bind(this);
16 | this.endDrag = this.endDrag.bind(this);
17 | this.moveFn = moveFn;
18 | this.dragStartFn = dragStartFn;
19 | this.dragEndFn = dragEndFn;
20 | this.dragMoveFn = dragMoveFn;
21 | this.keyProp = keyProp;
22 | }
23 |
24 | dragMove(e) {
25 | const tolerance = 3;
26 | const isTouch = e.touches && e.touches.length;
27 | const pageX = isTouch ? e.touches[0].pageX : e.pageX;
28 | const pageY = isTouch ? e.touches[0].pageY : e.pageY;
29 |
30 | const xMovement = Math.abs(this.initialEventX - pageX);
31 | const yMovement = Math.abs(this.initialEventY - pageY);
32 |
33 | if(xMovement > tolerance || yMovement > tolerance){
34 | const clientX = isTouch ? e.touches[0].clientX : e.clientX;
35 | const clientY = isTouch ? e.touches[0].clientY : e.clientY;
36 |
37 | this.dragX = clientX - this.initialMouseX;
38 | this.dragY = clientY - this.initialMouseY;
39 |
40 | this.update(this.dragX, this.dragY);
41 |
42 |
43 | let targetKey;
44 | let targetElement = document.elementFromPoint(clientX, clientY);
45 | while(targetElement.parentNode){
46 | if(targetElement.getAttribute('data-key')){
47 | targetKey = targetElement.getAttribute('data-key');
48 | break;
49 | }
50 | targetElement = targetElement.parentNode;
51 | }
52 |
53 | if(targetKey && targetKey !== this.dragItem[this.keyProp]){
54 | this.moveFn(this.dragItem[this.keyProp], targetKey);
55 | }
56 |
57 | e.stopPropagation();
58 | e.preventDefault();
59 | }
60 |
61 | this.dragMoveFn(e);
62 | }
63 |
64 | endDrag() {
65 |
66 | document.removeEventListener('mousemove', this.dragMove);
67 | document.removeEventListener('mouseup', this.endDrag);
68 |
69 | this.dragItem = null;
70 | if(this.update && typeof this.update === 'function'){
71 | this.update(null, null);
72 | }
73 | this.update = null;
74 |
75 | this.dragEndFn();
76 | }
77 |
78 | startDrag(e, domNode, item, fnUpdate){
79 | const isTouch = e.targetTouches && e.targetTouches.length === 1;
80 | if(e.button === 0 || isTouch){
81 | const rect = domNode.getBoundingClientRect();
82 |
83 | this.update = fnUpdate;
84 | this.dragItem = item;
85 | const pageX = isTouch ? e.targetTouches[0].pageX : e.pageX;
86 | const pageY = isTouch ? e.targetTouches[0].pageY : e.pageY;
87 |
88 | this.initialMouseX = Math.round(pageX - (rect.left + window.pageXOffset));
89 | this.initialMouseY = Math.round(pageY - (rect.top + window.pageYOffset));
90 | this.initialEventX = pageX;
91 | this.initialEventY = pageY;
92 |
93 | document.addEventListener('mousemove', this.dragMove);
94 | document.addEventListener('touchmove', this.dragMove);
95 | document.addEventListener('mouseup', this.endDrag);
96 | document.addEventListener('touchend', this.endDrag);
97 | document.addEventListener('touchcancel', this.endDrag);
98 |
99 | //This is needed to stop text selection in most browsers
100 | e.preventDefault();
101 | }
102 |
103 | this.dragStartFn(e);
104 | }
105 |
106 | getStyle(x, y){
107 | const dragStyle = {};
108 | const transform = `translate3d(${x}px, ${y}px, 0)`;
109 | //Makes positioning simpler if we're fixed
110 | dragStyle.position = 'fixed';
111 | dragStyle.zIndex = 1000;
112 | //Required for Fixed positioning
113 | dragStyle.left = 0;
114 | dragStyle.top = 0;
115 | dragStyle.WebkitTransform = transform;
116 | dragStyle.MozTransform = transform;
117 | dragStyle.msTransform = transform;
118 | dragStyle.transform = transform;
119 |
120 | //Turn off animations for this item
121 | dragStyle.WebkitTransition = 'none';
122 | dragStyle.MozTransition = 'none';
123 | dragStyle.msTransition = 'none';
124 | dragStyle.transition = 'none';
125 |
126 | //Allows mouseover to work
127 | dragStyle.pointerEvents = 'none';
128 |
129 | return dragStyle;
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/lib/LayoutManager.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | export default class LayoutManager {
4 |
5 | columns;
6 | horizontalMargin;
7 | verticalMargin;
8 | layoutWidth;
9 | itemHeight;
10 | itemWidth;
11 | rowHeight;
12 |
13 | constructor(options, width){
14 | this.update(options, width);
15 | }
16 |
17 | update(options, width){
18 |
19 | //Calculates layout
20 | this.layoutWidth = width;
21 | this.zoom = options.zoom;
22 | this.itemWidth = Math.round(options.itemWidth * this.zoom);
23 | this.itemHeight = Math.round(options.itemHeight * this.zoom);
24 | this.columns = Math.floor(this.layoutWidth / this.itemWidth);
25 | this.horizontalMargin = (this.columns === 1) ? 0 : Math.round(this.layoutWidth - (this.columns * this.itemWidth)) / (this.columns - 1);
26 | this.verticalMargin = (options.verticalMargin === -1) ? this.horizontalMargin : options.verticalMargin;
27 | this.rowHeight = this.itemHeight + this.verticalMargin;
28 | }
29 |
30 | getTotalHeight(filteredTotal){
31 | return (Math.ceil(filteredTotal / this.columns) * this.rowHeight) - this.verticalMargin;
32 | }
33 |
34 | getRow(index){
35 | return Math.floor(index / this.columns);
36 | }
37 |
38 | getColumn(index){
39 | return index - (this.getRow(index) * this.columns);
40 | }
41 |
42 | getPosition(index){
43 | const col = this.getColumn(index);
44 | const row = this.getRow(index);
45 | const margin = this.horizontalMargin;
46 | const width = this.itemWidth;
47 |
48 | return {
49 | x: Math.round((col * width) + (col * margin)),
50 | y: Math.round((this.itemHeight + this.verticalMargin) * row)
51 | };
52 | }
53 |
54 | getTransform(index){
55 | const position = this.getPosition(index);
56 | return 'translate3d(' + position.x + 'px, ' + position.y + 'px, 0)';
57 | }
58 |
59 | getStyle(index, animation, isFiltered){
60 |
61 | const transform = this.getTransform(index);
62 | const style = {
63 | width: this.itemWidth + 'px',
64 | height: this.itemHeight + 'px',
65 | WebkitTransform: transform,
66 | MozTransform: transform,
67 | msTransform: transform,
68 | transform: transform,
69 | position: 'absolute',
70 | boxSizing: 'border-box',
71 | display: isFiltered ? 'none' : 'block'
72 | };
73 |
74 | if(animation){
75 | style.WebkitTransition = '-webkit-' + animation;
76 | style.MozTransition = '-moz-' + animation;
77 | style.msTransition = 'ms-' + animation;
78 | style.transition = animation;
79 | }
80 |
81 | return style;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-absolute-grid",
3 | "version": "3.0.1",
4 | "description": "An absolutely positioned responsive touch-enabled fully configurable React grid with drag/drop, filtering, and sorting",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "build": "NODE_ENV=production webpack --config webpack/build.config.js --optimize-minimize",
8 | "build-demo": "webpack --config 'webpack/demo.config.js' --optimize-minimize --content-base demo",
9 | "dev": "webpack-dev-server --config 'webpack/dev.config.js' --devtool eval --progress --colors --hot --content-base demo",
10 | "lint": "eslint lib",
11 | "prepare": "npm run lint && npm run build"
12 | },
13 | "author": "Jonathan Rowny",
14 | "contributors": [
15 | {
16 | "name": "Andrey Okonetchnikov",
17 | "email": "andrej.okonetschnikow@gmail.com",
18 | "url": "http://okonet.ru"
19 | }
20 | ],
21 | "license": "MIT",
22 | "dependencies": {},
23 | "devDependencies": {
24 | "babel-core": "^6.23.1",
25 | "babel-eslint": "^7.1.1",
26 | "babel-loader": "^6.3.2",
27 | "babel-plugin-lodash": "^3.2.11",
28 | "babel-preset-es2015": "^6.22.0",
29 | "babel-preset-react": "^6.23.0",
30 | "babel-preset-stage-0": "^6.22.0",
31 | "eslint": "^3.17.0",
32 | "eslint-plugin-react": "^6.10.0",
33 | "lodash": "^4.17.1",
34 | "node-libs-browser": "^2.0.0",
35 | "prop-types": "^15.5.10",
36 | "react": "^15.4.2",
37 | "react-addons-perf": "^15.4.2",
38 | "react-dom": "^15.4.2",
39 | "webpack": "^1.12.4",
40 | "webpack-dev-server": "^1.12.1"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/webpack/build.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | module.exports = {
4 | entry: './index.js',
5 | output: {
6 | path: './dist',
7 | filename: 'index.js',
8 | libraryTarget: 'umd',
9 | library: 'AbsoluteGrid'
10 | },
11 | module: {
12 | loaders: [{
13 | test: /\.jsx?$/, // A regexp to test the require path. accepts either js or jsx
14 | loader: 'babel' // The module to load. "babel" is short for "babel-loader"
15 | }]
16 | },
17 | plugins: [
18 | new webpack.DefinePlugin({
19 | 'process.env': {
20 | NODE_ENV: JSON.stringify('production')
21 | }
22 | }),
23 | new webpack.optimize.UglifyJsPlugin()
24 | ],
25 | externals: {
26 | react: 'react'
27 | }
28 | };
29 |
30 |
31 |
--------------------------------------------------------------------------------
/webpack/demo.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | var config = {
5 | entry: [path.resolve(__dirname, '../demo.js')],
6 | output: {
7 | path: path.resolve(__dirname, '../demo'),
8 | filename: 'AbsoluteGrid.js'
9 | },
10 | plugins: [
11 | new webpack.DefinePlugin({
12 | 'process.env': {
13 | NODE_ENV: JSON.stringify('production')
14 | }
15 | }),
16 | new webpack.optimize.UglifyJsPlugin()
17 | ],
18 | module: {
19 | loaders: [{
20 | test: /\.jsx?$/, // A regexp to test the require path. accepts either js or jsx
21 | loader: 'babel' // The module to load. "babel" is short for "babel-loader"
22 | }]
23 | }
24 | };
25 |
26 | module.exports = config;
27 |
--------------------------------------------------------------------------------
/webpack/dev.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | var config = {
4 | entry: ['webpack/hot/dev-server', path.resolve(__dirname, '../demo.js')],
5 | output: {
6 | path: path.resolve(__dirname, '../demo'),
7 | filename: 'AbsoluteGrid.js'
8 | },
9 | module: {
10 | loaders: [{
11 | test: /\.jsx?$/, // A regexp to test the require path. accepts either js or jsx
12 | loader: 'babel' // The module to load. "babel" is short for "babel-loader"
13 | }]
14 | }
15 | };
16 |
17 | module.exports = config;
18 |
--------------------------------------------------------------------------------