@jswork/react-draggable-list
Advanced tools
@jswork/react-draggable-list - npm Package Compare versions
Comparing version 1.0.0 to 1.1.1
118
package.json
| { | ||
| "name": "@jswork/react-draggable-list", | ||
| "version": "1.0.0", | ||
| "description": "A simple draggable list component.", | ||
| "main": "dist/index.js", | ||
| "version": "1.1.1", | ||
| "main": "dist/index.cjs.js", | ||
| "module": "dist/index.esm.js", | ||
| "types": "dist/index.d.ts", | ||
| "homepage": "https://js.work", | ||
| "license": "MIT", | ||
| "exports": { | ||
| ".": { | ||
| "import": "./dist/index.esm.js", | ||
| "require": "./dist/index.cjs.js", | ||
| "types": "./dist/index.d.ts" | ||
| } | ||
| }, | ||
| "scripts": { | ||
| "dev": "cross-env NODE_ENV=development webpack-dev-server", | ||
| "build": "cross-env NODE_ENV=production webpack -p", | ||
| "postbuild": "node-sass src/components/style.scss dist/style.css", | ||
| "predocs": "node build/markdown.js", | ||
| "docs": "cross-env NODE_ENV=docs webpack -p", | ||
| "postdocs": "t2k", | ||
| "pages": "./bin/docs.rb", | ||
| "start": "node build/server.js", | ||
| "test": "jest", | ||
| "release": "release-it" | ||
| "build": "tsup", | ||
| "release": "release-it --ci --npm.skipChecks" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/afeiship/react-draggable-list.git" | ||
| "devDependencies": { | ||
| "@swc/core": "^1.3.93", | ||
| "@types/react": "^18.2.28", | ||
| "@types/react-dom": "^18.2.13", | ||
| "autoprefixer": "^10.4.16", | ||
| "cssnano": "^6.0.1", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "tsup": "^7.2.0", | ||
| "typescript": "^5.2.2" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "registry": "https://registry.npmjs.org" | ||
| }, | ||
| "dependencies": { | ||
| "@jswork/react-list": "^1.2.1", | ||
| "@types/sortablejs": "^1.15.7", | ||
| "sortablejs": "^1.15.1" | ||
| }, | ||
| "keywords": [ | ||
@@ -28,68 +47,3 @@ "react", | ||
| "drag-and-drop" | ||
| ], | ||
| "author": "afei", | ||
| "license": "MIT", | ||
| "browserslist": { | ||
| "production": [ | ||
| "last 2 version", | ||
| "Explorer >= 10", | ||
| "Android >= 4" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/afeiship/react-draggable-list/issues" | ||
| }, | ||
| "homepage": "https://github.com/afeiship/react-draggable-list#readme", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.11.6", | ||
| "@babel/plugin-proposal-class-properties": "^7.10.4", | ||
| "@babel/plugin-proposal-decorators": "^7.10.5", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.11.0", | ||
| "@babel/plugin-transform-parameters": "^7.10.5", | ||
| "@babel/preset-env": "^7.11.5", | ||
| "@babel/preset-react": "^7.10.4", | ||
| "@babel/register": "^7.11.5", | ||
| "@jswork/next-replace-in-file": "^1.0.0", | ||
| "@jswork/react-demokit": "^1.0.2", | ||
| "@jswork/react-markdown-props": "^1.0.1", | ||
| "@jswork/webpack-lib-kits": "^1.0.2", | ||
| "@testing-library/react": "^11.0.4", | ||
| "autoprefixer": "^10.0.1", | ||
| "babel-loader": "^8.1.0", | ||
| "cross-env": "^7.0.2", | ||
| "enzyme": "^3.11.0", | ||
| "enzyme-adapter-react-16": "^1.15.5", | ||
| "express": "^4.17.1", | ||
| "indent-string": "^4.0.0", | ||
| "jest": "^26.4.2", | ||
| "node-sass": "^4.14.1", | ||
| "offline-plugin": "^5.0.7", | ||
| "prettier": "^2.1.2", | ||
| "release-it": "^14.2.1", | ||
| "string-replace-webpack-plugin": "^0.1.3", | ||
| "webpack": "^4.44.2", | ||
| "webpack-cli": "^3.3.12", | ||
| "webpack-dev-server": "^3.11.0", | ||
| "webpack-merge": "^5.1.4" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "prop-types": "^15.7.2" | ||
| }, | ||
| "dependencies": { | ||
| "@jswork/noop": "^1.0.0", | ||
| "@jswork/react-list": "^1.0.0", | ||
| "classnames": "^2.2.6", | ||
| "sortablejs": "^1.13.0" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "registry": "https://registry.npmjs.org" | ||
| } | ||
| } | ||
| ] | ||
| } |
158
README.md
| # react-draggable-list | ||
| > A simple draggable list component. | ||
| [![version][version-image]][version-url] | ||
| [![license][license-image]][license-url] | ||
| [![size][size-image]][size-url] | ||
| [![download][download-image]][download-url] | ||
| ## installation | ||
| ```shell | ||
| npm install -S @jswork/react-draggable-list | ||
| yarn add @jswork/react-draggable-list | ||
| ``` | ||
| ## properties | ||
| | Name | Type | Required | Default | Description | | ||
| | --------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------- | | ||
| | className | string | false | - | The extended className for component. | | ||
| | onChange | func | false | noop | When sortable list changed. | | ||
| | items | array | false | [] | The list data source. | | ||
| | template | func | false | noop | The list item template. | | ||
| | rowKey | any | false | 'id' | The uniq row key. | | ||
| | options | object | false | - | The core sortable component options (@sortable: https://github.com/SortableJS/Sortable). | | ||
| ## usage | ||
| 1. import css | ||
| ```scss | ||
| @import "~@jswork/react-draggable-list/dist/style.css"; | ||
| // or use sass | ||
| @import "~@jswork/react-draggable-list/dist/style.scss"; | ||
| // customize your styles: | ||
| $react-draggable-list-options: () | ||
| ``` | ||
| 2. import js | ||
| ```js | ||
| import ReactDemokit from '@jswork/react-demokit'; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import ReactDraggableList from '@jswork/react-draggable-list'; | ||
| import './assets/style.scss'; | ||
| class App extends React.Component { | ||
| state = { | ||
| items: [ | ||
| { | ||
| title: '猫妖传1', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传2', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传3', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传4', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传5', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传6', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| } | ||
| ], | ||
| items2: [ | ||
| { | ||
| title: '猫妖传1', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传2', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传3', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传4', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传5', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| }, | ||
| { | ||
| title: '猫妖传6', | ||
| img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg', | ||
| description: '讲述大唐传奇的奇幻剧' | ||
| } | ||
| ] | ||
| }; | ||
| onChange = (e) => { | ||
| const { value } = e.target; | ||
| console.log('value: ', value); | ||
| }; | ||
| render() { | ||
| return ( | ||
| <ReactDemokit | ||
| className="p-3 app-container" | ||
| url="https://github.com/afeiship/react-draggable-list"> | ||
| <ReactDraggableList | ||
| className="dg1" | ||
| onChange={this.onChange} | ||
| template={({ item }) => <div>{item.title}</div>} | ||
| rowKey="title" | ||
| items={this.state.items} | ||
| /> | ||
| <ReactDraggableList | ||
| className="dg2" | ||
| onChange={this.onChange} | ||
| template={({ item }) => <div>{item.title}</div>} | ||
| rowKey="title" | ||
| items={this.state.items2} | ||
| /> | ||
| </ReactDemokit> | ||
| ); | ||
| } | ||
| } | ||
| ReactDOM.render(<App />, document.getElementById('app')); | ||
| ``` | ||
| ## documentation | ||
| - https://afeiship.github.io/react-draggable-list/ | ||
| ## license | ||
| Code released under [the MIT license](https://github.com/afeiship/react-draggable-list/blob/master/LICENSE.txt). | ||
| [version-image]: https://img.shields.io/npm/v/@jswork/react-draggable-list | ||
| [version-url]: https://npmjs.org/package/@jswork/react-draggable-list | ||
| [license-image]: https://img.shields.io/npm/l/@jswork/react-draggable-list | ||
| [license-url]: https://github.com/afeiship/react-draggable-list/blob/master/LICENSE.txt | ||
| [size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/react-draggable-list | ||
| [size-url]: https://github.com/afeiship/react-draggable-list/blob/master/dist/react-draggable-list.min.js | ||
| [download-image]: https://img.shields.io/npm/dm/@jswork/react-draggable-list | ||
| [download-url]: https://www.npmjs.com/package/@jswork/react-draggable-list |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by16.83%
32124
- Dependency count
- decreased by-57.14%
3
- Dev dependency count
- decreased by-70%
9
- Number of package files
- increased by42.86%
10
- Lines of code
- increased by418.75%
166
Worsened metrics
- Number of low maintenance alerts
- increased byInfinity%
2
- Number of lines in readme file
- decreased by-95.12%
8
- Number of low supply chain risk alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@types/sortablejs@^1.15.7
+ Added@types/sortablejs@1.15.8(transitive)
- Removed@jswork/noop@^1.0.0
- Removedclassnames@^2.2.6
- Removedjs-tokens@4.0.0(transitive)
- Removedloose-envify@1.4.0(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact@16.14.0(transitive)
- Removedreact-dom@16.14.0(transitive)
- Removedreact-is@16.13.1(transitive)
- Removedscheduler@0.19.1(transitive)
Updated@jswork/react-list@^1.2.1
Updatedsortablejs@^1.15.1