Skip to content

Commit c90195f

Browse files
webdevstarwebdevstar
committed
complete shared
1 parent f21aedb commit c90195f

15 files changed

Lines changed: 1073 additions & 0 deletions

File tree

‎src/admin/client/shared/confirmation/index.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import Dialog from 'material-ui/Dialog';
3+
import FlatButton from 'material-ui/FlatButton';
4+
5+
export default class ConfirmationDialog extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
open: props.open
10+
};
11+
}
12+
13+
componentWillReceiveProps(nextProps) {
14+
if (this.state.open !== nextProps.open) {
15+
this.setState({
16+
open: nextProps.open
17+
});
18+
}
19+
}
20+
21+
handleCancel = () => {
22+
this.setState({ open: false });
23+
if (this.props.onCancel) {
24+
this.props.onCancel();
25+
}
26+
};
27+
28+
handleSubmit = () => {
29+
this.setState({ open: false });
30+
if (this.props.onSubmit) {
31+
this.props.onSubmit();
32+
}
33+
};
34+
35+
render() {
36+
const {
37+
title,
38+
description,
39+
submitLabel,
40+
cancelLabel,
41+
modal = false
42+
} = this.props;
43+
44+
const actions = [
45+
<FlatButton
46+
label={cancelLabel}
47+
onClick={this.handleCancel}
48+
style={{ marginRight: 10 }}
49+
/>,
50+
<FlatButton
51+
label={submitLabel}
52+
primary={true}
53+
keyboardFocused={true}
54+
onClick={this.handleSubmit}
55+
/>
56+
];
57+
58+
return (
59+
<Dialog
60+
title={title}
61+
actions={actions}
62+
modal={modal}
63+
open={this.state.open}
64+
onRequestClose={this.handleCancel}
65+
>
66+
<div style={{ wordWrap: 'break-word' }}>{description}</div>
67+
</Dialog>
68+
);
69+
}
70+
}

‎src/admin/client/shared/deleteConfirmation/index.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react';
2+
import messages from 'lib/text';
3+
import Dialog from 'material-ui/Dialog';
4+
import FlatButton from 'material-ui/FlatButton';
5+
6+
export default class ConfirmationDialog extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
open: props.open
11+
};
12+
}
13+
14+
componentWillReceiveProps(nextProps) {
15+
if (this.state.open !== nextProps.open) {
16+
this.setState({
17+
open: nextProps.open
18+
});
19+
}
20+
}
21+
22+
close = () => {
23+
this.setState({ open: false });
24+
};
25+
26+
handleCancel = () => {
27+
this.close();
28+
if (this.props.onCancel) {
29+
this.props.onCancel();
30+
}
31+
};
32+
33+
handleDelete = () => {
34+
this.close();
35+
if (this.props.onDelete) {
36+
this.props.onDelete();
37+
}
38+
};
39+
40+
render() {
41+
const { isSingle = true, itemsCount = 0, itemName = '' } = this.props;
42+
43+
const title = isSingle
44+
? messages.singleDeleteTitle.replace('{name}', itemName)
45+
: messages.multipleDeleteTitle.replace('{count}', itemsCount);
46+
47+
const description = isSingle
48+
? messages.singleDeleteDescription
49+
: messages.multipleDeleteDescription.replace('{count}', itemsCount);
50+
51+
const actions = [
52+
<FlatButton
53+
label={messages.cancel}
54+
onClick={this.handleCancel}
55+
style={{ marginRight: 10 }}
56+
/>,
57+
<FlatButton
58+
label={messages.actions_delete}
59+
primary={true}
60+
keyboardFocused={true}
61+
onClick={this.handleDelete}
62+
/>
63+
];
64+
65+
return (
66+
<Dialog
67+
title={title}
68+
actions={actions}
69+
modal={false}
70+
open={this.state.open}
71+
onRequestClose={this.handleCancel}
72+
contentStyle={{ maxWidth: 540 }}
73+
titleStyle={{ fontSize: '18px', lineHeight: '28px' }}
74+
>
75+
<div style={{ wordWrap: 'break-word' }}>{description}</div>
76+
</Dialog>
77+
);
78+
}
79+
}

‎src/admin/client/shared/editor/index.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
import TinyMCE from '../tinymce';
3+
import settings from 'lib/settings';
4+
5+
const config = {
6+
inline: true,
7+
plugins: [
8+
'autolink lists link image charmap preview anchor',
9+
'searchreplace visualblocks code fullscreen',
10+
'media table paste code textcolor directionality'
11+
],
12+
toolbar1:
13+
'image media | styleselect | bold italic bullist numlist link alignleft aligncenter alignright alignjustify',
14+
toolbar2:
15+
'undo redo | forecolor paste removeformat table | outdent indent | preview code'
16+
};
17+
18+
export default class Editor extends React.Component {
19+
constructor(props) {
20+
super(props);
21+
this.state = {
22+
value: props.input.value
23+
};
24+
}
25+
26+
componentWillReceiveProps(nextProps) {
27+
if (this.state.value !== nextProps.input.value) {
28+
this.setState({
29+
value: nextProps.input.value
30+
});
31+
}
32+
}
33+
34+
shouldComponentUpdate(nextProps, nextState) {
35+
return this.state.value !== nextState.value;
36+
}
37+
38+
onChange = e => {
39+
const content = e.target.getContent();
40+
this.setState({ value: content });
41+
this.props.input.onChange(content);
42+
};
43+
44+
render() {
45+
return (
46+
<TinyMCE
47+
entityId={this.props.entityId}
48+
content={this.state.value}
49+
config={{
50+
relative_urls: false,
51+
remove_script_host: false,
52+
convert_urls: false,
53+
language: settings.language,
54+
themes: config.themes,
55+
inline: config.inline,
56+
plugins: config.plugins,
57+
toolbar1: config.toolbar1,
58+
toolbar2: config.toolbar2,
59+
menubar: false
60+
}}
61+
onChange={this.onChange}
62+
/>
63+
);
64+
}
65+
}

‎src/admin/client/shared/form/index.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from 'react';
2+
import Toggle from 'material-ui/Toggle';
3+
import TextField from 'material-ui/TextField';
4+
import Checkbox from 'material-ui/Checkbox';
5+
import { List, ListItem } from 'material-ui/List';
6+
7+
export const CustomToggle = ({
8+
input,
9+
label,
10+
className = '',
11+
disabled = false,
12+
style
13+
}) => {
14+
return (
15+
<Toggle
16+
label={label}
17+
toggled={input.value ? true : false}
18+
onToggle={(event, isInputChecked) => {
19+
input.onChange(isInputChecked);
20+
}}
21+
className={className}
22+
disabled={disabled}
23+
style={style}
24+
/>
25+
);
26+
};
27+
28+
export const NumberField = ({
29+
input,
30+
label,
31+
className = '',
32+
disabled = false,
33+
style
34+
}) => (
35+
<TextField
36+
floatingLabelText={label}
37+
fullWidth={true}
38+
disabled={disabled}
39+
value={input.value}
40+
type="number"
41+
onChange={(event, value) => {
42+
let number = parseFloat(value);
43+
number = number ? number : 0;
44+
input.onChange(number);
45+
}}
46+
/>
47+
);
48+
49+
export const ColorField = ({ input, meta: { touched, error } }) => (
50+
<input {...input} type="color" />
51+
);
52+
53+
export class MultiSelect extends React.Component {
54+
constructor(props) {
55+
super(props);
56+
const values = Array.isArray(props.input.value) ? props.input.value : [];
57+
this.state = {
58+
selectedItems: values
59+
};
60+
}
61+
62+
componentWillReceiveProps(nextProps) {
63+
const values = Array.isArray(nextProps.input.value)
64+
? nextProps.input.value
65+
: [];
66+
if (values !== this.state.selectedItems) {
67+
this.setState({
68+
selectedItems: values
69+
});
70+
}
71+
}
72+
73+
onCheckboxChecked = item => {
74+
const { selectedItems } = this.state;
75+
let newSelectedItems = [];
76+
if (selectedItems.includes(item)) {
77+
newSelectedItems = selectedItems.filter(i => i !== item);
78+
} else {
79+
newSelectedItems = [...selectedItems, item];
80+
}
81+
newSelectedItems.sort();
82+
this.setState({ selectedItems: newSelectedItems });
83+
this.props.input.onChange(newSelectedItems);
84+
};
85+
86+
isCheckboxChecked = item => {
87+
return this.state.selectedItems.includes(item);
88+
};
89+
90+
render() {
91+
const { items, disabled, columns = 2 } = this.props;
92+
const columnsClass = 12 / columns;
93+
94+
const elements = items.map((item, index) => (
95+
<div className={`col-xs-12 col-sm-${columnsClass}`} key={index}>
96+
{item &&
97+
item !== '' && (
98+
<ListItem
99+
leftCheckbox={
100+
<Checkbox
101+
checked={this.isCheckboxChecked(item)}
102+
disabled={disabled}
103+
onCheck={(e, isChecked) => {
104+
this.onCheckboxChecked(item);
105+
}}
106+
/>
107+
}
108+
primaryText={item}
109+
/>
110+
)}
111+
</div>
112+
));
113+
114+
return (
115+
<List>
116+
<div className="row">{elements}</div>
117+
</List>
118+
);
119+
}
120+
}

0 commit comments

Comments
 (0)