├── test └── .gitkeep ├── .eslintignore ├── index.js ├── .npmignore ├── HISTORY.md ├── CONTRIBUTING.md ├── .gitignore ├── package.json ├── README.md ├── lib └── index.js └── .eslintrc /test/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/.* 2 | **/node_modules 3 | **/dist 4 | **/assets 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('./lib'); 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .travis.yml 2 | test/ 3 | coverage/ 4 | assets/ 5 | *.sw* 6 | *.un~ 7 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | # 1.1.1 / 2014-07-05 2 | 3 | * Tweak to stable 4 | 5 | # 1.1.0 / 2014-07-05 6 | 7 | * First Release 8 | * First Commit 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing to autoresponsive-react 2 | 3 | - Fork the project, make a change, and send a pull request; 4 | - Have a look at code style now before starting; 5 | - Make sure the tests case (`$ npm run test`) pass before sending a pull request; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | node_modules 26 | npm-debug.log 27 | .idea/* 28 | Thumbs.db 29 | coverage/ 30 | .project 31 | build/ 32 | *.sw* 33 | *.un~ 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "autoresponsive-react-native", 3 | "version": "1.0.9", 4 | "description": "auto responsive grid layout library", 5 | "keywords": [ 6 | "react", 7 | "react-native", 8 | "responsive", 9 | "layout", 10 | "layout component", 11 | "ui component", 12 | "ui", 13 | "component" 14 | ], 15 | "main": "index.js", 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/xudafeng/autoresponsive-react-native.git" 19 | }, 20 | "scripts": { 21 | "lint": "eslint .", 22 | "test": "mocha", 23 | "contributor": "git-contributor" 24 | }, 25 | "dependencies": { 26 | "react-native": ">=0.19.0", 27 | "autoresponsive-core": "~1.0.0" 28 | }, 29 | "precommit": [ 30 | "lint" 31 | ], 32 | "devDependencies": { 33 | "eslint-plugin-react": "~2.5.2", 34 | "git-contributor": "^1.0.7", 35 | "react": "~0.13.1" 36 | }, 37 | "licenses": "MIT" 38 | } 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # autoresponsive-react-native 2 | 3 | Auto responsive grid layout library for [ReactNative](//facebook.github.io/react-native/). 4 | 5 | ## Examples 6 | 7 | Live demo & docs: [xudafeng.github.io/autoresponsive-react](//xudafeng.github.io/autoresponsive-react/) 8 | 9 | [official sample](//github.com/xudafeng/autoresponsive_react_native_sample.git) 10 | 11 | ## Installation 12 | 13 | ```bash 14 | $ npm i autoresponsive-react-native --save 15 | ``` 16 | 17 | ## Related Edition 18 | 19 | - [React Edition](//github.com/xudafeng/autoresponsive-react) 20 | - [Vue Edition](//github.com/xudafeng/autoresponsive-vue) 21 | 22 | ## Contributing 23 | 24 | See our [CONTRIBUTING.md](./CONTRIBUTING.md) for information on how to contribute. 25 | 26 | 27 | 28 | ## Contributors 29 | 30 | |[
xudafeng](https://github.com/xudafeng)
|[
m0ngr31](https://github.com/m0ngr31)
|[
barbarosh](https://github.com/barbarosh)
|[
ctscoville](https://github.com/ctscoville)
|[
stereodenis](https://github.com/stereodenis)
31 | | :---: | :---: | :---: | :---: | :---: | 32 | 33 | 34 | This project follows the git-contributor [spec](https://github.com/xudafeng/git-contributor), auto upated at `Sat Apr 21 2018 12:14:14 GMT+0800`. 35 | 36 | 37 | 38 | ## License 39 | 40 | MIT Licensed. 41 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | let React = require('react'); 2 | let Common = require('autoresponsive-core'); 3 | 4 | let { 5 | GridSort 6 | } = Core; 7 | 8 | let { 9 | View, 10 | Dimensions 11 | } = require('react-native'); 12 | 13 | const screenWidth = Dimensions.get('window').width; 14 | const noop = function() {}; 15 | 16 | class AutoResponsive extends React.Component { 17 | constructor(props) { 18 | super(props); 19 | this.state = {}; 20 | } 21 | 22 | componentWillMount() { 23 | this.sortManager = new GridSort({ 24 | containerWidth: this.props.containerWidth, 25 | gridWidth: this.props.gridWidth 26 | }); 27 | } 28 | 29 | componentWillUpdate() { 30 | this.sortManager.init(); 31 | } 32 | 33 | mixItemInlineStyle(s) { 34 | let style = { 35 | position: 'absolute', 36 | }; 37 | Object.assign(s, style); 38 | } 39 | 40 | renderChildren() { 41 | return React.Children.map(this.props.children, function(child, childIndex) { 42 | let childStyle = {}; 43 | 44 | if(child.props.style instanceof Array) { 45 | child.props.style.forEach((style) => { 46 | Object.assign(childStyle, style); 47 | }); 48 | } else { 49 | childStyle = child.props.style; 50 | } 51 | 52 | let childWidth = parseInt(childStyle.width) + this.props.itemMargin; 53 | let childHeight = parseInt(childStyle.height) + this.props.itemMargin; 54 | let calculatedPosition = this.sortManager.getPosition(childWidth, childHeight, this.containerStyle.height); 55 | 56 | if (!this.fixedContainerHeight) { 57 | 58 | if (calculatedPosition[1] + childHeight > this.containerStyle.height) { 59 | this.containerStyle.height = calculatedPosition[1] + childHeight; 60 | } 61 | } 62 | 63 | let calculatedStyle = { 64 | left: calculatedPosition[0], 65 | top: calculatedPosition[1] 66 | }; 67 | 68 | this.mixItemInlineStyle(calculatedStyle); 69 | 70 | this.props.onItemDidLayout.call(this, child); 71 | 72 | if (childIndex + 1 === this.props.children.length) { 73 | this.props.onContainerDidLayout.call(this); 74 | } 75 | 76 | return React.cloneElement(child, { 77 | style: Object.assign({}, childStyle, calculatedStyle) 78 | }); 79 | }, this); 80 | } 81 | 82 | setPrivateProps() { 83 | this.containerStyle = { 84 | position: 'relative', 85 | height: this.containerHeight || 0 86 | }; 87 | } 88 | 89 | getContainerStyle() { 90 | return this.containerStyle 91 | } 92 | 93 | render() { 94 | this.setPrivateProps(); 95 | 96 | return ( 97 | 98 | {this.renderChildren()} 99 | 100 | ); 101 | } 102 | } 103 | 104 | AutoResponsive.defaultProps = { 105 | containerWidth: screenWidth, 106 | containerHeight: null, 107 | gridWidth: 1, 108 | itemMargin: 0, 109 | horizontalDirection: 'left', 110 | verticalDirection: 'top', 111 | onItemDidLayout: noop, 112 | onContainerDidLayout: noop 113 | }; 114 | 115 | module.exports = AutoResponsive; 116 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "es6": true 6 | }, 7 | "ecmaFeatures": { 8 | "modules": true, 9 | "jsx": true 10 | }, 11 | "plugins": [ 12 | "react" 13 | ], 14 | // https://github.com/feross/eslint-config-standard 15 | "rules": { 16 | "accessor-pairs": 2, 17 | "block-scoped-var": 0, 18 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 19 | "camelcase": 0, 20 | "comma-dangle": [2, "never"], 21 | "comma-spacing": [2, { "before": false, "after": true }], 22 | "comma-style": [2, "last"], 23 | "complexity": 0, 24 | "consistent-return": 0, 25 | "consistent-this": 0, 26 | "curly": [2, "multi-line"], 27 | "default-case": 0, 28 | "dot-location": [2, "property"], 29 | "dot-notation": 0, 30 | "eol-last": 2, 31 | "eqeqeq": [2, "allow-null"], 32 | "func-names": 0, 33 | "func-style": 0, 34 | "generator-star-spacing": [2, "both"], 35 | "guard-for-in": 0, 36 | "handle-callback-err": [2, "^(err|error|anySpecificError)$" ], 37 | "indent": [2, 2], 38 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 39 | "linebreak-style": 0, 40 | "max-depth": 0, 41 | "max-len": 0, 42 | "max-nested-callbacks": 0, 43 | "max-params": 0, 44 | "max-statements": 0, 45 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }], 46 | "new-parens": 2, 47 | "no-alert": 0, 48 | "no-array-constructor": 2, 49 | "no-bitwise": 0, 50 | "no-caller": 2, 51 | "no-catch-shadow": 0, 52 | "no-cond-assign": 2, 53 | "no-console": 0, 54 | "no-constant-condition": 0, 55 | "no-continue": 0, 56 | "no-control-regex": 2, 57 | "no-debugger": 2, 58 | "no-delete-var": 2, 59 | "no-div-regex": 0, 60 | "no-dupe-args": 2, 61 | "no-dupe-keys": 2, 62 | "no-duplicate-case": 2, 63 | "no-else-return": 0, 64 | "no-empty": 0, 65 | "no-empty-character-class": 2, 66 | "no-empty-label": 2, 67 | "no-eq-null": 0, 68 | "no-eval": 2, 69 | "no-ex-assign": 2, 70 | "no-extend-native": 2, 71 | "no-extra-bind": 2, 72 | "no-extra-boolean-cast": 2, 73 | "no-extra-parens": 0, 74 | "no-extra-semi": 0, 75 | "no-extra-strict": 0, 76 | "no-fallthrough": 2, 77 | "no-floating-decimal": 2, 78 | "no-func-assign": 2, 79 | "no-implied-eval": 2, 80 | "no-inline-comments": 0, 81 | "no-inner-declarations": [2, "functions"], 82 | "no-invalid-regexp": 2, 83 | "no-irregular-whitespace": 2, 84 | "no-iterator": 2, 85 | "no-label-var": 2, 86 | "no-labels": 2, 87 | "no-lone-blocks": 2, 88 | "no-lonely-if": 0, 89 | "no-loop-func": 0, 90 | "no-mixed-requires": 0, 91 | "no-mixed-spaces-and-tabs": [2, false], 92 | "no-multi-spaces": 2, 93 | "no-multi-str": 2, 94 | "no-multiple-empty-lines": [2, { "max": 1 }], 95 | "no-native-reassign": 2, 96 | "no-negated-in-lhs": 2, 97 | "no-nested-ternary": 0, 98 | "no-new": 2, 99 | "no-new-func": 2, 100 | "no-new-object": 2, 101 | "no-new-require": 2, 102 | "no-new-wrappers": 2, 103 | "no-obj-calls": 2, 104 | "no-octal": 2, 105 | "no-octal-escape": 2, 106 | "no-path-concat": 0, 107 | "no-plusplus": 0, 108 | "no-process-env": 0, 109 | "no-process-exit": 0, 110 | "no-proto": 2, 111 | "no-redeclare": 2, 112 | "no-regex-spaces": 2, 113 | "no-reserved-keys": 0, 114 | "no-restricted-modules": 0, 115 | "no-return-assign": 2, 116 | "no-script-url": 0, 117 | "no-self-compare": 2, 118 | "no-sequences": 2, 119 | "no-shadow": 0, 120 | "no-shadow-restricted-names": 2, 121 | "no-spaced-func": 2, 122 | "no-sparse-arrays": 2, 123 | "no-sync": 0, 124 | "no-ternary": 0, 125 | "no-throw-literal": 2, 126 | "no-trailing-spaces": 2, 127 | "no-undef": 2, 128 | "no-undef-init": 2, 129 | "no-undefined": 0, 130 | "no-underscore-dangle": 0, 131 | "no-unneeded-ternary": 2, 132 | "no-unreachable": 2, 133 | "no-unused-expressions": 0, 134 | "no-unused-vars": [2, { "vars": "all", "args": "none" }], 135 | "no-use-before-define": 0, 136 | "no-var": 0, 137 | "no-void": 0, 138 | "no-warning-comments": 0, 139 | "no-with": 2, 140 | "no-wrap-func": 2, 141 | "object-curly-spacing": 0, 142 | "one-var": [2, { "initialized": "never" }], 143 | "operator-assignment": 0, 144 | "operator-linebreak": [2, "after"], 145 | "padded-blocks": 0, 146 | "quote-props": 0, 147 | "quotes": [2, "single", "avoid-escape"], 148 | "radix": 2, 149 | "semi": [2, "always"], 150 | "semi-spacing": 0, 151 | "sort-vars": 0, 152 | "space-after-keywords": [2, "always"], 153 | "space-before-blocks": [2, "always"], 154 | "space-before-function-paren": 0, 155 | "space-in-parens": [2, "never"], 156 | "space-infix-ops": 2, 157 | "space-return-throw-case": 2, 158 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 159 | "spaced-line-comment": [2, "always"], 160 | "strict": 0, 161 | "use-isnan": 2, 162 | "valid-jsdoc": 0, 163 | "valid-typeof": 2, 164 | "vars-on-top": 0, 165 | "wrap-iife": [2, "any"], 166 | "wrap-regex": 0, 167 | "yoda": [2, "never"] 168 | } 169 | } 170 | --------------------------------------------------------------------------------