{"_id":"@codemayonnaise/react-dnd-scrollzone","name":"@codemayonnaise/react-dnd-scrollzone","dist-tags":{"latest":"1.0.17"},"versions":{"1.0.17":{"name":"@codemayonnaise/react-dnd-scrollzone","version":"1.0.17","description":"A cross browser solution to scrolling during drag and drop.","main":"lib/index.js","scripts":{"build":"rm -rf lib && babel src --out-dir lib","lint":"eslint src","pretest":"npm run lint","test":"mocha test","prepublish":"in-publish && npm run test && npm run build || not-in-publish","publish:major":"npm version major && npm publish","publish:minor":"npm version minor && npm publish","publish:patch":"npm version patch && npm publish","postpublish":"git push origin master --tags"},"repository":{"type":"git","url":"git+https://github.com/nosferatu500/react-dnd-scrollzone.git"},"bugs":{"url":"https://github.com/nosferatu500/react-dnd-scrollzone/issues"},"publishConfig":{"access":"public"},"keywords":["react","drag","drop","scroll","dnd","drag and drop","polyfill","auto"],"contributors":[{"name":"Nicholas Clawson"},{"name":"Vitalii Shvetsov"}],"license":"MIT","dependencies":{"hoist-non-react-statics":"^3.3.2","lodash.throttle":"^4.1.1","prop-types":"^15.7.2","raf":"^3.4.1","react-display-name":"^0.2.5"},"devDependencies":{"@babel/cli":"^7.14.5","@babel/core":"^7.14.6","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/preset-env":"^7.14.7","@babel/preset-react":"^7.14.5","@babel/register":"^7.14.5","babel-eslint":"^10.1.0","chai":"^4.3.4","eslint":"^7.29.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.23.4","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.24.0","in-publish":"^2.0.1","mocha":"^9.0.1","react":"^17.0.2","react-dnd":"^11.1.3","react-dom":"^17.0.2","sinon":"^11.1.1","sinon-chai":"^3.7.0"},"peerDependencies":{"react":">=17.0.2","react-dnd":">=11.1.3","react-dom":">=17.0.2"},"gitHead":"cdee3295bff36b8e830e01258317168d646e49d7","homepage":"https://github.com/nosferatu500/react-dnd-scrollzone#readme","_id":"@codemayonnaise/react-dnd-scrollzone@1.0.17","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-fvvy1ThwIwQuS7mjHyFAZOHZZDb6B+rZNgOBmk603mDua1nV1WN4GgvOdq01idtcMzrAHTJdM7+pe461mlhq9Q==","shasum":"7e6c3793dfc3a2b453b5877928e829d47c1e9b29","tarball":"https://registry.npmjs.org/@codemayonnaise/react-dnd-scrollzone/-/react-dnd-scrollzone-1.0.17.tgz","fileCount":9,"unpackedSize":28904,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9WtMQbnnzrtbiKzbH8eu9VxpHFBcSr5cn7l8b1C5Y4QIhAPZBzvz8fOUuHLUI2Wtlfux2mh35SXhX6ThMi57ulV5E"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAIPHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9GBAAgZJ0LlXt+PjgLt1Pm6R8jlwFnbHjhAe6p8cJ9I6N1CUR1qAD\r\nxKqQ2llitccN0+2glwO7Ga58b5YrOiAICdLQKLyL7E/OzZExOatsiQyCaOUj\r\naQPHrKL5qsnx34e8ciiVRUG4lFY3cWDUMxt5tlQfLnwP0odhPzpw17l7bfce\r\ncBaz29t9MKWCCPO8JT/GQstT3MPo9THXP2m1g96bt5FY7L5z4vkjnc2WeRy4\r\nKOUnMGdqdb7xrSMBxte2Bq8XdryCzRtdm86XLJxQ6JaG4SQ3sA2tExvG2lmu\r\n0rUcH5DwqSu8du1krii4sCF+QXePc7QfXA3p42kjRcnHqJwcgATmoWqbhTWC\r\nPcMJLHQKA8T2GVeO6pWrx3qsDAlC6GgTlNQ18gl9WGDaZWzg9UEbz/mapwKS\r\nnWzosEKwZvtYRxeL2JV5N/MWHIy79J+/gcN7EHlQIgQXrE+r1lV/T6pfF3ad\r\nZBc7TnvplBm8IwqHHOKPDxLZd6EkVIaY7h1cv4WAh5zRMMqFI1tfSw2eFIWo\r\nzLcE4R1CmyoNrdLddj+AprgFLTOOEVhCTTAddDiz4b9bJlUq0zaM3PwJb5yq\r\n9LQ5yn5/FceAaoHlt56h9+Dv9hZfd84vKihEYyWnozeVN+9EsE2sARRquW/x\r\nj5UT7KCO749cypss4cEzQFTmZmfMgXROqUo=\r\n=hHja\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"},"directories":{},"maintainers":[{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dnd-scrollzone_1.0.17_1677755335432_0.21076025792265263"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-02T11:08:55.369Z","1.0.17":"2023-03-02T11:08:55.675Z","modified":"2023-03-02T11:08:55.809Z"},"maintainers":[{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"}],"description":"A cross browser solution to scrolling during drag and drop.","homepage":"https://github.com/nosferatu500/react-dnd-scrollzone#readme","keywords":["react","drag","drop","scroll","dnd","drag and drop","polyfill","auto"],"repository":{"type":"git","url":"git+https://github.com/nosferatu500/react-dnd-scrollzone.git"},"contributors":[{"name":"Nicholas Clawson"},{"name":"Vitalii Shvetsov"}],"bugs":{"url":"https://github.com/nosferatu500/react-dnd-scrollzone/issues"},"license":"MIT","readme":"# react-beautifull-dnd-scrollzone\n\nForked from https://github.com/azuqua/react-dnd-scrollzone with support for react-dnd@7.\n\nCross browser compatible scrolling containers for drag and drop interactions.\n\n### [Basic Example](./examples/basic)\n\n```js\nimport React, { Component } from 'react';\nimport { DragDropContextProvider } from 'react-dnd';\nimport HTML5Backend from 'react-dnd-html5-backend';\nimport withScrolling from 'react-dnd-scrollzone';\nimport DragItem from './DragItem';\nimport './App.css';\n\nconst ScrollingComponent = withScrolling('div');\n\nconst ITEMS = [1,2,3,4,5,6,7,8,9,10];\n\nexport default class App extends Component {\n  render() {\n    return (\n      <DragDropContextProvider backend={HTML5Backend}>\n        <ScrollingComponent className=\"App\">\n          {ITEMS.map(n => (\n            <DragItem key={n} label={`Item ${n}`} />\n          ))}\n        </ScrollingComponent>\n      </DragDropContextProvider>\n    );\n  }\n}\n```\n\nNote: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`.\n\n### Easing Example\n\n```js\nimport React, { Component } from 'react';\nimport { DragDropContextProvider } from 'react-dnd';\nimport HTML5Backend from 'react-dnd-html5-backend';\nimport withScrolling, { createHorizontalStrength, createVerticalStrength } from 'react-dnd-scrollzone';\nimport DragItem from './DragItem';\nimport './App.css';\n\n\nconst ScrollZone = withScrolling('ul');\nconst linearHorizontalStrength = createHorizontalStrength(150);\nconst linearVerticalStrength = createVerticalStrength(150);\nconst ITEMS = [1,2,3,4,5,6,7,8,9,10];\n\n// this easing function is from https://gist.github.com/gre/1650294 and\n// expects/returns a number between [0, 1], however strength functions\n// expects/returns a value between [-1, 1]\nfunction ease(val) {\n  const t = (val + 1) / 2; // [-1, 1] -> [0, 1]\n  const easedT = t<.5 ? 2*t*t : -1+(4-2*t)*t;\n  return easedT * 2 - 1; // [0, 1] -> [-1, 1]\n}\n\nfunction hStrength(box, point) {\n  return ease(linearHorizontalStrength(box, point));\n}\n\nfunction vStrength(box, point) {\n  return ease(linearVerticalStrength(box, point));\n}\n\nexport default App(props) {\n  return (\n    <DragDropContextProvider backend={HTML5Backend}>\n      <ScrollingComponent\n        className=\"App\"\n        verticalStrength={vStrength}\n        horizontalStrength={hStrength} >\n\n        {ITEMS.map(n => (\n          <DragItem key={n} label={`Item ${n}`} />\n        ))}\n      </ScrollingComponent>\n    </DragDropContextProvider>\n  );\n}\n```\nNote: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`.\n\n### Virtualized Example\n\nSince react-dnd-scrollzone utilizes the Higher Order Components (HOC) pattern, drag and drop scrolling behaviour can easily be added to existing components. For example to speedup huge lists by using [react-virtualized](https://github.com/bvaughn/react-virtualized) for a windowed view where only the visible rows are rendered:\n\n```js\nimport React from 'react';\nimport { DragDropContextProvider } from 'react-dnd';\nimport HTML5Backend from 'react-dnd-html5-backend';\nimport withScrolling from 'react-dnd-scrollzone';\nimport { List } from 'react-virtualized';\nimport DragItem from './DragItem';\nimport './App.css';\n\nconst ScrollingVirtualList = withScrolling(List);\n\n// creates array with 1000 entries\nconst ITEMS = Array.from(Array(1000)).map((e,i)=> `Item ${i}`);\n\n\nexport default App(props) {\n  return (\n    <DragDropContextProvider backend={HTML5Backend}>\n      <ScrollingVirtualList\n        className=\"App\"\n        height={600}\n        width={800}\n        rowCount={ITEMS.length}\n        rowHeight={34}\n        rowRenderer={\n          ({ key, index, style }) => (\n            <DragItem\n              key={key}\n              style={style}\n              label={ITEMS[index]}\n            />\n          )\n        }\n       />\n    </DragDropContextProvider>\n  );\n}\n```\n\n\n### API\n\n#### `withScrolling`\n\nA React higher order component with the following properties:\n\n```js\nconst ScrollZone = withScrolling(String|Component);\n\n<ScrollZone\n  strengthMultiplier={Number}\n  horizontalStrength={Function}\n  verticalStrength={Function}\n  onScrollChange={Function} >\n\n  {children}\n</Scrollzone>\n```\nApply the withScrolling function to any html-identifier (\"div\", \"ul\" etc) or react component to add drag and drop scrolling behaviour.\n\n * `horizontalStrength` a function that returns the strength of the horizontal scroll direction\n * `verticalStrength` - a function that returns the strength of the vertical scroll direction\n * `strengthMultiplier` - strength multiplier, play around with this (default 30)\n * `onScrollChange` - a function that is called when `scrollLeft` or `scrollTop` of the component are changed. Called with those two arguments in that order.\n\nThe strength functions are both called with two arguments. An object representing the rectangle occupied by the Scrollzone, and an object representing the coordinates of mouse.\n\nThey should return a value between -1 and 1.\n * Negative values scroll up or left.\n * Positive values scroll down or right.\n * 0 stops all scrolling.\n\n#### `createVerticalStrength(buffer)` and `createHorizontalStrength(buffer)`\n\nThese allow you to create linearly scaling strength functions with a sensitivity different than the default value of 150px.\n\n##### Example\n\n```js\nimport withScrolling, { createVerticalStrength, createHorizontalStrength } from 'react-dnd-scrollzone';\n\nconst Scrollzone = withScrolling('ul');\nconst vStrength = createVerticalStrength(500);\nconst hStrength = createHorizontalStrength(300);\n\n// zone will scroll when the cursor drags within\n// 500px of the top/bottom and 300px of the left/right\nconst zone = (\n  <Scrollzone verticalStrength={vStrength} horizontalStrength={hStrength}>\n\n  </Scrollzone>\n);\n```\n","readmeFilename":"README.md"}