@tiny-codes/react-easy 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/es/components/ConfirmAction/index.d.ts +1 -45
  3. package/es/components/FloatDrawer/index.d.ts +173 -0
  4. package/es/components/FloatDrawer/index.js +173 -0
  5. package/es/components/FloatDrawer/index.js.map +1 -0
  6. package/es/components/FloatDrawer/style/index.d.ts +3 -0
  7. package/es/components/FloatDrawer/style/index.js +151 -0
  8. package/es/components/FloatDrawer/style/index.js.map +1 -0
  9. package/es/components/ModalAction/index.d.ts +3 -32
  10. package/es/components/ModalAction/index.js +8 -5
  11. package/es/components/ModalAction/index.js.map +1 -1
  12. package/es/components/index.d.ts +2 -0
  13. package/es/components/index.js +1 -0
  14. package/es/components/index.js.map +1 -1
  15. package/es/utils/color.d.ts +8 -0
  16. package/es/utils/color.js +45 -0
  17. package/es/utils/color.js.map +1 -0
  18. package/es/utils/index.d.ts +1 -0
  19. package/es/utils/index.js +1 -1
  20. package/es/utils/index.js.map +1 -1
  21. package/lib/components/ConfirmAction/index.d.ts +1 -45
  22. package/lib/components/FloatDrawer/index.d.ts +173 -0
  23. package/lib/components/FloatDrawer/index.js +193 -0
  24. package/lib/components/FloatDrawer/index.js.map +7 -0
  25. package/lib/components/FloatDrawer/style/index.d.ts +3 -0
  26. package/lib/components/FloatDrawer/style/index.js +211 -0
  27. package/lib/components/FloatDrawer/style/index.js.map +7 -0
  28. package/lib/components/ModalAction/index.d.ts +3 -32
  29. package/lib/components/ModalAction/index.js +6 -4
  30. package/lib/components/ModalAction/index.js.map +2 -2
  31. package/lib/components/index.d.ts +2 -0
  32. package/lib/components/index.js +3 -0
  33. package/lib/components/index.js.map +2 -2
  34. package/lib/utils/color.d.ts +8 -0
  35. package/lib/utils/color.js +53 -0
  36. package/lib/utils/color.js.map +7 -0
  37. package/lib/utils/index.d.ts +1 -0
  38. package/lib/utils/index.js +23 -0
  39. package/lib/utils/index.js.map +3 -3
  40. package/package.json +4 -3
