🎉 chore: 初始化 SortableList

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

config/menu.ts

@@ -11,6 +11,7 @@ export const menus = {
         'page-loading',
         'float-label-input',
         'macos-traffic-light',
+        'sortable-list',
       ],
     },
     {

jest.config.base.js

@@ -20,6 +20,7 @@ module.exports = {
     '@arvinxu/utils': '<rootDir>/packages/utils/src',
     '@arvinxu/i18n': '<rootDir>/packages/i18n/src',
     '@arvinxu/layout-kit': '<rootDir>/packages/layout-kit/src',
+    '@arvinxu/sortable-list': '<rootDir>/packages/sortable-list/src',
     '@arvinxu/float-label-input': '<rootDir>/packages/float-label-input/src',
     '@arvinxu/page-loading': '<rootDir>/packages/page-loading/src',
     '@arvinxu/mindflow': '<rootDir>/packages/mindflow/src',

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": {}
+  }
 }

packages/sortable-list/.fatherrc.js

@@ -0,0 +1,5 @@
+const base = require('../../.fatherrc');
+
+module.exports = {
+  ...base,
+};

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
+
+<!-- npm url -->
+
+[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

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 <SortableList value={list} onChange={setList} />;
+};
+
+export default Demo;

packages/sortable-list/jest.config.js

@@ -0,0 +1,15 @@
+const base = require('../../jest.config.base');
+
+const packageName = '@arvinxu/sortable-list';
+
+const root = '<rootDir>/packages/sortable-list';
+
+module.exports = {
+    ...base,
+    rootDir: '../..',
+    roots: [root],
+    name: packageName,
+    displayName: packageName,
+    collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`],
+};
+

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"
+  }
+}

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<HTMLElement>;
+    style: React.CSSProperties | undefined;
+    transform: Props['transform'];
+    transition: Props['transition'];
+    value: Props['value'];
+  }) => React.ReactElement;
+}
+
+export const Item = React.memo(
+  React.forwardRef<HTMLLIElement, Props>(
+    (
+      {
+        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,
+        })
+      ) : (
+        <li
+          className={classNames(
+            styles.Wrapper,
+            fadeIn && styles.fadeIn,
+            sorting && styles.sorting,
+            dragOverlay && styles.dragOverlay,
+          )}
+          style={
+            {
+              ...wrapperStyle,
+              transition: [transition, wrapperStyle?.transition]
+                .filter(Boolean)
+                .join(', '),
+              '--translate-x': transform
+                ? `${Math.round(transform.x)}px`
+                : undefined,
+              '--translate-y': transform
+                ? `${Math.round(transform.y)}px`
+                : undefined,
+              '--scale-x': transform?.scaleX
+                ? `${transform.scaleX}`
+                : undefined,
+              '--scale-y': transform?.scaleY
+                ? `${transform.scaleY}`
+                : undefined,
+              '--index': index,
+              '--color': color,
+            } as React.CSSProperties
+          }
+          ref={ref}
+        >
+          <div
+            className={classNames(
+              styles.Item,
+              dragging && styles.dragging,
+              handle && styles.withHandle,
+              dragOverlay && styles.dragOverlay,
+              disabled && styles.disabled,
+              color && styles.color,
+            )}
+            style={style}
+            data-cypress="draggable-item"
+            {...(!handle ? listeners : undefined)}
+            {...props}
+            tabIndex={!handle ? 0 : undefined}
+          >
+            {value}
+            <span className={styles.Actions}>
+              {onRemove ? (
+                <Remove className={styles.Remove} onClick={onRemove} />
+              ) : null}
+              {handle ? <Handle {...listeners} /> : null}
+            </span>
+          </div>
+        </li>
+      );
+    },
+  ),
+);

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;
+  }
+}

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<HTMLButtonElement> {
+  active?: {
+    fill: string;
+    background: string;
+  };
+  cursor?: CSSProperties['cursor'];
+}
+
+export function Action({active, className, cursor, style, ...props}: Props) {
+  return (
+    <button
+      {...props}
+      className={classNames(styles.Action, className)}
+      tabIndex={0}
+      style={
+        {
+          ...style,
+          cursor,
+          '--fill': active?.fill,
+          '--background': active?.background,
+        } as CSSProperties
+      }
+    />
+  );
+}

packages/sortable-list/src/Item/components/Action/index.ts

@@ -0,0 +1,2 @@
+export {Action} from './Action';
+export type {Props as ActionProps} from './Action';

packages/sortable-list/src/Item/components/Handle/Handle.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {Action, ActionProps} from '../Action';
+
+export function Handle(props: ActionProps) {
+  return (
+    <Action cursor="grab" data-cypress="draggable-handle" {...props}>
+      <svg viewBox="0 0 20 20" width="12">
+        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+      </svg>
+    </Action>
+  );
+}

packages/sortable-list/src/Item/components/Handle/index.ts

@@ -0,0 +1 @@
+export {Handle} from './Handle';