From f2f0b809bb0b1f21da3f9d91dbc63351a054aade Mon Sep 17 00:00:00 2001 From: arvinxx Date: Wed, 2 Feb 2022 11:43:11 +0800 Subject: [PATCH] =?UTF-8?q?:tada:=20chore:=20=E5=88=9D=E5=A7=8B=E5=8C=96?= =?UTF-8?q?=20SortableList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmrc | 1 + config/menu.ts | 1 + jest.config.base.js | 1 + package.json | 5 +- packages/sortable-list/.fatherrc.js | 5 + packages/sortable-list/README.md | 15 + packages/sortable-list/demos/Basic.tsx | 14 + packages/sortable-list/jest.config.js | 15 + packages/sortable-list/package.json | 31 + packages/sortable-list/src/Item/Item.tsx | 152 + .../Item/components/Action/Action.module.css | 50 + .../src/Item/components/Action/Action.tsx | 30 + .../src/Item/components/Action/index.ts | 2 + .../src/Item/components/Handle/Handle.tsx | 13 + .../src/Item/components/Handle/index.ts | 1 + .../src/Item/components/Remove/Remove.tsx | 19 + .../src/Item/components/Remove/index.ts | 1 + .../src/Item/components/index.ts | 3 + packages/sortable-list/src/Item/index.less | 145 + packages/sortable-list/src/Item/index.ts | 2 + packages/sortable-list/src/Sortable.tsx | 170 + packages/sortable-list/src/SortableItem.tsx | 90 + packages/sortable-list/src/Wrapper/index.less | 12 + packages/sortable-list/src/Wrapper/index.tsx | 21 + packages/sortable-list/src/index.tsx | 100 + packages/sortable-list/src/sortable-list.md | 25 + packages/sortable-list/src/types.ts | 61 + packages/sortable-list/tests/index.test.tsx | 11 + packages/sortable-list/tsconfig.json | 15 + packages/sortable-list/webpack.config.js | 11 + pnpm-lock.yaml | 23633 ++++++++++++++++ pnpm-workspace.yaml | 3 + tsconfig.json | 2 + yarn.lock | 21543 -------------- 34 files changed, 24656 insertions(+), 21547 deletions(-) create mode 100644 .npmrc create mode 100644 packages/sortable-list/.fatherrc.js create mode 100644 packages/sortable-list/README.md create mode 100644 packages/sortable-list/demos/Basic.tsx create mode 100644 packages/sortable-list/jest.config.js create mode 100644 packages/sortable-list/package.json create mode 100644 packages/sortable-list/src/Item/Item.tsx create mode 100644 packages/sortable-list/src/Item/components/Action/Action.module.css create mode 100644 packages/sortable-list/src/Item/components/Action/Action.tsx create mode 100644 packages/sortable-list/src/Item/components/Action/index.ts create mode 100644 packages/sortable-list/src/Item/components/Handle/Handle.tsx create mode 100644 packages/sortable-list/src/Item/components/Handle/index.ts create mode 100644 packages/sortable-list/src/Item/components/Remove/Remove.tsx create mode 100644 packages/sortable-list/src/Item/components/Remove/index.ts create mode 100644 packages/sortable-list/src/Item/components/index.ts create mode 100644 packages/sortable-list/src/Item/index.less create mode 100644 packages/sortable-list/src/Item/index.ts create mode 100644 packages/sortable-list/src/Sortable.tsx create mode 100644 packages/sortable-list/src/SortableItem.tsx create mode 100644 packages/sortable-list/src/Wrapper/index.less create mode 100644 packages/sortable-list/src/Wrapper/index.tsx create mode 100644 packages/sortable-list/src/index.tsx create mode 100644 packages/sortable-list/src/sortable-list.md create mode 100644 packages/sortable-list/src/types.ts create mode 100644 packages/sortable-list/tests/index.test.tsx create mode 100644 packages/sortable-list/tsconfig.json create mode 100644 packages/sortable-list/webpack.config.js create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml delete mode 100644 yarn.lock diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..bf2e7648 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +shamefully-hoist=true diff --git a/config/menu.ts b/config/menu.ts index 50acaa0d..0ae56a84 100644 --- a/config/menu.ts +++ b/config/menu.ts @@ -11,6 +11,7 @@ export const menus = { 'page-loading', 'float-label-input', 'macos-traffic-light', + 'sortable-list', ], }, { diff --git a/jest.config.base.js b/jest.config.base.js index 9a7de8fd..2535ca13 100644 --- a/jest.config.base.js +++ b/jest.config.base.js @@ -20,6 +20,7 @@ module.exports = { '@arvinxu/utils': '/packages/utils/src', '@arvinxu/i18n': '/packages/i18n/src', '@arvinxu/layout-kit': '/packages/layout-kit/src', + '@arvinxu/sortable-list': '/packages/sortable-list/src', '@arvinxu/float-label-input': '/packages/float-label-input/src', '@arvinxu/page-loading': '/packages/page-loading/src', '@arvinxu/mindflow': '/packages/mindflow/src', diff --git a/package.json b/package.json index 4d2708ee..3c830d7d 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,6 @@ "@testing-library/react": "^11.2.5", "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^13.0.8", - "@types/classnames": "^2.2.7", "@types/fs-extra": "^9.0.1", "@types/jest": "^26.0.20", "@types/jsdom": "^16.2.3", @@ -90,7 +89,6 @@ "babel-plugin-add-module-exports": "^1.0.4", "babel-plugin-import": "^1.12.2", "babel-plugin-module-resolver": "^4.1.0", - "canvas": "2.6.1", "commitlint": "^12.0.1", "commitlint-config-gitmoji": "^2.2.5", "concurrently": "^6.0.0", @@ -142,6 +140,5 @@ }, "engines": { "node": ">=8.0.0" - }, - "dependencies": {} + } } diff --git a/packages/sortable-list/.fatherrc.js b/packages/sortable-list/.fatherrc.js new file mode 100644 index 00000000..87f204d0 --- /dev/null +++ b/packages/sortable-list/.fatherrc.js @@ -0,0 +1,5 @@ +const base = require('../../.fatherrc'); + +module.exports = { + ...base, +}; diff --git a/packages/sortable-list/README.md b/packages/sortable-list/README.md new file mode 100644 index 00000000..53e54fb6 --- /dev/null +++ b/packages/sortable-list/README.md @@ -0,0 +1,15 @@ +# @arvinxu/sortable-list + + +[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url] + +## License + +[MIT](../../LICENSE) ® Arvin Xu + + + +[version-image]: http://img.shields.io/npm/v/@arvinxu/sortable-list.svg?color=deepgreen&label=latest +[version-url]: http://npmjs.org/package/@arvinxu/sortable-list +[download-image]: https://img.shields.io/npm/dm/@arvinxu/sortable-list.svg +[download-url]: https://npmjs.org/package/@arvinxu/sortable-list diff --git a/packages/sortable-list/demos/Basic.tsx b/packages/sortable-list/demos/Basic.tsx new file mode 100644 index 00000000..7bd7deee --- /dev/null +++ b/packages/sortable-list/demos/Basic.tsx @@ -0,0 +1,14 @@ +import React, { useState } from 'react'; + +import SortableList from '@arvinxu/sortable-list'; + +const Demo = () => { + const [list, setList] = useState([ + { text: 'hello', id: 'hello' }, + { text: 'world', id: 'world' }, + ]); + + return ; +}; + +export default Demo; diff --git a/packages/sortable-list/jest.config.js b/packages/sortable-list/jest.config.js new file mode 100644 index 00000000..2016734b --- /dev/null +++ b/packages/sortable-list/jest.config.js @@ -0,0 +1,15 @@ +const base = require('../../jest.config.base'); + +const packageName = '@arvinxu/sortable-list'; + +const root = '/packages/sortable-list'; + +module.exports = { + ...base, + rootDir: '../..', + roots: [root], + name: packageName, + displayName: packageName, + collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`], +}; + diff --git a/packages/sortable-list/package.json b/packages/sortable-list/package.json new file mode 100644 index 00000000..b08f7eb3 --- /dev/null +++ b/packages/sortable-list/package.json @@ -0,0 +1,31 @@ +{ + "name": "@arvinxu/sortable-list", + "version": "1.0.0", + "files": [ + "lib", + "es" + ], + "main": "lib/index.js", + "module": "es/index.js", + "homepage": "https://github.com/arvinxx/components/tree/master/packages/sortable-list#readme", + "repository": "git+https://github.com/arvinxx/components.git", + "publishConfig": { + "registry": "https://registry.npmjs.org", + "access": "public" + }, + "scripts": { + "build": "father-build && yarn webpack", + "webpack": "webpack", + "test": "jest", + "test:update": "jest -u", + "prepublishOnly": "yarn build", + "cov": "jest --coverage", + "clean": "rm -rf es lib dist build coverage .umi" + }, + "dependencies": { + "@dnd-kit/core": "^5.0.1", + "@dnd-kit/sortable": "^6.0.0", + "@dnd-kit/modifiers": "^5.0.0", + "use-merge-value": "^1.0.2" + } +} diff --git a/packages/sortable-list/src/Item/Item.tsx b/packages/sortable-list/src/Item/Item.tsx new file mode 100644 index 00000000..3aa04ef2 --- /dev/null +++ b/packages/sortable-list/src/Item/Item.tsx @@ -0,0 +1,152 @@ +import React, { useEffect } from 'react'; +import classNames from 'classnames'; +import type { DraggableSyntheticListeners } from '@dnd-kit/core'; +import type { Transform } from '@dnd-kit/utilities'; + +import { Handle, Remove } from './components'; + +import styles from './index.less'; + +export interface Props { + dragOverlay?: boolean; + color?: string; + disabled?: boolean; + dragging?: boolean; + handle?: boolean; + height?: number; + index?: number; + fadeIn?: boolean; + transform?: Transform | null; + listeners?: DraggableSyntheticListeners; + sorting?: boolean; + style?: React.CSSProperties; + transition?: string | null; + wrapperStyle?: React.CSSProperties; + value: React.ReactNode; + onRemove?: () => void; + renderItem?: (args: { + dragOverlay: boolean; + dragging: boolean; + sorting: boolean; + index: number | undefined; + fadeIn: boolean; + listeners: DraggableSyntheticListeners; + ref: React.Ref; + style: React.CSSProperties | undefined; + transform: Props['transform']; + transition: Props['transition']; + value: Props['value']; + }) => React.ReactElement; +} + +export const Item = React.memo( + React.forwardRef( + ( + { + color, + dragOverlay, + dragging, + disabled, + fadeIn, + handle, + height, + index, + listeners, + onRemove, + renderItem, + sorting, + style, + transition, + transform, + value, + wrapperStyle, + ...props + }, + ref, + ) => { + useEffect(() => { + if (!dragOverlay) { + return; + } + + document.body.style.cursor = 'grabbing'; + + return () => { + document.body.style.cursor = ''; + }; + }, [dragOverlay]); + + return renderItem ? ( + renderItem({ + dragOverlay: Boolean(dragOverlay), + dragging: Boolean(dragging), + sorting: Boolean(sorting), + index, + fadeIn: Boolean(fadeIn), + listeners, + ref, + style, + transform, + transition, + value, + }) + ) : ( +
  • +
    + {value} + + {onRemove ? ( + + ) : null} + {handle ? : null} + +
    +
  • + ); + }, + ), +); diff --git a/packages/sortable-list/src/Item/components/Action/Action.module.css b/packages/sortable-list/src/Item/components/Action/Action.module.css new file mode 100644 index 00000000..8fa6bfc7 --- /dev/null +++ b/packages/sortable-list/src/Item/components/Action/Action.module.css @@ -0,0 +1,50 @@ +$focused-outline-color: #4c9ffe; + +.Action { + display: flex; + width: 12px; + padding: 15px; + align-items: center; + justify-content: center; + flex: 0 0 auto; + touch-action: none; + cursor: var(--cursor, pointer); + border-radius: 5px; + border: none; + outline: none; + appearance: none; + background-color: transparent; + -webkit-tap-highlight-color: transparent; + + @media (hover: hover) { + &:hover { + background-color: var(--action-background, rgba(0, 0, 0, 0.05)); + + svg { + fill: #6f7b88; + } + } + } + + svg { + flex: 0 0 auto; + margin: auto; + height: 100%; + overflow: visible; + fill: #919eab; + } + + &:active { + background-color: var(--background, rgba(0, 0, 0, 0.05)); + + svg { + fill: var(--fill, #788491); + } + } + + &:focus-visible { + outline: none; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), + 0 0px 0px 2px $focused-outline-color; + } +} diff --git a/packages/sortable-list/src/Item/components/Action/Action.tsx b/packages/sortable-list/src/Item/components/Action/Action.tsx new file mode 100644 index 00000000..5faee689 --- /dev/null +++ b/packages/sortable-list/src/Item/components/Action/Action.tsx @@ -0,0 +1,30 @@ +import React, {CSSProperties} from 'react'; +import classNames from 'classnames'; + +import styles from './Action.module.css'; + +export interface Props extends React.HTMLAttributes { + active?: { + fill: string; + background: string; + }; + cursor?: CSSProperties['cursor']; +} + +export function Action({active, className, cursor, style, ...props}: Props) { + return ( +