Resizable handles on other corners v2

.babelrc.js

@@ -0,0 +1,21 @@
+// @flow
+
+const es6Compat = process.env.BABEL_ES_COMPAT === "6" || process.env.NODE_ENV === "test";
+
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: es6Compat ? "maintained node versions" : "> 0.25%, not dead"
+      },
+    ],
+    "@babel/react",
+    "@babel/preset-flow"
+  ],
+  plugins: [
+    "@babel/plugin-transform-flow-comments",
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-preval"
+  ]
+};

.browserslistrc

@@ -0,0 +1,3 @@
+> 0.25%
+ie 11
+not dead

.eslintrc.json

@@ -13,12 +13,22 @@
   "rules": {
     "no-console": 0,
     "no-use-before-define": [2, "nofunc"],
+    "no-unused-vars": [1, {
+      "argsIgnorePattern": "^(e|_.*)$",
+      "vars": "local",
+      "varsIgnorePattern": "(debug|^_)"
+    }],
     "prefer-const": 2,
     "react/jsx-boolean-value": [2, "always"]
   },
   "env": {
     "browser": true,
     "node": true,
     "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

.flowconfig

@@ -1,11 +1,19 @@
 [version]
-0.65.0
+^0.129.0
 
 [ignore]
+<PROJECT_ROOT>/build/.*
+<PROJECT_ROOT>/dist/.*
+# Speeds parsing:
+.*/node_modules/@babel.*
+.*/node_modules/babel.*
 
 [include]
 
 [libs]
 interfaces/
+flow-typed/
 
 [options]
+emoji=true
+module.use_strict=true

.github/labeler.yml

@@ -0,0 +1,29 @@
+documentation:
+  - test/examples/**/*
+  - README.md
+  - examples/**/*
+
+core:
+  - lib/**/*
+
+release:
+  - dist/**/*
+
+tests:
+  - test/spec/**/*
+
+deps:
+  - yarn.lock
+
+infrastructure:
+  - .github/**/*
+  - .babelrc
+  - .eslintignore
+  - .eslintrc.json
+  - .flowconfig
+  - .gitignore
+  - .npmignore
+  - .travis.yml
+  - build.sh
+  - package.json
+  - webpack*

.github/workflows/label.yml

@@ -0,0 +1,14 @@
+---
+name: Pull request labeler
+on:
+  schedule:
+    - cron: '*/5 * * * *'
+jobs:
+  labeler:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: paulfantom/periodic-labeler@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          LABEL_MAPPINGS_FILE: .github/labeler.yml

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+name: "Close stale issues and PRs"
+on:
+  schedule:
+  - cron: "0 0,6,12,18 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/stale@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        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'
+        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'
+        stale-pr-label: 'stale'
+        exempt-pr-label: 'stale'
+        days-before-stale: 30
+        days-before-close: 7
+        operations-per-run: 30 

.gitignore

@@ -5,3 +5,9 @@ dist/*
 npm-debug.log
 build/
 .idea
+# Ignore built example files
+examples/*.html
+examples/*.js
+!examples/generate.js
+!examples/vars.js
+.vscode

.npmignore

@@ -8,5 +8,8 @@ Makefile
 *.sh
 *.*.json
 __tests__/
+__mocks__/
 index-dev.js
 index.html
+flow-typed/
+interfaces/

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+examples/

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "auto"
+}

.travis.yml

@@ -1,7 +1,8 @@
 language: node_js
 node_js:
-  - "6"
-  - "7"
+  - 10
+  - 12
+  - "lts/*"
 script:
   - make build test
 cache: yarn

CHANGELOG.md

@@ -1,5 +1,114 @@
 # Changelog
 
+0.18.3 (Mar 16, 2020)
+----
+
+### Bugfixes
+  - Fix `shouldComponentUpdate` interfering with droppability ([#1152](https://github.com/STRML/react-grid-layout/issues/1152))
+
+### Internal Changes
+  - New Enzyme test suite added to prevent regression. If you have time, we could really use more test cases that reflect your use cases!
+
+0.18.2 (Feb 26, 2020)
+----
+
+### Bugfixes
+  - `shouldComponentUpdate`:
+    - A too-aggressive implementation of `shouldComponentUpdate` was shipped in 0.18.0-0.18.1 ([#1123](https://github.com/STRML/react-grid-layout/pull/1123)), which did not compare the `children` object. While this works well in many simple implementations of RGL, it breaks in more complex applications.
+    - Reference equality of `props.children` and `nextProps.children` is now added to `<ReactGridLayout>` and `<GridItem>`. If you wish to take advantage of the performance improvements from the `shouldComponentUpdate` work, memoize your children.
+    - A section has been added to the [README](/README.md#Performance) explaining how this works.
+    - Fixed [#1150](https://github.com/STRML/react-grid-layout/issues/1150), [#1151](https://github.com/STRML/react-grid-layout/issues/1151).
+
+0.18.1 (Feb 25, 2020)
+----
+
+This release contains typedef changes only.
+
+### Bugfixes
+  - Flow types:
+    - Make Props to `<ReactGridLayout>` and `<ResponsiveReactGridLayout>` exact.
+    - Fix loss of props refinement when passing through `WidthProvider`.
+    - Fix Flow errors as surfaced in [#1138](https://github.com/STRML/react-grid-layout/pull/1138).
+    - Modify examples to use types so that the above type error can't resurface
+
+0.18.0 (Feb 25, 2020)
+----
+
+Thanks to all of our maintainers for this big release. 0.18.0 contains a large number of bugfixes that users have been asking for. Please read the full list so you know what to expect. Some of the biggest improvements include fixing changes of `isResizable`/`isDraggable` without a remount ([#892](https://github.com/STRML/react-grid-layout/pull/892)), fixes to prop changes on `ResponsiveReactGridLayout` ([#1090](https://github.com/STRML/react-grid-layout/pull/1090)), `shouldComponentUpdate` improvements for speed ([#1123](https://github.com/STRML/react-grid-layout/pull/1123)), improvements to droppability ([#1127](https://github.com/STRML/react-grid-layout/pull/1127)), and much more.
+
+### (Potentially) Breaking Changes
+
+- You can now locally set `isDraggable`/`isResizable` on a `static` item and it will have that property. This could be useful, but be sure to check your layouts if you use `static`. Relates to [#1060](https://github.com/STRML/react-grid-layout/pull/1060).
+- `shouldComponentUpdate` is now implemented on major components to improve render speed while you manipulate the layout. In our testing there are no issues. If you encounter one, please open an issue asap and we'll get it fixed. See [#1123](https://github.com/STRML/react-grid-layout/pull/1123).
+
+### New Features
+
+- You can now manipulate `isDraggable`/`isResizable` without the child component remounting. We do this by always rendering the child `<Resizable>` and `<Draggable>` wrappers, optionally in a `disabled` state. This feature has been heavily requested. [#892](https://github.com/STRML/react-grid-layout/pull/892)
+- The event is now passed as `e` on the `onDrop` callback. [#1065](https://github.com/STRML/react-grid-layout/pull/1065)
+- Pass `transformScale` to `Resizable`. [#1075](https://github.com/STRML/react-grid-layout/pull/1075)
+
+### Bugfixes
+
+- Fix handling of width changes in `ResponsiveReactGridLayout`. [#1090](https://github.com/STRML/react-grid-layout/pull/1090)
+  - Fixes ignored changes of breakpoints and columns. See also [issue #1083](https://github.com/STRML/react-grid-layout/issues/1083).
+- Forbid layout change on click without drag. [#1044](https://github.com/STRML/react-grid-layout/pull/1044)
+- Do not mutate `layouts` prop. [#1064](https://github.com/STRML/react-grid-layout/pull/1064)
+- Ensure locally set `isDraggable`/`isResizable` on a `GridItem` overrides the global setting on the layout. [#1060](https://github.com/STRML/react-grid-layout/pull/1060)
+- Avoid additional element jumping when an item is dropped. [#1127](https://github.com/STRML/react-grid-layout/issues/1127)
+- Don't use `String#includes` for Firefox test. [#1096](https://github.com/STRML/react-grid-layout/pull/1096)
+
+### Internal Refactors
+
+- Added `shouldComponentUpdate` to major elements for speed. Significant [performance improvements](https://github.com/STRML/react-grid-layout/pull/1032#issuecomment-541604763) while dragging. Started in [#1032](https://github.com/STRML/react-grid-layout/pull/1032) and finished in [#1123](https://github.com/STRML/react-grid-layout/pull/1123).
+  - A [fun trick for the curious](https://github.com/STRML/react-grid-layout/blob/44e200067b3640c3230f5511e8624a7c629d2f9a/lib/fastRGLPropsEqual.js).
+- Internal refactor of dropping capability. It is now more predictable and uses similar unit labels (`left`, `top`) to other features. [#1128](https://github.com/STRML/react-grid-layout/issues/1128)
+- Upgrade devDependencies.
+- Remove ESPower from test suite (not useful with Jest).
+
+
+0.17.1 (Oct 29, 2019)
+----
+
+### Bugfixes
+
+- Surround `navigator` check in `try/catch` to avoid problems with mocked navigators [#1057](https://github.com/STRML/react-grid-layout/pull/1054)
+- TransformScale is not applied properly while dragging an element [#1046](https://github.com/STRML/react-grid-layout/pull/1054)
+
+0.17.0 (Oct 24, 2019)
+----
+
+It's been 18 months since the last release, and this is a pretty large one! For references on the items below, see https://github.com/STRML/react-grid-layout/milestone/1?closed=1.
+
+Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, and for giving it a much-needed shot in the arm, and thanks to the rest of our contributors.
+
+### New Features
+
+- Added ability to drag items into the grid from outside. [#980](https://github.com/STRML/react-grid-layout/pull/980). See [the example](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html).
+  - This is especially exciting as it opens up new "widget toolbox" use cases such as [Example 14](https://strml.github.io/react-grid-layout/examples/14-toolbox.html) with more intuitive interaction. Thanks @daynin.
+- `transformScale` prop [#987](https://github.com/STRML/react-grid-layout/pull/987)
+- `<ResponsiveReactGridLayout>` now supports margin-per-breakpoint [#1016](https://github.com/STRML/react-grid-layout/pull/1016)
+
+
+### Bugfixes
+
+- `onWidthChange` only called on breakpoint changes [#770](https://github.com/STRML/react-grid-layout/pull/770)
+- Various movement bugs when compaction is off [#766](https://github.com/STRML/react-grid-layout/pull/766)
+- Don't fire `onDragStop` if an item is only clicked, not dragged [#1023](https://github.com/STRML/react-grid-layout/pull/1023)
+- Fix infinite loop when dragging over a static element. [#1019](https://github.com/STRML/react-grid-layout/pull/1019)
+
+### Internal Refactors
+
+- Both `react-draggable` and `react-resizable` dependencies are now React 16.9 compatible, as is now `react-grid-layout`.
+  - [RGL PR #990](https://github.com/STRML/react-grid-layout/pull/990)
+  - [react-resizable](https://github.com/STRML/react-resizable/pull/112/commits/541dee69b8e45d91a533855609472b481634edee)
+  - [react-draggable](https://github.com/mzabriskie/react-draggable/commit/fea778c8e89db2a4e1a35e563b65634f8146e7e4)
+- Webpack 4 [#907](https://github.com/STRML/react-grid-layout/pull/907)
+- Babel 7 [#1013](https://github.com/STRML/react-grid-layout/pull/1013)
+- Flow 0.110 [#995](https://github.com/STRML/react-grid-layout/pull/995)
+- Jest [#774](https://github.com/STRML/react-grid-layout/pull/774)
+- Various build simplifications [#773](https://github.com/STRML/react-grid-layout/pull/773)
+- Various PR bots - thanks @daynin
+
 0.16.6 (Mar 8, 2018)
 ----
 

Makefile

@@ -18,7 +18,8 @@ clean:
 	rm -rf $(BUILD) $(DIST)
 
 dev:
-	@$(BIN)/webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --open --content-base .
+	@$(BIN)/webpack-dev-server --config webpack-dev-server.config.js \
+	  --hot --progress --colors
 
 # Allows usage of `make install`, `make link`
 install link:
@@ -28,26 +29,33 @@ install link:
 dist/%.min.js: $(LIB) $(BIN)
 	@$(BIN)/webpack
 
-# find/exec is more cross-platform compatible than `rename`
 build-js:
-	@$(BIN)/babel --stage 0 --out-dir $(BUILD) $(LIB)
+	@$(BIN)/babel --out-dir $(BUILD) $(LIB)
 
+# Will build for use on github pages. Full url of page is
+# https://strml.github.io/react-grid-layout/examples/0-showcase.html
+# so the CONTENT_BASE should adapt.
 build-example:
 	@$(BIN)/webpack --config webpack-examples.config.js
-	node ./examples/generate.js
-
-view-example: build-example
-	@$(BIN)/opener examples/0-showcase.html
+	env CONTENT_BASE="/react-grid-layout/examples/" node ./examples/generate.js
 
+view-example:
+	env CONTENT_BASE="/examples/" node ./examples/generate.js
+	@$(BIN)/webpack-dev-server --config webpack-examples.config.js --progress --colors
 
 # FIXME flow is usually global
 lint:
-	./node_modules/.bin/flow
+	@$(BIN)/flow
 	@$(BIN)/eslint --ext .js,.jsx $(LIB) $(TEST)
-	@$(BIN)/valiquire $(LIB)
 
 test:
-	@$(BIN)/jest
+	env NODE_ENV=test $(BIN)/jest
+
+test-watch:
+	env NODE_ENV=test $(BIN)/jest --watch
+
+test-update-snapshots:
+	env NODE_ENV=test $(BIN)/jest --updateSnapshot
 
 release-patch: build lint test
 	@$(call release,patch)