this.changeItemSize(id)}
56 | />
57 | ))}
58 |
59 | );
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/docs/js/pages/Home.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable class-methods-use-this */
2 | /* eslint-disable react/prop-types */
3 | /* eslint-disable jsx-a11y/no-static-element-interactions */
4 | /* eslint-disable jsx-a11y/click-events-have-key-events */
5 | import React, { Component } from 'react';
6 | import StackGrid, { transitions, easings } from '../../../src/';
7 | import DemoControl from '../components/DemoControl';
8 |
9 | const itemModifier = [
10 | 'pattern1',
11 | 'pattern2',
12 | 'pattern3',
13 | 'gray',
14 | 'gray-light',
15 | 'gray-dark',
16 | 'yellow',
17 | 'pink',
18 | 'purple',
19 | ];
20 |
21 | export default class Home extends Component {
22 | constructor(props) {
23 | super(props);
24 |
25 | const items = [];
26 |
27 | for (let i = 0; i < 10; i += 1) {
28 | items.push(this.createItem());
29 | }
30 |
31 | this.state = {
32 | items,
33 | duration: 480,
34 | columnWidth: 150,
35 | gutter: 5,
36 | easing: easings.quartOut,
37 | transition: 'fadeDown',
38 | rtl: false,
39 | };
40 | }
41 |
42 | createItem() {
43 | const id = Math.random().toString(36).substr(2, 9);
44 | const height = Math.floor((Math.random() * (300 - 80)) + 80);
45 | const modifier = itemModifier[Math.floor(Math.random() * itemModifier.length)];
46 |
47 | return { id, height, modifier };
48 | }
49 |
50 | shuffleItems = () => {
51 | const newItems = [...this.state.items];
52 | let i = newItems.length;
53 |
54 | while (i) {
55 | const j = Math.floor(Math.random() * i);
56 | const t = newItems[--i]; // eslint-disable-line no-plusplus
57 | newItems[i] = newItems[j];
58 | newItems[j] = t;
59 | }
60 |
61 | this.setState({ items: newItems });
62 | }
63 |
64 | prependItem = () => {
65 | this.setState({
66 | items: [this.createItem(), ...this.state.items],
67 | });
68 | }
69 |
70 | appendItem = () => {
71 | this.setState({
72 | items: [...this.state.items, this.createItem()],
73 | });
74 | }
75 |
76 | multipleAppendItem = () => {
77 | const newItems = [];
78 |
79 | for (let i = 0; i < 5; i += 1) {
80 | newItems.push(this.createItem());
81 | }
82 |
83 | this.setState({
84 | items: [...this.state.items, ...newItems],
85 | });
86 | }
87 |
88 | removeItem = (id) => {
89 | this.setState({
90 | items: this.state.items.filter(o => o.id !== id),
91 | });
92 | }
93 |
94 | handleDurationChange = (duration) => {
95 | this.setState({ duration });
96 | }
97 |
98 | handleColumnWidthChange = (columnWidth) => {
99 | this.setState({ columnWidth });
100 | }
101 |
102 | handleGutterChange = (gutter) => {
103 | this.setState({ gutter });
104 | }
105 |
106 | handleEasingChange = (easing) => {
107 | this.setState({ easing });
108 | }
109 |
110 | handleTransitionChange = (transition) => {
111 | this.setState({ transition });
112 | }
113 |
114 | handleRTLChange = (rtl) => {
115 | this.setState({ rtl });
116 | }
117 |
118 | render() {
119 | const {
120 | items,
121 | duration,
122 | columnWidth,
123 | gutter,
124 | easing,
125 | transition: transitionSelect,
126 | rtl,
127 | } = this.state;
128 |
129 | const transition = transitions[transitionSelect];
130 | return (
131 |
132 |
150 |
151 |
{
164 | console.log('[DEMO] `onLayout()` has been called.'); // eslint-disable-line
165 | }}
166 | >
167 | {items.map(item =>
168 | ( this.removeItem(item.id)}
173 | />)
174 | )}
175 |
176 |
177 | );
178 | }
179 | }
180 |
--------------------------------------------------------------------------------
/docs/js/pages/HorizontalFlow.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable class-methods-use-this */
2 | /* eslint-disable react/prop-types */
3 | /* eslint-disable jsx-a11y/no-static-element-interactions */
4 | /* eslint-disable jsx-a11y/click-events-have-key-events */
5 | import React, { Component } from 'react';
6 | import StackGrid, { transitions, easings } from '../../../src/';
7 | import DemoControl from '../components/DemoControl';
8 |
9 | const itemModifier = [
10 | 'pattern1',
11 | 'pattern2',
12 | 'pattern3',
13 | 'gray',
14 | 'gray-light',
15 | 'gray-dark',
16 | 'yellow',
17 | 'pink',
18 | 'purple',
19 | ];
20 |
21 | export default class HorizontalFlow extends Component {
22 | constructor(props) {
23 | super(props);
24 |
25 | const items = [];
26 |
27 | for (let i = 0; i < 10; i += 1) {
28 | items.push(this.createItem());
29 | }
30 |
31 | this.state = {
32 | items,
33 | duration: 480,
34 | columnWidth: 150,
35 | gutter: 5,
36 | easing: easings.quartOut,
37 | transition: 'fadeDown',
38 | };
39 | }
40 |
41 | createItem() {
42 | const id = Math.random().toString(36).substr(2, 9);
43 | const height = Math.floor((Math.random() * (300 - 80)) + 80);
44 | const modifier = itemModifier[Math.floor(Math.random() * itemModifier.length)];
45 |
46 | return { id, height, modifier };
47 | }
48 |
49 | shuffleItems = () => {
50 | const newItems = [...this.state.items];
51 | let i = newItems.length;
52 |
53 | while (i) {
54 | const j = Math.floor(Math.random() * i);
55 | const t = newItems[--i]; // eslint-disable-line no-plusplus
56 | newItems[i] = newItems[j];
57 | newItems[j] = t;
58 | }
59 |
60 | this.setState({ items: newItems });
61 | }
62 |
63 | prependItem = () => {
64 | this.setState({
65 | items: [this.createItem(), ...this.state.items],
66 | });
67 | }
68 |
69 | appendItem = () => {
70 | this.setState({
71 | items: [...this.state.items, this.createItem()],
72 | });
73 | }
74 |
75 | multipleAppendItem = () => {
76 | const newItems = [];
77 |
78 | for (let i = 0; i < 5; i += 1) {
79 | newItems.push(this.createItem());
80 | }
81 |
82 | this.setState({
83 | items: [...this.state.items, ...newItems],
84 | });
85 | }
86 |
87 | removeItem = (id) => {
88 | this.setState({
89 | items: this.state.items.filter(o => o.id !== id),
90 | });
91 | }
92 |
93 | handleDurationChange = (duration) => {
94 | this.setState({ duration });
95 | }
96 |
97 | handleColumnWidthChange = (columnWidth) => {
98 | this.setState({ columnWidth });
99 | }
100 |
101 | handleGutterChange = (gutter) => {
102 | this.setState({ gutter });
103 | }
104 |
105 | handleEasingChange = (easing) => {
106 | this.setState({ easing });
107 | }
108 |
109 | handleTransitionChange = (transition) => {
110 | this.setState({ transition });
111 | }
112 |
113 | render() {
114 | const {
115 | items,
116 | duration,
117 | columnWidth,
118 | gutter,
119 | easing,
120 | transition: transitionSelect,
121 | } = this.state;
122 |
123 | const transition = transitions[transitionSelect];
124 |
125 | return (
126 |
127 |
143 |
144 |
{
157 | console.log('[DEMO] `onLayout()` has been called.'); // eslint-disable-line
158 | }}
159 | >
160 | {items.map(item =>
161 | ( this.removeItem(item.id)}
166 | />)
167 | )}
168 |
169 |
170 | );
171 | }
172 | }
173 |
--------------------------------------------------------------------------------
/docs/js/pages/RealWorld.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react';
3 | import StackGrid, { transitions, easings } from '../../../src/';
4 |
5 |
6 | const transition = transitions.scaleDown;
7 |
8 | const images = [
9 | { src: './images/photos/photo01.jpg', label: 'Sample image 1' },
10 | { src: './images/photos/photo02.jpg', label: 'Sample image 2' },
11 | { src: './images/photos/photo03.jpg', label: 'Sample image 3' },
12 | { src: './images/photos/photo04.jpg', label: 'Sample image 4' },
13 | { src: './images/photos/photo05.jpg', label: 'Sample image 5' },
14 | { src: './images/photos/photo06.jpg', label: 'Sample image 6' },
15 | { src: './images/photos/photo07.jpg', label: 'Sample image 7' },
16 | { src: './images/photos/photo08.jpg', label: 'Sample image 8' },
17 | { src: './images/photos/photo09.jpg', label: 'Sample image 9' },
18 | { src: './images/photos/photo10.jpg', label: 'Sample image 10' },
19 | { src: './images/photos/photo11.jpg', label: 'Sample image 11' },
20 | { src: './images/photos/photo12.jpg', label: 'Sample image 12' },
21 | { src: './images/photos/photo13.jpg', label: 'Sample image 13' },
22 | { src: './images/photos/photo14.jpg', label: 'Sample image 14' },
23 | { src: './images/photos/photo15.jpg', label: 'Sample image 15' },
24 | { src: './images/photos/photo16.jpg', label: 'Sample image 16' },
25 | { src: './images/photos/photo17.jpg', label: 'Sample image 17' },
26 | { src: './images/photos/photo18.jpg', label: 'Sample image 18' },
27 | { src: './images/photos/photo19.jpg', label: 'Sample image 19' },
28 | { src: './images/photos/photo20.jpg', label: 'Sample image 20' },
29 | { src: './images/photos/photo21.jpg', label: 'Sample image 21' },
30 | { src: './images/photos/photo22.jpg', label: 'Sample image 22' },
31 | ];
32 |
33 |
34 | const RealWorld = () => (
35 |
49 | {images.map(obj => (
50 |
54 | 
55 | {obj.label}
56 |
57 | ))}
58 |
59 | );
60 |
61 | export default RealWorld;
62 |
--------------------------------------------------------------------------------
/docs/js/routes.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import React from 'react';
3 | import { Route, IndexRoute } from 'react-router';
4 | import App from './App';
5 | import Home from './pages/Home';
6 | import ChangeSize from './pages/ChangeSize';
7 | import RealWorld from './pages/RealWorld';
8 | import HorizontalFlow from './pages/HorizontalFlow';
9 |
10 | const routes = () => (
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 |
19 | export default routes;
20 |
--------------------------------------------------------------------------------
/docs/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: [
6 | 'react-hot-loader/patch',
7 | 'webpack-dev-server/client?http://localhost:3000',
8 | 'webpack/hot/only-dev-server',
9 | path.resolve(__dirname, 'js/index.js'),
10 | ],
11 |
12 | output: {
13 | filename: 'bundle.js',
14 | path: __dirname,
15 | publicPath: '/',
16 | },
17 |
18 | devtool: 'inline-source-map',
19 |
20 | module: {
21 | rules: [
22 | {
23 | test: /\.jsx?$/,
24 | use: [
25 | 'react-hot-loader/webpack',
26 | 'babel-loader',
27 | ],
28 | exclude: /node_modules/,
29 | },
30 | ],
31 | },
32 |
33 | plugins: [
34 | new webpack.HotModuleReplacementPlugin(),
35 | new webpack.NamedModulesPlugin(),
36 | new webpack.NoEmitOnErrorsPlugin(),
37 | ],
38 |
39 | devServer: {
40 | contentBase: __dirname,
41 | host: '0.0.0.0',
42 | port: 3000,
43 | historyApiFallback: true,
44 | hot: true,
45 | },
46 | };
47 |
--------------------------------------------------------------------------------
/docs/webpack.config.production.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: [
6 | path.resolve(__dirname, 'js/index.js'),
7 | ],
8 |
9 | output: {
10 | filename: 'bundle.js',
11 | path: __dirname,
12 | publicPath: '/',
13 | },
14 |
15 | devtool: false,
16 |
17 | module: {
18 | rules: [
19 | {
20 | test: /\.jsx?$/,
21 | use: [
22 | 'babel-loader',
23 | ],
24 | exclude: /node_modules/,
25 | },
26 | ],
27 | },
28 |
29 | plugins: [
30 | new webpack.NamedModulesPlugin(),
31 | new webpack.LoaderOptionsPlugin({
32 | minimize: true,
33 | debug: false,
34 | }),
35 | new webpack.DefinePlugin({
36 | 'process.env.NODE_ENV': JSON.stringify('production'),
37 | }),
38 | new webpack.optimize.UglifyJsPlugin({
39 | beautify: false,
40 | mangle: {
41 | screw_ie8: true,
42 | keep_fnames: true,
43 | },
44 | compress: {
45 | screw_ie8: true,
46 | },
47 | comments: false,
48 | }),
49 | ],
50 | };
51 |
--------------------------------------------------------------------------------
/jest/setup.js:
--------------------------------------------------------------------------------
1 | global.window.requestAnimationFrame = callback => (
2 | setTimeout(callback, 1)
3 | );
4 |
5 | global.window.cancelAnimationFrame = () => {};
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-stack-grid",
3 | "version": "0.7.1",
4 | "description": "Pinterest like layout components for React.js",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "start": "npm run docs",
8 | "clean": "rimraf lib",
9 | "build": "babel src/ -d lib/ --ignore \"**/__tests__/*\"",
10 | "test": "npm run test:lint && npm run test:typecheck && npm run test:unit",
11 | "test:lint": "eslint \"src/**/*.js\" \"docs/js/**/*.js\"",
12 | "test:typecheck": "flow",
13 | "test:unit": "jest",
14 | "test:watch": "npm run test:unit -- --watch",
15 | "docs": "webpack-dev-server --config docs/webpack.config.js",
16 | "docs:build": "webpack -p --config docs/webpack.config.production.js",
17 | "docs:deploy": "npm run docs:build && gh-pages -d docs",
18 | "prebuild": "npm run clean",
19 | "prepublish": "npm run build"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "git+https://github.com/tsuyoshiwada/react-stack-grid.git"
24 | },
25 | "keywords": [
26 | "react",
27 | "react-component",
28 | "layout",
29 | "grid",
30 | "pinterest",
31 | "masonry"
32 | ],
33 | "author": "tsuyoshiwada",
34 | "license": "MIT",
35 | "bugs": {
36 | "url": "https://github.com/tsuyoshiwada/react-stack-grid/issues"
37 | },
38 | "homepage": "https://github.com/tsuyoshiwada/react-stack-grid#readme",
39 | "files": [
40 | "lib",
41 | "test"
42 | ],
43 | "browserify": {
44 | "transform": [
45 | "babelify"
46 | ]
47 | },
48 | "devDependencies": {
49 | "babel-cli": "^6.18.0",
50 | "babel-eslint": "^8.0.3",
51 | "babel-jest": "^21.2.0",
52 | "babel-loader": "^7.1.1",
53 | "babel-preset-es2015": "^6.18.0",
54 | "babel-preset-flow": "^6.23.0",
55 | "babel-preset-power-assert": "^1.0.0",
56 | "babel-preset-react": "^6.16.0",
57 | "babel-preset-stage-1": "^6.16.0",
58 | "babel-register": "^6.18.0",
59 | "enzyme": "^2.9.1",
60 | "eslint": "^4.2.0",
61 | "eslint-config-airbnb": "^16.1.0",
62 | "eslint-plugin-babel": "^4.0.0",
63 | "eslint-plugin-flowtype": "^2.34.0",
64 | "eslint-plugin-flowtype-errors": "^3.3.0",
65 | "eslint-plugin-import": "^2.3.0",
66 | "eslint-plugin-jest": "^21.4.2",
67 | "eslint-plugin-jsx-a11y": "^6.0.2",
68 | "eslint-plugin-react": "^7.0.1",
69 | "flow-bin": "^0.50.0",
70 | "gh-pages": "^1.0.0",
71 | "jest": "^21.2.1",
72 | "rc-slider": "^8.2.0",
73 | "react": "^15.5.4",
74 | "react-addons-test-utils": "^15.6.0",
75 | "react-dom": "^15.5.4",
76 | "react-hot-loader": "^3.1.3",
77 | "react-router": "^3.0.0",
78 | "react-test-renderer": "^15.6.1",
79 | "rimraf": "^2.6.1",
80 | "sinon": "^2.3.2",
81 | "webpack": "^3.3.0",
82 | "webpack-dev-server": "^2.5.1"
83 | },
84 | "peerDependencies": {
85 | "react": ">=15.3.0",
86 | "react-dom": ">=15.3.0"
87 | },
88 | "dependencies": {
89 | "easy-css-transform-builder": "^0.0.2",
90 | "exenv": "^1.2.1",
91 | "imagesloaded": "^4.1.1",
92 | "inline-style-prefixer": "^3.0.6",
93 | "invariant": "^2.2.2",
94 | "prop-types": "^15.5.10",
95 | "react-sizeme": "^2.2.0",
96 | "react-transition-group": "^1.2.0",
97 | "shallowequal": "^1.0.1"
98 | },
99 | "jest": {
100 | "testMatch": [
101 | "**/?(*.)spec.js"
102 | ],
103 | "testPathIgnorePatterns": [
104 | "/node_modules/",
105 | "/lib/"
106 | ],
107 | "setupFiles": [
108 | "./jest/setup.js"
109 | ]
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/animations/easings.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | // http://easings.net/
3 | export const linear = 'linear';
4 | export const easeIn = 'ease-in';
5 | export const easeOut = 'ease-out';
6 | export const easeInOut = 'ease-in-out';
7 | export const sineIn = 'cubic-bezier(0.47, 0, 0.745, 0.715)';
8 | export const sineOut = 'cubic-bezier(0.39, 0.575, 0.565, 1)';
9 | export const sineInOut = 'cubic-bezier(0.445, 0.05, 0.55, 0.95)';
10 | export const quadIn = 'cubic-bezier(0.55, 0.085, 0.68, 0.53)';
11 | export const quadOut = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
12 | export const quadInOut = 'cubic-bezier(0.455, 0.03, 0.515, 0.955)';
13 | export const cubicIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
14 | export const cubicOut = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
15 | export const cubicInOut = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
16 | export const quartIn = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
17 | export const quartOut = 'cubic-bezier(0.165, 0.84, 0.44, 1)';
18 | export const quartInOut = 'cubic-bezier(0.77, 0, 0.175, 1)';
19 | export const quintIn = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
20 | export const quintOut = 'cubic-bezier(0.23, 1, 0.32, 1)';
21 | export const quintInOut = 'cubic-bezier(0.86, 0, 0.07, 1)';
22 | export const expoIn = 'cubic-bezier(0.95, 0.05, 0.795, 0.035)';
23 | export const expoOut = 'cubic-bezier(0.19, 1, 0.22, 1)';
24 | export const expoInOut = 'cubic-bezier(1, 0, 0, 1)';
25 | export const circIn = 'cubic-bezier(0.6, 0.04, 0.98, 0.335)';
26 | export const circOut = 'cubic-bezier(0.075, 0.82, 0.165, 1)';
27 | export const circInOut = 'cubic-bezier(0.785, 0.135, 0.15, 0.86)';
28 | export const backIn = 'cubic-bezier(0.6, -0.28, 0.735, 0.045)';
29 | export const backOut = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';
30 | export const backInOut = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';
31 |
--------------------------------------------------------------------------------
/src/animations/request-animation-frame.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import ExecutionEnvironment from 'exenv';
3 |
4 | const vendors = ['ms', 'moz', 'webkit'];
5 | let tmpRaf = null;
6 | let tmpCaf = null;
7 |
8 | if (ExecutionEnvironment.canUseDOM) {
9 | tmpRaf = window.requestAnimationFrame;
10 | tmpCaf = window.cancelAnimationFrame;
11 |
12 | // eslint-disable-next-line no-plusplus
13 | for (let x = 0; x < vendors.length && !tmpRaf; ++x) {
14 | tmpRaf = window[`${vendors[x]}RequestAnimationFrame`];
15 | tmpCaf = window[`${vendors[x]}CancelAnimationFrame`] ||
16 | window[`${vendors[x]}CancelRequestAnimationFrame`];
17 | }
18 | } else {
19 | tmpRaf = (callback: Function): number => callback();
20 | tmpCaf = (id: number): void => {}; // eslint-disable-line no-unused-vars
21 | }
22 |
23 | export const raf = tmpRaf;
24 | export const caf = tmpCaf;
25 |
--------------------------------------------------------------------------------
/src/animations/transitions/fade-down.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import type { Rect } from '../../types';
3 |
4 | export const appear = (rect: Rect) => ({
5 | translateY: rect.top - 10,
6 | opacity: 0,
7 | });
8 |
9 | export const appeared = () => ({ opacity: 1 });
10 |
11 | export const enter = appeared;
12 |
13 | export const entered = appeared;
14 |
15 | export const leaved = (rect: Rect) => ({
16 | translateY: rect.top + 10,
17 | opacity: 0,
18 | });
19 |
--------------------------------------------------------------------------------
/src/animations/transitions/fade-up.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import type { Rect } from '../../types/';
3 |
4 | export const appear = (rect: Rect) => ({
5 | translateY: rect.top + 10,
6 | opacity: 0,
7 | });
8 |
9 | export const appeared = () => ({ opacity: 1 });
10 |
11 | export const enter = appeared;
12 |
13 | export const entered = appeared;
14 |
15 | export const leaved = appear;
16 |
--------------------------------------------------------------------------------
/src/animations/transitions/fade.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | export const appear = () => ({ opacity: 0 });
3 |
4 | export const appeared = () => ({ opacity: 1 });
5 |
6 | export const enter = appear;
7 |
8 | export const entered = appeared;
9 |
10 | export const leaved = appear;
11 |
--------------------------------------------------------------------------------
/src/animations/transitions/flip.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | const common = {
3 | perspective: 1000,
4 | transformStyle: 'preserve-3d',
5 | backfaceVisibility: 'hidden',
6 | };
7 |
8 | export const appear = () => ({
9 | ...common,
10 | rotateX: -180,
11 | opacity: 0,
12 | });
13 |
14 | export const appeared = () => ({
15 | ...common,
16 | rotateX: 0,
17 | opacity: 1,
18 | });
19 |
20 | export const enter = appeared;
21 |
22 | export const entered = appeared;
23 |
24 | export const leaved = appear;
25 |
--------------------------------------------------------------------------------
/src/animations/transitions/helix.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import type { Rect } from '../../types/';
3 |
4 | const common = {
5 | transformStyle: 'preserve-3d',
6 | backfaceVisibility: 'hidden',
7 | };
8 |
9 | export const appear = (rect: Rect) => ({
10 | ...common,
11 | perspective: rect.height,
12 | rotateY: -180,
13 | opacity: 0,
14 | });
15 |
16 | export const appeared = () => ({
17 | ...common,
18 | perspective: 0,
19 | rotateY: 0,
20 | opacity: 1,
21 | });
22 |
23 | export const enter = appeared;
24 |
25 | export const entered = appeared;
26 |
27 | export const leaved = (rect: Rect) => ({
28 | ...common,
29 | perspective: rect.height,
30 | rotateY: 180,
31 | opacity: 0,
32 | });
33 |
--------------------------------------------------------------------------------
/src/animations/transitions/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | export * as fade from './fade';
3 | export * as fadeDown from './fade-down';
4 | export * as fadeUp from './fade-up';
5 | export * as scaleDown from './scale-down';
6 | export * as scaleUp from './scale-up';
7 | export * as flip from './flip';
8 | export * as helix from './helix';
9 |
--------------------------------------------------------------------------------
/src/animations/transitions/scale-down.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | export const appear = () => ({
3 | scale: 1.1,
4 | opacity: 0,
5 | });
6 |
7 | export const appeared = () => ({
8 | scale: 1,
9 | opacity: 1,
10 | });
11 |
12 | export const enter = appear;
13 |
14 | export const entered = appeared;
15 |
16 | export const leaved = () => ({
17 | scale: 0.95,
18 | opacity: 0,
19 | });
20 |
--------------------------------------------------------------------------------
/src/animations/transitions/scale-up.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | export const appear = () => ({
3 | scale: 0.9,
4 | opacity: 0,
5 | });
6 |
7 | export const appeared = () => ({
8 | scale: 1,
9 | opacity: 1,
10 | });
11 |
12 | export const enter = appear;
13 |
14 | export const entered = appeared;
15 |
16 | export const leaved = () => ({
17 | scale: 1.05,
18 | opacity: 0,
19 | });
20 |
--------------------------------------------------------------------------------
/src/components/GridItem.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import shallowequal from 'shallowequal';
5 | import { transition, buildStyles } from '../utils/style-helper';
6 | import { raf } from '../animations/request-animation-frame';
7 |
8 | import type { Units, Rect } from '../types/';
9 |
10 | type Props = {
11 | itemKey: string;
12 | index: number;
13 | component: string,
14 | rect: Rect;
15 | containerSize: {
16 | width: number;
17 | height: number;
18 | actualWidth: number;
19 | };
20 | duration: number;
21 | easing: string;
22 | appearDelay: number;
23 | appear: Function;
24 | appeared: Function;
25 | enter: Function;
26 | entered: Function;
27 | leaved: Function;
28 | units: Units;
29 | vendorPrefix: boolean;
30 | userAgent: ?string;
31 | onMounted: Function;
32 | onUnmount: Function;
33 | rtl: boolean;
34 | };
35 |
36 | type State = Object;
37 |
38 | const getTransitionStyles = (type: string, props: Props): Object => {
39 | const { rect, containerSize, index } = props;
40 |
41 | return props[type](rect, containerSize, index);
42 | };
43 |
44 | const getPositionStyles = (rect: Rect, zIndex: number, rtl: boolean): Object => ({
45 | translateX: `${rtl ? -Math.round(rect.left) : Math.round(rect.left)}px`,
46 | translateY: `${Math.round(rect.top)}px`,
47 | zIndex,
48 | });
49 |
50 |
51 | export default class GridItem extends Component {
52 | props: Props;
53 | state: State;
54 | node: ?HTMLElement;
55 | mounted: boolean;
56 | appearTimer: ?number;
57 |
58 | static propTypes = {
59 | itemKey: PropTypes.string,
60 | index: PropTypes.number,
61 | component: PropTypes.string,
62 | rect: PropTypes.shape({
63 | top: PropTypes.number,
64 | left: PropTypes.number,
65 | width: PropTypes.number,
66 | height: PropTypes.number,
67 | }),
68 | containerSize: PropTypes.shape({
69 | width: PropTypes.number,
70 | height: PropTypes.number,
71 | actualWidth: PropTypes.number,
72 | }),
73 | duration: PropTypes.number,
74 | easing: PropTypes.string,
75 | appearDelay: PropTypes.number,
76 | appear: PropTypes.func,
77 | appeared: PropTypes.func,
78 | enter: PropTypes.func,
79 | entered: PropTypes.func,
80 | leaved: PropTypes.func,
81 | units: PropTypes.shape({
82 | length: PropTypes.string,
83 | angle: PropTypes.string,
84 | }),
85 | vendorPrefix: PropTypes.bool,
86 | userAgent: PropTypes.string,
87 | onMounted: PropTypes.func,
88 | onUnmount: PropTypes.func,
89 | rtl: PropTypes.bool,
90 | };
91 |
92 | constructor(props: Props) {
93 | super(props);
94 |
95 | this.mounted = false;
96 | this.appearTimer = null;
97 | this.node = null;
98 |
99 | this.state = {
100 | ...getPositionStyles(props.rect, 1, props.rtl),
101 | ...getTransitionStyles('appear', props),
102 | };
103 | }
104 |
105 | componentDidMount() {
106 | this.mounted = true;
107 | this.props.onMounted(this);
108 | }
109 |
110 | componentWillUnmount() {
111 | this.mounted = false;
112 | clearTimeout(this.appearTimer);
113 | this.appearTimer = null;
114 | this.props.onUnmount(this);
115 | }
116 |
117 | componentWillReceiveProps(nextProps: Props) {
118 | if (!shallowequal(nextProps, this.props)) {
119 | raf(() => {
120 | this.setStateIfNeeded({
121 | ...this.state,
122 | ...getPositionStyles(nextProps.rect, 2, nextProps.rtl),
123 | });
124 | });
125 | }
126 | }
127 |
128 | shouldComponentUpdate(nextProps: Props, nextState: State) {
129 | return (
130 | !shallowequal(nextProps, this.props) ||
131 | !shallowequal(nextState, this.state)
132 | );
133 | }
134 |
135 | componentWillAppear(callback: Function) {
136 | this.appearTimer = setTimeout(callback, this.props.appearDelay * this.props.index);
137 | }
138 |
139 | componentDidAppear() {
140 | this.setAppearedStyles();
141 | }
142 |
143 | componentWillEnter(callback: Function) {
144 | this.setEnterStyles();
145 | this.forceUpdate(callback);
146 | }
147 |
148 | componentDidEnter() {
149 | this.setEnteredStyles();
150 | }
151 |
152 | componentWillLeave(callback: Function) {
153 | this.setLeaveStyles();
154 | setTimeout(callback, this.props.duration);
155 | }
156 |
157 | setStateIfNeeded(state: Object) {
158 | if (this.mounted) {
159 | this.setState(state);
160 | }
161 | }
162 |
163 | setAppearedStyles() {
164 | this.setStateIfNeeded({
165 | ...this.state,
166 | ...getTransitionStyles('appeared', this.props),
167 | ...getPositionStyles(this.props.rect, 1, this.props.rtl),
168 | });
169 | }
170 |
171 | setEnterStyles() {
172 | this.setStateIfNeeded({
173 | ...this.state,
174 | ...getPositionStyles(this.props.rect, 2, this.props.rtl),
175 | ...getTransitionStyles('enter', this.props),
176 | });
177 | }
178 |
179 | setEnteredStyles() {
180 | this.setStateIfNeeded({
181 | ...this.state,
182 | ...getTransitionStyles('entered', this.props),
183 | ...getPositionStyles(this.props.rect, 1, this.props.rtl),
184 | });
185 | }
186 |
187 | setLeaveStyles() {
188 | this.setStateIfNeeded({
189 | ...this.state,
190 | ...getPositionStyles(this.props.rect, 2, this.props.rtl),
191 | ...getTransitionStyles('leaved', this.props),
192 | });
193 | }
194 |
195 | render() {
196 | const {
197 | /* eslint-disable no-unused-vars */
198 | index,
199 | component: Element,
200 | containerSize,
201 | appearDelay,
202 | appear,
203 | appeared,
204 | enter,
205 | entered,
206 | leaved,
207 | onMounted,
208 | onUnmount,
209 | itemKey,
210 | /* eslint-enable no-unused-vars */
211 | rect,
212 | duration,
213 | easing,
214 | units,
215 | vendorPrefix,
216 | userAgent,
217 | rtl,
218 | ...rest
219 | } = this.props;
220 |
221 | const style = buildStyles({
222 | ...this.state,
223 | display: 'block',
224 | position: 'absolute',
225 | top: 0,
226 | ...(rtl ? { right: 0 } : { left: 0 }),
227 | width: rect.width,
228 | transition: transition(['opacity', 'transform'], duration, easing),
229 | }, units, vendorPrefix, userAgent);
230 |
231 | /* eslint-disable no-return-assign */
232 | return (
233 | this.node = node}
236 | style={style}
237 | />
238 | );
239 | /* eslint-enable no-return-assign */
240 | }
241 | }
242 |
--------------------------------------------------------------------------------
/src/components/StackGrid.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component, isValidElement } from 'react';
3 | import ReactDOM from 'react-dom';
4 | import PropTypes from 'prop-types';
5 | import TransitionGroup from 'react-transition-group/TransitionGroup';
6 | import sizeMe from 'react-sizeme';
7 | import shallowequal from 'shallowequal';
8 | import ExecutionEnvironment from 'exenv';
9 | import invariant from 'invariant';
10 | import GridItem from './GridItem';
11 | import { transition } from '../utils/style-helper';
12 | import { raf } from '../animations/request-animation-frame';
13 | import * as easings from '../animations/easings';
14 | import * as transitions from '../animations/transitions/';
15 |
16 | import type { Units } from '../types/';
17 |
18 | const imagesLoaded = ExecutionEnvironment.canUseDOM ? require('imagesloaded') : null;
19 |
20 |
21 | const isNumber = (v: any): boolean => typeof v === 'number' && isFinite(v); // eslint-disable-line no-restricted-globals
22 | const isPercentageNumber = (v: any): boolean => typeof v === 'string' && /^\d+(\.\d+)?%$/.test(v);
23 |
24 | // eslint-disable-next-line arrow-parens
25 | const createArray = (v: T, l: number): T[] => {
26 | const array = [];
27 | for (let i = 0; i < l; i += 1) array.push(v);
28 | return array;
29 | };
30 |
31 | /* eslint-disable consistent-return */
32 | const getColumnLengthAndWidth = (
33 | width: number,
34 | value: number | string,
35 | gutter: number
36 | ): [number, number] => {
37 | if (isNumber(value)) {
38 | const columnWidth = parseFloat(value);
39 |
40 | return [
41 | Math.floor((width - (((width / columnWidth) - 1) * gutter)) / columnWidth),
42 | columnWidth,
43 | ];
44 | } else if (isPercentageNumber(value)) {
45 | const columnPercentage = parseFloat(value) / 100;
46 | const maxColumn = Math.floor(1 / columnPercentage);
47 | const columnWidth = (width - (gutter * (maxColumn - 1))) / maxColumn;
48 |
49 | return [
50 | maxColumn,
51 | columnWidth,
52 | ];
53 | }
54 |
55 | invariant(false, 'Should be columnWidth is a number or percentage string.');
56 | };
57 | /* eslint-enable consistent-return */
58 |
59 |
60 | type Props = {
61 | children: React$Element;
62 | className?: string;
63 | style: Object;
64 | gridRef?: Function;
65 | component: string;
66 | itemComponent: string;
67 | columnWidth: number | string;
68 | gutterWidth: number;
69 | gutterHeight: number;
70 | duration: number;
71 | easing: string;
72 | appearDelay: number;
73 | appear: Function;
74 | appeared: Function;
75 | enter: Function;
76 | entered: Function;
77 | leaved: Function;
78 | units: Units;
79 | monitorImagesLoaded: boolean;
80 | vendorPrefix: boolean;
81 | userAgent: ?string;
82 | enableSSR: boolean;
83 | onLayout: Function;
84 | horizontal: boolean;
85 | rtl: boolean;
86 | };
87 |
88 | type InlineState = {
89 | rects: Array<{
90 | top: number;
91 | left: number;
92 | width: number;
93 | height: number;
94 | }>;
95 | actualWidth: number;
96 | height: number;
97 | columnWidth: number;
98 | };
99 |
100 | type InlineProps = Props & {
101 | refCallback: Function;
102 | size: {
103 | width: number;
104 | height: number;
105 | }
106 | };
107 |
108 | /* eslint-disable react/no-unused-prop-types */
109 | const propTypes = {
110 | children: PropTypes.node,
111 | className: PropTypes.string,
112 | style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
113 | gridRef: PropTypes.func,
114 | component: PropTypes.string,
115 | itemComponent: PropTypes.string,
116 | columnWidth: PropTypes.oneOfType([
117 | PropTypes.number,
118 | PropTypes.string,
119 | ]).isRequired,
120 | gutterWidth: PropTypes.number,
121 | gutterHeight: PropTypes.number,
122 | duration: PropTypes.number,
123 | easing: PropTypes.string,
124 | appearDelay: PropTypes.number,
125 | appear: PropTypes.func,
126 | appeared: PropTypes.func,
127 | enter: PropTypes.func,
128 | entered: PropTypes.func,
129 | leaved: PropTypes.func,
130 | units: PropTypes.shape({
131 | length: PropTypes.string,
132 | angle: PropTypes.string,
133 | }),
134 | monitorImagesLoaded: PropTypes.bool,
135 | vendorPrefix: PropTypes.bool,
136 | userAgent: PropTypes.string,
137 | enableSSR: PropTypes.bool,
138 | onLayout: PropTypes.func,
139 | horizontal: PropTypes.bool,
140 | rtl: PropTypes.bool,
141 | };
142 | /* eslint-enable react/no-unused-prop-types */
143 |
144 | export class GridInline extends Component {
145 | props: InlineProps;
146 | state: InlineState;
147 | items: { [key: string]: GridItem; };
148 | imgLoad: Object;
149 | mounted: boolean;
150 |
151 | static propTypes = {
152 | ...propTypes,
153 | size: PropTypes.shape({
154 | width: PropTypes.number,
155 | height: PropTypes.number,
156 | }),
157 | };
158 |
159 | constructor(props: InlineProps) {
160 | super(props);
161 |
162 | this.items = {};
163 | this.imgLoad = {};
164 | this.mounted = false;
165 | this.state = this.doLayout(props);
166 | }
167 |
168 | componentDidMount() {
169 | this.mounted = true;
170 | this.updateLayout(this.props);
171 | }
172 |
173 | componentWillReceiveProps(nextProps: InlineProps) {
174 | if (!shallowequal(nextProps, this.props)) {
175 | this.updateLayout(nextProps);
176 | }
177 | }
178 |
179 | shouldComponentUpdate(nextProps: InlineProps, nextState: InlineState) {
180 | return (
181 | !shallowequal(nextProps, this.props) ||
182 | !shallowequal(nextState, this.state)
183 | );
184 | }
185 |
186 | componentWillUnmount() {
187 | this.mounted = false;
188 | }
189 |
190 | setStateIfNeeded(state: Object) {
191 | if (this.mounted) {
192 | this.setState(state);
193 | }
194 | }
195 |
196 | getItemHeight(item: any): number {
197 | if (item.key && this.items.hasOwnProperty(item.key)) {
198 | const component = this.items[item.key];
199 | const el = (ReactDOM.findDOMNode(component): any);
200 | const candidate = [el.scrollHeight, el.clientHeight, el.offsetHeight, 0].filter(isNumber);
201 |
202 | return Math.max(...candidate);
203 | }
204 |
205 | return 0;
206 | }
207 |
208 |
209 | doLayout(props: InlineProps): InlineState {
210 | if (!ExecutionEnvironment.canUseDOM) {
211 | return this.doLayoutForSSR(props);
212 | }
213 |
214 | const results = this.doLayoutForClient(props);
215 |
216 | if (this.mounted && typeof this.props.onLayout === 'function') {
217 | this.props.onLayout();
218 | }
219 |
220 | return results;
221 | }
222 |
223 | doLayoutForClient(props: InlineProps): InlineState {
224 | const {
225 | size: { width: containerWidth },
226 | columnWidth: rawColumnWidth,
227 | gutterWidth,
228 | gutterHeight,
229 | horizontal,
230 | } = props;
231 |
232 | const childArray = React.Children.toArray(props.children);
233 | const [maxColumn, columnWidth] = getColumnLengthAndWidth(
234 | containerWidth,
235 | rawColumnWidth,
236 | gutterWidth
237 | );
238 | const columnHeights = createArray(0, maxColumn);
239 |
240 | let rects;
241 | if (!horizontal) {
242 | rects = childArray.map((child) => {
243 | const column = columnHeights.indexOf(Math.min(...columnHeights));
244 | const height = this.getItemHeight(child);
245 | const left = (column * columnWidth) + (column * gutterWidth);
246 | const top = columnHeights[column];
247 |
248 | columnHeights[column] += Math.round(height) + gutterHeight;
249 |
250 | return { top, left, width: columnWidth, height };
251 | });
252 | } else {
253 | const sumHeights = childArray.reduce(
254 | (sum, child) => sum + Math.round(this.getItemHeight(child)) + gutterHeight, 0);
255 | const maxHeight = sumHeights / maxColumn;
256 |
257 | let currentColumn = 0;
258 | rects = childArray.map((child) => {
259 | const column = currentColumn >= maxColumn - 1 ? maxColumn - 1 : currentColumn;
260 | const height = this.getItemHeight(child);
261 | const left = (column * columnWidth) + (column * gutterWidth);
262 | const top = columnHeights[column];
263 |
264 | columnHeights[column] += Math.round(height) + gutterHeight;
265 | if (columnHeights[column] >= maxHeight) {
266 | currentColumn += 1;
267 | }
268 |
269 | return { top, left, width: columnWidth, height };
270 | });
271 | }
272 |
273 | const width = (maxColumn * columnWidth) + ((maxColumn - 1) * gutterWidth);
274 | const height = Math.max(...columnHeights) - gutterHeight;
275 | const finalRects = rects.map(o => ({
276 | ...o,
277 | left: o.left + ((containerWidth - width) / 2),
278 | }));
279 |
280 | return { rects: finalRects, actualWidth: width, height, columnWidth };
281 | }
282 |
283 | // eslint-disable-next-line class-methods-use-this
284 | doLayoutForSSR(props: InlineProps): InlineState {
285 | return {
286 | rects: React.Children.toArray(props.children).map(() => ({
287 | top: 0, left: 0, width: 0, height: 0,
288 | })),
289 | actualWidth: 0,
290 | height: 0,
291 | columnWidth: 0,
292 | };
293 | }
294 |
295 | updateLayout(props: ?InlineProps): void {
296 | if (!props) {
297 | this.setStateIfNeeded(this.doLayout(this.props));
298 | } else {
299 | this.setStateIfNeeded(this.doLayout(props));
300 | }
301 | }
302 |
303 | handleItemMounted = (item: GridItem) => {
304 | const { itemKey: key } = item.props;
305 | this.items[key] = item;
306 |
307 | if (this.props.monitorImagesLoaded && typeof imagesLoaded === 'function') {
308 | const node = ReactDOM.findDOMNode(item);
309 | const imgLoad = imagesLoaded(node);
310 |
311 | imgLoad.once('always', () => raf(() => {
312 | this.updateLayout(this.props);
313 | }));
314 |
315 | this.imgLoad[key] = imgLoad;
316 | }
317 |
318 | this.updateLayout(this.props);
319 | }
320 |
321 | handleItemUnmount = (item: GridItem) => {
322 | const { itemKey: key } = item.props;
323 |
324 | if (this.items.hasOwnProperty(key)) {
325 | delete this.items[key];
326 | }
327 |
328 | if (this.imgLoad.hasOwnProperty(key)) {
329 | this.imgLoad[key].off('always');
330 | delete this.imgLoad[key];
331 | }
332 | }
333 |
334 | handleRef = () => {
335 | this.props.refCallback(this);
336 | };
337 |
338 | render() {
339 | const {
340 | /* eslint-disable no-unused-vars */
341 | gutterWidth,
342 | gutterHeight,
343 | columnWidth: rawColumnWidth,
344 | monitorImagesLoaded,
345 | enableSSR,
346 | onLayout,
347 | horizontal,
348 | rtl,
349 | refCallback,
350 | /* eslint-enable no-unused-vars */
351 | className,
352 | style,
353 | size,
354 | component,
355 | itemComponent,
356 | children,
357 | ...rest
358 | } = this.props;
359 |
360 | const { rects, actualWidth, height } = this.state;
361 | const containerSize = {
362 | actualWidth,
363 | width: size.width == null ? 0 : size.width,
364 | height,
365 | };
366 | const validChildren = React.Children
367 | .toArray(children)
368 | .filter(child => isValidElement(child));
369 |
370 |
371 | /* eslint-disable no-return-assign */
372 | return (
373 |
384 | {validChildren.map((child, i) => (
385 |
397 | {child}
398 |
399 | ))}
400 |
401 | );
402 | /* eslint-enable no-return-assign */
403 | }
404 | }
405 |
406 | const SizeAwareGridInline = sizeMe({
407 | monitorWidth: true,
408 | monitorHeight: false,
409 | })(GridInline);
410 |
411 |
412 | export default class StackGrid extends Component {
413 | static propTypes = propTypes;
414 |
415 | static defaultProps = {
416 | style: {},
417 | gridRef: null,
418 | component: 'div',
419 | itemComponent: 'span',
420 | columnWidth: 150,
421 | gutterWidth: 5,
422 | gutterHeight: 5,
423 | duration: 480,
424 | easing: easings.quartOut,
425 | appearDelay: 30,
426 | appear: transitions.fadeUp.appear,
427 | appeared: transitions.fadeUp.appeared,
428 | enter: transitions.fadeUp.enter,
429 | entered: transitions.fadeUp.entered,
430 | leaved: transitions.fadeUp.leaved,
431 | units: { length: 'px', angle: 'deg' },
432 | monitorImagesLoaded: false,
433 | vendorPrefix: true,
434 | userAgent: null,
435 | enableSSR: false,
436 | onLayout: null,
437 | horizontal: false,
438 | rtl: false,
439 | };
440 |
441 | props: Props;
442 | grid: GridInline;
443 |
444 | updateLayout() {
445 | this.grid.updateLayout();
446 | }
447 |
448 | handleRef = (grid: GridInline) => {
449 | this.grid = grid;
450 |
451 | if (typeof this.props.gridRef === 'function') {
452 | this.props.gridRef(this);
453 | }
454 | };
455 |
456 | render() {
457 | const {
458 | enableSSR,
459 | gridRef,
460 | ...rest
461 | } = this.props;
462 |
463 | sizeMe.enableSSRBehaviour = enableSSR;
464 |
465 | return (
466 |
470 | );
471 | }
472 | }
473 |
--------------------------------------------------------------------------------
/src/components/__tests__/GridItem.spec.js:
--------------------------------------------------------------------------------
1 | import sinon from 'sinon';
2 | import React from 'react';
3 | import { mount } from 'enzyme';
4 | import { easings, transitions } from '../../';
5 | import GridItem from '../GridItem';
6 |
7 |
8 | const mockProps = {
9 | component: 'span',
10 | rect: {
11 | top: 0,
12 | left: 0,
13 | width: 0,
14 | height: 0,
15 | },
16 | containerSize: {
17 | width: 960,
18 | height: 0,
19 | },
20 | index: 0,
21 | easing: easings.quartOut,
22 | appearDelay: 30,
23 | appear: transitions.fadeUp.appear,
24 | appeared: transitions.fadeUp.appeared,
25 | enter: transitions.fadeUp.enter,
26 | entered: transitions.fadeUp.entered,
27 | leaved: transitions.fadeUp.leaved,
28 | units: { length: 'px', angle: 'deg' },
29 | vendorPrefix: true,
30 | userAgent: null,
31 | onMounted: () => {},
32 | onUnmount: () => {},
33 | };
34 |
35 | let clock = null;
36 |
37 |
38 | describe('', () => {
39 | beforeEach(() => {
40 | clock = sinon.useFakeTimers();
41 | });
42 |
43 | afterEach(() => {
44 | clock.restore();
45 | });
46 |
47 |
48 | test('Should be change component', () => {
49 | const wrapper = mount(
50 |
54 | );
55 |
56 | expect(wrapper.find('li')).toHaveLength(1);
57 | });
58 |
59 |
60 | test('Should be call handleMounted/handleUnmount', () => {
61 | const handleMounted = sinon.spy();
62 | const handleUnmount = sinon.spy();
63 |
64 | expect(handleMounted.called).toBe(false);
65 |
66 | const wrapper = mount(
67 |
72 | );
73 |
74 | expect(handleMounted.called).toBe(true);
75 |
76 | wrapper.unmount();
77 | expect(handleUnmount.called).toBe(true);
78 | });
79 |
80 |
81 | test('Should be call transition style function', () => {
82 | const spyFunctions = {
83 | appear: sinon.spy(),
84 | appeared: sinon.spy(),
85 | enter: sinon.spy(),
86 | entered: sinon.spy(),
87 | leaved: sinon.spy(),
88 | };
89 |
90 | const wrapper = mount(
91 |
96 | Item
97 |
98 | );
99 |
100 | const gridItem = wrapper.instance();
101 | const noop = () => {};
102 |
103 | expect(spyFunctions.appear.called).toBe(true);
104 |
105 | gridItem.componentDidAppear(() => {});
106 | clock.tick(300);
107 | expect(spyFunctions.appeared.called).toBe(true);
108 |
109 | clock.tick(300);
110 | gridItem.componentWillEnter(noop);
111 | expect(spyFunctions.enter.called).toBe(true);
112 |
113 | clock.tick(300);
114 | gridItem.componentDidEnter();
115 | expect(spyFunctions.entered.called).toBe(true);
116 |
117 | clock.tick(300);
118 | gridItem.componentWillLeave(noop);
119 | expect(spyFunctions.leaved.called).toBe(true);
120 | });
121 | });
122 |
--------------------------------------------------------------------------------
/src/components/__tests__/StackGrid.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import StackGrid, { easings, transitions } from '../../';
4 | import { GridInline } from '../StackGrid';
5 |
6 |
7 | const mockProps = {
8 | size: {
9 | width: 960,
10 | height: 0,
11 | },
12 | style: {},
13 | refCallback: () => {},
14 | component: 'div',
15 | itemComponent: 'span',
16 | columnWidth: 150,
17 | gutterWidth: 5,
18 | gutterHeight: 5,
19 | duration: 480,
20 | easing: easings.quartOut,
21 | appearDelay: 30,
22 | appear: transitions.fadeUp.appear,
23 | appeared: transitions.fadeUp.appeared,
24 | enter: transitions.fadeUp.enter,
25 | entered: transitions.fadeUp.entered,
26 | leaved: transitions.fadeUp.leaved,
27 | units: { length: 'px', angle: 'deg' },
28 | monitorImagesLoaded: false,
29 | vendorPrefix: true,
30 | userAgent: null,
31 | onLayout: () => {},
32 | };
33 |
34 |
35 | describe(' (GridInline)', () => {
36 | test('Should not be render children', () => {
37 | const wrapper = mount(
38 |
39 | );
40 |
41 | expect(wrapper.children()).toHaveLength(0);
42 | });
43 |
44 |
45 | test('Should be pass the base props', () => {
46 | const wrapper = mount(
47 |
54 | A
55 |
56 | );
57 |
58 | expect(wrapper.props().className).toBe('rsg-grid');
59 | expect(wrapper.props().style).toEqual({
60 | width: 960,
61 | background: '#fff',
62 | });
63 | });
64 |
65 |
66 | test('Should be render with specify component', () => {
67 | const wrapper = mount(
68 |
74 | A
75 | B
76 | C
77 |
78 | );
79 |
80 | expect(wrapper.find('ul.rsg-grid')).toHaveLength(1);
81 | expect(wrapper.find('li')).toHaveLength(3);
82 | });
83 |
84 |
85 | test('Should be render children', () => {
86 | const wrapper = mount(
87 |
88 | ITEM 1
89 | ITEM 2
90 | ITEM 3
91 |
92 | );
93 |
94 | expect(wrapper.find('div.item')).toHaveLength(3);
95 | });
96 |
97 |
98 | test('Should be get grid ref', () => {
99 | const callback = jest.fn();
100 | const wrapper = mount(
101 |
105 | Foo
106 |
107 | );
108 |
109 | expect(callback.mock.calls).toHaveLength(1);
110 | expect(callback.mock.calls[0]).toEqual([
111 | wrapper.instance(),
112 | ]);
113 | });
114 |
115 |
116 | test('Should be call onLayout', () => {
117 | const callback = jest.fn();
118 | const wrapper = mount(
119 |
123 | Foo
124 |
125 | );
126 |
127 | expect(callback.mock.calls).toHaveLength(1);
128 |
129 | wrapper.setProps({
130 | ...mockProps,
131 | size: { width: 300, height: 0 },
132 | });
133 |
134 | expect(callback.mock.calls).toHaveLength(2);
135 | });
136 |
137 | test('Should be horizontal', () => {
138 | const testMockProps = Object.assign({}, mockProps, {
139 | size: {
140 | width: 320,
141 | height: 0,
142 | },
143 | horizontal: true,
144 | });
145 |
146 | const wrapper = mount(
147 |
148 | ITEM 1
149 | ITEM 2
150 | ITEM 3
151 | ITEM 4
152 |
153 | );
154 |
155 | expect(wrapper.find('span').at(0).prop('style').transform).toBe('translateX(8px) translateY(10px)');
156 | expect(wrapper.find('span').at(1).prop('style').transform).toBe('translateX(8px) translateY(15px)');
157 | expect(wrapper.find('span').at(2).prop('style').transform).toBe('translateX(163px) translateY(10px)');
158 | expect(wrapper.find('span').at(3).prop('style').transform).toBe('translateX(163px) translateY(15px)');
159 | });
160 |
161 | test('Should be horizontal RTL', () => {
162 | const testMockProps = Object.assign({}, mockProps, {
163 | size: {
164 | width: 320,
165 | height: 0,
166 | },
167 | rtl: true,
168 | horizontal: true,
169 | });
170 |
171 | const wrapper = mount(
172 |
173 | ITEM 1
174 | ITEM 2
175 | ITEM 3
176 | ITEM 4
177 |
178 | );
179 | expect(wrapper.find('span').at(0).prop('style').right).toBe(0);
180 | expect(wrapper.find('span').at(1).prop('style').right).toBe(0);
181 | expect(wrapper.find('span').at(2).prop('style').right).toBe(0);
182 | expect(wrapper.find('span').at(3).prop('style').right).toBe(0);
183 |
184 | expect(wrapper.find('span').at(0).prop('style').transform).toBe('translateX(-8px) translateY(10px)');
185 | expect(wrapper.find('span').at(1).prop('style').transform).toBe('translateX(-8px) translateY(15px)');
186 | expect(wrapper.find('span').at(2).prop('style').transform).toBe('translateX(-163px) translateY(10px)');
187 | expect(wrapper.find('span').at(3).prop('style').transform).toBe('translateX(-163px) translateY(15px)');
188 | });
189 | });
190 |
--------------------------------------------------------------------------------
/src/declares/vendor.js.flow:
--------------------------------------------------------------------------------
1 | declare module "prop-types" {
2 | declare export default any;
3 | }
4 |
5 | declare module "imagesloaded" {
6 | declare export default any;
7 | }
8 |
9 | declare module "react-transition-group/TransitionGroup" {
10 | declare export default any;
11 | }
12 |
13 | declare module "inline-style-prefixer" {
14 | declare export default any;
15 | }
16 |
17 | declare module "shallowequal" {
18 | declare export default any;
19 | }
20 |
21 | declare module "react-sizeme" {
22 | declare export default any;
23 | }
24 |
25 | declare module "throttle-debounce" {
26 | declare export function debounce(): Function;
27 | }
28 |
29 | declare module "exenv" {
30 | declare export default any;
31 | }
32 |
33 | declare module "invariant" {
34 | declare export default any;
35 | }
36 |
37 | declare module "easy-css-transform-builder" {
38 | declare export function createCSSTransformBuilder(units: any): Function;
39 | declare export var properties: Array;
40 | }
41 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import StackGrid from './components/StackGrid';
3 |
4 | export * as easings from './animations/easings';
5 | export * as transitions from './animations/transitions/';
6 |
7 | export default StackGrid;
8 |
--------------------------------------------------------------------------------
/src/types/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | export type Units = {
3 | length: string;
4 | angle: string;
5 | };
6 |
7 | export type Rect = {
8 | top: number;
9 | left: number;
10 | width: number;
11 | height: number;
12 | };
13 |
--------------------------------------------------------------------------------
/src/utils/__tests__/style-helper.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import { transition, buildStyles } from '../style-helper';
3 |
4 |
5 | describe('style-helper', () => {
6 | test('Should be build a transition string', () => {
7 | expect(transition(['opacity'], 1000, 'ease-in')).toBe('opacity 1000ms ease-in');
8 |
9 | const easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
10 | expect(transition(['transform', 'opacity', 'background'], 200, easing)).toBe([
11 | `transform 200ms ${easing}`,
12 | `opacity 200ms ${easing}`,
13 | `background 200ms ${easing}`,
14 | ].join(','));
15 | });
16 |
17 |
18 | test('Should be build a style object', () => {
19 | const ios8 = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A365 Safari/600.1.4';
20 | const units = {
21 | length: 'px',
22 | angle: 'deg',
23 | };
24 |
25 | expect(buildStyles({
26 | opacity: 1,
27 | fontSize: 16,
28 | }, units, false)).toEqual({
29 | opacity: 1,
30 | fontSize: 16,
31 | });
32 |
33 | expect(buildStyles({
34 | opacity: 1,
35 | translateX: 900,
36 | translateY: 200,
37 | scale: 0.8,
38 | perspective: 1000,
39 | }, units, false)).toEqual({
40 | opacity: 1,
41 | perspective: 1000,
42 | transform: 'translateX(900px) translateY(200px) scale(0.8) perspective(1000px)',
43 | });
44 |
45 | expect(buildStyles({
46 | opacity: 1,
47 | translateX: 900,
48 | translateY: 200,
49 | scale: 0.8,
50 | perspective: 1000,
51 | }, units, true, ios8)).toEqual({
52 | opacity: 1,
53 | WebkitPerspective: 1000,
54 | WebkitTransform: 'translateX(900px) translateY(200px) scale(0.8) perspective(1000px)',
55 | });
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/src/utils/style-helper.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import Prefixer from 'inline-style-prefixer';
3 | import { createCSSTransformBuilder, properties } from 'easy-css-transform-builder';
4 |
5 | export type Units = {
6 | length: string;
7 | angle: string;
8 | };
9 |
10 |
11 | const isTransformProp = v => properties.indexOf(v) > -1;
12 |
13 | export const transition = (props: Array, duration: number, easing: string) => (
14 | props.map(prop =>
15 | `${prop} ${duration}ms ${easing}`
16 | ).join(',')
17 | );
18 |
19 |
20 | export const buildStyles = (
21 | styles: Object,
22 | units: Units,
23 | vendorPrefix: boolean,
24 | userAgent: ?string
25 | ) => {
26 | const builder = createCSSTransformBuilder(units);
27 | const finalStyles = {};
28 | const transformStyles = {};
29 |
30 | Object.keys(styles).forEach((key) => {
31 | const value = styles[key];
32 |
33 | if (isTransformProp(key)) {
34 | transformStyles[key] = value;
35 |
36 | if (key === 'perspective') {
37 | finalStyles[key] = value;
38 | }
39 | } else {
40 | finalStyles[key] = value;
41 | }
42 | });
43 |
44 | const transform = builder(transformStyles, units);
45 | if (transform !== '') {
46 | finalStyles.transform = transform;
47 | }
48 |
49 | if (vendorPrefix) {
50 | const prefixer = new Prefixer({ userAgent });
51 | return prefixer.prefix(finalStyles);
52 | }
53 |
54 | return finalStyles;
55 | };
56 |
--------------------------------------------------------------------------------
