Skip to content

Commit 1f56272

Browse files
prasanna1211prasanna1211
committed
squash commit checkbox and toggle
1 parent 67e4ea9 commit 1f56272

File tree

21 files changed

+480
-195
lines changed

21 files changed

+480
-195
lines changed

‎docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ import components from '../../../../../src';
1010
import styles from './styles.scss';
1111
import theme from '../../../components/common/DefaultCode/theme.scss';
1212

13+
const PreviewBlock = ({ children, header }) => (
14+
<div className="preview-block">
15+
<div className="header">{header}</div>
16+
{children}
17+
</div>
18+
)
1319
class PlaygroundWithPreview extends React.Component {
1420
constructor(props) {
1521
super(props);
@@ -34,11 +40,13 @@ class PlaygroundWithPreview extends React.Component {
3440
(Editor not available at this screen size)
3541
</div>
3642
<LiveProvider
37-
scope={{ ...components, theme }}
43+
scope={{ ...components, PreviewBlock, theme }}
3844
code={this.props.defaultCode}
3945
>
4046
<div className="code-editor">
41-
<LiveEditor />
47+
<div className="editor-wrapper">
48+
<LiveEditor />
49+
</div>
4250
<div className="doc-enabler">
4351
<label htmlFor="normal-switch">
4452
<div>Show Docs</div>

‎docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
}
1616
.code-editor {
1717
width: 50%;
18+
.editor-wrapper {
19+
height: 400px !important;
20+
overflow-y: scroll;
21+
}
22+
1823
float: left;
1924
}
2025

@@ -62,4 +67,13 @@
6267
}
6368
}
6469

70+
.preview-block {
71+
.header {
72+
font-weight: bold;
73+
font-size: 20px;
74+
margin-top: 10px;
75+
margin-bottom: 15px;
76+
}
77+
78+
}
6579
}

