re-resizable - npm Package Compare versions

Comparing version 4.3.2 to 4.4.0

index.d.ts

@@ -1,5 +0,5 @@
-// Type definitions for react-resizable-box 2.0
-// Project: https://github.com/bokuweb/react-resizable-box
+// Type definitions for re-resizable 4.4
+// Project: https://github.com/bokuweb/re-resizable
 // Definitions by: Kalle Ott <https://github.com/kaoDev>
-// Definitions: https://github.com/kaoDev/react-resizable-box
+// Definitions: https://github.com/kaoDev/re-resizable
 // TypeScript Version: 2.2
@@ -9,6 +9,8 @@
 
+export type ResizableDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+
 export interface ResizableState {
-  width?: number | string;
-  height?: number | string;
-  direction?: string;
+  width: number | string;
+  height: number | string;
+  direction?: ResizableDirection;
   original?: {
@@ -21,5 +23,6 @@ x: number,
   isResizing?: boolean;
+  resizeCursor: string,
 }
 
-export type Size = {
+export type NumberSize = {
   width: number;
@@ -29,2 +32,7 @@ height: number;
 
+export type Size = {
+  width: string | number,
+  height: string | number,
+};
+
 export type CSSSize = {
@@ -35,20 +43,32 @@ width: string;
 
-export type ResizeHandler = (
+export type HandleComponent = {
+  top?: ReactElement<any>,
+  right?: ReactElement<any>,
+  bottom?: ReactElement<any>,
+  left?: ReactElement<any>,
+  topRight?: ReactElement<any>,
+  bottomRight?: ReactElement<any>,
+  bottomLeft?: ReactElement<any>,
+  topLeft?: ReactElement<any>,
+};
+
+
+export type ResizeCallback = (
   event: MouseEvent | TouchEvent,
-  dir: string,
-  refToElement: HTMLElement,
-  delta: Size,
+  direction: ResizeDirection,
+  elementRef: HTMLElement,
+  delta: NumberSize,
 ) => void;
 
-export type ResizeStartCallBack = (
+export type ResizeStartCallback = (
   e: React.MouseEvent<any> | React.TouchEvent<any>,
-  dir: string,
-  refToElement: HTMLElement,
-  delta: Size,
+  dir: ResizeDirection,
+  elementRef: HTMLElement,
+  delta: NumberSize,
 ) => void;
 
 export interface ResizableProps {
-  onResizeStop?: ResizeHandler;
-  onResizeStart?: ResizeStartCallBack;
-  onResize?: ResizeHandler;
+  onResizeStart?: ResizeStartCallback,
+  onResize?: ResizeCallback,
+  onResizeStop?: ResizeCallback,  
   style?: React.CSSProperties;
@@ -76,10 +96,10 @@ handleStyles?: {
   enable?: {
-    top: boolean,
-    right: boolean,
-    bottom: boolean,
-    left: boolean,
-    topRight: boolean,
-    bottomRight: boolean,
-    bottomLeft: boolean,
-    topLeft: boolean,
+    top?: boolean,
+    right?: boolean,
+    bottom?: boolean,
+    left?: boolean,
+    topRight?: boolean,
+    bottomRight?: boolean,
+    bottomLeft?: boolean,
+    topLeft?: boolean,
   },
@@ -102,23 +122,43 @@ className?: string,
   lockAspectRatio?: boolean,
-}
+  lockAspectRatioExtraWidth: number,
+  lockAspectRatioExtraHeight: number,
+  handleWrapperStyle?: {
+    width: string | number,
+    height: string | number,
+  },
+  handleWrapperClass?: string,
+  handleComponent?: HandleComponent,
+  defaultSize?: {
+    width: string | number,
+    height: string | number,
+  }
 
-export default class Resizable extends React.Component<ResizableProps, ResizableState> {
+  onResizeStart?: ResizeStartCallback,
+  onResize?: ResizeCallback,
+  onResizeStop?: ResizeCallback,
 
-  resizable: HTMLElement;
 
-  size: Size;
+}
 
-  onTouchMove(event: React.TouchEvent<any>): void;
+export type HandleComponent = {
+  top?: React.ElementType,
+  right?: React.ElementType,
+  bottom?: React.ElementType,
+  left?: React.ElementType,
+  topRight?: React.ElementType,
+  bottomRight?: React.ElementType,
+  bottomLeft?: React.ElementType,
+  topLeft?: React.ElementType,
+};
 
-  onMouseMove(event: MouseEvent | TouchEvent): void;
+export default class Resizable extends React.Component<ResizableProps, ResizableState> {
 
-  onMouseUp(event: MouseEvent | TouchEvent): void;
+  resizable: HTMLElement;
 
-  onResizeStart(event: React.TouchEvent<any> | React.MouseEvent<any>, direction: string): void
+  size: {
+    width: number,
+    height: number,
+  };
 
-  setSize(size: Size): void;
-
-  getBoxStyle(): CSSSize;
-
   updateSize({ width, height }: Size): void;
 }

lib/index.es5.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
@@ -31,8 +29,2 @@
 
-
-
-
-
-
-
 var _extends = Object.assign || function (target) {
@@ -52,4 +44,2 @@ for (var i = 1; i < arguments.length; i++) {
 
-
-
 var inherits = function (subClass, superClass) {
@@ -71,12 +61,2 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-
-
-
-
-
-
-
-
-
-
 var possibleConstructorReturn = function (self, call) {
@@ -206,4 +186,2 @@ if (!self) {
 
-var baseSizeId = 0;
-
 var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'lockAspectRatioExtraWidth', 'lockAspectRatioExtraHeight', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop', 'handleComponent'];
@@ -237,4 +215,4 @@
     _this.onMouseUp = _this.onMouseUp.bind(_this);
-    _this.baseSizeId = '__resizable' + baseSizeId;
-    baseSizeId += 1;
+    _this.baseSizeId = '__resizable' + Resizable.baseSizeId;
+    Resizable.baseSizeId += 1;
 
@@ -264,6 +242,18 @@ if (typeof window !== 'undefined') {
       if (!base) return { width: window.innerWidth, height: window.innerHeight };
-      return {
+      // INFO: To calculate parent width with flex layout
+      var wrapChanged = false;
+      var wrap = this.parentNode.style.flexWrap;
+      var minWidth = base.style.minWidth;
+      if (wrap !== 'wrap') {
+        wrapChanged = true;
+        this.parentNode.style.flexWrap = 'wrap';
+      }
+      base.style.minWidth = '100%';
+      var size = {
         width: base.offsetWidth,
         height: base.offsetHeight
       };
+      if (wrapChanged) this.parentNode.style.flexWrap = wrap;
+      base.style.minWidth = minWidth;
+      return size;
     }
@@ -274,2 +264,3 @@ }, {
       var size = this.size;
+
       this.setState({
@@ -279,2 +270,5 @@ width: this.state.width || size.width,
       });
+      var parent = this.parentNode;
+      if (!(parent instanceof HTMLElement)) return;
+      if (parent.querySelector('.__resizable_parent')) return;
       var element = document.createElement('div');
@@ -288,4 +282,7 @@ element.id = this.baseSizeId;
       element.style.flex = '0';
-      var parent = this.parentNode;
-      if (!(parent instanceof HTMLElement)) return;
+      if (element.classList) {
+        element.classList.add('__resizable_parent');
+      } else {
+        element.className += ' __resizable_parent';
+      }
       parent.appendChild(element);
@@ -583,6 +580,3 @@ }
         'span',
-        {
-          className: handleWrapperClass,
-          style: handleWrapperStyle
-        },
+        { className: handleWrapperClass, style: handleWrapperStyle },
         resizers
@@ -601,3 +595,5 @@ );
           ref: function ref(c) {
-            _this3.resizable = c;
+            if (c) {
+              _this3.resizable = c;
+            }
           },
@@ -681,2 +677,3 @@ style: _extends({
 
+Resizable.baseSizeId = 0;
 Resizable.defaultProps = {
@@ -703,3 +700,2 @@ onResizeStart: function onResizeStart() {},
 
-exports.default = Resizable;
-//# sourceMappingURL=index.es5.js.map
+module.exports = Resizable;

lib/index.js

@@ -27,8 +27,2 @@ import { createElement, Component } from 'react';
 
-
-
-
-
-
-
 var _extends = Object.assign || function (target) {
@@ -48,4 +42,2 @@ for (var i = 1; i < arguments.length; i++) {
 
-
-
 var inherits = function (subClass, superClass) {
@@ -67,12 +59,2 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-
-
-
-
-
-
-
-
-
-
 var possibleConstructorReturn = function (self, call) {
@@ -202,4 +184,2 @@ if (!self) {
 
-var baseSizeId = 0;
-
 var definedProps = ['style', 'className', 'grid', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'lockAspectRatioExtraWidth', 'lockAspectRatioExtraHeight', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop', 'handleComponent'];
@@ -233,4 +213,4 @@
     _this.onMouseUp = _this.onMouseUp.bind(_this);
-    _this.baseSizeId = '__resizable' + baseSizeId;
-    baseSizeId += 1;
+    _this.baseSizeId = '__resizable' + Resizable.baseSizeId;
+    Resizable.baseSizeId += 1;
 
@@ -260,6 +240,18 @@ if (typeof window !== 'undefined') {
       if (!base) return { width: window.innerWidth, height: window.innerHeight };
-      return {
+      // INFO: To calculate parent width with flex layout
+      var wrapChanged = false;
+      var wrap = this.parentNode.style.flexWrap;
+      var minWidth = base.style.minWidth;
+      if (wrap !== 'wrap') {
+        wrapChanged = true;
+        this.parentNode.style.flexWrap = 'wrap';
+      }
+      base.style.minWidth = '100%';
+      var size = {
         width: base.offsetWidth,
         height: base.offsetHeight
       };
+      if (wrapChanged) this.parentNode.style.flexWrap = wrap;
+      base.style.minWidth = minWidth;
+      return size;
     }
@@ -270,2 +262,3 @@ }, {
       var size = this.size;
+
       this.setState({
@@ -275,2 +268,5 @@ width: this.state.width || size.width,
       });
+      var parent = this.parentNode;
+      if (!(parent instanceof HTMLElement)) return;
+      if (parent.querySelector('.__resizable_parent')) return;
       var element = document.createElement('div');
@@ -284,4 +280,7 @@ element.id = this.baseSizeId;
       element.style.flex = '0';
-      var parent = this.parentNode;
-      if (!(parent instanceof HTMLElement)) return;
+      if (element.classList) {
+        element.classList.add('__resizable_parent');
+      } else {
+        element.className += ' __resizable_parent';
+      }
       parent.appendChild(element);
@@ -579,6 +578,3 @@ }
         'span',
-        {
-          className: handleWrapperClass,
-          style: handleWrapperStyle
-        },
+        { className: handleWrapperClass, style: handleWrapperStyle },
         resizers
@@ -597,3 +593,5 @@ );
           ref: function ref(c) {
-            _this3.resizable = c;
+            if (c) {
+              _this3.resizable = c;
+            }
           },
@@ -677,2 +675,3 @@ style: _extends({
 
+Resizable.baseSizeId = 0;
 Resizable.defaultProps = {
@@ -700,2 +699,1 @@ onResizeStart: function onResizeStart() {},
 export default Resizable;
-//# sourceMappingURL=index.js.map

package.json

 {
   "name": "re-resizable",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "Resizable component for React.",
@@ -20,3 +20,2 @@ "title": "re-resizable",
     "build:prod:es5": "rollup -c scripts/prod.es5.js",
-    "build:prod:umd": "rollup -c scripts/prod.umd.js",
     "build": "npm-run-all --parallel build:prod:*",
@@ -30,2 +29,3 @@ "start": "npm-run-all --parallel storybook",
     "build-storybook": "build-storybook",
+    "format": "prettier-eslint --write --single-quote --semi=true \"src/**/*.js\" ",
     "deploy": "npm run build-storybook && gh-pages -d storybook-static"
@@ -44,5 +44,5 @@ },
   "devDependencies": {
-    "@storybook/addon-info": "^3.2.9",
-    "@storybook/react": "^3.2.8",
-    "avaron": "^0.0.12",
+    "@storybook/addon-info": "^3.3.14",
+    "@storybook/react": "^3.3.14",
+    "avaron": "^0.0.14",
     "babel-eslint": "^8.0.1",
@@ -54,3 +54,3 @@ "babel-plugin-external-helpers": "^6.22.0",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
@@ -60,21 +60,24 @@ "babel-preset-flow": "^6.23.0",
     "babel-register": "^6.26.0",
-    "eslint": "^4.2.0",
-    "eslint-config-airbnb": "^15.0.2",
-    "eslint-plugin-flowtype": "^2.34.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.1.0",
-    "flow-bin": "^0.54.1",
-    "flow-copy-source": "^1.2.0",
-    "flow-typed": "^2.1.5",
-    "gh-pages": "^1.0.0",
-    "npm-run-all": "^4.1.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "rollup": "^0.55.0",
+    "eslint": "^4.18.2",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "flow-bin": "^0.66.0",
+    "flow-copy-source": "^1.3.0",
+    "flow-typed": "^2.3.0",
+    "gh-pages": "^1.1.0",
+    "npm-run-all": "^4.1.2",
+    "prettier": "^1.11.1",
+    "prettier-eslint": "^8.8.1",
+    "prettier-eslint-cli": "^4.7.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "rollup": "^0.56.0",
     "rollup-plugin-babel": "3.0.3",
-    "rollup-plugin-commonjs": "^8.2.0",
+    "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-node-globals": "1.1.0",
-    "rollup-plugin-node-resolve": "3.0.1",
-    "rollup-plugin-replace": "^1.1.1",
+    "rollup-plugin-node-resolve": "3.0.3",
+    "rollup-plugin-replace": "^2.0.0",
     "rollup-watch": "4.3.1",
@@ -81,0 +84,0 @@ "sinon": "^4.0.0"

README.md

@@ -267,2 +267,14 @@ <p align="center"><img src ="https://github.com/bokuweb/re-resizable/blob/master/logo.png?raw=true" /></p>
 
+#### v4.4.0
+
+- fix: bug behavior with flex layout
+- chore: refactor
+- chore: update deps
+- chore: update d.ts
+- chore: add some stories
+
+#### v4.3.2
+
+- Fixed a bug, when resizing sometimes causes text-selection in some browser #182
+
 #### v4.3.1
@@ -493,3 +505,3 @@
 
-Copyright (c) 2017 bokuweb
+Copyright (c) 2018 bokuweb
 
@@ -496,0 +508,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

511

increased by2.4%

Published versions last two months

3

increased by50%

Worsened metrics

Total package byte prevSize

111465

decreased by-55.32%

Dev dependency count

38

increased by8.57%

Number of package files

10

decreased by-28.57%

Lines of code

1404

decreased by-28.26%

No dependency changes