Skip to content

Commit 5391d05

Browse files
wewoorwewoor
committed
feat(dropdown): add basic component and stories
1 parent 892aa6c commit 5391d05

File tree

4 files changed

+287
-0
lines changed

4 files changed

+287
-0
lines changed

‎src/components/dropdown/index.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import './style.scss';
2+
import * as React from 'react';
3+
import { classNames, prefixClaName } from 'mo/common/className';
4+
import { useContextView } from '../contextview';
5+
import { triggerEvent, TriggerEvent } from 'mo/common/dom';
6+
7+
export interface IDropDown extends HTMLElementProps {
8+
overlay: ReactNode;
9+
trigger?: TriggerEvent;
10+
placement?: 'top' | 'right' | 'bottom' | 'left';
11+
}
12+
13+
export const defaultDropDownClassName = 'drop-down';
14+
15+
export function DropDown(props: React.PropsWithChildren<IDropDown>) {
16+
const {
17+
className,
18+
overlay,
19+
children,
20+
placement = 'bottom',
21+
trigger = 'click',
22+
...others
23+
} = props;
24+
const contextView = useContextView({
25+
render: () => overlay,
26+
});
27+
28+
const claNames = classNames(
29+
prefixClaName(defaultDropDownClassName),
30+
placement,
31+
className
32+
);
33+
const events = {
34+
[triggerEvent(trigger)]: function (e: React.MouseEvent) {
35+
const target = e.currentTarget;
36+
const rect = target.getBoundingClientRect();
37+
contextView.show({
38+
x: rect.x + rect.width,
39+
y: rect.y,
40+
});
41+
},
42+
};
43+
44+
return (
45+
<div className={claNames} {...events} {...others}>
46+
{children}
47+
</div>
48+
);
49+
}

‎src/components/dropdown/style.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import 'mo/style/const';
2+
$dropDown: 'drop-down';
3+
4+
#{prefix($dropDown)} {
5+
align-items: center;
6+
display: flex;
7+
height: 100%;
8+
justify-content: center;
9+
width: 100%;
10+
}

‎src/style/const.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// TODO Refactor the class name to camel style
12
$prefix: 'mo';
23
$activityBar: 'activityBar';
34
$sidebar: 'sidebar';
@@ -7,6 +8,9 @@ $settings: 'settings';
78
$panel: 'panel';
89
$statusBar: 'statusBar';
910

11+
// Component parts below
12+
$dropDown: 'drop-down';
13+
1014
@function prefix($name) {
1115
@return '.' + $prefix + '-' + $name;
1216
}

