{"_id":"@aimee1608/react-rnd","_rev":"1-b18b7950c3aa8b10aac4ba10c3a22082","name":"@aimee1608/react-rnd","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"author":{"name":"bokuweb"},"avaron":{"babel":"inherit","require":["babel-polyfill","babel-register"],"fixture":"./fixture.html"},"bugs":{"url":"https://github.com/bokuweb/react-rnd/issues"},"dependencies":{"re-resizable":"^4.0.0","react-draggable":"^3.0.3"},"description":"

","devDependencies":{"@storybook/addon-actions":"^3.2.6","@storybook/addon-links":"^3.2.6","@storybook/react":"^3.2.8","avaron":"^0.0.14","babel-eslint":"^8.0.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-assign":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-es2015":"^6.24.1","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","enzyme":"^2.9.1","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","react-test-renderer":"^16.0.0","rollup":"^0.50.0","rollup-plugin-babel":"3.0.2","rollup-plugin-commonjs":"^8.2.0","rollup-plugin-node-globals":"1.1.0","rollup-plugin-node-resolve":"3.0.0","rollup-plugin-replace":"^2.0.0","rollup-watch":"4.3.1","sinon":"^3.2.1"},"homepage":"https://github.com/bokuweb/react-rnd","jsnext:main":"./lib/index.js","keywords":["react","resize","resizable","draggable","component"],"license":"MIT","main":"./lib/index.es5.js","module":"./lib/index.js","name":"@aimee1608/react-rnd","repository":{"type":"git","url":"git+https://github.com/bokuweb/react-rnd.git"},"scripts":{"build":"npm-run-all --parallel build:prod:*","build-storybook":"build-storybook","build:prod:es5":"rollup -c scripts/prod.es5.js","build:prod:main":"rollup -c scripts/prod.js","build:prod:umd":"rollup -c scripts/prod.umd.js","deploy":"npm run build-storybook && gh-pages -d storybook-static","flow":"flow","flow-copy":"flow-copy-source -v src lib && cp lib/index.js.flow lib/index.es5.js.flow ","lint":"eslint src","storybook":"start-storybook -p 6016","test":"NODE_ENV='test' avaron src/index.test.js --renderer","test:ci":"npm run flow && npm run build"},"title":"react-rnd","version":"0.0.1","gitHead":"530092d614d87701fca97c90af7724fc5705ff68","_id":"@aimee1608/react-rnd@0.0.1","_nodeVersion":"12.22.9","_npmVersion":"6.14.15","dist":{"integrity":"sha512-TaB6iC0QYpYPMNl03008cGoTcErbLpi0r4bx9vrreFYNL8HIKj3a053bpb5xt0g/AvN2MQJzT+mpmGHLwNhqcA==","shasum":"c424111c559996535c49793b52ecdeea553ab6da","tarball":"https://registry.npmjs.org/@aimee1608/react-rnd/-/react-rnd-0.0.1.tgz","fileCount":14,"unpackedSize":194454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3vICRA9TVsSAnZWagAAeR4QAISBR/1uu6ueQIXxXOp3\n8JJzoywueeHvLK6GsnpuMMvEfkNWvO3YLtYcdDowUTEn3u+5wB2J/P6qpgQq\nzAQeBseCVTJTL72TXx2ClCZSUZeGxCbo1DjYX+tCZbA4gGr789E9DHsts89I\n0ru2t8pzPUnvWjMW+q3jr2D7UveIuw1ZRWv0QJghwkgGTQSTzx5vmcic8YXi\nV275IlMnvQYiCLtZpemZRj/Hb/pxRworKXghbP060ysRZlHb194PZvHj0kIv\nMnHrwzYDwo/oEWYFzZOyApG1SmUwQTMEyFC5aTxmN716IydyoAXFZCNzu92C\nBkRCX/36BhA5ts87yxkcjWDmFT3/89kn/ll9l1DOdQPUpCv5qyMjMBB/I5JI\n4LXiyTT8+j2AxTIVwDSmvlCriJz1hx+611AG9j3wdZBR8Jn/KXEpieI2ujvv\npeJuACnwvZ2IlhQT8FV0eFL4dKRaIi1OQukVCm7cn0Uv0dKgxffgVo3viHiN\nASVXjFzL36kXt68YwtrbzegEL1b3igOaXfLQPtZKAIYuswZkffKmxBi+1Ldg\n6t2Ydt7KPFzJqtMSC9NR7+Bv/TBPm1Y2C+NZOS0QZKeGWwgbOePSmg2U/6mX\nOeDv4/kEJWASq0aH2GFXnAEy1tx/2E9VNPgksxgE4MHI9D5Cky6EUXnde6Fy\nPoXr\r\n=GMWk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPuIyTzSG4KGkXYl4YPdYOkvRwPOyN4czhvSmXHjeV9AiEAkUOgQPf6MsQhUAF8FtwVH+MjegvKNSVtXQtYXLmYL8A="}]},"_npmUser":{"name":"aimee1608","email":"shuigongqian@sina.com"},"directories":{},"maintainers":[{"name":"aimee1608","email":"shuigongqian@sina.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-rnd_0.0.1_1644919752452_0.8730630005419162"},"_hasShrinkwrap":false}},"time":{"created":"2022-02-15T10:09:12.387Z","0.0.1":"2022-02-15T10:09:12.584Z","modified":"2022-04-04T12:19:12.691Z"},"maintainers":[{"name":"aimee1608","email":"shuigongqian@sina.com"}],"description":"

","homepage":"https://github.com/bokuweb/react-rnd","keywords":["react","resize","resizable","draggable","component"],"repository":{"type":"git","url":"git+https://github.com/bokuweb/react-rnd.git"},"author":{"name":"bokuweb"},"bugs":{"url":"https://github.com/bokuweb/react-rnd/issues"},"license":"MIT","readme":"

\n\n

Resizable and draggable component for React.

\n\n

\n\"Build\n\n\"Build \n\n \n\n \n

\n\n## Table of Contents\n\n- [Demo](#Demo)\n- [Install](#install)\n- [Usage](#usage)\n- [Props](#props)\n- [Callback](#callback)\n- [Method](#method)\n- [Test](#test)\n- [Changelog](#changelog)\n- [License](#license)\n\n## Demo\n\n\n

\n \n

\n\n## Install\n\n- use npm\n\n```sh\nnpm i -S react-rnd\n```\n\n- use yarn\n\n```sh\nyarn add react-rnd\n```\n\n## Usage\n\n### Example with `default`\n\n``` javascript\n\n Rnd\n\n```\n\n### Example with `position` and `size`\n\n``` javascript\n { this.setState({ x: d.x, y: d.y }) }}\n onResize={(e, direction, ref, delta, position) => {\n this.setState({\n width: ref.offsetWidth,\n height: ref.offsetHeight,\n ...position,\n });\n }}\n>\n 001\n\n```\n\n### Example\n\nYou can try it on [WebpackBin](https://www.webpackbin.com/bins/-Ku4nRhImIfnt9N08lGu) too.\n\n## Props\n\n#### `default: { x: number; y: number; width?: number | string; height?: number | string; };`\n\nThe `width` and `height` property is used to set the default size of the component.\nFor example, you can set `300`, `'300px'`, `50%`. \nIf omitted, set `'auto'`.\n\nThe `x` and `y` property is used to set the default position of the component. \n\n#### `size?: { width: (number | string), height: (number | string) };`\n\nThe `size` property is used to set size of the component.\nFor example, you can set 300, '300px', 50%.\n\nUse `size` if you need to control size state by yourself.\n\n#### `position?: { x: number, y: number };`\n\nThe `position` property is used to set position of the component.\nUse `position` if you need to control size state by yourself.\n\nsee, following example. \n \n``` javascript\n { this.setState({ x: d.x, y: d.y }) }}\n onResize={(e, direction, ref, delta, position) => {\n this.setState({\n width: ref.offsetWidth,\n height: ref.offsetHeight,\n ...position,\n });\n }}\n>\n 001\n\n```\n\n#### `className?: string;`\n\nThe `className` property is used to set the custom `className` of the component.\n\n#### `style?: { [key: string]: string };`\n\nThe `style` property is used to set the custom `style` of the component.\n\n#### `minWidth?: number | string;`\n\nThe `minWidth` property is used to set the minimum width of the component.\nFor example, you can set `300`, `'300px'`, `50%`. \n\n#### `minHeight?: number | string;`\n\nThe `minHeight` property is used to set the minimum height of the component.\nFor example, you can set `300`, `'300px'`, `50%`. \n\n#### `maxWidth?: number | string;`\n\nThe `maxWidth` property is used to set the maximum width of the component.\nFor example, you can set `300`, `'300px'`, `50%`. \n\n#### `maxHeight?: number | string`;\n\nThe `maxHeight` property is used to set the maximum height of the component.\nFor example, you can set `300`, `'300px'`, `50%`. \n\n#### `z?: number;`\n\nThe `z` property is used to set the zIndex of a component.\n\n#### `resizeGrid?: [number, number];`\n\nThe `resizeGrid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`.\n\n#### `dragGrid?: [number, number];`\n\nThe `dragGrid` property is used to specify the increments that moving should snap to. Defaults to `[1, 1]`.\n\n#### `lockAspectRatio?: boolean;`\n\nThe `lockAspectRatio` property is used to lock aspect ratio.\nIf omitted, set `false`.\n\n#### `dragHandleClassName?: string;`\n\nSpecifies a selector to be used as the handle that initiates drag.\nExample: '.handle'.\n\n#### `resizeHandleStyles?: HandleStyles;`\n\nThe `resizeHandleStyles` property is used to override the style of one or more resize handles.\nOnly the axis you specify will have its handle style replaced.\nIf you specify a value for `right` it will completely replace the styles for the `right` resize handle,\nbut other handle will still use the default styles.\n\n``` javascript\n\ntype Style = { [key: string]: string | number };\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style\n}\n```\n\n#### `resizeHandleClasses?: HandleClasses;`\n\nThe `resizeHandleClasses` property is used to set the className of one or more resize handles.\n\n``` javascript\ntype HandleClasses = {\n bottom?: string;\n bottomLeft?: string;\n bottomRight?: string;\n left?: string;\n right?: string;\n top?: string;\n topLeft?: string;\n topRight?: string;\n}\n```\n\n#### `resizeHandleWrapperClass?: string;`\n\nThe `resizeHandleWrapperClass` property is used to set css class name of resize handle wrapper(`span`) element.\n\n#### `resizeHandleWrapperStyle?: Style;`\n\nThe `resizeHandleWrapperStyle` property is used to set css class name of resize handle wrapper(`span`) element.\n\n#### `enableResizing?: ?Enable;`\n\nThe `enableResizing` property is used to set the resizable permission of the component.\n\nThe permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.\nIf omitted, all resizer are enabled.\nIf you want to permit only right direction resizing, set `{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }`.\n\n``` javascript\nexport type Enable = {\n bottom?: boolean;\n bottomLeft?: boolean;\n bottomRight?: boolean;\n left?: boolean;\n right?: boolean;\n top?: boolean;\n topLeft?: boolean;\n topRight?: boolean;\n}\n```\n\n#### `disableDragging?: boolean;`\n\nThe `disableDragging` property disables dragging completely.\n\n#### `extendsProps?: { [key: string]: any };`\n\nThis property is used to pass the other props to the component.\n\ne.g.\n\n``` javascript\nconst extendsProps = {\n data-foo: 'foo',\n onMouseOver: () => {},\n};\n\n\n```\n\n#### `dragAxis?: 'x' | 'y' | 'both' | 'none'`\n\nThe direction of allowed movement (dragging) allowed ('x','y','both','none').\n\n#### `bounds?: string;`\n\nSpecifies movement boundaries. Accepted values:\n - `parent` restricts movement within the node's offsetParent\n (nearest node with position relative or absolute), or\n - Selector, like `.fooClassName`.\n\n## Callback\n\n#### `onResizeStart?: RndResizeStartCallback;`\n\n`RndResizeStartCallback` type is below.\n\n``` javascript\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n```\n\nCalls when resizable component resize start.\n\n#### `onResize?: RndResizeCallback;`\n\n`RndResizeCallback` type is below.\n\n``` javascript\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n```\n\nCalls when resizable component resizing.\n\n#### `onResizeStop?: RndResizeCallback;`\n\n`RndResizeCallback` type is below.\n\n``` javascript\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n```\n\nCalls when resizable component resize stop.\n\n#### `onDragStart: DraggableEventHandler;`\n\nCallback called on dragging start.\n\n``` javascript\ntype DraggableData = {\n node: HTMLElement,\n x: number,\n y: number,\n deltaX: number, deltaY: number,\n lastX: number, lastY: number\n};\n\ntype DraggableEventHandler = (\n e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,\n) => void | false;\n```\n\n#### `onDrag: DraggableEventHandler;`\n\n`onDrag` called with the following parameters:\n\n``` javascript\ntype DraggableData = {\n node: HTMLElement,\n x: number,\n y: number,\n deltaX: number, deltaY: number,\n lastX: number, lastY: number\n};\n\ntype DraggableEventHandler = (\n e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,\n) => void | false;\n```\n\n#### `onDragStop: DraggableEventHandler;`\n\n`onDragStop` called on dragging stop.\n\n\n``` javascript\ntype DraggableData = {\n node: HTMLElement,\n x: number,\n y: number,\n deltaX: number, deltaY: number,\n lastX: number, lastY: number\n};\n\ntype DraggableEventHandler = (\n e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,\n) => void | false;\n```\n\n## Method\n\n\n#### `updateSize(size: { width: string | number, height: string | number })`\n\nUpdate component size.\nFor example, you can set `300`, `'300px'`, `50%`. \n\n- for example\n\n``` js\nclass YourComponent extends Component {\n\n ...\n\n update() {\n this.rnd.updateSize({ width: 200, height: 300 });\n }\n\n render() {\n return (\n { this.rnd = c; }} ...rest >\n example\n \n );\n }\n ...\n}\n```\n\n#### `updatePosition({ x: number, y: number })`\n\nUpdate component position.\n`grid` `bounds` props is ignored, when this method called.\n\n- for example\n\n``` js\nclass YourComponent extends Component {\n\n ...\n\n update() {\n this.rnd.updatePosition({ x: 200, y: 300 });\n }\n\n render() {\n return (\n { this.rnd = c; }} ...rest >\n example\n \n );\n }\n\n ...\n}\n``` \n\n#### `updateZIndex(z: number)`\n\nUpdate component z-index.\n\n- for example\n\n``` js\nclass YourComponent extends Component {\n\n ...\n\n update() {\n this.rnd.updateZIndex(200);\n }\n\n render() {\n return (\n { this.rnd = c; }} ...rest>\n example\n \n );\n }\n\n ...\n}\n```\n\n\n## Test\n\n``` sh\nnpm t\n```\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\nIf you have a bug to report, please reproduce the bug in [WebpackBin](https://www.webpackbin.com/bins/-Ku4nRhImIfnt9N08lGu) to help us easily isolate it.\n\n## Changelog\n\n#### v7.1.3\n\nFixed a bug, `extendProps` is not passed correctly.\nFixed a bug, `bounds` is not work correctly. (#162)\n\n#### v7.1.1 / v7.1.2\n\n- Add internal props.\n\n#### v7.1.0\n\n- Add `size`.\n- Add `position`.\n\n#### v7.0.0\n\n- Add `default` instead of `x`, `y`, `width`, `height`.\n- Add `resizeHandleWrapperClass` and `resizeHandleWrapperStyle`.\n\n#### v6.0.1\n\n- Remove unnecessary types.\n\n#### v6.0.0\n\n- Use rollup.\n- Support % min/max size.\n- Change props, remove `default` and add `x`, `y`, `width`, `height`.\n- Rename `dragHandlersXXXX` and `resizeHandlersXXXX` props to `dragHandleXXXX` and `resizeHandleXXXX`.\n\n#### v5.1.3\n\n- Fix cursor style, set `normal` to cursor style when `dragHandlerClassName` is not empty.\n\n#### v5.1.2\n\n- Add position `relative` when component will update.\n\n#### v5.1.1\n\n- Add `top: 0`, `left: 0`.\n- Add position `relative` when parent position equals `static`.\n\n#### v5.1.0\n\n- Update dependencies(`react-draggable v3`, `flow-bin v0.53`, and other...)\n\n#### v5.0.9\n\n- Fix bug new `z` props is not applied to state.\n\n#### v5.0.8\n\n- Add `extendsProps`. #129\n\n#### v5.0.7\n\n- Add `disableDragging` props.\n\n#### v5.0.6\n\n- Fix flow error.\n\n#### v5.0.5\n\n- Add index.js.flow\n\n#### v5.0.4\n\n- Fix Issue #117.\n\n#### v5.0.3\n\n- Fix `updateZIndex`.\n- Fix `updateSize`.\n- Fix left and top bounds.\n\n#### v5.0.2\n\n- Fix argument events #100\n\n#### v5.0.1\n\n- Fix example\n- Update README\n\n#### v5.0.0\n\n- Fix resize bounds.\n- Modify API.\n- Use original `react-draggable`.\n\n\n#### v4.2.1\n\n- Added `updateZIndex`, method to updated component `zIndex` state.\n\n#### v4.2.0\n\n- Pass the new position in the onResizeStop callback #60\n\n\n#### v4.1.0\n\n- Pass the new position along in the resize callback #55\n\n\n#### v4.0.1\n\n- Fix style props to applt zIndex chaned.\n\n#### v4.0.0\n\n- Rename `react-rnd`.\n- Remove `canUpdatePositionByParent` property.\n- Remove `canUpdateSizeByParent` property.\n- Remove `initiAsResizing` property.\n- Change `x`, `y`, `width` and `height` property to `initial`.\n- Add `updateSize`, `updatePosition`, method to updated conponent state.\n- Add `lockAspectRatio` property to lock aspect ratio when resizing.\n\n#### v3.0.0\n\n- Add `canUpdatePositionByParent` property.\n\n#### v2.0.0\n\n- Fix bug, resize and grid not work properly.\n\n#### v1.2.0\n\n- Add `grid` props to snap grid. (thanks @paulyoung)\n- Fix bug, moveAxis not work properly.\n\n\n#### v1.1.3\n\n- Fix situations when on dragStop you wanted to revert to 0,0 position #39\n- Add `canUpdateSizeByParent` props #38\n\n#### v1.1.2\n\n- Add object.assign transform\n\n#### v1.1.0\n\n- Add add module exports plugin for `require`\n\n#### v1.0.1\n\n- Bug fix\n\n#### v1.0.0\n\n- Support react v15.x\n- Support left, top resizer\n- Remove start props, use width, height, x, and y.\n\n#### v0.5.3\n\n- Add handle selector\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2017 bokuweb\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","readmeFilename":"README.md"}