Merge pull request #108 from jorilallo/jori/component-cleanup
Component cleanup
This commit is contained in:
commit
8de135db91
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import classNames from 'classnames/bind';
|
||||
import styles from './Alert.scss';
|
||||
|
||||
|
|
|
@ -4,8 +4,6 @@ import styled from 'styled-components';
|
|||
|
||||
type Props = {
|
||||
children?: React.Element<any>,
|
||||
style?: Object,
|
||||
maxWidth?: string,
|
||||
};
|
||||
|
||||
const Container = styled.div`
|
||||
|
@ -13,20 +11,17 @@ const Container = styled.div`
|
|||
margin: 40px 20px;
|
||||
`;
|
||||
|
||||
const CenteredContent = ({
|
||||
children,
|
||||
maxWidth = '740px',
|
||||
style,
|
||||
...rest
|
||||
}: Props) => {
|
||||
const styles = {
|
||||
maxWidth,
|
||||
...style,
|
||||
};
|
||||
const Content = styled.div`
|
||||
max-width: 740px;
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
const CenteredContent = ({ children, ...rest }: Props) => {
|
||||
return (
|
||||
<Container style={styles} {...rest}>
|
||||
{children}
|
||||
<Container {...rest}>
|
||||
<Content>
|
||||
{children}
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -5,7 +5,7 @@ import Popover from 'components/Popover';
|
|||
import styled from 'styled-components';
|
||||
import DocumentViewers from './components/DocumentViewers';
|
||||
import DocumentViewersStore from './DocumentViewersStore';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
const Container = styled(Flex)`
|
||||
font-size: 13px;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import React, { Component } from 'react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
import map from 'lodash/map';
|
||||
import Avatar from 'components/Avatar';
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type JustifyValues =
|
||||
| 'center'
|
||||
| 'space-around'
|
||||
| 'space-between'
|
||||
| 'flex-start'
|
||||
| 'flex-end';
|
||||
|
||||
type AlignValues =
|
||||
| 'stretch'
|
||||
| 'center'
|
||||
| 'baseline'
|
||||
| 'flex-start'
|
||||
| 'flex-end';
|
||||
|
||||
type Props = {
|
||||
column?: ?boolean,
|
||||
align?: AlignValues,
|
||||
justify?: JustifyValues,
|
||||
auto?: ?boolean,
|
||||
className?: string,
|
||||
children?: React.Element<any>,
|
||||
};
|
||||
|
||||
const Flex = (props: Props) => {
|
||||
const { children, ...restProps } = props;
|
||||
return <Container {...restProps}>{children}</Container>;
|
||||
};
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex: ${({ auto }) => (auto ? '1 1 auto' : 'initial')};
|
||||
flex-direction: ${({ column }) => (column ? 'column' : 'row')};
|
||||
align-items: ${({ align }) => align};
|
||||
justify-content: ${({ justify }) => justify};
|
||||
`;
|
||||
|
||||
export default Flex;
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import Flex from './Flex';
|
||||
export default Flex;
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import { size } from 'styles/constants';
|
||||
|
||||
const RealTextarea = styled.textarea`
|
||||
|
|
|
@ -6,7 +6,7 @@ import styled from 'styled-components';
|
|||
import { observer, inject } from 'mobx-react';
|
||||
import _ from 'lodash';
|
||||
import keydown from 'react-keydown';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import { textColor } from 'styles/constants.scss';
|
||||
|
||||
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import SidebarLink from '../SidebarLink';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import SidebarLink from '../SidebarLink';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const activeStyle = {
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
import { randomInteger } from 'utils/random';
|
||||
|
||||
|
@ -11,7 +11,7 @@ const randomValues = Array.from(
|
|||
() => `${randomInteger(85, 100)}%`
|
||||
);
|
||||
|
||||
export default () => {
|
||||
export default (props: {}) => {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="fadeIn"
|
||||
|
@ -22,7 +22,7 @@ export default () => {
|
|||
transitionEnterTimeout={0}
|
||||
transitionLeaveTimeout={0}
|
||||
>
|
||||
<Flex column auto>
|
||||
<Flex column auto {...props}>
|
||||
<Mask style={{ width: randomValues[0] }} header />
|
||||
<Mask style={{ width: randomValues[1] }} />
|
||||
<Mask style={{ width: randomValues[2] }} />
|
||||
|
|
|
@ -3,7 +3,7 @@ import React, { Component } from 'react';
|
|||
import moment from 'moment';
|
||||
import styled from 'styled-components';
|
||||
import type { User } from 'types';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
const Container = styled(Flex)`
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -8,7 +8,7 @@ import {
|
|||
Route,
|
||||
Redirect,
|
||||
} from 'react-router-dom';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
import stores from 'stores';
|
||||
import DocumentsStore from 'stores/DocumentsStore';
|
||||
|
|
|
@ -4,7 +4,7 @@ import get from 'lodash/get';
|
|||
import styled from 'styled-components';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { withRouter, Prompt } from 'react-router';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
import Document from 'models/Document';
|
||||
import UiStore from 'stores/UiStore';
|
||||
|
@ -137,7 +137,7 @@ type Props = {
|
|||
{this.state.isLoading && <LoadingIndicator />}
|
||||
{isFetching &&
|
||||
<CenteredContent>
|
||||
<PreviewLoading />
|
||||
<LoadingState />
|
||||
</CenteredContent>}
|
||||
{!isFetching &&
|
||||
this.document &&
|
||||
|
@ -208,6 +208,10 @@ const Container = styled(Flex)`
|
|||
width: 100%;
|
||||
`;
|
||||
|
||||
const LoadingState = styled(PreviewLoading)`
|
||||
margin: 80px 20px;
|
||||
`;
|
||||
|
||||
const PagePadding = styled(Flex)`
|
||||
padding: 80px 20px;
|
||||
position: relative;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import React from 'react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { Redirect } from 'react-router';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import AuthStore from 'stores/AuthStore';
|
||||
|
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import { observer } from 'mobx-react';
|
||||
import _ from 'lodash';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import { withRouter } from 'react-router';
|
||||
import { searchUrl } from 'utils/routeHelpers';
|
||||
import styled from 'styled-components';
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import React, { Component } from 'react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
import searchImg from 'assets/icons/search.svg';
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
import ApiKeyRow from './components/ApiKeyRow';
|
||||
import styles from './Settings.scss';
|
||||
|
|
|
@ -146,7 +146,6 @@
|
|||
"react-router-dom": "^4.1.1",
|
||||
"redis": "^2.6.2",
|
||||
"redis-lock": "^0.1.0",
|
||||
"reflexbox": "^2.2.3",
|
||||
"rimraf": "^2.5.4",
|
||||
"safestart": "1.1.0",
|
||||
"sass-loader": "4.0.0",
|
||||
|
|
Reference in New Issue