├── .husky ├── .gitignore └── pre-commit ├── .browserslistrc ├── .eslintignore ├── .prettierignore ├── margin.png ├── test ├── examples │ ├── .eslintrc.json │ ├── 01-basic.jsx │ ├── 16-bounded.jsx │ ├── 04-grid-property.jsx │ ├── 02-no-dragging.jsx │ ├── 19-allow-overlap.jsx │ ├── 21-horizontal.jsx │ ├── 11-no-vertical-compact.jsx │ ├── 13-error-case.jsx │ ├── 18-scale.jsx │ ├── 20-resizable-handles.jsx │ ├── 12-prevent-collision.jsx │ ├── 05-static-elements.jsx │ ├── 09-min-max-wh.jsx │ ├── 17-responsive-bootstrap-style.jsx │ ├── 03-messy.jsx │ ├── 10-dynamic-min-max-wh.jsx │ ├── 07-localstorage.jsx │ ├── 08-localstorage-responsive.jsx │ ├── 06-dynamic-add-remove.jsx │ ├── 15-drag-from-outside.jsx │ ├── 00-showcase.jsx │ └── 14-toolbox.jsx ├── dev-hook.jsx ├── util │ ├── setupTests.js │ └── deepFreeze.js └── test-hook.jsx ├── .travis.yml ├── __mocks__ └── react-grid-layout.js ├── index.html ├── .gitignore ├── index.js.flow ├── .npmignore ├── .github ├── workflows │ ├── label.yml │ ├── test.yml │ ├── gh-pages.yml │ ├── lint.yml │ ├── packj.yml │ ├── stale.yml │ ├── changelog.yml │ └── release.yml ├── release.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ └── bug_report.yml ├── labeler.yml ├── changelog-configuration.json └── PULL_REQUEST_TEMPLATE.md ├── flow-typed └── npm │ ├── clsx_v1.x.x.js │ ├── prop-types_v15.x.x.js │ └── enzyme_v3.x.x.js ├── .flowconfig ├── index-dev.js ├── index.js ├── .prettierrc ├── index-dev.html ├── .babelrc.js ├── .eslintrc.json ├── examples └── util │ ├── generate.js │ ├── template.ejs │ ├── example-styles.css │ └── vars.js ├── LICENSE ├── webpack-dev-server.config.js ├── webpack.config.js ├── lib ├── fastRGLPropsEqual.js ├── components │ └── WidthProvider.jsx ├── responsiveUtils.js ├── calculateUtils.js ├── ReactGridLayoutPropTypes.js ├── ResponsiveReactGridLayout.jsx ├── GridItem.jsx └── ReactGridLayout.jsx ├── webpack-examples.config.js ├── Makefile ├── css └── styles.css ├── package.json └── .packj.yaml /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 0.25% 2 | ie 11 3 | not dead -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | build 3 | dist 4 | flow-typed -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | examples/ 3 | __mocks__/ 4 | flow-typed/ 5 | -------------------------------------------------------------------------------- /margin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemo-crypto/react-grid-layout/HEAD/margin.png -------------------------------------------------------------------------------- /test/examples/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "react/prop-types": 0 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | yarn flow 6 | make test -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10 4 | - 12 5 | - "lts/*" 6 | script: 7 | - make build test 8 | cache: yarn 9 | -------------------------------------------------------------------------------- /__mocks__/react-grid-layout.js: -------------------------------------------------------------------------------- 1 | // Used by jest as it requires some example files, which pull from 'react-grid-layout' 2 | module.exports = require('../index-dev'); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /test/dev-hook.jsx: -------------------------------------------------------------------------------- 1 | import "react-hot-loader"; 2 | import { hot } from "react-hot-loader/root"; 3 | import DevLayout from "./examples/00-showcase.jsx"; 4 | import makeLayout from "./test-hook"; 5 | 6 | const Layout = makeLayout(DevLayout); 7 | 8 | export default hot(Layout); 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist/* 4 | !dist/react-grid-layout.min* 5 | !dist/*.html 6 | npm-debug.log 7 | build/ 8 | .idea 9 | coverage/ 10 | # Ignore built example files 11 | examples/*.html 12 | examples/*.js 13 | !examples/generate.js 14 | !examples/vars.js 15 | .vscode 16 | *.tgz 17 | -------------------------------------------------------------------------------- /index.js.flow: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as utils from "./lib/utils"; 4 | export { default } from "./lib/ReactGridLayout"; 5 | export { default as Responsive } from "./lib/ResponsiveReactGridLayout"; 6 | export { default as WidthProvider } from "./lib/components/WidthProvider"; 7 | 8 | export { utils }; 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | test/ 3 | examples/ 4 | yarn.lock 5 | .github 6 | *.config.js 7 | Makefile 8 | *.sh 9 | *.*.json 10 | __tests__/ 11 | __mocks__/ 12 | index-dev.js 13 | index-dev.html 14 | index.html 15 | flow-typed/ 16 | interfaces/ 17 | .husky 18 | .travis.yml 19 | *.png 20 | *.jpg 21 | .packj.yaml 22 | -------------------------------------------------------------------------------- /.github/workflows/label.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: Pull request labeler 3 | on: 4 | - pull_request_target 5 | jobs: 6 | labeler: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | contents: read 10 | pull-requests: write 11 | steps: 12 | - id: label-the-PR 13 | uses: actions/labeler@v5 14 | -------------------------------------------------------------------------------- /flow-typed/npm/clsx_v1.x.x.js: -------------------------------------------------------------------------------- 1 | declare module 'clsx' { 2 | declare type Classes = 3 | | ArrayTry dragging the elements around.
9 |10 | If you don't see any content, run webpack (npm run dev) and load this file from the server it opens. 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.babelrc.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | const es6Compat = 4 | process.env.BABEL_ES_COMPAT === "6" || process.env.NODE_ENV === "test"; 5 | 6 | module.exports = { 7 | presets: [ 8 | [ 9 | "@babel/preset-env", 10 | { 11 | targets: es6Compat ? "maintained node versions" : "> 0.25%, not dead" 12 | } 13 | ], 14 | "@babel/react", 15 | "@babel/preset-flow" 16 | ], 17 | plugins: [ 18 | "@babel/plugin-transform-flow-comments", 19 | "@babel/plugin-proposal-class-properties", 20 | "babel-plugin-preval" 21 | ] 22 | }; 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 🤔 Long question or idea? 4 | url: https://github.com/react-grid-layout/react-grid-layout/discussions 5 | about: Ask long-form questions and discuss ideas. 6 | - name: 👥 Community Code Examples for `react-grid-layout` 7 | url: https://codesandbox.io/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=react-grid-layout&refinementList%5Btemplate%5D%5B0%5D=create-react-app&refinementList%5Btemplate%5D%5B1%5D=create-react-app-typescript&page=1&configure%5BhitsPerPage%5D=12 8 | about: See `react-grid-layout` examples created by our community of users 9 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | # Trigger the workflow on push or pull request, 4 | # but only for the master branch 5 | push: 6 | branches: 7 | - master 8 | pull_request: 9 | branches: 10 | - master 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Check out Git repository 16 | uses: actions/checkout@v2 17 | 18 | - name: Set up Node.js 19 | uses: actions/setup-node@v2 20 | with: 21 | node-version: 18 22 | 23 | - name: Install Node.js dependencies 24 | run: yarn 25 | 26 | - name: Run tests 27 | run: yarn test 28 | -------------------------------------------------------------------------------- /test/util/setupTests.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import Enzyme from "enzyme"; 4 | import Adapter from "enzyme-adapter-react-16"; 5 | 6 | Enzyme.configure({ adapter: new Adapter() }); 7 | 8 | // We rely on sort() being deterministic for tests, but it changed from QuickSort to TimSort 9 | // in Node 12. This breaks tests, so we monkey-patch it. 10 | import { sort } from "timsort"; 11 | 12 | // $FlowIgnore dirty hack 13 | Array.prototype.sort = function (comparator) { 14 | sort(this, comparator); 15 | return this; 16 | }; 17 | 18 | // Required in drag code, not working in JSDOM 19 | Object.defineProperty(HTMLElement.prototype, "offsetParent", { 20 | get() { 21 | // $FlowIgnore[object-this-reference] 22 | return this.parentNode; 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy to GitHub Pages 2 | permissions: 3 | contents: write 4 | on: 5 | push: 6 | tags: 7 | - "*" 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 🛎️ 13 | uses: actions/checkout@v4 14 | 15 | - name: Install and Build 16 | run: | 17 | yarn 18 | make build-example 19 | 20 | - name: Deploy 🚀 21 | uses: JamesIves/github-pages-deploy-action@v4 22 | with: 23 | branch: gh-pages # The branch the action should deploy to. 24 | folder: examples # The folder the action should deploy. 25 | target-folder: examples # The destination. Shouldn't touch other folders. 26 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: 4 | # Trigger the workflow on push or pull request, 5 | # but only for the master branch 6 | push: 7 | branches: 8 | - master 9 | pull_request: 10 | branches: 11 | - master 12 | 13 | jobs: 14 | run-linters: 15 | name: Run linters 16 | runs-on: ubuntu-latest 17 | 18 | steps: 19 | - name: Check out Git repository 20 | uses: actions/checkout@v2 21 | 22 | - name: Set up Node.js 23 | uses: actions/setup-node@v2 24 | with: 25 | node-version: 18 26 | 27 | - name: Install Node.js dependencies 28 | run: yarn 29 | 30 | - name: Run Prettier 31 | run: yarn fmt:check 32 | 33 | - name: Run ESLint/Flow 34 | run: yarn lint 35 | -------------------------------------------------------------------------------- /.github/workflows/packj.yml: -------------------------------------------------------------------------------- 1 | name: Packj Security Audit 2 | 3 | # Controls when the workflow will run 4 | on: 5 | pull_request: 6 | branches: 7 | - master 8 | paths: 9 | - "yarn.lock" 10 | 11 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 12 | jobs: 13 | # This workflow contains a single job called "packj-audit" 14 | packj-security-audit: 15 | # The type of runner that the job will run on 16 | runs-on: ubuntu-latest 17 | 18 | # Steps represent a sequence of tasks that will be executed as part of the job 19 | steps: 20 | # Audit 21 | - name: Audit dependencies 22 | uses: ossillate-inc/packj-github-action@v0.0.7-beta 23 | 24 | with: 25 | DEPENDENCY_FILES: npm:package.json 26 | REPO_TOKEN: ${{ secrets.GITHUB_TOKEN }} 27 | -------------------------------------------------------------------------------- /.github/workflows/stale.yml: -------------------------------------------------------------------------------- 1 | name: "Close stale issues and PRs" 2 | on: 3 | schedule: 4 | - cron: "0 0,6,12,18 * * *" 5 | 6 | jobs: 7 | stale: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/stale@v1 11 | permissions: 12 | issues: write 13 | with: 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days" 16 | stale-pr-message: "This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this PR will be closed in 7 days" 17 | stale-pr-label: "stale" 18 | exempt-pr-label: "stale" 19 | days-before-stale: 90 20 | days-before-close: 30 21 | operations-per-run: 30 22 | -------------------------------------------------------------------------------- /.github/workflows/changelog.yml: -------------------------------------------------------------------------------- 1 | name: "changelog" 2 | permissions: 3 | contents: write 4 | on: 5 | push: 6 | tags: 7 | - "*" 8 | 9 | jobs: 10 | release: 11 | if: startsWith(github.ref, 'refs/tags/') 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v2 16 | 17 | - name: Build Changelog 18 | id: github_release 19 | uses: mikepenz/release-changelog-builder-action@v2 20 | with: 21 | configuration: ".github/changelog-configuration.json" 22 | env: 23 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 24 | 25 | - name: Create Release 26 | uses: actions/create-release@v1 27 | with: 28 | tag_name: ${{ github.ref }} 29 | release_name: ${{ github.ref }} 30 | body: ${{steps.github_release.outputs.changelog}} 31 | env: 32 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 33 | -------------------------------------------------------------------------------- /.github/labeler.yml: -------------------------------------------------------------------------------- 1 | documentation: 2 | - changed-files: 3 | - any-glob-to-any-file: 4 | - test/examples/**/* 5 | - README.md 6 | - examples/**/* 7 | 8 | core: 9 | - changed-files: 10 | - any-glob-to-any-file: 11 | - lib/**/* 12 | 13 | release: 14 | - changed-files: 15 | - any-glob-to-any-file: 16 | - dist/**/* 17 | 18 | tests: 19 | - changed-files: 20 | - any-glob-to-any-file: 21 | - test/spec/**/* 22 | 23 | deps: 24 | - changed-files: 25 | - any-glob-to-any-file: 26 | - yarn.lock 27 | 28 | infrastructure: 29 | - changed-files: 30 | - any-glob-to-any-file: 31 | - .github/**/* 32 | - .babelrc 33 | - .eslintignore 34 | - .eslintrc.json 35 | - .flowconfig 36 | - .gitignore 37 | - .npmignore 38 | - .travis.yml 39 | - build.sh 40 | - package.json 41 | - webpack* 42 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@babel/eslint-parser", 4 | "plugins": ["react", "flowtype", "unicorn"], 5 | "extends": [ 6 | "eslint:recommended", 7 | "plugin:react/recommended", 8 | "plugin:flowtype/recommended" 9 | ], 10 | "rules": { 11 | "no-console": "off", 12 | "no-use-before-define": ["error", "nofunc"], 13 | "no-unused-vars": [ 14 | "warn", 15 | { 16 | "argsIgnorePattern": "^(e|_.*)$", 17 | "vars": "local", 18 | "varsIgnorePattern": "(debug|^_)" 19 | } 20 | ], 21 | "prefer-const": "error", 22 | "react/jsx-boolean-value": ["error", "always"], 23 | "unicorn/better-regex": "warn", 24 | "unicorn/expiring-todo-comments": "error", 25 | "unicorn/no-abusive-eslint-disable": "error" 26 | }, 27 | "env": { 28 | "browser": true, 29 | "node": true, 30 | "es6": true 31 | }, 32 | "settings": { 33 | "react": { 34 | "version": "detect" 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /.github/changelog-configuration.json: -------------------------------------------------------------------------------- 1 | { 2 | "categories": [ 3 | { 4 | "title": "## 🚀 Features", 5 | "labels": ["feature"] 6 | }, 7 | { 8 | "title": "## 🐛 Fixes", 9 | "labels": ["fix"] 10 | }, 11 | { 12 | "title": "## 🧪 Tests", 13 | "labels": ["test"] 14 | } 15 | ], 16 | "ignore_labels": ["ignore_changelog"], 17 | "sort": "ASC", 18 | "template": "${{CHANGELOG}}\n\n<%- paragraphs[i] %>
32 | <%_ } -%> 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // @noflow 2 | const webpack = require("webpack"); 3 | 4 | // Builds bundle usable