Completely updated React, fixed #11, (hopefully)
This commit is contained in:
153
goTorrentWebUI/node_modules/material-ui/es/Grid/Grid.js
generated
vendored
153
goTorrentWebUI/node_modules/material-ui/es/Grid/Grid.js
generated
vendored
@@ -1,7 +1,5 @@
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
||||
import _extends from 'babel-runtime/helpers/extends';
|
||||
// A grid component using the following libs as inspiration.
|
||||
//
|
||||
// For the implementation:
|
||||
@@ -14,14 +12,13 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
|
||||
// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import withStyles from '../styles/withStyles';
|
||||
import { keys as breakpointKeys } from '../styles/createBreakpoints';
|
||||
import requirePropFactory from '../utils/requirePropFactory';
|
||||
import Hidden from '../Hidden';
|
||||
|
||||
|
||||
const GUTTERS = [0, 8, 16, 24, 40];
|
||||
const GRID_SIZES = [true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||
|
||||
@@ -42,11 +39,11 @@ function generateGrid(globalStyles, theme, breakpoint) {
|
||||
}
|
||||
|
||||
// Only keep 6 significant numbers.
|
||||
const width = `${Math.round(size / 12 * Math.pow(10, 6)) / Math.pow(10, 4)}%`;
|
||||
const width = `${Math.round(size / 12 * 10e6) / 10e4}%`;
|
||||
|
||||
/* eslint-disable max-len */
|
||||
// Close to the bootstrap implementation:
|
||||
// https://github.com/twbs/bootstrap/blob/b0508a975d711d6b24c01f57dd5445c22699fac4/scss/mixins/_grid.scss#L69
|
||||
// https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
|
||||
/* eslint-enable max-len */
|
||||
styles[`grid-${breakpoint}-${size}`] = {
|
||||
flexBasis: width,
|
||||
@@ -101,6 +98,9 @@ export const styles = theme => _extends({
|
||||
flex: '0 0 auto',
|
||||
margin: '0' // For instance, it's useful when used with a `figure` element.
|
||||
},
|
||||
zeroMinWidth: {
|
||||
minWidth: 0
|
||||
},
|
||||
'direction-xs-column': {
|
||||
flexDirection: 'column'
|
||||
},
|
||||
@@ -113,6 +113,9 @@ export const styles = theme => _extends({
|
||||
'wrap-xs-nowrap': {
|
||||
flexWrap: 'nowrap'
|
||||
},
|
||||
'wrap-xs-wrap-reverse': {
|
||||
flexWrap: 'wrap-reverse'
|
||||
},
|
||||
'align-items-xs-center': {
|
||||
alignItems: 'center'
|
||||
},
|
||||
@@ -160,29 +163,31 @@ export const styles = theme => _extends({
|
||||
|
||||
function Grid(props) {
|
||||
const {
|
||||
classes,
|
||||
className: classNameProp,
|
||||
component: ComponentProp,
|
||||
container,
|
||||
item,
|
||||
alignContent,
|
||||
alignItems,
|
||||
classes,
|
||||
className: classNameProp,
|
||||
component: Component,
|
||||
container,
|
||||
direction,
|
||||
spacing,
|
||||
hidden,
|
||||
item,
|
||||
justify,
|
||||
wrap,
|
||||
xs,
|
||||
sm,
|
||||
md,
|
||||
lg,
|
||||
xl
|
||||
md,
|
||||
zeroMinWidth,
|
||||
sm,
|
||||
spacing,
|
||||
wrap,
|
||||
xl,
|
||||
xs
|
||||
} = props,
|
||||
other = _objectWithoutProperties(props, ['classes', 'className', 'component', 'container', 'item', 'alignContent', 'alignItems', 'direction', 'spacing', 'hidden', 'justify', 'wrap', 'xs', 'sm', 'md', 'lg', 'xl']);
|
||||
other = _objectWithoutProperties(props, ['alignContent', 'alignItems', 'classes', 'className', 'component', 'container', 'direction', 'hidden', 'item', 'justify', 'lg', 'md', 'zeroMinWidth', 'sm', 'spacing', 'wrap', 'xl', 'xs']);
|
||||
|
||||
const className = classNames({
|
||||
[classes.typeContainer]: container,
|
||||
[classes.typeItem]: item,
|
||||
[classes.zeroMinWidth]: zeroMinWidth,
|
||||
[classes[`spacing-xs-${String(spacing)}`]]: container && spacing !== 0,
|
||||
[classes[`direction-xs-${String(direction)}`]]: direction !== Grid.defaultProps.direction,
|
||||
[classes[`wrap-xs-${String(wrap)}`]]: wrap !== Grid.defaultProps.wrap,
|
||||
@@ -206,37 +211,130 @@ function Grid(props) {
|
||||
return React.createElement(
|
||||
Hidden,
|
||||
hidden,
|
||||
React.createElement(ComponentProp, gridProps)
|
||||
React.createElement(Component, gridProps)
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement(ComponentProp, gridProps);
|
||||
return React.createElement(Component, gridProps);
|
||||
}
|
||||
|
||||
Grid.propTypes = process.env.NODE_ENV !== "production" ? {
|
||||
/**
|
||||
* Defines the `align-content` style property.
|
||||
* It's applied for all screen sizes.
|
||||
*/
|
||||
alignContent: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),
|
||||
/**
|
||||
* Defines the `align-items` style property.
|
||||
* It's applied for all screen sizes.
|
||||
*/
|
||||
alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: PropTypes.object.isRequired,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a DOM element or a component.
|
||||
*/
|
||||
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
/**
|
||||
* If `true`, the component will have the flex *container* behavior.
|
||||
* You should be wrapping *items* with a *container*.
|
||||
*/
|
||||
container: PropTypes.bool,
|
||||
/**
|
||||
* Defines the `flex-direction` style property.
|
||||
* It is applied for all screen sizes.
|
||||
*/
|
||||
direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
|
||||
/**
|
||||
* If provided, will wrap with [Hidden](/api/hidden) component and given properties.
|
||||
*/
|
||||
hidden: PropTypes.object,
|
||||
/**
|
||||
* If `true`, the component will have the flex *item* behavior.
|
||||
* You should be wrapping *items* with a *container*.
|
||||
*/
|
||||
item: PropTypes.bool,
|
||||
/**
|
||||
* Defines the `justify-content` style property.
|
||||
* It is applied for all screen sizes.
|
||||
*/
|
||||
justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
|
||||
/**
|
||||
* Defines the number of grids the component is going to use.
|
||||
* It's applied for the `lg` breakpoint and wider screens if not overridden.
|
||||
*/
|
||||
lg: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
||||
/**
|
||||
* Defines the number of grids the component is going to use.
|
||||
* It's applied for the `md` breakpoint and wider screens if not overridden.
|
||||
*/
|
||||
md: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
||||
/**
|
||||
* Defines the number of grids the component is going to use.
|
||||
* It's applied for the `sm` breakpoint and wider screens if not overridden.
|
||||
*/
|
||||
sm: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
||||
/**
|
||||
* Defines the space between the type `item` component.
|
||||
* It can only be used on a type `container` component.
|
||||
*/
|
||||
spacing: PropTypes.oneOf(GUTTERS),
|
||||
/**
|
||||
* Defines the `flex-wrap` style property.
|
||||
* It's applied for all screen sizes.
|
||||
*/
|
||||
wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
|
||||
/**
|
||||
* Defines the number of grids the component is going to use.
|
||||
* It's applied for the `xl` breakpoint and wider screens.
|
||||
*/
|
||||
xl: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
||||
/**
|
||||
* Defines the number of grids the component is going to use.
|
||||
* It's applied for all the screen sizes with the lowest priority.
|
||||
*/
|
||||
xs: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
||||
/**
|
||||
* If `true`, it sets `min-width: 0` on the item.
|
||||
* Refer to the limitations section of the documentation to better understand the use case.
|
||||
*/
|
||||
zeroMinWidth: PropTypes.bool
|
||||
} : {};
|
||||
|
||||
Grid.defaultProps = {
|
||||
alignContent: 'stretch',
|
||||
alignItems: 'stretch',
|
||||
component: 'div',
|
||||
container: false,
|
||||
direction: 'row',
|
||||
hidden: undefined,
|
||||
item: false,
|
||||
justify: 'flex-start',
|
||||
zeroMinWidth: false,
|
||||
spacing: 16,
|
||||
wrap: 'wrap'
|
||||
};
|
||||
|
||||
// Add a wrapper component to generate some helper messages in the development
|
||||
// environment.
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
// eslint-disable-next-line import/no-mutable-exports
|
||||
let GridWrapper = Grid;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const requireProp = requirePropFactory('Grid');
|
||||
|
||||
GridWrapper = props => React.createElement(Grid, props);
|
||||
|
||||
// $FlowFixMe - cannot mix legacy propTypes with current HOC pattern - https://github.com/facebook/flow/issues/4644#issuecomment-332530909
|
||||
const requireProp = requirePropFactory('Grid');
|
||||
GridWrapper.propTypes = {
|
||||
alignContent: requireProp('container'),
|
||||
alignItems: requireProp('container'),
|
||||
@@ -247,7 +345,8 @@ if (process.env.NODE_ENV !== 'production') {
|
||||
sm: requireProp('item'),
|
||||
spacing: requireProp('container'),
|
||||
wrap: requireProp('container'),
|
||||
xs: requireProp('item')
|
||||
xs: requireProp('item'),
|
||||
zeroMinWidth: requireProp('zeroMinWidth')
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user