‎stories/components/11-DownDown.stories.tsx

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import { withKnobs } from '@storybook/addon-knobs';
4+
import { propsTable } from '../common/propsTable';
5+
6+
import { Menu } from 'mo/components/menu';
7+
import { Icon } from 'mo/components/icon';
8+
import { DropDown } from 'mo/components/dropdown';
9+
10+
const stories = storiesOf('DropDown', module);
11+
stories.addDecorator(withKnobs);
12+
13+
const propDefinitions = [
14+
{
15+
property: 'render',
16+
propType: '() => React.ReactNode',
17+
required: false,
18+
description: 'Default render content',
19+
defaultValue: null,
20+
},
21+
];
22+
23+
stories.add(
24+
'Basic Usage',
25+
() => {
26+
const menuData = [
27+
{
28+
id: 'File',
29+
name: 'File',
30+
data: [
31+
{
32+
id: 'New File',
33+
name: 'New File',
34+
},
35+
{
36+
id: 'OpenFile',
37+
name: 'Open',
38+
},
39+
],
40+
},
41+
{
42+
id: 'Edit',
43+
name: 'Edit',
44+
data: [
45+
{
46+
id: 'Undo',
47+
name: 'Undo',
48+
},
49+
{
50+
id: 'Redo',
51+
name: 'Redo',
52+
},
53+
],
54+
},
55+
{
56+
id: 'Selection',
57+
name: 'Selection',
58+
data: [
59+
{
60+
id: 'SelectAll',
61+
name: 'Select All',
62+
},
63+
{
64+
id: 'CopyLineUp',
65+
name: 'Copy Line Up',
66+
},
67+
],
68+
},
69+
{
70+
id: 'View',
71+
name: 'View',
72+
data: [
73+
{
74+
id: 'Command Palette',
75+
name: 'Command Palette',
76+
},
77+
{
78+
id: 'OpenView',
79+
name: 'Open View',
80+
},
81+
{
82+
id: 'Appearance',
83+
name: 'Appearance',
84+
data: [
85+
{
86+
icon: 'check',
87+
id: 'ShowMenuBar',
88+
name: 'Show Menu Bar',
89+
},
90+
{
91+
icon: 'check',
92+
id: 'ShowSideBar',
93+
name: 'Show Side Bar',
94+
},
95+
{
96+
icon: 'check',
97+
id: 'ShowStatusBar',
98+
name: 'Show Status Bar',
99+
},
100+
{
101+
icon: 'check',
102+
id: 'ShowActivityBar',
103+
name: 'Show Activity Bar',
104+
},
105+
],
106+
},
107+
],
108+
},
109+
{
110+
id: 'Run',
111+
name: 'Run',
112+
data: [
113+
{
114+
id: 'RunTask',
115+
name: 'Run Task',
116+
},
117+
],
118+
},
119+
{
120+
id: 'Help',
121+
name: 'Help',
122+
data: [
123+
{
124+
id: 'About',
125+
name: 'About',
126+
},
127+
],
128+
},
129+
];
130+
131+
return (
132+
<div>
133+
<h2>简述</h2>
134+
<p>
135+
DownDown
136+
组件主要是提供了一个可根据指定锚点位置、渲染内容的视图容器。
137+
</p>
138+
<div>
139+
<h3>使用示例 1 - Hover me!</h3>
140+
<DropDown
141+
style={{
142+
width: 45,
143+
height: 45,
144+
color: 'rgba(255, 255, 255, 0.4)',
145+
background: '#252526',
146+
}}
147+
trigger="hover"
148+
placement="right"
149+
overlay={
150+
<Menu style={{ width: 200 }} data={menuData} />
151+
}
152+
>
153+
<Icon type="menu" />
154+
</DropDown>
155+
</div>
156+
<div>
157+
<h3>使用示例 1 - Click me!</h3>
158+
<DropDown
159+
style={{
160+
width: 45,
161+
height: 45,
162+
color: 'rgba(255, 255, 255, 0.4)',
163+
background: '#252526',
164+
}}
165+
trigger="click"
166+
placement="right"
167+
overlay={
168+
<Menu style={{ width: 200 }} data={menuData} />
169+
}
170+
>
171+
<Icon type="menu" />
172+
</DropDown>
173+
</div>
174+
</div>
175+
);
176+
},
177+
{
178+
info: {
179+
inline: true,
180+
TableComponent: () => propsTable({ propDefinitions }),
181+
// propTablesExclude: [],
182+
text: `
183+
代码示例：
184+
~~~js
185+
import { useContextView } from 'mo/components/contextview';
186+
187+
const contextView = useContextView();
188+
189+
const mouseMove = (event: React.MouseEvent): void => {
190+
contextView.show({
191+
x: event.clientX,
192+
y: event.clientY,
193+
}, () => {
194+
return (
195+
<h1>Hello World</h1>
196+
);
197+
});
198+
};
199+
200+
return (
201+
<div>
202+
<div id="topLeft"
203+
onMouseMove={mouseMove}
204+
style={
205+
{
206+
position: 'absolute',
207+
width: 200,
208+
height: 200,
209+
top: 0,
210+
left: 0,
211+
right: 0,
212+
bottom: 0,
213+
background: '#dddddd',
214+
}
215+
}>
216+
Hover me!
217+
</div>
218+
</div>
219+
);
220+
～～
221+
`,
222+
},
223+
}
224+
);

0 commit comments

Comments
 (0)