✨ feat: 使用 cssinjs 重构 SortableList

Breaking Change: 升级 antd 到 v5

Author: arvinxx

packages/sortable-list/demos/Basic.tsx

@@ -1,12 +1,19 @@
-import React, { useState } from 'react';
-
+/**
+ * compact: true
+ */
 import SortableList from '@arvinxu/sortable-list';
+import { useTheme } from 'antd-style';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 const Demo = () => {
   const [list, setList] = useState([{ id: 'hello' }, { id: 'world' }]);
 
+  const token = useTheme();
   return (
-    <SortableList dataSource={list} onChange={(value) => setList(value)} />
+    <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
+      <SortableList dataSource={list} onChange={(value) => setList(value)} />
+    </Flexbox>
   );
 };
 

packages/sortable-list/demos/CustomRender.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
-import { Badge, Button } from 'antd';
-
 import SortableList from '@arvinxu/sortable-list';
-import { Flexbox } from '@arvinxu/layout-kit';
+import { Badge, Button } from 'antd';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 interface Item {
   id: string;
@@ -54,12 +53,7 @@ const Demo = () => {
         getItemStyles={() => ({ padding: '16px' })}
         renderItem={(item: Item, { onRemove, onAddItem, index }) => {
           return (
-            <Flexbox
-              horizontal
-              width={'100%'}
-              distribution={'space-between'}
-              gap={12}
-            >
+            <Flexbox horizontal width={'100%'} distribution={'space-between'} gap={12}>
               <Flexbox horizontal gap={8}>
                 <div>
                   <Badge count={item.id} />

packages/sortable-list/demos/CustomStyle.tsx

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
-
+/**
+ * iframe: true
+ */
 import SortableList from '@arvinxu/sortable-list';
+import { useState } from 'react';
 
 const Demo = () => {
   const [list, setList] = useState([

packages/sortable-list/package.json

@@ -1,37 +1,39 @@
 {
   "name": "@arvinxu/sortable-list",
   "version": "1.0.7",
-  "files": [
-    "dist"
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/sortable-list#readme",
+  "repository": "git+https://github.com/arvinxx/components.git",
+  "sideEffects": [
+    "*.less"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": [
-    "*.less"
+  "files": [
+    "dist"
   ],
-  "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",
-    "test": "jest",
-    "test:update": "jest -u",
-    "prepublishOnly": "pnpm run build",
+    "clean": "rm -rf dist build coverage .umi",
     "cov": "jest --coverage",
-    "clean": "rm -rf dist build coverage .umi"
+    "prepublishOnly": "pnpm run build",
+    "test": "jest",
+    "test:update": "jest -u"
   },
   "dependencies": {
-    "@arvinxu/layout-kit": "1.4.0",
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/modifiers": "^5.0.0",
     "@dnd-kit/sortable": "^6.0.0",
-    "antd": "^4.18.9",
     "classnames": "^2.3.1",
-    "lodash.isequal": "^4.5.0",
+    "lodash.isequal": "^4",
+    "react-layout-kit": "^1",
     "zustand": "^3.7.1"
+  },
+  "peerDependencies": {
+    "antd": ">=5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   }
 }

packages/sortable-list/src/components/Action/index.less

@@ -1,8 +1,6 @@
 import type { CSSProperties, FC } from 'react';
 import React from 'react';
-import classNames from 'classnames';
-
-import styles from './index.less';
+import { useStyles } from './style';
 
 export interface ActionProps extends React.HTMLAttributes<HTMLButtonElement> {
   active?: {
@@ -12,24 +10,22 @@ export interface ActionProps extends React.HTMLAttributes<HTMLButtonElement> {
   cursor?: CSSProperties['cursor'];
 }
 
-export const Action: FC<ActionProps> = ({
-  active,
-  className,
-  cursor,
-  style,
-  ...props
-}) => (
-  <button
-    {...props}
-    className={classNames(styles.Action, className)}
-    tabIndex={0}
-    style={
-      {
-        ...style,
-        cursor,
-        '--fill': active?.fill,
-        '--background': active?.background,
-      } as CSSProperties
-    }
-  />
-);
+export const Action: FC<ActionProps> = ({ active, className, cursor, style, ...props }) => {
+  const { styles, cx } = useStyles();
+  return (
+    <button
+      type={'button'}
+      {...props}
+      className={cx(styles.action, className)}
+      tabIndex={0}
+      style={
+        {
+          ...style,
+          cursor,
+          '--fill': active?.fill,
+          '--background': active?.background,
+        } as CSSProperties
+      }
+    />
+  );
+};

packages/sortable-list/src/components/Action/index.tsx

@@ -0,0 +1,46 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ token, css }) => ({
+  action: css`
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    padding: 15px;
+    background-color: transparent;
+    border: none;
+    border-radius: 5px;
+    outline: none;
+    cursor: var(--cursor, pointer);
+    appearance: none;
+    touch-action: none;
+    -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;
+      height: 100%;
+      margin: auto;
+      overflow: visible;
+      fill: ${token.colorTextTertiary};
+    }
+
+    &:active {
+      background-color: var(--background, ${token.colorFillTertiary});
+
+      svg {
+        fill: var(--fill, ${token.colorTextSecondary});
+      }
+    }
+  `,
+}));