x-ui-design 0.9.86 → 0.9.88
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.
- package/dist/index.esm.js +2 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/lib/hooks/usePopupPosition.ts +2 -4
- package/package.json +1 -1
- package/src/app/page.tsx +202 -9
|
@@ -249,15 +249,13 @@ export const usePopupPosition = ({
|
|
|
249
249
|
};
|
|
250
250
|
}, [open, targetRef, listenPopoverPossitions, calculatePosition]);
|
|
251
251
|
|
|
252
|
-
const showPopupStyle = open && popupPosition.hasOwnProperty('top') || popupPosition.hasOwnProperty('left')
|
|
253
|
-
|
|
254
252
|
return {
|
|
255
253
|
_placement,
|
|
256
|
-
popupStyle:
|
|
254
|
+
popupStyle: {
|
|
257
255
|
zIndex: 10000,
|
|
258
256
|
position: "absolute",
|
|
259
257
|
opacity: Object.keys(popupPosition).length ? 1 : 0,
|
|
260
258
|
...popupPosition
|
|
261
|
-
}
|
|
259
|
+
}
|
|
262
260
|
};
|
|
263
261
|
};
|
package/package.json
CHANGED
package/src/app/page.tsx
CHANGED
|
@@ -1,18 +1,211 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
+
import { Button } from '../../lib/components/Button';
|
|
3
4
|
import { Popover } from '../../lib/components/Popover';
|
|
5
|
+
import { Dropdown } from '../../lib/components/Dropdown';
|
|
6
|
+
import { RangePicker } from '../../lib/components/DatePicker/RangePicker';
|
|
7
|
+
import { DatePicker } from '../../lib/components/DatePicker';
|
|
8
|
+
import { TimePicker } from '../../lib/components/DatePicker/TimePicker';
|
|
9
|
+
import { Menu } from '../../lib/components/Menu';
|
|
10
|
+
import { ArrowIcon, ClearIcon } from "../../lib/components/Icons/Icons";
|
|
11
|
+
import { ItemType } from "../../lib/types/menu";
|
|
12
|
+
import { lazy, Suspense, useEffect, useState } from "react";
|
|
13
|
+
import MenuItem from '../../lib/components/Menu/Item/Item';
|
|
14
|
+
|
|
15
|
+
const Result = lazy(() => import('../../lib/components/Result/Result'))
|
|
16
|
+
|
|
17
|
+
const items: ItemType[] = [
|
|
18
|
+
{
|
|
19
|
+
key: 'sub1',
|
|
20
|
+
label: 'Navigation One',
|
|
21
|
+
children: [
|
|
22
|
+
{
|
|
23
|
+
key: 'g1',
|
|
24
|
+
label: 'Item 1',
|
|
25
|
+
type: 'group',
|
|
26
|
+
children: [
|
|
27
|
+
{ key: '1', label: 'Option 1' },
|
|
28
|
+
{ key: '2', label: 'Option 2' },
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
key: 'g2',
|
|
33
|
+
label: 'Item 2',
|
|
34
|
+
type: 'group',
|
|
35
|
+
children: [
|
|
36
|
+
{ key: '3', label: 'Option 3' },
|
|
37
|
+
{ key: '4', label: 'Option 4' },
|
|
38
|
+
],
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
key: 'sub2',
|
|
44
|
+
label: 'Navigation Two',
|
|
45
|
+
children: [
|
|
46
|
+
{ key: '5', label: 'Option 5' },
|
|
47
|
+
{ key: '6', label: 'Option 6' },
|
|
48
|
+
{
|
|
49
|
+
key: 'sub3',
|
|
50
|
+
label: 'Submenu',
|
|
51
|
+
children: [
|
|
52
|
+
{ key: '7', label: 'Option 7' },
|
|
53
|
+
{ key: '8', label: 'Option 8' },
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'divider',
|
|
60
|
+
key: 'divider'
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
key: 'sub4',
|
|
64
|
+
label: 'Navigation Three',
|
|
65
|
+
children: [
|
|
66
|
+
{ key: '9', label: 'Option 9' },
|
|
67
|
+
{ key: '10', label: 'Option 10' },
|
|
68
|
+
{ key: '11', label: 'Option 11' },
|
|
69
|
+
{ key: '12', label: 'Option 12' },
|
|
70
|
+
],
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
key: 'grp',
|
|
74
|
+
label: 'Group',
|
|
75
|
+
type: 'group',
|
|
76
|
+
children: [
|
|
77
|
+
{ key: '13', label: 'Option 13' },
|
|
78
|
+
{ key: '14', label: 'Option 14' },
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
];
|
|
4
82
|
|
|
5
83
|
export default function Home() {
|
|
84
|
+
const [s, setS] = useState({});
|
|
85
|
+
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
setTimeout(() => {
|
|
88
|
+
setS({ top: 200, left: 200 })
|
|
89
|
+
}, 1000);
|
|
90
|
+
}, [])
|
|
91
|
+
|
|
6
92
|
return (
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
93
|
+
// <div style={{ height: 1000 }}>
|
|
94
|
+
// <div />
|
|
95
|
+
// <div
|
|
96
|
+
// className='sdfdsgfsfdg'
|
|
97
|
+
// style={{
|
|
98
|
+
// height: 500,
|
|
99
|
+
// // width: 2000,
|
|
100
|
+
// display: "flex",
|
|
101
|
+
// overflow: 'auto',
|
|
102
|
+
// border: '1px solid',
|
|
103
|
+
// position: 'relative',
|
|
104
|
+
// }}>
|
|
105
|
+
// <div style={{ width: 900 }} />
|
|
106
|
+
|
|
107
|
+
// <div style={{
|
|
108
|
+
// width: 900,
|
|
109
|
+
// position: 'relative',
|
|
110
|
+
// // height: 1500,
|
|
111
|
+
// // border: '1px solid',
|
|
112
|
+
// }}>
|
|
113
|
+
// <div style={{ height: 300, width: '100%' }} />
|
|
114
|
+
// <div
|
|
115
|
+
// className='dsfdf'
|
|
116
|
+
// style={{
|
|
117
|
+
// width: 1500,
|
|
118
|
+
// position: 'relative',
|
|
119
|
+
// height: 500,
|
|
120
|
+
// border: '1px solid',
|
|
121
|
+
// }}>
|
|
122
|
+
// {/* <div style={{ height: 900, width: '100%' }} /> */}
|
|
123
|
+
// <Popover
|
|
124
|
+
// placement='bottomRight'
|
|
125
|
+
// content={
|
|
126
|
+
// <Suspense>
|
|
127
|
+
// <Result
|
|
128
|
+
// status="success"
|
|
129
|
+
// title="Success"
|
|
130
|
+
// subTitle="Sorry, you are not authorized to access this page."
|
|
131
|
+
// extra={<Button type="primary">Back Home</Button>}
|
|
132
|
+
// />
|
|
133
|
+
// </Suspense>
|
|
134
|
+
// }
|
|
135
|
+
// // getPopupContainer={() => document.body}
|
|
136
|
+
// // getPopupContainer={() => document.getElementsByClassName('sdfdsgfsfdg')?.[0] as HTMLDivElement}
|
|
137
|
+
// // getPopupContainer={() => document.getElementsByClassName('dsfdf')?.[0] as HTMLDivElement}
|
|
138
|
+
// >
|
|
139
|
+
// Menu
|
|
140
|
+
// <br />
|
|
141
|
+
// Menu
|
|
142
|
+
// </Popover>
|
|
143
|
+
// {/* <DatePicker
|
|
144
|
+
// // getPopupContainer={() => document.body}
|
|
145
|
+
// getPopupContainer={() => document.getElementsByClassName('sdfdsgfsfdg')?.[0] as HTMLDivElement}
|
|
146
|
+
// /> */}
|
|
147
|
+
// </div>
|
|
148
|
+
// </div>
|
|
149
|
+
// {/* <div style={{ width: '100%' }} /> */}
|
|
150
|
+
// </div>
|
|
151
|
+
// </div>
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
// <div className='dsfdf' style={{ display: 'flex', width: 1200, border: '1px solid', overflow: 'scroll', height: 1700, position: 'relative' }}>
|
|
155
|
+
// <div style={{ minWidth: 1500 }} />
|
|
156
|
+
// <div
|
|
157
|
+
// className='sdfdsgfsfdg'
|
|
158
|
+
// style={{
|
|
159
|
+
// height: 2000, minWidth: 1000, border: '1px solid',
|
|
160
|
+
// position: 'relative'
|
|
161
|
+
// }}>
|
|
162
|
+
// <div style={{
|
|
163
|
+
// height: 1000,
|
|
164
|
+
// position: 'relative'
|
|
165
|
+
// }} />
|
|
166
|
+
// <div style={{
|
|
167
|
+
// display: 'flex',
|
|
168
|
+
// justifyContent: 'center'
|
|
169
|
+
// }}>
|
|
170
|
+
// <Popover
|
|
171
|
+
// placement='bottomLeft'
|
|
172
|
+
// listenPopoverPositions={s}
|
|
173
|
+
// content={
|
|
174
|
+
// <Suspense fallback={<div style={{ width: 12, height: 12 }}></div>}>
|
|
175
|
+
// <Result
|
|
176
|
+
// status="success"
|
|
177
|
+
// title="Success"
|
|
178
|
+
// subTitle="Sorry, you are not authorized to access this page."
|
|
179
|
+
// extra={<Button type="primary">Back Home</Button>}
|
|
180
|
+
// />
|
|
181
|
+
// </Suspense>
|
|
182
|
+
// }
|
|
183
|
+
// // getPopupContainer={() => document.body}
|
|
184
|
+
// // getPopupContainer={() => document.getElementsByClassName('sdfdsgfsfdg')?.[0] as HTMLDivElement}
|
|
185
|
+
// // getPopupContainer={() => document.getElementsByClassName('dsfdf')?.[0] as HTMLDivElement}
|
|
186
|
+
// >
|
|
187
|
+
// <div style={{
|
|
188
|
+
// // marginRight: 100
|
|
189
|
+
// }}>
|
|
190
|
+
// Menu
|
|
191
|
+
// <br />
|
|
192
|
+
// Menu
|
|
193
|
+
// </div>
|
|
194
|
+
// </Popover>
|
|
195
|
+
// </div>
|
|
196
|
+
// {/* <DatePicker placement='right' getPopupContainer={() => document.body} /> */}
|
|
197
|
+
<Dropdown trigger={'hover'} overlay={() => {
|
|
198
|
+
return <Menu items={items} selectable selectedKeys={['13']} />
|
|
199
|
+
{/* {items.map((item) => {
|
|
200
|
+
return <MenuItem key={item.key} itemKey={item.key} label={item.label} />
|
|
201
|
+
})}
|
|
202
|
+
</Menu> */}
|
|
203
|
+
}}>
|
|
204
|
+
Dropdown
|
|
205
|
+
</Dropdown>
|
|
206
|
+
// </div>
|
|
207
|
+
// <div style={{ minWidth: 1500 }} />
|
|
208
|
+
// </div>
|
|
16
209
|
)
|
|
17
210
|
}
|
|
18
211
|
|