Skip to content

Commit 550d04a

Browse files
wewoorwewoor
committed
feat: add basic Checkbox component
1 parent 7b9c813 commit 550d04a

File tree

6 files changed

+223
-0
lines changed

6 files changed

+223
-0
lines changed

‎src/components/checkbox/checkbox.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import './style.scss';
2+
import * as React from 'react';
3+
import { ComponentProps } from 'react';
4+
import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
5+
6+
export interface ICheckbox extends ComponentProps<any> {
7+
id: string;
8+
value?: string;
9+
children?: ReactNode;
10+
onChange?(e: React.ChangeEvent, options?: ICheckbox): void;
11+
}
12+
13+
export const checkboxClassName = prefixClaName('checkbox');
14+
const checkboxLabelClassName = getBEMElement(checkboxClassName, 'label');
15+
const checkboxInputClassName = getBEMElement(checkboxClassName, 'input');
16+
17+
export function Checkbox(props: ICheckbox) {
18+
const { className, id, children, value, onChange, ...custom } = props;
19+
20+
const claNames = classNames(checkboxClassName, className);
21+
22+
const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
23+
onChange?.(e, { id, value: e.target.value });
24+
};
25+
26+
return (
27+
<div className={claNames} {...(custom as any)}>
28+
<input
29+
id={id}
30+
type="checkbox"
31+
className={checkboxInputClassName}
32+
value={value}
33+
onChange={handleCheckboxChange}
34+
></input>
35+
<label
36+
htmlFor={id}
37+
className={classNames(checkboxLabelClassName, 'codicon')}
38+
>
39+
{children}
40+
</label>
41+
</div>
42+
);
43+
}

‎src/components/checkbox/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './checkbox';

‎src/components/checkbox/style.scss

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import 'mo/style/common';
2+
$checkbox: prefix('checkbox');
3+
4+
#{$checkbox} {
5+
user-select: none;
6+
7+
&__input {
8+
height: 0;
9+
visibility: hidden;
10+
width: 0;
11+
12+
&[type='checkbox']:checked + label::before {
13+
content: '\eab2';
14+
}
15+
}
16+
17+
&__label {
18+
cursor: pointer;
19+
outline: none;
20+
padding-left: 26px;
21+
position: relative;
22+
23+
&::before {
24+
border: 1px solid transparent;
25+
border-radius: 3px;
26+
box-sizing: border-box;
27+
content: ' ';
28+
display: inline-block;
29+
font: normal normal normal 16px/1 codicon;
30+
-webkit-font-smoothing: antialiased;
31+
-moz-osx-font-smoothing: grayscale;
32+
height: 18px;
33+
left: 0;
34+
outline: 1px solid transparent;
35+
position: absolute;
36+
text-align: center;
37+
text-decoration: none;
38+
text-rendering: auto;
39+
top: 0;
40+
user-select: none;
41+
width: 18px;
42+
}
43+
}
44+
}

‎src/style/common.scss

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ $prefix: 'mo';
1818

1919
.#{$prefix} {
2020
bottom: 0;
21+
box-sizing: border-box;
2122
font-size: 13px;
2223
height: 100%;
2324
left: 0;

‎src/style/theme.scss

+18
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
@import 'mo/components/button/style';
2626
@import 'mo/components/input/style';
2727
@import 'mo/components/select/style';
28+
@import 'mo/components/checkbox/style';
2829

2930
// =============== Workbench =============== //
3031
#{prefix($workbench)} {
@@ -251,3 +252,20 @@
251252
border-top-color: rgba(255, 255, 255, 0.4);
252253
}
253254
}
255+
256+
// =============== Checkbox =============== //
257+
258+
#{$checkbox} {
259+
&--focus + label::before {
260+
outline-color: rgba(14, 99, 156, 0.8);
261+
}
262+
263+
&__label {
264+
color: #f0f0f0;
265+
266+
&::before {
267+
background-color: #3c3c3c;
268+
border-color: #3c3c3c;
269+
}
270+
}
271+
}

‎stories/components/16-Checkbox.stories.tsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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+
import { Checkbox } from 'mo/components/checkbox';
6+
7+
const stories = storiesOf('Checkbox', module);
8+
stories.addDecorator(withKnobs);
9+
10+
const propDefinitions = [
11+
{
12+
property: 'render',
13+
propType: '() => React.ReactNode',
14+
required: false,
15+
description: 'Default render content',
16+
defaultValue: null,
17+
},
18+
];
19+
20+
stories.add(
21+
'Basic Usage',
22+
() => {
23+
const onSelectOption = (e, option) => {
24+
console.log('onSelectOption', e, option);
25+
};
26+
return (
27+
<div
28+
style={{
29+
backgroundColor: 'rgb(37, 37, 38)',
30+
color: 'rgb(240, 240, 240)',
31+
height: 500,
32+
padding: 20,
33+
}}
34+
>
35+
<h2>简述</h2>
36+
<p>Checkbox component.</p>
37+
38+
<h3>使用示例 1</h3>
39+
<div>
40+
<Checkbox
41+
id="checkbox1"
42+
value="1"
43+
style={{
44+
color: 'rgba(255, 255, 255, 0.4)',
45+
background: '#252526',
46+
}}
47+
onChange={onSelectOption}
48+
>
49+
Controls whether and how files path are shown in the
50+
breadcrumbs view.
51+
</Checkbox>
52+
</div>
53+
<div style={{ marginTop: 20 }}>
54+
<Checkbox
55+
id="checkbox2"
56+
value="2"
57+
style={{
58+
color: 'rgba(255, 255, 255, 0.4)',
59+
background: '#252526',
60+
}}
61+
onChange={onSelectOption}
62+
>
63+
Render breadcrumb items with icons.
64+
</Checkbox>
65+
</div>
66+
</div>
67+
);
68+
},
69+
{
70+
info: {
71+
inline: true,
72+
TableComponent: () => propsTable({ propDefinitions }),
73+
// propTablesExclude: [],
74+
text: `
75+
代码示例：
76+
~~~js
77+
import { useContextView } from 'mo/components/contextview';
78+
79+
const contextView = useContextView();
80+
81+
const mouseMove = (event: React.MouseEvent): void => {
82+
contextView.show({
83+
x: event.clientX,
84+
y: event.clientY,
85+
}, () => {
86+
return (
87+
<h1>Hello World</h1>
88+
);
89+
});
90+
};
91+
92+
return (
93+
<div>
94+
<div id="topLeft"
95+
onMouseMove={mouseMove}
96+
style={
97+
{
98+
position: 'absolute',
99+
width: 200,
100+
height: 200,
101+
top: 0,
102+
left: 0,
103+
right: 0,
104+
bottom: 0,
105+
background: '#dddddd',
106+
}
107+
}>
108+
Hover me!
109+
</div>
110+
</div>
111+
);
112+
～～
113+
`,
114+
},
115+
}
116+
);

0 commit comments

Comments
 (0)