re-resizable
Advanced tools
re-resizable - npm Package Compare versions
Comparing version 6.9.16 to 6.9.17
@@ -35,4 +35,4 @@ import * as React from 'react'; | ||
| export interface Size { | ||
| width: string | number; | ||
| height: string | number; | ||
| width?: string | number; | ||
| height?: string | number; | ||
| } | ||
@@ -189,5 +189,4 @@ export interface NumberSize { | ||
| renderResizer(): JSX.Element | null; | ||
| ref: (c: HTMLElement | null) => void; | ||
| render(): JSX.Element; | ||
| } | ||
| export {}; |
@@ -180,2 +180,3 @@ 'use strict'; | ||
| */ | ||
| // tslint:disable-next-line | ||
| var normalizeToPair = function (val) { return (Array.isArray(val) ? val : [val, val]); }; | ||
@@ -219,2 +220,3 @@ var definedProps = [ | ||
| function Resizable(props) { | ||
| var _a, _b, _c, _d; | ||
| var _this = _super.call(this, props) || this; | ||
@@ -265,15 +267,6 @@ _this.ratio = 1; | ||
| }; | ||
| _this.ref = function (c) { | ||
| if (c) { | ||
| _this.resizable = c; | ||
| } | ||
| }; | ||
| _this.state = { | ||
| isResizing: false, | ||
| width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined' | ||
| ? 'auto' | ||
| : _this.propsSize && _this.propsSize.width, | ||
| height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined' | ||
| ? 'auto' | ||
| : _this.propsSize && _this.propsSize.height, | ||
| width: (_b = (_a = _this.propsSize) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'auto', | ||
| height: (_d = (_c = _this.propsSize) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'auto', | ||
| direction: 'right', | ||
@@ -365,6 +358,7 @@ original: { | ||
| var getSize = function (key) { | ||
| var _a; | ||
| if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') { | ||
| return 'auto'; | ||
| } | ||
| if (_this.propsSize && _this.propsSize[key] && _this.propsSize[key].toString().endsWith('%')) { | ||
| if (_this.propsSize && _this.propsSize[key] && ((_a = _this.propsSize[key]) === null || _a === void 0 ? void 0 : _a.toString().endsWith('%'))) { | ||
| if (_this.state[key].toString().endsWith('%')) { | ||
@@ -761,3 +755,4 @@ return _this.state[key].toString(); | ||
| Resizable.prototype.onMouseUp = function (event) { | ||
| var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original; | ||
| var _a, _b; | ||
| var _c = this.state, isResizing = _c.isResizing, direction = _c.direction, original = _c.original; | ||
| if (!isResizing || !this.resizable) { | ||
@@ -774,3 +769,3 @@ return; | ||
| if (this.props.size) { | ||
| this.setState(this.props.size); | ||
| this.setState({ width: (_a = this.props.size.width) !== null && _a !== void 0 ? _a : 'auto', height: (_b = this.props.size.height) !== null && _b !== void 0 ? _b : 'auto' }); | ||
| } | ||
@@ -784,3 +779,4 @@ this.unbindEvents(); | ||
| Resizable.prototype.updateSize = function (size) { | ||
| this.setState({ width: size.width, height: size.height }); | ||
| var _a, _b; | ||
| this.setState({ width: (_a = size.width) !== null && _a !== void 0 ? _a : 'auto', height: (_b = size.height) !== null && _b !== void 0 ? _b : 'auto' }); | ||
| }; | ||
@@ -816,3 +812,10 @@ Resizable.prototype.renderResizer = function () { | ||
| var Wrapper = this.props.as || 'div'; | ||
| return (React.createElement(Wrapper, __assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps), | ||
| return (React.createElement(Wrapper, __assign({ style: style, className: this.props.className }, extendsProps, { | ||
| // `ref` is after `extendsProps` to ensure this one wins over a version | ||
| // passed in | ||
| ref: function (c) { | ||
| if (c) { | ||
| _this.resizable = c; | ||
| } | ||
| } }), | ||
| this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }), | ||
@@ -819,0 +822,0 @@ this.props.children, |
@@ -113,2 +113,3 @@ var __extends = (this && this.__extends) || (function () { | ||
| */ | ||
| // tslint:disable-next-line | ||
| var normalizeToPair = function (val) { return (Array.isArray(val) ? val : [val, val]); }; | ||
@@ -152,2 +153,3 @@ var definedProps = [ | ||
| function Resizable(props) { | ||
| var _a, _b, _c, _d; | ||
| var _this = _super.call(this, props) || this; | ||
@@ -198,15 +200,6 @@ _this.ratio = 1; | ||
| }; | ||
| _this.ref = function (c) { | ||
| if (c) { | ||
| _this.resizable = c; | ||
| } | ||
| }; | ||
| _this.state = { | ||
| isResizing: false, | ||
| width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined' | ||
| ? 'auto' | ||
| : _this.propsSize && _this.propsSize.width, | ||
| height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined' | ||
| ? 'auto' | ||
| : _this.propsSize && _this.propsSize.height, | ||
| width: (_b = (_a = _this.propsSize) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'auto', | ||
| height: (_d = (_c = _this.propsSize) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'auto', | ||
| direction: 'right', | ||
@@ -298,6 +291,7 @@ original: { | ||
| var getSize = function (key) { | ||
| var _a; | ||
| if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') { | ||
| return 'auto'; | ||
| } | ||
| if (_this.propsSize && _this.propsSize[key] && _this.propsSize[key].toString().endsWith('%')) { | ||
| if (_this.propsSize && _this.propsSize[key] && ((_a = _this.propsSize[key]) === null || _a === void 0 ? void 0 : _a.toString().endsWith('%'))) { | ||
| if (_this.state[key].toString().endsWith('%')) { | ||
@@ -694,3 +688,4 @@ return _this.state[key].toString(); | ||
| Resizable.prototype.onMouseUp = function (event) { | ||
| var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original; | ||
| var _a, _b; | ||
| var _c = this.state, isResizing = _c.isResizing, direction = _c.direction, original = _c.original; | ||
| if (!isResizing || !this.resizable) { | ||
@@ -707,3 +702,3 @@ return; | ||
| if (this.props.size) { | ||
| this.setState(this.props.size); | ||
| this.setState({ width: (_a = this.props.size.width) !== null && _a !== void 0 ? _a : 'auto', height: (_b = this.props.size.height) !== null && _b !== void 0 ? _b : 'auto' }); | ||
| } | ||
@@ -717,3 +712,4 @@ this.unbindEvents(); | ||
| Resizable.prototype.updateSize = function (size) { | ||
| this.setState({ width: size.width, height: size.height }); | ||
| var _a, _b; | ||
| this.setState({ width: (_a = size.width) !== null && _a !== void 0 ? _a : 'auto', height: (_b = size.height) !== null && _b !== void 0 ? _b : 'auto' }); | ||
| }; | ||
@@ -749,3 +745,10 @@ Resizable.prototype.renderResizer = function () { | ||
| var Wrapper = this.props.as || 'div'; | ||
| return (React.createElement(Wrapper, __assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps), | ||
| return (React.createElement(Wrapper, __assign({ style: style, className: this.props.className }, extendsProps, { | ||
| // `ref` is after `extendsProps` to ensure this one wins over a version | ||
| // passed in | ||
| ref: function (c) { | ||
| if (c) { | ||
| _this.resizable = c; | ||
| } | ||
| } }), | ||
| this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }), | ||
@@ -752,0 +755,0 @@ this.props.children, |
| { | ||
| "name": "re-resizable", | ||
| "version": "6.9.16", | ||
| "version": "6.9.17", | ||
| "description": "Resizable component for React.", | ||
@@ -22,3 +22,3 @@ "title": "re-resizable", | ||
| "start": "npm-run-all --parallel storybook", | ||
| "test": "cross-env NODE_ENV='test' tsc -p tsconfig.test.json && avaron lib/index.test.js --renderer", | ||
| "test": "npm run test-ct", | ||
| "test:ci": "npm run flow && npm run build", | ||
@@ -30,3 +30,4 @@ "prepublish": "npm run build", | ||
| "build-storybook": "build-storybook", | ||
| "deploy": "npm run build-storybook && gh-pages -d storybook-static" | ||
| "deploy": "npm run build-storybook && gh-pages -d storybook-static", | ||
| "test-ct": "playwright test -c playwright-ct.config.ts" | ||
| }, | ||
@@ -46,2 +47,3 @@ "repository": { | ||
| "@babel/core": "7.11.6", | ||
| "@babel/eslint-parser": "7.11.0", | ||
| "@babel/plugin-proposal-class-properties": "7.10.4", | ||
@@ -51,5 +53,6 @@ "@babel/plugin-transform-modules-commonjs": "7.10.4", | ||
| "@babel/preset-typescript": "7.10.4", | ||
| "@babel/traverse": "7.11.5", | ||
| "@babel/traverse": "7.23.2", | ||
| "@babel/types": "7.11.5", | ||
| "@emotion/core": "10.0.35", | ||
| "@playwright/experimental-ct-react": "^1.43.1", | ||
| "@storybook/addon-info": "5.3.21", | ||
@@ -63,3 +66,2 @@ "@storybook/addon-options": "5.3.21", | ||
| "babel-core": "7.0.0-bridge.0", | ||
| "babel-eslint": "10.1.0", | ||
| "babel-loader": "8.1.0", | ||
@@ -77,5 +79,8 @@ "babel-plugin-external-helpers": "6.22.0", | ||
| "cross-env": "7.0.3", | ||
| "gh-pages": "3.1.0", | ||
| "npm-run-all": "4.1.5", | ||
| "gh-pages": "5.0.0", | ||
| "npm-run-all2": "5.0.0", | ||
| "playwright-core": "^1.43.1", | ||
| "prettier": "1.19.1", | ||
| "react": "^18.3.0", | ||
| "react-dom": "^18.3.0", | ||
| "rollup": "1.32.1", | ||
@@ -101,11 +106,2 @@ "rollup-plugin-babel": "4.4.0", | ||
| ], | ||
| "avaron": { | ||
| "babel": "inherit", | ||
| "require": [ | ||
| "babel-polyfill", | ||
| "babel-register" | ||
| ], | ||
| "fixture": "./test/fixture.html" | ||
| }, | ||
| "dependencies": {}, | ||
| "peerDependencies": { | ||
@@ -112,0 +108,0 @@ "react": "^16.13.1 || ^17.0.0 || ^18.0.0", |
@@ -5,4 +5,3 @@ <p align="center"><img src ="https://github.com/bokuweb/re-resizable/blob/master/logo.png?raw=true" /></p> | ||
| <p align="center"><a href="https://circleci.com/gh/bokuweb/re-resizable/tree/master"> | ||
| <img src="https://circleci.com/gh/bokuweb/re-resizable/tree/master.svg?style=svg" alt="Build Status" /></a> | ||
| <p align="center"><img src="https://github.com/bokuweb/re-resizable/workflows/Continuous%20Integration/badge.svg" alt="Build Status" /> | ||
| <a href="https://www.npmjs.com/package/re-resizable"> | ||
@@ -16,4 +15,2 @@ <img src="https://img.shields.io/npm/v/re-resizable.svg" alt="Build Status" /></a> | ||
| <img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" /></a> | ||
| <a href="https://bokuweb.github.io/re-resizable/"> | ||
| <img src="https://camo.githubusercontent.com/302badad5b2c7f7fa0929dadc1ca0ca7cdf2e8f0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73746f7279626f6f6b2d72656163742d3030643866662e7376673f636f6c6f72413d653136313863266c6f676f3d646174613a696d6167652f706e673b6261736536342c6956424f5277304b47676f414141414e53556845556741414144454141414179434159414141443143444f794141414141584e535230494172733463365141414141526e51553142414143786a777638595155414141414a6345685a6377414144734d41414137444163647671475141414158305355524256476844375a6c7262425256464d66506e6666757a72623067566751553651594c425574425931457742636153535434494349314367676d4b6e345341686a6b6736434a565a517678432f794d694342524979474742494450694a6f524155667142686549744241433561793233334d7a6f7a337a6836774f4a325a75374f376f54482b6d736e39337a76623766336678376c6e707642666747423552646d335a667659786d6d54683971325853744a55723356666736366c7134445652416861356d4e456845367174597666426f2f37714a6b4a72352b634b452b4b464952723956693846656d70796b7571324259356943426b446f6259414439513030793752527461355945555241415a4175676d6e5641486e633969547a7a674a6a2f4a67447231466c494c4632504e5963446c6573574e4b463245576a69777079565937717a36516c525352466f4278706f52796f743236366974356f6b316857415774704a42623949796865466f64777a4272535a64324b7463424e4f4c2f7967552f79524c7175723649692b7159725373375273705a3266517139723657313252616b4231766c514268696b496f6f714849456d364a535848614a72546d6b65504f475568524a7377725936554a594e45744d67732f554c534c3632425a497233734e5766674a4e304431774847585a53472f2b44444937396a7261504e494f79655762484d304c78307a516256746d374b3445716a7832786b44465236434a6a4a6c445651414341574641444b52523961446333517a712f654e6f42476f4761665177495045496671683042496259784a79564330336262734e71494d72454730475a6367734956773341466a66576d533749664c67486a4b392b785a5a41696775784675647149705578694331724257335776623447474f782b5a4e3455694c30344131754b493967455235416c455a56323644455136362f47466a3745686947674c333853612b454a4e474661316b6d556e7167503377374377457173465959777042626b6c6846594330656769616973744b5073453649706f4577616a6256776145394d5268574f51424e5a303054564e394c4e772b6d3638503461746f6d7a4f2f6542656577307472686845617559314350515245633634627370784748652b38424a354a61736866536d585a42386553506b39682f474f32366b6b554e5246553667696147787175395139676d70306c4735796631386a475751574b4d6e3877653755626b52427670484e44384354644463435a5548707666396630637275374d626c5275575034556c384c41374e36744e46346c774161737531476e6a515a3136473962634a462f64444f6168552f6b4b49666b395a4f54417068666b3648347a544c42706166646b584f6c484c346f373749353064374c436333636265333542315465784a544e4175573973766b4b58566d37664957655a73625462504e774f3576457a7a7437784d5242496f496d7832396f53644c6f387a323057665877375145646665335153364b2f4d426e4677445461576c6b41546a4b444d49376e7966565465434858564546737843364c5054334e4f2b464a5345685057795535496239794a4e582b6b35754551587a33667957704c425a634a6b5244636d64356b642b3248314e76627352614d4e764d75694332596a7258694b4d6c4d584d5459657841536939654131584565572f775247362b6c6d652f6a7a72347042693454675764464c3968475479783642314962506e4643615242692f53445148706d41745842776d54424d7377736c4e38626e50304c332f4e5667374436414c64346f394d6d504a5a4a6834544b6853664a504b4e327774655a31305a6c4972646b4250573162615a3031654b506363524f71777546616a4f646e76374752467133353275586f62584d39527a4778614133597159796a685a6f4b30462b66352b692b734537535a50476c793937363961613445357468574e37704f4e46704775317867664c5053304872624464397076592b33556c4e484658683843306e556634657052752f424842774e616f38767338555176674978575843396c6e514c4270356f557875515a5648764b344f6c5273376c5556564f46776d63706233614f642b2b784f564735617852702b62366b5166567371336a7351376269356c756948674d70484d5a547850722b7a483336447147366c6c42476a544a7a716c482b7a454477755869576f3135686c69375751617a4e2f447663322b534f37414833524777372f7935544b527466785058706246737567544270762b6e704e7a2b52386a766e435a4f4a394e6f664b41486d7273685944785a66447066416b614b374b662f67434a5a52766f55313061473850424664645363392f53733662702b596a6147784b50676a792b456551784453445168794369796e536f36466a52344d41696b48576945347a396835776e517259554f536e756633614d39464f7239497956347a4a524a6f6f2f7358764d664f7251582b4579636254374c4e2b5558534734544c527361324e76417672746448435a364f39776d7967696a4a6564516d62433978582f6c6153672f58717364626c6572555467654c4b726f55714e794c716b676d6c626374597952366d43784e364b514e724d3151754558434d4a6f6a4e43686d57316944544e5a6a2b57626466526a385359707244584177726e4442642f5470534c62783961724e646f5561696c3139454c3532366f56714e36584e6259594a426b4c747569304945514352304b516b355872483368586679312f2b6d6e4150774e6e34482f346f436769623841414141415355564f524b35435949493d" style="mix-blend-mode:multiply"/></a> | ||
| </p> | ||
@@ -75,2 +72,16 @@ | ||
| If you only want to set the width, you can do so by providing just the width property. | ||
| The height property will automatically be set to auto, which means it will adjust 100% of its parent's height: | ||
| ```javascript | ||
| import { Resizable } from 're-resizable'; | ||
| <Resizable | ||
| defaultSize={{ | ||
| width: 320 | ||
| }} | ||
| > | ||
| Sample with default size | ||
| </Resizable> | ||
| ``` | ||
| ### Example with `size` | ||
@@ -98,3 +109,3 @@ | ||
| #### `defaultSize?: { width: (number | string), height: (number | string) };` | ||
| #### `defaultSize?: { width?: (number | string), height?: (number | string) };` | ||
@@ -107,3 +118,3 @@ Specifies the `width` and `height` that the dragged item should start at. | ||
| #### `size?: { width: (number | string), height: (number | string) };` | ||
| #### `size?: { width?: (number | string), height?: (number | string) };` | ||
@@ -110,0 +121,0 @@ The `size` property is used to set the size of the component. |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by42.7%
138717
- Number of package files
- increased by22.22%
11
- Lines of code
- increased by55.81%
2937
- Number of lines in readme file
- increased by3.43%
332
Worsened metrics
- Dev dependency count
- increased by8.51%
51
No dependency changes