Skip to content

Commit

Permalink
[feat]: support folder
Browse files Browse the repository at this point in the history
  • Loading branch information
pizn committed Jan 21, 2016
1 parent c400036 commit ebc53ff
Show file tree
Hide file tree
Showing 9 changed files with 316 additions and 41 deletions.
19 changes: 11 additions & 8 deletions src/components/Desktop/Aside.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,24 @@ class Aside extends Component {
'head-logo-loading': user.loading | repoInfo.loading | tree.loading,
});

const countCls = classNames({
'count': true,
'count-active': tree.loaded,
});

return (
<div className="leaf-desktop-aside">
<div className="head">
<div className={logoCls}></div>
</div>
<div className="body">
{ !tree.loaded &&
<div className="body-project-title">
<Icon type="loading" />
</div>
}
{ tree.loaded &&
<ul className="body-menu">
<li className="body-menu-item">
<Link to={`_posts`} className="link" activeClassName="link-active">
<span className="icon"><Icon type="inbox" /></span>
<span className="count">{tree.data.length}</span>
<span className={countCls}>
<span>{tree.data.length}</span>
</span>
</Link>
<p className="text">文章</p>
</li>
Expand All @@ -60,7 +61,6 @@ class Aside extends Component {
<p className="text">配置</p>
</li>
</ul>
}
</div>

<div className="foot">
Expand All @@ -80,6 +80,9 @@ class Aside extends Component {
</ul>
</Row>
}
<Row className="foot-copyright">
<p>Build width in China.</p>
</Row>
</div>
</div>
)
Expand Down
43 changes: 41 additions & 2 deletions src/components/Desktop/Head.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,59 @@ import Col from 'antd/lib/col';
import Icon from 'antd/lib/icon';
import Button from 'antd/lib/button';

import { Link } from 'react-router';

class Head extends Component {

static propTypes = {
logout: PropTypes.func,
}

render() {
const { addFile, repoInfo } = this.props;
const { addFile, repoInfo, params } = this.props;
let crumb;
if (params && params.splat) {
const crumbData = params.splat.split('/');
const child = crumbData.map((item, index) => {
const data = {
name: item,
path: crumbData.slice(0, index + 1).join('/'),
}
return (
<span key={index}>
{ index === crumbData.length - 1 &&
<span><Icon type="right" />{item}</span>
}
{ index !== crumbData.length - 1 &&
<span>
<Icon type="right" /><Link to={`_posts/d/${data.path}`}>{data.name}</Link>
</span>
}
</span>
);
});

crumb = (
<span>
<Link to="_posts" >_posts</Link>
{child}
</span>
);
} else {
crumb = `_posts`;
}


return (
<div className="leaf-desktop-head">
{ repoInfo.loaded &&
<Row className="leaf-head-wrap">
<Col span="20">
<h2 className="title">{repoInfo.data.name} <Icon type="right" /> _posts</h2>
<h2 className="title">
<a href={repoInfo.data.html_url} target="_blank">{repoInfo.data.name}</a>
<Icon type="right" />
{crumb}
</h2>
</Col>
<Col span="4" className="action">
<Button type="ghost" onClick={addFile}><Icon type="plus" /> 添加</Button>
Expand Down
35 changes: 26 additions & 9 deletions src/components/Desktop/List.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,43 @@ import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import Icon from 'antd/lib/icon';

import classNames from 'classnames';
import { Link } from 'react-router';

class List extends Component {
render() {
const { tree } = this.props;
const files = (
tree.loaded && tree.data.map(item => {

let fileName = item.name.split(/^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])-/);
fileName = fileName[4] || item.name;

let filePath = item.path.split('_posts/')[1];

const fileCls = classNames({
'file': true,
'file-f': item.type === 'file',
'file-d': item.type === 'dir'
});

return (
<li key={item.path} className="file">
<Link to={`/${item.path}`} className="file-card">
<div className="file-card-type">
</div>
<div className="file-card-name">
{fileName}
</div>
</Link>
<li key={item.path} className={fileCls}>
{ item.type === 'file' &&
<Link to={`/_posts/f/${filePath}`} className="file-card">
<div className="file-card-type" />
<div className="file-card-name">
{fileName}
</div>
</Link>
}
{ item.type === 'dir' &&
<Link to={`/_posts/d/${filePath}`} className="file-card">
<div className="file-card-type" />
<div className="file-card-name">
{item.name}
</div>
</Link>
}
</li>
)
})
Expand Down
12 changes: 10 additions & 2 deletions src/components/Post/Head.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,21 @@ class Head extends Component {
}

render() {
const { blob, meta } = this.props;
const { blob, meta, params } = this.props;

// define backUrl
let backDir;
if (blob.loaded) {
backDir = params.splat.split(blob.data.name)[0];
console.log(backDir);
backDir = backDir !== '' ? 'd/' + backDir : '';
}

return (
<div className="leaf-post-head">
<Row>
<Col span="7" >
<Link to={`_posts/`} className="back">
<Link to={`_posts/${backDir}`} className="back">
<Icon type="left" />
</Link>
</Col>
Expand Down
14 changes: 6 additions & 8 deletions src/containers/Desktop.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,12 @@ class Desktop extends Component {
dispatch(actions.readRepoTree(repo));
});
} else {
if (!tree.loaded) {
const repo = {
username: this.props.user.data.login,
reponame: this.props.repoInfo.data.name,
path: '_posts',
}
dispatch(actions.readRepoTree(repo));
const repo = {
username: this.props.user.data.login,
reponame: this.props.repoInfo.data.name,
path: '_posts',
}
dispatch(actions.readRepoTree(repo));
}
}
dispatch(actions.clearRepoBlob());
Expand Down Expand Up @@ -105,7 +103,7 @@ class Desktop extends Component {
dispatch(actions.addRepoBlob(repo))
.then(() => {
msg();
history.pushState(null, '_posts/' + file.name)
history.pushState(null, '_posts/f/' + file.name)
});

}
Expand Down
174 changes: 174 additions & 0 deletions src/containers/Dir.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import * as actions from '../actions/LeafActions';
import { connect } from 'react-redux';

import Icon from 'antd/lib/icon';
import message from 'antd/lib/message';

import Head from '../components/Desktop/Head';
import Aside from '../components/Desktop/Aside';
import List from '../components/Desktop/List';
import ModalAddFile from '../components/Desktop/AddFile';

@connect(state => ({
auth: state.auth,
user: state.user,
repoInfo: state.repoInfo,
repoTree: state.repoTree,
tree: state.tree,
}))

class Dir extends Component {

constructor(props) {
super(props);
this.state = {
addFile: false
}
}

static propTypes = {
dispatch: PropTypes.func,
children: PropTypes.object,
}

componentDidMount() {
this.getData();
}

componentDidUpdate(prevProps) {
const oldId = prevProps.params.splat;
const newId = this.props.params.splat;
if (newId !== oldId) {
this.getData();
}
}

getData() {
const { dispatch, user, repoInfo, tree, params } = this.props;

if (!user.loaded) {
dispatch(actions.updateUserInfo())
.then(() => {
dispatch(actions.loadRepoInfo({username: this.props.user.data.login}))
.then(() => {
const repo = {
username: this.props.user.data.login,
reponame: this.props.repoInfo.data.name,
path: '_posts/' + params.splat,
};
dispatch(actions.readRepoTree(repo));
});
});
} else {
if (!repoInfo.loaded) {
dispatch(actions.loadRepoInfo({username: this.props.user.data.login}))
.then(() => {
const repo = {
username: this.props.user.data.login,
reponame: this.props.repoInfo.data.name,
path: '_posts/' + params.splat,
}
dispatch(actions.readRepoTree(repo));
});
} else {
console.log('here');
const repo = {
username: this.props.user.data.login,
reponame: this.props.repoInfo.data.name,
path: '_posts/' + params.splat,
}
dispatch(actions.readRepoTree(repo));
}
}
dispatch(actions.clearRepoBlob());
}

logout() {
const { dispatch, history } = this.props;
dispatch(actions.logout())
.then(() => {
history.pushState(null, 'login');
});
}

handleAddFile(file) {
event.preventDefault();
const { dispatch, user, history, repoInfo, params } = this.props;

const content = '---\n' +
'layout: post\n' +
'title: ' + file.title + '\n' +
'description: ' + file.description + '\n' +
'---\n' +
'# ';

const repo = {
username: user.data.login,
email: user.data.email,
reponame: repoInfo.data.name,
path: '_posts/' + params.splat + '/' + file.name,
content: content,
}
this.setState({
addFile: false
});
const msg = message.loading('正在保存...', 0);
dispatch(actions.addRepoBlob(repo))
.then(() => {
msg();
history.pushState(null, '_posts/f/' + params.splat + '/' + file.name);
});

}

handleShowAddModal() {
this.setState({
addFile: true
});
}

handleHideAddModal() {
this.setState({
addFile: false,
})
}

render() {
const { user, repoInfo, tree } = this.props;

return (
<div className="leaf">
<div className="leaf-desktop">
<Aside
{...this.props}
user={user}
repoInfo={repoInfo}
logout={this.logout.bind(this)}
tree={tree}
/>
<div className="leaf-desktop-main">
<div className="leaf-desktop-main-wrap">
<Head
{...this.props}
repoInfo={repoInfo}
addFile={this.handleShowAddModal.bind(this)}
/>
<List
tree={tree}
/>
<ModalAddFile
modalVisible={this.state.addFile}
modalHandleOk={this.handleAddFile.bind(this)}
modalHandleCancel={this.handleHideAddModal.bind(this)}
/>
</div>
</div>
</div>
</div>
);
}
}

export default Dir;
Loading

0 comments on commit ebc53ff

Please sign in to comment.