feat(float): add new component Float

Author: mortalYoung

package.json

@@ -124,6 +124,7 @@
         "react-markdown": "~8.0.6",
         "react-syntax-highlighter": "~15.5.0",
         "remark-gfm": "~3.0.1",
+        "react-draggable": "~4.4.6",
         "shortid": "^2.2.16",
         "showdown": "^1.9.0"
     },

pnpm-lock.yaml

@@ -0,0 +1,62 @@
+import React, { HTMLAttributes, useState } from 'react';
+import { Float, Resize } from 'dt-react-component';
+
+export default function () {
+    const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+    return (
+        <Resize onResize={() => setSize({ width: window.innerWidth, height: window.innerHeight })}>
+            <section>
+                {Array.from({ length: 1000 }).map((_, idx) => (
+                    <div key={idx}>{idx}. This is the segment</div>
+                ))}
+            </section>
+            <Float draggable={false} position={{ y: size.height - 64, x: size.width - 64 }}>
+                <div
+                    style={{
+                        width: 40,
+                        height: 40,
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(0,0,0,.2)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                    onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                >
+                    <UpToLineIcon style={{ fontSize: 24, lineHeight: 0, color: '#fff' }} />
+                </div>
+            </Float>
+        </Resize>
+    );
+}
+
+function UpToLineIcon(props: HTMLAttributes<HTMLSpanElement>) {
+    return (
+        <span {...props}>
+            <svg
+                className="icon"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <g>
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M4 3.88672C4 4.30093 4.34112 4.63672 4.7619 4.63672H19.2381C19.6589 4.63672 20 4.30093 20 3.88672C20 3.47251 19.6589 3.13672 19.2381 3.13672H4.7619C4.34112 3.13672 4 3.47251 4 3.88672Z"
+                        fill="currentColor"
+                    />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M12.0026 7.82525L7.18185 13.5648H10.6324V20.1141H13.3752V13.5648H16.8233L12.0026 7.82525ZM11.1411 6.51864C11.5907 5.98337 12.4144 5.98337 12.864 6.51864L18.4894 13.2162C19.1042 13.9481 18.5838 15.0648 17.628 15.0648H14.8752V20.1141C14.8752 20.9426 14.2036 21.6141 13.3752 21.6141H10.6324C9.80398 21.6141 9.13241 20.9426 9.13241 20.1141V15.0648H6.37715C5.42129 15.0648 4.90094 13.9481 5.5157 13.2162L11.1411 6.51864Z"
+                        fill="currentColor"
+                    />
+                </g>
+            </svg>
+        </span>
+    );
+}

src/float/demos/backTop.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { Float, Image } from 'dt-react-component';
+
+export default function () {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    return (
+        <Float
+            draggable={{ bounds: 'body' }}
+            position={position}
+            onChange={(_, { x, y }) => setPosition({ x, y })}
+        >
+            <Image
+                height={200}
+                width={200}
+                src="https://dtstack.github.io/dt-react-component/static/empty_overview.43b0eedf.png"
+                style={{ borderColor: 'red' }}
+            />
+        </Float>
+    );
+}

src/float/demos/basic.tsx

@@ -0,0 +1,32 @@
+---
+title: Float 悬浮组件
+group: 组件
+toc: content
+demo:
+    cols: 1
+---
+
+# Float 悬浮组件
+
+悬浮在页面上且支持拖拽至任意位置的组件
+
+## 何时使用
+
+实现全局渲染，悬浮在页面上任意位置功能
+
+## 示例
+
+<code src="./demos/basic.tsx" iframe="true">基础使用</code>
+<code src="./demos/backTop.tsx" iframe="true">返回顶部</code>
+
+## API
+
+| 参数      | 说明                     | 类型                        | 默认值  |
+| --------- | ------------------------ | --------------------------- | ------- |
+| className | 类名                     | `string`                    | -       |
+| style     | 样式                     | `CSSProperties`             | -       |
+| draggable | 拖拽配置                 | `boolean \| DraggableProps` | `false` |
+| position  | 位置                     | `{x: number, y: number}`    | 左上角  |
+| onChange  | 拖拽结束后触发的回调函数 | `Function`                  | -       |
+
+其中 `DraggableProps` 类型具体参考 [draggable-api](https://github.com/react-grid-layout/react-draggable?tab=readme-ov-file#draggable-api)。