Swapped Flex to homegrown component
No more element prop warnings!
This commit is contained in:
@ -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';
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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';
|
||||||
|
64
frontend/components/Flex/Flex.js
Normal file
64
frontend/components/Flex/Flex.js
Normal 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,
|
3
frontend/components/Flex/index.js
Normal file
3
frontend/components/Flex/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
// @flow
|
||||||
|
import Flex from './Flex';
|
||||||
|
export default Flex;
|
@ -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`
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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 = {
|
||||||
|
@ -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';
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
|
||||||
|
@ -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';
|
||||||
|
@ -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",
|
||||||
|
Reference in New Issue
Block a user