Swapped Flex to homegrown component

No more element prop warnings!
This commit is contained in:
Jori Lallo
2017-07-04 20:15:01 -07:00
parent 53e4a94c07
commit 8b3b3222b7
19 changed files with 83 additions and 17 deletions

View File

@ -1,6 +1,6 @@
// @flow // @flow
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import classNames from 'classnames/bind'; import classNames from 'classnames/bind';
import styles from './Alert.scss'; import styles from './Alert.scss';

View File

@ -5,7 +5,7 @@ import Popover from 'components/Popover';
import styled from 'styled-components'; import styled from 'styled-components';
import DocumentViewers from './components/DocumentViewers'; import DocumentViewers from './components/DocumentViewers';
import DocumentViewersStore from './DocumentViewersStore'; import DocumentViewersStore from './DocumentViewersStore';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
const Container = styled(Flex)` const Container = styled(Flex)`
font-size: 13px; font-size: 13px;

View File

@ -1,6 +1,6 @@
// @flow // @flow
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
import map from 'lodash/map'; import map from 'lodash/map';
import Avatar from 'components/Avatar'; import Avatar from 'components/Avatar';

View File

@ -0,0 +1,64 @@
// @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;
// flex: React.PropTypes.bool,
// wrap: React.PropTypes.bool,
// flexColumn: React.PropTypes.bool,
// column: React.PropTypes.bool,
// align: React.PropTypes.oneOf([
// 'stretch',
// 'center',
// 'baseline',
// 'flex-start',
// 'flex-end'
// ]),
// justify: React.PropTypes.oneOf([
// 'center',
// 'space-around',
// 'space-between',
// 'flex-start',
// 'flex-end'
// ]),
// flexAuto: React.PropTypes.bool,
// auto: React.PropTypes.bool,
// flexNone: React.PropTypes.bool,
// order: React.PropTypes.number,

View File

@ -0,0 +1,3 @@
// @flow
import Flex from './Flex';
export default Flex;

View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import { size } from 'styles/constants'; import { size } from 'styles/constants';
const RealTextarea = styled.textarea` const RealTextarea = styled.textarea`

View File

@ -6,7 +6,7 @@ import styled from 'styled-components';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import _ from 'lodash'; import _ from 'lodash';
import keydown from 'react-keydown'; import keydown from 'react-keydown';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import { textColor } from 'styles/constants.scss'; import { textColor } from 'styles/constants.scss';
import DropdownMenu, { MenuItem } from 'components/DropdownMenu'; import DropdownMenu, { MenuItem } from 'components/DropdownMenu';

View File

@ -1,6 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
import SidebarLink from '../SidebarLink'; import SidebarLink from '../SidebarLink';

View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
import SidebarLink from '../SidebarLink'; import SidebarLink from '../SidebarLink';

View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
const activeStyle = { const activeStyle = {

View File

@ -2,7 +2,7 @@
import React from 'react'; import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import styled, { keyframes } from 'styled-components'; import styled, { keyframes } from 'styled-components';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import { randomInteger } from 'utils/random'; import { randomInteger } from 'utils/random';

View File

@ -3,7 +3,7 @@ import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
import styled from 'styled-components'; import styled from 'styled-components';
import type { User } from 'types'; import type { User } from 'types';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
const Container = styled(Flex)` const Container = styled(Flex)`
justify-content: space-between; justify-content: space-between;

View File

@ -8,7 +8,7 @@ import {
Route, Route,
Redirect, Redirect,
} from 'react-router-dom'; } from 'react-router-dom';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import stores from 'stores'; import stores from 'stores';
import DocumentsStore from 'stores/DocumentsStore'; import DocumentsStore from 'stores/DocumentsStore';

View File

@ -4,7 +4,7 @@ import get from 'lodash/get';
import styled from 'styled-components'; import styled from 'styled-components';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import { withRouter, Prompt } from 'react-router'; import { withRouter, Prompt } from 'react-router';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import Document from 'models/Document'; import Document from 'models/Document';
import UiStore from 'stores/UiStore'; import UiStore from 'stores/UiStore';

View File

@ -2,7 +2,7 @@
import React from 'react'; import React from 'react';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import { Redirect } from 'react-router'; import { Redirect } from 'react-router';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
import AuthStore from 'stores/AuthStore'; import AuthStore from 'stores/AuthStore';

View File

@ -3,7 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import _ from 'lodash'; import _ from 'lodash';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { searchUrl } from 'utils/routeHelpers'; import { searchUrl } from 'utils/routeHelpers';
import styled from 'styled-components'; import styled from 'styled-components';

View File

@ -1,6 +1,6 @@
// @flow // @flow
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
import searchImg from 'assets/icons/search.svg'; import searchImg from 'assets/icons/search.svg';

View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Flex } from 'reflexbox'; import Flex from 'components/Flex';
import ApiKeyRow from './components/ApiKeyRow'; import ApiKeyRow from './components/ApiKeyRow';
import styles from './Settings.scss'; import styles from './Settings.scss';

View File

@ -146,7 +146,6 @@
"react-router-dom": "^4.1.1", "react-router-dom": "^4.1.1",
"redis": "^2.6.2", "redis": "^2.6.2",
"redis-lock": "^0.1.0", "redis-lock": "^0.1.0",
"reflexbox": "^2.2.3",
"rimraf": "^2.5.4", "rimraf": "^2.5.4",
"safestart": "1.1.0", "safestart": "1.1.0",
"sass-loader": "4.0.0", "sass-loader": "4.0.0",