zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

hotfix: update components folder structure

This commit is contained in:
George Lima 2018-11-28 19:00:25 -03:00
parent 242a270181
commit 970e8ca229
10 changed files with 113 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/layout/index.js → app/components/Layout.js
View File

@ -2,21 +2,26 @@
import React from 'react';
import styled from 'styled-components';
import { styles } from './styles';
const Layout = styled.div`
display: flex;
flex-direction: column;
width: 200px;
position: absolute;
width: calc(100vh - 200px);
left: 0;
top: 0;
height: 100vh;
background: #ccc;
`;
type Props = {
chidren: any, // eslint-disable-line
};
const Layout = styled.div`${styles.layout}`;
export const LayoutComponent = (props: Props) => {
// $FlowFixMe
const { children } = props; // eslint-disable-line
return (
<Layout>
{children}
</Layout>
);
return <Layout>{children}</Layout>;
};

22
app/components/sidebar/index.js → app/components/Sidebar.js
View File

@ -3,13 +3,21 @@
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { MENU_OPTIONS } from '../../constants/sidebar';
import { styles } from './styles';
import { MENU_OPTIONS } from '../constants/sidebar';
// TODO: Not sure this is the best approach to styling
// in a StyledComponents-powered application
const Wrapper = styled.div`
${styles.wrapper}
display: flex;
flex-direction: column;
width: 200px;
position: absolute;
left: 0;
top: 0;
height: 100vh;
background: #ccc;
`;
const StyledLink = styled(Link)`
color: ${props => props.theme.colors.primary};
`;
type MenuItem = { route: string, label: string };
@ -21,9 +29,9 @@ type Props = {
export const SidebarComponent = ({ options }: Props) => (
<Wrapper>
{(options || []).map(item => (
<Link key={item.route} to={item.route}>
<StyledLink key={item.route} to={item.route}>
{item.label}
</Link>
</StyledLink>
))}
</Wrapper>
);

0
app/components/sidebar/sidebar.mdx → app/components/Sidebar.mdx
View File

35
app/components/todo/todo-edit-input.js → app/components/TodoEditInput.js
View File

@ -1,7 +1,7 @@
// @flow
import React, { Component } from 'react';
import type { TodoType } from '../../types/todo';
import type { TodoType } from '../types/todo';
type Props = {
updateTodo: Function,
@ -33,17 +33,19 @@ export default class TodoEditInput extends Component<Props, State> {
updateTodo(id, trimValue);
this.setState({ value: '' });
}
}
};
handleCancel = (id: string) => {
const { cancelUpdateTodo } = this.props;
cancelUpdateTodo(id);
}
};
handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
const { target: { value } } = event;
const {
target: { value },
} = event;
this.setState({ value });
}
};
render() {
const { value } = this.state;
@ -51,28 +53,13 @@ export default class TodoEditInput extends Component<Props, State> {
return (
<div className='todo-item__view todo-item__view--edit'>
<form
className='todo-item__input'
onSubmit={e => this.handleSubmit(e, todo.id)}
>
<input
value={value}
onChange={this.handleInputChange}
className='todo-item__input-field'
autoFocus
/>
<button
type='submit'
className='todo-item__input-button'
>
<form className='todo-item__input' onSubmit={e => this.handleSubmit(e, todo.id)}>
<input value={value} onChange={this.handleInputChange} className='todo-item__input-field' autoFocus />
<button type='submit' className='todo-item__input-button'>
Update
</button>
</form>
<button
type='button'
className='todo-item__input-cancel'
onClick={() => this.handleCancel(todo.id)}
>
<button type='button' className='todo-item__input-cancel' onClick={() => this.handleCancel(todo.id)}>
Cancel
</button>
</div>

24
app/components/todo/todo-input.js → app/components/TodoInput.js
View File

@ -26,30 +26,22 @@ export default class TodoInput extends Component<Props, State> {
addTodo(trimValue);
this.setState({ value: '' });
}
}
};
handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
const { target: { value } } = event;
const {
target: { value },
} = event;
this.setState({ value });
}
};
render() {
const { value } = this.state;
return (
<form
className='todo__input'
onSubmit={this.handleSubmit}
>
<input
value={value}
onChange={this.handleInputChange}
className='todo__input-field'
/>
<button
type='submit'
className='todo__input-button'
>
<form className='todo__input' onSubmit={this.handleSubmit}>
<input value={value} onChange={this.handleInputChange} className='todo__input-field' />
<button type='submit' className='todo__input-button'>
Submit
</button>
</form>

43
app/components/todo/todo-list.js → app/components/TodoList.js
View File

@ -1,9 +1,9 @@
// @flow
import React, { PureComponent } from 'react';
import TodoEditInput from './todo-edit-input';
import TodoListItem from './todo-list-item';
import type { TodoType } from '../../types/todo';
import TodoEditInput from './TodoEditInput';
import TodoListItem from './TodoListItem';
import type { TodoType } from '../types/todo';
type Props = {
todos: Array<TodoType>,
@ -17,26 +17,14 @@ export default class TodoList extends PureComponent<Props> {
renderTodoView = (todo: TodoType) => {
const { deleteTodo, toggleEdit } = this.props;
return (
<TodoListItem
todo={todo}
deleteTodo={deleteTodo}
toggleEdit={toggleEdit}
/>
);
}
return <TodoListItem todo={todo} deleteTodo={deleteTodo} toggleEdit={toggleEdit} />;
};
renderEditView = (todo: TodoType) => {
const { updateTodo, cancelUpdateTodo } = this.props;
return (
<TodoEditInput
todo={todo}
updateTodo={updateTodo}
cancelUpdateTodo={cancelUpdateTodo}
/>
);
}
return <TodoEditInput todo={todo} updateTodo={updateTodo} cancelUpdateTodo={cancelUpdateTodo} />;
};
renderList = () => {
const { todos } = this.props;
@ -45,24 +33,15 @@ export default class TodoList extends PureComponent<Props> {
return (
<ul className='todo__list'>
{sortTodosByTime.map(todo => (
<li
key={todo.id}
className='todo__list-item todo-item'
>
{todo.editing ? (
this.renderEditView(todo)
) : (
this.renderTodoView(todo)
)}
<li key={todo.id} className='todo__list-item todo-item'>
{todo.editing ? this.renderEditView(todo) : this.renderTodoView(todo)}
</li>
))}
</ul>
);
}
};
renderEmptyState = () => (
<p className='todo__list todo__list--empty'>No todos right now</p>
);
renderEmptyState = () => <p className='todo__list todo__list--empty'>No todos right now</p>;
render() {
const { todos } = this.props;

55
app/components/TodoListItem.js Normal file
View File

@ -0,0 +1,55 @@
// @flow
import React, { PureComponent } from 'react';
import type { TodoType } from '../types/todo';
type Props = {
todo: TodoType,
deleteTodo: Function,
toggleEdit: Function,
};
export default class TodoListItem extends PureComponent<Props> {
handleDelete = (id: string) => {
if (!id) return;
const { deleteTodo } = this.props;
deleteTodo(id);
};
handleEditToggle = (id: string) => {
if (!id) return;
const { toggleEdit } = this.props;
toggleEdit(id);
};
render() {
const { todo } = this.props;
return (
<div className='todo-item__view todo-item__view--view'>
<span className='todo-item__text'>{todo.text}</span>
<div className='todo-item__buttons'>
<button type='button' onClick={() => this.handleEditToggle(todo.id)} className='todo-item__button'>
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 528.899 528.899'>
<path
className='todo-item__svg'
d='M328.883 89.125l107.59 107.589-272.34 272.34L56.604 361.465l272.279-272.34zm189.23-25.948l-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611c14.382-14.383 14.382-37.577 0-51.959zM.3 512.69c-1.958 8.812 5.998 16.708 14.811 14.565l119.891-29.069L27.473 390.597.3 512.69z'
/>
</svg>
</button>
<button type='button' onClick={() => this.handleDelete(todo.id)} className='todo-item__button'>
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'>
<path
className='todo-item__svg'
fill='#1D1D1B'
d='M459.232 60.687h-71.955c-1.121-17.642-15.631-31.657-33.553-31.657H161.669c-17.921 0-32.441 14.015-33.553 31.657H64.579c-18.647 0-33.767 15.12-33.767 33.768v8.442c0 18.648 15.12 33.768 33.767 33.768h21.04v342.113c0 13.784 11.179 24.963 24.963 24.963h308.996c13.784 0 24.964-11.179 24.964-24.963V136.665h14.691c18.663 0 33.768-15.12 33.768-33.768v-8.442c-.001-18.648-15.105-33.768-33.769-33.768zM196.674 443.725c0 12.58-10.197 22.803-22.802 22.803-12.598 0-22.803-10.223-22.803-22.803v-284.9c0-12.597 10.205-22.802 22.803-22.802 12.605 0 22.802 10.206 22.802 22.802v284.9zm91.213 0c0 12.58-10.205 22.803-22.803 22.803s-22.803-10.223-22.803-22.803v-284.9c0-12.597 10.205-22.802 22.803-22.802s22.803 10.206 22.803 22.802v284.9zm91.212 0c0 12.58-10.205 22.803-22.803 22.803-12.613 0-22.803-10.223-22.803-22.803v-284.9c0-12.597 10.189-22.802 22.803-22.802 12.598 0 22.803 10.206 22.803 22.802v284.9z'
/>
</svg>
</button>
</div>
</div>
);
}
}

15
app/components/layout/styles.js
View File

@ -1,15 +0,0 @@
// @flow
export const styles: Object = {
layout: `
display: flex;
flex-direction: column;
width: 200px;
position: absolute;
width: calc(100vh - 200px);
left: 0;
top: 0;
height: 100vh;
background: #ccc;
`,
};

14
app/components/sidebar/styles.js
View File

@ -1,14 +0,0 @@
// @flow
export const styles: Object = {
wrapper: `
display: flex;
flex-direction: column;
width: 200px;
position: absolute;
left: 0;
top: 0;
height: 100vh;
background: #ccc;
`,
};

56
app/components/todo/todo-list-item.js
View File

@ -1,56 +0,0 @@
// @flow
import React, { PureComponent } from 'react';
import type { TodoType } from '../../types/todo';
type Props = {
todo: TodoType,
deleteTodo: Function,
toggleEdit: Function,
};
export default class TodoListItem extends PureComponent<Props> {
handleDelete = (id: string) => {
if (!id) return;
const { deleteTodo } = this.props;
deleteTodo(id);
}
handleEditToggle = (id: string) => {
if (!id) return;
const { toggleEdit } = this.props;
toggleEdit(id);
}
render() {
const {
todo,
} = this.props;
return (
<div className='todo-item__view todo-item__view--view'>
<span className='todo-item__text'>
{todo.text}
</span>
<div className='todo-item__buttons'>
<button
type='button'
onClick={() => this.handleEditToggle(todo.id)}
className='todo-item__button'
>
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 528.899 528.899'><path className='todo-item__svg' d='M328.883 89.125l107.59 107.589-272.34 272.34L56.604 361.465l272.279-272.34zm189.23-25.948l-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611c14.382-14.383 14.382-37.577 0-51.959zM.3 512.69c-1.958 8.812 5.998 16.708 14.811 14.565l119.891-29.069L27.473 390.597.3 512.69z' /></svg>
</button>
<button
type='button'
onClick={() => this.handleDelete(todo.id)}
className='todo-item__button'
>
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'><path className='todo-item__svg' fill='#1D1D1B' d='M459.232 60.687h-71.955c-1.121-17.642-15.631-31.657-33.553-31.657H161.669c-17.921 0-32.441 14.015-33.553 31.657H64.579c-18.647 0-33.767 15.12-33.767 33.768v8.442c0 18.648 15.12 33.768 33.767 33.768h21.04v342.113c0 13.784 11.179 24.963 24.963 24.963h308.996c13.784 0 24.964-11.179 24.964-24.963V136.665h14.691c18.663 0 33.768-15.12 33.768-33.768v-8.442c-.001-18.648-15.105-33.768-33.769-33.768zM196.674 443.725c0 12.58-10.197 22.803-22.802 22.803-12.598 0-22.803-10.223-22.803-22.803v-284.9c0-12.597 10.205-22.802 22.803-22.802 12.605 0 22.802 10.206 22.802 22.802v284.9zm91.213 0c0 12.58-10.205 22.803-22.803 22.803s-22.803-10.223-22.803-22.803v-284.9c0-12.597 10.205-22.802 22.803-22.802s22.803 10.206 22.803 22.802v284.9zm91.212 0c0 12.58-10.205 22.803-22.803 22.803-12.613 0-22.803-10.223-22.803-22.803v-284.9c0-12.597 10.189-22.802 22.803-22.802 12.598 0 22.803 10.206 22.803 22.802v284.9z' /></svg>
</button>
</div>
</div>
);
}
}