@@ -0,0 +1,173 @@
1
+ import type { CSSProperties, FC, ReactNode } from 'react';
2
+ import { type CardProps } from 'antd';
3
+ export interface FloatDrawerProps {
4
+ /**
5
+ * **EN:** Whether the drawer is open
6
+ *
7
+ * **CN:** 抽屉是否打开
8
+ */
9
+ open?: boolean;
10
+ /**
11
+ * **EN:** Position of the drawer
12
+ *
13
+ * **CN:** 抽屉的位置
14
+ *
15
+ * @default 'right'
16
+ */
17
+ position?: 'left' | 'right' | 'top' | 'bottom';
18
+ /**
19
+ * **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the
20
+ * width, otherwise it is the height.
21
+ *
22
+ * **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧,则为宽度,否则为高度。
23
+ *
24
+ * @default 300
25
+ */
26
+ defaultSize?: number;
27
+ /**
28
+ * **EN:** Minimum size of the drawer
29
+ *
30
+ * **CN:** 抽屉的最小宽度
31
+ *
32
+ * @default 0
33
+ */
34
+ minSize?: number;
35
+ /**
36
+ * **EN:** Maximum size of the drawer
37
+ *
38
+ * **CN:** 抽屉的最大宽度
39
+ *
40
+ * @default Infinity
41
+ */
42
+ maxSize?: number;
43
+ /**
44
+ * **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be
45
+ * cached.
46
+ *
47
+ * **CN:** 指定一个localStorage缓存键,用于记忆抽屉宽度。如果不设置,则不使用缓存。
48
+ */
49
+ cacheKey?: string;
50
+ /**
51
+ * **EN:** Custom class name for the root element
52
+ *
53
+ * **CN:** 根元素的自定义类名
54
+ */
55
+ className?: string;
56
+ /**
57
+ * **EN:** Custom class names for specific elements
58
+ *
59
+ * **CN:** 特定元素的自定义类名
60
+ */
61
+ classNames?: {
62
+ /**
63
+ * **EN:** Class name for the drawer element
64
+ *
65
+ * **CN:** 抽屉元素的类名
66
+ */
67
+ drawer?: string;
68
+ /**
69
+ * **EN:** Class name for the expand handle
70
+ *
71
+ * **CN:** 展开手柄的类名
72
+ */
73
+ expandHandle?: string;
74
+ /**
75
+ * **EN:** Class name for the resize handle
76
+ *
77
+ * **CN:** 调整大小手柄的类名
78
+ */
79
+ resizeHandle?: string;
80
+ /**
81
+ * **EN:** Class name for the handle icon
82
+ *
83
+ * **CN:** 手柄图标的类名
84
+ */
85
+ handleIcon?: string;
86
+ /**
87
+ * **EN:** Class name for the content area
88
+ *
89
+ * **CN:** 内容区域的类名
90
+ */
91
+ content?: string;
92
+ /**
93
+ * **EN:** Class name for the card element
94
+ *
95
+ * **CN:** 卡片元素的类名
96
+ */
97
+ card?: string;
98
+ };
99
+ /**
100
+ * **EN:** Custom styles for the root element
101
+ *
102
+ * **CN:** 根元素的自定义样式
103
+ */
104
+ style?: CSSProperties;
105
+ /**
106
+ * **EN:** Custom styles for specific elements
107
+ *
108
+ * **CN:** 特定元素的自定义样式
109
+ */
110
+ styles?: {
111
+ /**
112
+ * **EN:** Styles for the drawer element
113
+ *
114
+ * **CN:** 抽屉元素的样式
115
+ */
116
+ drawer?: CSSProperties;
117
+ /**
118
+ * **EN:** Styles for the expand handle
119
+ *
120
+ * **CN:** 展开手柄的样式
121
+ */
122
+ expandHandle?: CSSProperties;
123
+ /**
124
+ * **EN:** Styles for the resize handle
125
+ *
126
+ * **CN:** 调整大小手柄的样式
127
+ */
128
+ resizeHandle?: CSSProperties;
129
+ /**
130
+ * **EN:** Styles for the handle icon
131
+ *
132
+ * **CN:** 手柄图标的样式
133
+ */
134
+ handleIcon?: CSSProperties;
135
+ /**
136
+ * **EN:** Styles for the content area
137
+ *
138
+ * **CN:** 内容区域的样式
139
+ */
140
+ content?: CSSProperties;
141
+ /**
142
+ * **EN:** Styles for the card element
143
+ *
144
+ * **CN:** 卡片元素的样式
145
+ */
146
+ card?: CSSProperties;
147
+ };
148
+ /**
149
+ * **EN:** Custom properties for the card element
150
+ *
151
+ * **CN:** 卡片元素的自定义属性
152
+ */
153
+ cardProps?: Omit<CardProps, 'children'>;
154
+ /**
155
+ * **EN:** Content to be rendered inside the drawer
156
+ *
157
+ * **CN:** 抽屉内容
158
+ */
159
+ children?: ReactNode;
160
+ /**
161
+ * **EN:** Callback function when the open state changes
162
+ *
163
+ * **CN:** 打开状态变化时的回调函数
164
+ */
165
+ onOpenChange?: (open: boolean) => void;
166
+ }
167
+ /**
168
+ * **EN:** FloatDrawer component for creating a draggable, resizable drawer
169
+ *
170
+ * **CN:** FloatDrawer组件,用于创建可拖动、可调整大小的抽屉
171
+ */
172
+ declare const FloatDrawer: FC<FloatDrawerProps>;
173
+ export default FloatDrawer;
@@ -0,0 +1,193 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/components/FloatDrawer/index.tsx
30
+ var FloatDrawer_exports = {};
31
+ __export(FloatDrawer_exports, {
32
+ default: () => FloatDrawer_default
33
+ });
34
+ module.exports = __toCommonJS(FloatDrawer_exports);
35
+ var import_react = require("react");
36
+ var import_antd = require("antd");
37
+ var import_classnames = __toESM(require("classnames"));
38
+ var import_icons = require("@ant-design/icons");
39
+ var import_useRefFunction = __toESM(require("../../hooks/useRefFunction"));
40
+ var import_style = __toESM(require("./style"));
41
+ var FloatDrawer = (props) => {
42
+ const {
43
+ open,
44
+ position = "right",
45
+ cardProps,
46
+ children,
47
+ className,
48
+ classNames: classNamesInProps,
49
+ style,
50
+ styles,
51
+ cacheKey,
52
+ defaultSize = 300,
53
+ minSize = 0,
54
+ maxSize = Infinity,
55
+ onOpenChange
56
+ } = props;
57
+ const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
58
+ const prefixCls = getPrefixCls("re-float-drawer");
59
+ const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls);
60
+ const [isOpen, setIsOpen] = (0, import_react.useState)();
61
+ const [size, setSize] = (0, import_react.useState)(
62
+ cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize
63
+ );
64
+ const sizeMap = (0, import_react.useMemo)(() => {
65
+ const type = position === "left" || position === "right" ? "width" : "height";
66
+ return {
67
+ [type]: size
68
+ };
69
+ }, [position, size]);
70
+ const [isDragging, setIsDragging] = (0, import_react.useState)(false);
71
+ const dragStartPos = (0, import_react.useRef)(0);
72
+ const dragStartSize = (0, import_react.useRef)(size);
73
+ const classString = (0, import_classnames.default)(
74
+ prefixCls,
75
+ className,
76
+ {
77
+ [`${prefixCls}-open`]: isOpen,
78
+ [`${prefixCls}-closed`]: !isOpen,
79
+ [`${prefixCls}-${position}`]: position
80
+ },
81
+ hashId,
82
+ cssVarCls
83
+ );
84
+ const closeIcon = (0, import_react.useMemo)(() => {
85
+ return position === "left" ? /* @__PURE__ */ React.createElement(import_icons.RightOutlined, null) : position === "top" ? /* @__PURE__ */ React.createElement(import_icons.DownOutlined, null) : position === "bottom" ? /* @__PURE__ */ React.createElement(import_icons.UpOutlined, null) : /* @__PURE__ */ React.createElement(import_icons.LeftOutlined, null);
86
+ }, [position]);
87
+ const openIcon = (0, import_react.useMemo)(() => {
88
+ return position === "left" ? /* @__PURE__ */ React.createElement(import_icons.LeftOutlined, null) : position === "top" ? /* @__PURE__ */ React.createElement(import_icons.UpOutlined, null) : position === "bottom" ? /* @__PURE__ */ React.createElement(import_icons.DownOutlined, null) : /* @__PURE__ */ React.createElement(import_icons.RightOutlined, null);
89
+ }, [position]);
90
+ const toggleDrawer = () => {
91
+ setIsOpen(!isOpen);
92
+ onOpenChange == null ? void 0 : onOpenChange(!isOpen);
93
+ };
94
+ const handleResizeStart = (0, import_useRefFunction.default)((e) => {
95
+ setIsDragging(true);
96
+ if (position === "top" || position === "bottom") {
97
+ dragStartPos.current = e.clientY;
98
+ } else {
99
+ dragStartPos.current = e.clientX;
100
+ }
101
+ dragStartSize.current = size;
102
+ e.preventDefault();
103
+ });
104
+ const handleResize = (0, import_useRefFunction.default)((e) => {
105
+ if (isDragging) {
106
+ let newSize;
107
+ if (position === "left") {
108
+ newSize = dragStartSize.current - (dragStartPos.current - e.clientX);
109
+ } else if (position === "top") {
110
+ newSize = dragStartSize.current - (dragStartPos.current - e.clientY);
111
+ } else if (position === "bottom") {
112
+ newSize = dragStartSize.current - (e.clientY - dragStartPos.current);
113
+ } else {
114
+ newSize = dragStartSize.current - (e.clientX - dragStartPos.current);
115
+ }
116
+ if (newSize >= minSize && newSize <= maxSize) {
117
+ setSize(newSize);
118
+ if (cacheKey) {
119
+ localStorage.setItem(cacheKey, String(newSize));
120
+ }
121
+ }
122
+ }
123
+ });
124
+ const handleResizeEnd = (0, import_useRefFunction.default)(() => {
125
+ setIsDragging(false);
126
+ });
127
+ (0, import_react.useEffect)(() => {
128
+ setIsOpen(open);
129
+ }, [open]);
130
+ (0, import_react.useEffect)(() => {
131
+ if (isDragging) {
132
+ window.addEventListener("mousemove", handleResize);
133
+ window.addEventListener("mouseup", handleResizeEnd);
134
+ } else {
135
+ window.removeEventListener("mousemove", handleResize);
136
+ window.removeEventListener("mouseup", handleResizeEnd);
137
+ }
138
+ return () => {
139
+ window.removeEventListener("mousemove", handleResize);
140
+ window.removeEventListener("mouseup", handleResizeEnd);
141
+ };
142
+ }, [isDragging]);
143
+ return wrapCSSVar(
144
+ /* @__PURE__ */ React.createElement("div", { className: classString, style }, /* @__PURE__ */ React.createElement(
145
+ "div",
146
+ {
147
+ className: (0, import_classnames.default)(`${prefixCls}-drawer`, classNamesInProps == null ? void 0 : classNamesInProps.drawer),
148
+ style: { ...sizeMap, ...styles == null ? void 0 : styles.drawer }
149
+ },
150
+ /* @__PURE__ */ React.createElement(
151
+ "div",
152
+ {
153
+ className: (0, import_classnames.default)(
154
+ `${prefixCls}-resize-handle`,
155
+ isDragging && `${prefixCls}-resize-handle-dragging`,
156
+ classNamesInProps == null ? void 0 : classNamesInProps.resizeHandle
157
+ ),
158
+ style: styles == null ? void 0 : styles.resizeHandle,
159
+ onMouseDown: handleResizeStart
160
+ }
161
+ ),
162
+ /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${prefixCls}-content`, classNamesInProps == null ? void 0 : classNamesInProps.content), style: styles == null ? void 0 : styles.content }, /* @__PURE__ */ React.createElement(
163
+ import_antd.Card,
164
+ {
165
+ bordered: false,
166
+ variant: "borderless",
167
+ className: (0, import_classnames.default)(`${prefixCls}-card`, classNamesInProps == null ? void 0 : classNamesInProps.card),
168
+ style: styles == null ? void 0 : styles.card,
169
+ ...cardProps
170
+ },
171
+ children
172
+ )),
173
+ /* @__PURE__ */ React.createElement(
174
+ "div",
175
+ {
176
+ className: (0, import_classnames.default)(`${prefixCls}-expand-handle`, classNamesInProps == null ? void 0 : classNamesInProps.expandHandle),
177
+ style: styles == null ? void 0 : styles.expandHandle,
178
+ onClick: toggleDrawer
179
+ },
180
+ /* @__PURE__ */ React.createElement(
181
+ "div",
182
+ {
183
+ className: (0, import_classnames.default)(`${prefixCls}-handle-icon`, classNamesInProps == null ? void 0 : classNamesInProps.handleIcon),
184
+ style: styles == null ? void 0 : styles.handleIcon
185
+ },
186
+ isOpen ? openIcon : closeIcon
187
+ )
188
+ )
189
+ ))
190
+ );
191
+ };
192
+ var FloatDrawer_default = FloatDrawer;
193
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/FloatDrawer/index.tsx"],
4
+ "sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Card, type CardProps, ConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';\nimport useRefFunction from '../../hooks/useRefFunction';\nimport useStyle from './style';\n\nexport interface FloatDrawerProps {\n /**\n * **EN:** Whether the drawer is open\n *\n * **CN:** 抽屉是否打开\n */\n open?: boolean;\n /**\n * **EN:** Position of the drawer\n *\n * **CN:** 抽屉的位置\n *\n * @default 'right'\n */\n position?: 'left' | 'right' | 'top' | 'bottom';\n /**\n * **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the\n * width, otherwise it is the height.\n *\n * **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧,则为宽度,否则为高度。\n *\n * @default 300\n */\n defaultSize?: number;\n /**\n * **EN:** Minimum size of the drawer\n *\n * **CN:** 抽屉的最小宽度\n *\n * @default 0\n */\n minSize?: number;\n /**\n * **EN:** Maximum size of the drawer\n *\n * **CN:** 抽屉的最大宽度\n *\n * @default Infinity\n */\n maxSize?: number;\n /**\n * **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be\n * cached.\n *\n * **CN:** 指定一个localStorage缓存键,用于记忆抽屉宽度。如果不设置,则不使用缓存。\n */\n cacheKey?: string;\n /**\n * **EN:** Custom class name for the root element\n *\n * **CN:** 根元素的自定义类名\n */\n className?: string;\n /**\n * **EN:** Custom class names for specific elements\n *\n * **CN:** 特定元素的自定义类名\n */\n classNames?: {\n /**\n * **EN:** Class name for the drawer element\n *\n * **CN:** 抽屉元素的类名\n */\n drawer?: string;\n /**\n * **EN:** Class name for the expand handle\n *\n * **CN:** 展开手柄的类名\n */\n expandHandle?: string;\n /**\n * **EN:** Class name for the resize handle\n *\n * **CN:** 调整大小手柄的类名\n */\n resizeHandle?: string;\n /**\n * **EN:** Class name for the handle icon\n *\n * **CN:** 手柄图标的类名\n */\n handleIcon?: string;\n /**\n * **EN:** Class name for the content area\n *\n * **CN:** 内容区域的类名\n */\n content?: string;\n /**\n * **EN:** Class name for the card element\n *\n * **CN:** 卡片元素的类名\n */\n card?: string;\n };\n /**\n * **EN:** Custom styles for the root element\n *\n * **CN:** 根元素的自定义样式\n */\n style?: CSSProperties;\n /**\n * **EN:** Custom styles for specific elements\n *\n * **CN:** 特定元素的自定义样式\n */\n styles?: {\n /**\n * **EN:** Styles for the drawer element\n *\n * **CN:** 抽屉元素的样式\n */\n drawer?: CSSProperties;\n /**\n * **EN:** Styles for the expand handle\n *\n * **CN:** 展开手柄的样式\n */\n expandHandle?: CSSProperties;\n /**\n * **EN:** Styles for the resize handle\n *\n * **CN:** 调整大小手柄的样式\n */\n resizeHandle?: CSSProperties;\n /**\n * **EN:** Styles for the handle icon\n *\n * **CN:** 手柄图标的样式\n */\n handleIcon?: CSSProperties;\n /**\n * **EN:** Styles for the content area\n *\n * **CN:** 内容区域的样式\n */\n content?: CSSProperties;\n /**\n * **EN:** Styles for the card element\n *\n * **CN:** 卡片元素的样式\n */\n card?: CSSProperties;\n };\n /**\n * **EN:** Custom properties for the card element\n *\n * **CN:** 卡片元素的自定义属性\n */\n cardProps?: Omit<CardProps, 'children'>;\n /**\n * **EN:** Content to be rendered inside the drawer\n *\n * **CN:** 抽屉内容\n */\n children?: ReactNode;\n /**\n * **EN:** Callback function when the open state changes\n *\n * **CN:** 打开状态变化时的回调函数\n */\n onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * **EN:** FloatDrawer component for creating a draggable, resizable drawer\n *\n * **CN:** FloatDrawer组件,用于创建可拖动、可调整大小的抽屉\n */\nconst FloatDrawer: FC<FloatDrawerProps> = (props) => {\n const {\n open,\n position = 'right',\n cardProps,\n children,\n className,\n classNames: classNamesInProps,\n style,\n styles,\n cacheKey,\n defaultSize = 300,\n minSize = 0,\n maxSize = +Infinity,\n onOpenChange,\n } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('re-float-drawer');\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n const [isOpen, setIsOpen] = useState<boolean>();\n const [size, setSize] = useState(\n cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize\n );\n const sizeMap = useMemo(() => {\n const type = position === 'left' || position === 'right' ? 'width' : 'height';\n return {\n [type]: size,\n };\n }, [position, size]);\n const [isDragging, setIsDragging] = useState(false);\n const dragStartPos = useRef<number>(0);\n const dragStartSize = useRef<number>(size);\n const classString = classNames(\n prefixCls,\n className,\n {\n [`${prefixCls}-open`]: isOpen,\n [`${prefixCls}-closed`]: !isOpen,\n [`${prefixCls}-${position}`]: position,\n },\n hashId,\n cssVarCls\n );\n const closeIcon = useMemo(() => {\n return position === 'left' ? (\n <RightOutlined />\n ) : position === 'top' ? (\n <DownOutlined />\n ) : position === 'bottom' ? (\n <UpOutlined />\n ) : (\n <LeftOutlined />\n );\n }, [position]);\n const openIcon = useMemo(() => {\n return position === 'left' ? (\n <LeftOutlined />\n ) : position === 'top' ? (\n <UpOutlined />\n ) : position === 'bottom' ? (\n <DownOutlined />\n ) : (\n <RightOutlined />\n );\n }, [position]);\n\n // Handle drawer visibility\n const toggleDrawer = () => {\n setIsOpen(!isOpen);\n onOpenChange?.(!isOpen);\n };\n\n // Handle resize events\n const handleResizeStart = useRefFunction((e: React.MouseEvent) => {\n setIsDragging(true);\n if (position === 'top' || position === 'bottom') {\n dragStartPos.current = e.clientY;\n } else {\n dragStartPos.current = e.clientX;\n }\n dragStartSize.current = size;\n e.preventDefault();\n });\n const handleResize = useRefFunction((e: MouseEvent) => {\n if (isDragging) {\n let newSize: number;\n if (position === 'left') {\n newSize = dragStartSize.current - (dragStartPos.current - e.clientX);\n } else if (position === 'top') {\n newSize = dragStartSize.current - (dragStartPos.current - e.clientY);\n } else if (position === 'bottom') {\n newSize = dragStartSize.current - (e.clientY - dragStartPos.current);\n } else {\n newSize = dragStartSize.current - (e.clientX - dragStartPos.current);\n }\n if (newSize >= minSize && newSize <= maxSize) {\n setSize(newSize);\n if (cacheKey) {\n localStorage.setItem(cacheKey, String(newSize));\n }\n }\n }\n });\n const handleResizeEnd = useRefFunction(() => {\n setIsDragging(false);\n });\n\n // Controlled open state\n useEffect(() => {\n setIsOpen(open);\n }, [open]);\n\n // Handle global events\n useEffect(() => {\n if (isDragging) {\n window.addEventListener('mousemove', handleResize);\n window.addEventListener('mouseup', handleResizeEnd);\n } else {\n window.removeEventListener('mousemove', handleResize);\n window.removeEventListener('mouseup', handleResizeEnd);\n }\n return () => {\n window.removeEventListener('mousemove', handleResize);\n window.removeEventListener('mouseup', handleResizeEnd);\n };\n }, [isDragging]);\n\n return wrapCSSVar(\n <div className={classString} style={style}>\n <div\n className={classNames(`${prefixCls}-drawer`, classNamesInProps?.drawer)}\n style={{ ...sizeMap, ...styles?.drawer }}\n >\n <div\n className={classNames(\n `${prefixCls}-resize-handle`,\n isDragging && `${prefixCls}-resize-handle-dragging`,\n classNamesInProps?.resizeHandle\n )}\n style={styles?.resizeHandle}\n onMouseDown={handleResizeStart}\n />\n <div className={classNames(`${prefixCls}-content`, classNamesInProps?.content)} style={styles?.content}>\n <Card\n bordered={false}\n variant=\"borderless\"\n className={classNames(`${prefixCls}-card`, classNamesInProps?.card)}\n style={styles?.card}\n {...cardProps}\n >\n {children}\n </Card>\n </div>\n <div\n className={classNames(`${prefixCls}-expand-handle`, classNamesInProps?.expandHandle)}\n style={styles?.expandHandle}\n onClick={toggleDrawer}\n >\n <div\n className={classNames(`${prefixCls}-handle-icon`, classNamesInProps?.handleIcon)}\n style={styles?.handleIcon}\n >\n {isOpen ? openIcon : closeIcon}\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default FloatDrawer;\n"],
5
+ "mappings": "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",
6
+ "names": ["useStyle", "classNames", "useRefFunction"]
7
+ }
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const _default: (prefixCls: string, rootCls?: string | undefined) => readonly [(node: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>, string, string];
3
+ export default _default;
@@ -0,0 +1,211 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // src/components/FloatDrawer/style/index.ts
20
+ var style_exports = {};
21
+ __export(style_exports, {
22
+ default: () => style_default
23
+ });
24
+ module.exports = __toCommonJS(style_exports);
25
+ var import_internal = require("antd/es/theme/internal");
26
+ var import_utils = require("../../../utils");
27
+ var genStyle = (token) => {
28
+ const { componentCls } = token;
29
+ return {
30
+ [componentCls]: {
31
+ position: "absolute",
32
+ display: "flex",
33
+ overflow: "visible",
34
+ zIndex: token.zIndexPopupBase,
35
+ ["&-left"]: {
36
+ left: 0,
37
+ top: 0,
38
+ bottom: 0
39
+ },
40
+ ["&-right"]: {
41
+ right: 0,
42
+ top: 0,
43
+ bottom: 0
44
+ },
45
+ ["&-top"]: {
46
+ left: 0,
47
+ right: 0,
48
+ top: 0
49
+ },
50
+ ["&-bottom"]: {
51
+ left: 0,
52
+ right: 0,
53
+ bottom: 0
54
+ },
55
+ [`&${componentCls}-open`]: {
56
+ // visibility: 'visible',
57
+ },
58
+ [`&${componentCls}-closed`]: {
59
+ pointerEvents: "none"
60
+ },
61
+ [`${componentCls}-drawer`]: {
62
+ transition: "transform 0.3s ease-in-out",
63
+ overflow: "visible"
64
+ },
65
+ [`&${componentCls}-left ${componentCls}-drawer,
66
+ &${componentCls}-right ${componentCls}-drawer`]: {
67
+ height: "100%"
68
+ },
69
+ [`&${componentCls}-top ${componentCls}-drawer,
70
+ &${componentCls}-bottom ${componentCls}-drawer`]: {
71
+ width: "100%"
72
+ },
73
+ [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer,
74
+ &${componentCls}-open${componentCls}-right ${componentCls}-drawer,
75
+ &${componentCls}-open${componentCls}-top ${componentCls}-drawer,
76
+ &${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {
77
+ transform: "translate(0, 0)"
78
+ },
79
+ [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer`]: {
80
+ boxShadow: `2px 0 10px ${token.colorFill}`
81
+ },
82
+ [`&${componentCls}-open${componentCls}-right ${componentCls}-drawer`]: {
83
+ boxShadow: `-2px 0 10px ${token.colorFill}`
84
+ },
85
+ [`&${componentCls}-open${componentCls}-top ${componentCls}-drawer`]: {
86
+ boxShadow: `0 2px 10px ${token.colorFill}`
87
+ },
88
+ [`&${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {
89
+ boxShadow: `0 -2px 10px ${token.colorFill}`
90
+ },
91
+ [`&${componentCls}-closed${componentCls}-left ${componentCls}-drawer`]: {
92
+ transform: "translateX(-100%)"
93
+ },
94
+ [`&${componentCls}-closed${componentCls}-right ${componentCls}-drawer`]: {
95
+ transform: "translateX(100%)"
96
+ },
97
+ [`&${componentCls}-closed${componentCls}-top ${componentCls}-drawer`]: {
98
+ transform: "translateY(-100%)"
99
+ },
100
+ [`&${componentCls}-closed${componentCls}-bottom ${componentCls}-drawer`]: {
101
+ transform: "translateY(100%)"
102
+ },
103
+ [`${componentCls}-expand-handle`]: {
104
+ position: "absolute",
105
+ zIndex: 2,
106
+ cursor: "pointer",
107
+ color: token.colorTextTertiary,
108
+ backgroundColor: (0, import_utils.getColorLuminance)(token.colorBgBase) > 0.5 ? "#fafafa" : "#141414",
109
+ display: "flex",
110
+ alignItems: "center",
111
+ justifyContent: "center",
112
+ pointerEvents: "all",
113
+ "&:hover": {
114
+ color: token.colorText,
115
+ backgroundColor: (0, import_utils.getColorLuminance)(token.colorBgBase) > 0.5 ? "#f0f0f0" : "#1a1a1a"
116
+ }
117
+ },
118
+ [`&${componentCls}-left ${componentCls}-expand-handle,
119
+ &${componentCls}-right ${componentCls}-expand-handle`]: {
120
+ top: "50%",
121
+ width: 24,
122
+ height: 60
123
+ },
124
+ [`&${componentCls}-top ${componentCls}-expand-handle,
125
+ &${componentCls}-bottom ${componentCls}-expand-handle`]: {
126
+ left: "50%",
127
+ width: 60,
128
+ height: 24
129
+ },
130
+ [`&${componentCls}-left ${componentCls}-expand-handle`]: {
131
+ right: 0,
132
+ transform: "translate(100%, -50%)",
133
+ borderRadius: "0 8px 8px 0",
134
+ boxShadow: `2px 0 5px ${token.colorFill}`
135
+ },
136
+ [`&${componentCls}-right ${componentCls}-expand-handle`]: {
137
+ left: 0,
138
+ transform: "translate(-100%, -50%)",
139
+ borderRadius: "8px 0 0 8px",
140
+ boxShadow: `-2px 0 5px ${token.colorFill}`
141
+ },
142
+ [`&${componentCls}-top ${componentCls}-expand-handle`]: {
143
+ bottom: 0,
144
+ transform: "translate(-50%, 100%)",
145
+ borderRadius: "0 0 8px 8px",
146
+ boxShadow: `0 2px 5px ${token.colorFill}`
147
+ },
148
+ [`&${componentCls}-bottom ${componentCls}-expand-handle`]: {
149
+ top: 0,
150
+ transform: "translate(-50%, -100%)",
151
+ borderRadius: "8px 8px 0 0",
152
+ boxShadow: `0 -2px 5px ${token.colorFill}`
153
+ },
154
+ [`${componentCls}-handle-icon`]: {
155
+ userSelect: "none",
156
+ lineHeight: 0
157
+ },
158
+ [`${componentCls}-resize-handle`]: {
159
+ position: "absolute",
160
+ border: `1px solid transparent`,
161
+ zIndex: 1,
162
+ backgroundColor: token.colorBgTextHover,
163
+ "&:hover": {
164
+ backgroundColor: token.colorBgTextActive
165
+ },
166
+ "&&-dragging": {
167
+ backgroundColor: token.colorBgTextActive
168
+ }
169
+ },
170
+ [`&${componentCls}-left ${componentCls}-resize-handle`]: {
171
+ right: 0,
172
+ width: 1,
173
+ height: "100%",
174
+ cursor: "col-resize"
175
+ },
176
+ [`&${componentCls}-right ${componentCls}-resize-handle`]: {
177
+ left: 0,
178
+ width: 1,
179
+ height: "100%",
180
+ cursor: "col-resize"
181
+ },
182
+ [`&${componentCls}-top ${componentCls}-resize-handle`]: {
183
+ bottom: 0,
184
+ height: 1,
185
+ width: "100%",
186
+ cursor: "row-resize"
187
+ },
188
+ [`&${componentCls}-bottom ${componentCls}-resize-handle`]: {
189
+ top: 0,
190
+ height: 1,
191
+ width: "100%",
192
+ cursor: "row-resize"
193
+ },
194
+ [`${componentCls}-content`]: {
195
+ height: "100%",
196
+ [`${componentCls}-card`]: {
197
+ display: "flex",
198
+ flexDirection: "column",
199
+ height: "100%",
200
+ [`${token.antCls}-card-body`]: {
201
+ flex: 1,
202
+ minHeight: 0,
203
+ overflow: "auto"
204
+ }
205
+ }
206
+ }
207
+ }
208
+ };
209
+ };
210
+ var style_default = (0, import_internal.genStyleHooks)("re-float-drawer", genStyle);
211
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/components/FloatDrawer/style/index.ts"],
4
+ "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\nimport { getColorLuminance } from '../../../utils';\n\ntype REFloatDrawerToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<REFloatDrawerToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n position: 'absolute',\n display: 'flex',\n overflow: 'visible',\n zIndex: token.zIndexPopupBase,\n ['&-left']: {\n left: 0,\n top: 0,\n bottom: 0,\n },\n ['&-right']: {\n right: 0,\n top: 0,\n bottom: 0,\n },\n ['&-top']: {\n left: 0,\n right: 0,\n top: 0,\n },\n ['&-bottom']: {\n left: 0,\n right: 0,\n bottom: 0,\n },\n\n [`&${componentCls}-open`]: {\n // visibility: 'visible',\n },\n [`&${componentCls}-closed`]: {\n pointerEvents: 'none',\n },\n [`${componentCls}-drawer`]: {\n transition: 'transform 0.3s ease-in-out',\n overflow: 'visible',\n },\n [`&${componentCls}-left ${componentCls}-drawer,\n &${componentCls}-right ${componentCls}-drawer`]: {\n height: '100%',\n },\n [`&${componentCls}-top ${componentCls}-drawer,\n &${componentCls}-bottom ${componentCls}-drawer`]: {\n width: '100%',\n },\n [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-right ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-top ${componentCls}-drawer,\n &${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {\n transform: 'translate(0, 0)',\n },\n [`&${componentCls}-open${componentCls}-left ${componentCls}-drawer`]: {\n boxShadow: `2px 0 10px ${token.colorFill}`,\n },\n [`&${componentCls}-open${componentCls}-right ${componentCls}-drawer`]: {\n boxShadow: `-2px 0 10px ${token.colorFill}`,\n },\n [`&${componentCls}-open${componentCls}-top ${componentCls}-drawer`]: {\n boxShadow: `0 2px 10px ${token.colorFill}`,\n },\n [`&${componentCls}-open${componentCls}-bottom ${componentCls}-drawer`]: {\n boxShadow: `0 -2px 10px ${token.colorFill}`,\n },\n [`&${componentCls}-closed${componentCls}-left ${componentCls}-drawer`]: {\n transform: 'translateX(-100%)',\n },\n [`&${componentCls}-closed${componentCls}-right ${componentCls}-drawer`]: {\n transform: 'translateX(100%)',\n },\n [`&${componentCls}-closed${componentCls}-top ${componentCls}-drawer`]: {\n transform: 'translateY(-100%)',\n },\n [`&${componentCls}-closed${componentCls}-bottom ${componentCls}-drawer`]: {\n transform: 'translateY(100%)',\n },\n [`${componentCls}-expand-handle`]: {\n position: 'absolute',\n zIndex: 2,\n cursor: 'pointer',\n color: token.colorTextTertiary,\n backgroundColor: getColorLuminance(token.colorBgBase) > 0.5 ? '#fafafa' : '#141414',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n '&:hover': {\n color: token.colorText,\n backgroundColor: getColorLuminance(token.colorBgBase) > 0.5 ? '#f0f0f0' : '#1a1a1a',\n },\n },\n [`&${componentCls}-left ${componentCls}-expand-handle,\n &${componentCls}-right ${componentCls}-expand-handle`]: {\n top: '50%',\n width: 24,\n height: 60,\n },\n [`&${componentCls}-top ${componentCls}-expand-handle,\n &${componentCls}-bottom ${componentCls}-expand-handle`]: {\n left: '50%',\n width: 60,\n height: 24,\n },\n [`&${componentCls}-left ${componentCls}-expand-handle`]: {\n right: 0,\n transform: 'translate(100%, -50%)',\n borderRadius: '0 8px 8px 0',\n boxShadow: `2px 0 5px ${token.colorFill}`,\n },\n [`&${componentCls}-right ${componentCls}-expand-handle`]: {\n left: 0,\n transform: 'translate(-100%, -50%)',\n borderRadius: '8px 0 0 8px',\n boxShadow: `-2px 0 5px ${token.colorFill}`,\n },\n [`&${componentCls}-top ${componentCls}-expand-handle`]: {\n bottom: 0,\n transform: 'translate(-50%, 100%)',\n borderRadius: '0 0 8px 8px',\n boxShadow: `0 2px 5px ${token.colorFill}`,\n },\n [`&${componentCls}-bottom ${componentCls}-expand-handle`]: {\n top: 0,\n transform: 'translate(-50%, -100%)',\n borderRadius: '8px 8px 0 0',\n boxShadow: `0 -2px 5px ${token.colorFill}`,\n },\n [`${componentCls}-handle-icon`]: {\n userSelect: 'none',\n lineHeight: 0,\n },\n [`${componentCls}-resize-handle`]: {\n position: 'absolute',\n border: `1px solid transparent`,\n zIndex: 1,\n backgroundColor: token.colorBgTextHover,\n '&:hover': {\n backgroundColor: token.colorBgTextActive,\n },\n '&&-dragging': {\n backgroundColor: token.colorBgTextActive,\n },\n },\n [`&${componentCls}-left ${componentCls}-resize-handle`]: {\n right: 0,\n width: 1,\n height: '100%',\n cursor: 'col-resize',\n },\n [`&${componentCls}-right ${componentCls}-resize-handle`]: {\n left: 0,\n width: 1,\n height: '100%',\n cursor: 'col-resize',\n },\n [`&${componentCls}-top ${componentCls}-resize-handle`]: {\n bottom: 0,\n height: 1,\n width: '100%',\n cursor: 'row-resize',\n },\n [`&${componentCls}-bottom ${componentCls}-resize-handle`]: {\n top: 0,\n height: 1,\n width: '100%',\n cursor: 'row-resize',\n },\n [`${componentCls}-content`]: {\n height: '100%',\n [`${componentCls}-card`]: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n\n [`${token.antCls}-card-body`]: {\n flex: 1,\n minHeight: 0,\n overflow: 'auto',\n },\n },\n },\n },\n };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default genStyleHooks('re-float-drawer' as any, genStyle);\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }