render() {
const { previewVisible, previewImage, fileList } = this.state;
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<div className="clearfix">
<Upload
action="http://www.gitbase.com/api/file/upload"
listType="picture-card"
fileList={fileList}
headers={{
'Accept':'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Authorization':'Bearer '+Cookies('access_token')
}}
onPreview={this.handlePreview}
onChange={this.handleChange}
>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
}
function testCookie() {
const name = testCookieConfig.name + uniqueId();
jsCookie(name, 1, testCookieConfig.options);
const cookieSet = document.cookie.indexOf(name) > -1;
jsCookie.remove(name, testCookieConfig.options);
return cookieSet;
}
export async function request(data) {
const authenticHeaders = {
Accept: 'application/json',
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${Cookies('access_token')}`,
}
return axios({
url: data.url,
method: data.method ? data.method : 'get',
headers: data.withtoken ? authenticHeaders : {},
data: data.data ? data.data : null,
params: data.params ? data.params : null,
}).then((res) => {
return res;
}).catch((error) => {
if (error.response) {
return error.response;
} else if (error.request) {
return error.request;
} else {
return error;
}
});
}
static set (key, value, options) {
key = keyWithPrefix(key);
value = value !== undefined ? value : '';
options = options || { expires: 20 };
Cookies(key, value, options);
}
import dva from 'dva'
import {routerRedux} from 'dva/router'
import Cookies from 'js-cookie'
import config from '../utils/config'
import {request} from '../services/request'
import store from 'store'
import {message} from 'antd'
message.config({
top:100
})
const headers={
'Accept':'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Authorization':'Bearer '+Cookies('access_token')
}
export default {
namespace: 'ui',
state:{},
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if(pathname==='/admin/UIElement/form'){
dispatch({type:'app/update',payload:{pageHeader:'Form Components'}})
}else if(pathname==='/admin/UIElement/table'){
dispatch({type:'app/update',payload:{pageHeader:'Table Components'}})
}else if(pathname==='/admin/UIElement/editor'){
dispatch({type:'app/update',payload:{pageHeader:'Editor Components'}})
}
});
},
render() {
const { blogs, dispatch, classes } = this.props
const { editorState } = blogs
const modules = {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link', 'image'],
['clean'],
],
};
const props = {
name: 'file',
action: config.api.fileUpload,
headers: {
Accept: 'application/json',
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${Cookies('access_token')}`,
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
console.log(info.file.response.data.link)
dispatch({
type: 'blogs/update',
payload: { editPoster: info.file.response.data.link },
})
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
return (
<div style={{ marginTop: -68 }}>
<Grid container spacing={0} style={{ margin: 0, padding: 20 }}>
<Grid item xs={12} style={{ position: 'relative' }}>
<Card>
<div className={classes.title}>
<div style={{ position: 'relative' }}>
<TextField
margin="dense"
label="Title"
type="text"
style={{ width: 300 }}
fullWidth
value={blogs.editTitle ? blogs.editTitle : ''}
className={classes.titleInput}
onChange={this.handleInputChange('editTitle')}
/>
<FormControl style={{ position: 'absolute', bottom: 4, marginLeft: 20 }}>
<InputLabel htmlFor="classes">Classes</InputLabel>
<Select
classes={{ select: classes.PosterInput }}
value={blogs.editClasses ? blogs.editClasses : ''}
onChange={this.handleInputChange('editClasses')}
input={<Input name="classes" id="classes" style={{ width: 100 }} />}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={'JavaScript'}>JavaScript</MenuItem>
<MenuItem value={'PHP'}>PHP</MenuItem>
<MenuItem value={'Java'}>Java</MenuItem>
<MenuItem value={'NodeJs'}>NodeJs</MenuItem>
<MenuItem value={'Http'}>Http</MenuItem>
<MenuItem value={'Linux'}>Linux</MenuItem>
</Select>
</FormControl>
</div>
<br />
<div>
<TextField
margin="dense"
label="Poster"
type="text"
style={{ width: 400 }}
fullWidth
value={blogs.editPoster ? blogs.editPoster : ''}
className={classes.PosterInput}
onChange={this.handleInputChange('editPoster')}
/>
<Upload {...props}>
<Button raised color="primary">
<Icon type="upload" /> Upload
</Button>
</Upload>
</div>
<TextField
margin="dense"
label="Description"
type="text"
style={{ width: '100%' }}
fullWidth
value={blogs.editDescription ? blogs.editDescription : ''}
className={classes.PosterInput}
onChange={this.handleInputChange('editDescription')}
/>
</div>
<ReactQuill
value={editorState}
modules={modules}
onChange={this.onEditorChange}
onKeyPress={this.onKeyPress}
>
<div id="editor-area" style={{ minHeight: 400, whiteSpace: 'pre' }} />
</ReactQuill>
</Card>
</Grid>
</Grid>
<div style={{ textAlign: 'center', marginBottom: 20 }}>
<Button raised color="accent" onClick={this.handleSubmit} style={{ marginRight: 20 }}>
SAVE
</Button>
<Button raised color="primary" onClick={this.handleSubmit}>
PREVIEW
</Button>
</div>
</div>
);
}