‎docs/client/components/common/DefaultCode/Button/index.js

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ class Demo extends React.Component {
33
render() {
44
return (
55
<div>
6-
<div>
7-
<h4>Buttons with diffent styles</h4>
6+
<PreviewBlock header="Styled Buttons">
87
<Button>Default</Button>
98
<Button type="primary">Primary</Button>
109
<Button type="secondary">Secondary</Button>
@@ -14,20 +13,27 @@ class Demo extends React.Component {
1413
<Button type="info">Info</Button>
1514
<Button type="light">Light</Button>
1615
<Button type="dark">Dark</Button>
17-
</div>
18-
19-
<div>
20-
<h4>Buttons with diffent sizes</h4>
21-
<Button type="primary" size="small">Small</Button>
22-
<Button type="primary" size="medium">Medium</Button>
23-
<Button type="primary" size="large">Large</Button>
24-
</div>
25-
26-
<div>
27-
<h4>Buttons with Icon</h4>
28-
<Button type="success" icon="done">Left Icon</Button>
29-
<Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
30-
</div>
16+
</PreviewBlock>
17+
<PreviewBlock header="Sizable Buttons">
18+
<Button
19+
type="primary"
20+
size="small"
21+
>
22+
Small
23+
</Button>
24+
<Button
25+
type="primary"
26+
size="medium"
27+
>
28+
Medium
29+
</Button>
30+
<Button
31+
type="primary"
32+
size="large"
33+
>
34+
Large
35+
</Button>
36+
</PreviewBlock>
3137
</div>
3238
)
3339
}

‎docs/client/components/common/DefaultCode/Checkbox/index.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export const defaultCode = `
2+
class Demo extends React.Component {
3+
constructor(props) {
4+
super(props);
5+
6+
this.handleCheckClick = this.handleCheckClick.bind(this);
7+
}
8+
9+
handleCheckClick () {
10+
alert('Clicked one of the checkbox');
11+
}
12+
render() {
13+
return (
14+
<div>
15+
{/* PreviewBlock 1 */}
16+
<PreviewBlock header="Normal Checkbox">
17+
<Checkbox
18+
onClick={this.handleCheckClick}
19+
/>
20+
</PreviewBlock>
21+
{/* PreviewBlock 2 */}
22+
<PreviewBlock header="Checked by default">
23+
<Checkbox
24+
onClick={this.handleCheckClick}
25+
checked
26+
/>
27+
</PreviewBlock>
28+
{/* PreviewBlock 3 */}
29+
<PreviewBlock header="Checkbox with label">
30+
<Checkbox
31+
onClick={this.handleCheckClick}
32+
/>
33+
<span style={{ marginLeft: '10px' }}>
34+
Label for the checkbox
35+
</span>
36+
</PreviewBlock>
37+
</div>
38+
)
39+
}
40+
}
41+
`;

‎docs/client/components/common/DefaultCode/CheckboxGroup/index.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export const defaultCode = `
2+
class Demo extends React.Component {
3+
render() {
4+
const options = [
5+
{ label: 'Alpha' },
6+
{ label: 'Beta'},
7+
{ label: 'Zheta' }
8+
];
9+
return (
10+
<div>
11+
{/* Preview Block 1 */}
12+
<PreviewBlock header="Default Checkbox group">
13+
<CheckboxGroup
14+
options={options}
15+
/>
16+
</PreviewBlock>
17+
{/* Preview Block 2 */}
18+
<PreviewBlock header="Inline Checkbox group">
19+
<CheckboxGroup
20+
inline
21+
options={options}
22+
/>
23+
</PreviewBlock>
24+
</div>
25+
)
26+
}
27+
}
28+
`;

‎docs/client/components/common/DefaultCode/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export { defaultCode as CardDefaultCode } from './Card';
22
export { defaultCode as ButtonDefaultCode } from './Button';
3+
export { defaultCode as CheckboxDefaultCode } from './Checkbox';
4+
export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';

‎docs/client/components/common/componentList.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@ import Card from '../../../../src/card';
22
import CardReadme from '../../../../src/card/readMe.md';
33
import Button from '../../../../src/button';
44
import ButtonReadme from '../../../../src/button/readMe.md';
5+
import Checkbox from '../../../../src/checkbox';
6+
import CheckboxReadme from '../../../../src/checkbox/readMe.md';
7+
import CheckboxGroup from '../../../../src/checkbox';
8+
import CheckboxGroupReadme from '../../../../src/checkbox/readMe.md';
59

610
import {
711
CardDefaultCode,
812
ButtonDefaultCode,
13+
CheckboxDefaultCode,
14+
CheckboxGroupDefaultCode,
915
} from './DefaultCode';
1016

1117
export const componentList = [
@@ -21,4 +27,16 @@ export const componentList = [
2127
component: Button,
2228
defaultCode: ButtonDefaultCode,
2329
},
30+
{
31+
name: 'Checkbox',
32+
docs: CheckboxReadme,
33+
component: Checkbox,
34+
defaultCode: CheckboxDefaultCode,
35+
},
36+
{
37+
name: 'CheckboxGroup',
38+
docs: CheckboxGroupReadme,
39+
component: CheckboxGroup,
40+
defaultCode: CheckboxGroupDefaultCode,
41+
},
2442
];

‎src/button/Button.js

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎src/button/index.js

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,62 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
14
import { themr } from 'react-css-themr';
2-
import { buttonFactory } from './Button';
3-
import { FontIcon } from '../font_icon/FontIcon';
4-
import themedRippleFactory from '../ripple';
5-
import theme from './theme.scss';
65

7-
const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
8-
const ThemedButton = themr('CBBUTTON', theme)(Button);
6+
import defaultTheme from './theme.scss';
97

10-
export default ThemedButton;
11-
export { ThemedButton as Button };
8+
class Button extends Component {
9+
10+
render() {
11+
const {
12+
children, type, size, className, href, icon, iconAlignment, theme, ...others
13+
} = this.props;
14+
const Element = href ? 'a' : 'button';
15+
const classes = classnames(theme.button, theme[type], theme[size], className);
16+
17+
const props = {
18+
...others,
19+
href,
20+
ref: (node) => { this.buttonNode = node; },
21+
className: classes,
22+
disabled: this.props.disabled,
23+
onMouseUp: this.handleMouseUp,
24+
onMouseLeave: this.handleMouseLeave,
25+
};
26+
return (
27+
<Element {...props}>
28+
{children}
29+
</Element>
30+
);
31+
}
32+
}
33+
34+
Button.propTypes = {
35+
children: PropTypes.node.isRequired,
36+
type: PropTypes.string,
37+
size: PropTypes.string,
38+
className: PropTypes.string,
39+
href: PropTypes.string,
40+
icon: PropTypes.oneOfType([
41+
PropTypes.string,
42+
PropTypes.element,
43+
]),
44+
iconAlignment: PropTypes.string,
45+
theme: PropTypes.shape({}),
46+
disabled: PropTypes.bool,
47+
onClick: PropTypes.func,
48+
};
49+
50+
Button.defaultProps = {
51+
type: 'default',
52+
size: 'medium',
53+
className: '',
54+
href: '',
55+
icon: null,
56+
iconAlignment: 'left',
57+
theme: {},
58+
disabled: false,
59+
onClick: null,
60+
};
61+
62+
export default themr('CBBUTTON', defaultTheme)(Button);

0 commit comments

Comments
 (0)