@imagine10255/react-styled-grid - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.d.ts

@@ -1,10 +0,10 @@
-export { default as media } from './library/imreact-styled-grid/media';
-export { default as Container } from './library/imreact-styled-grid/components/Container';
-export { default as Row } from './library/imreact-styled-grid/components/Row';
-export { default as Col } from './library/imreact-styled-grid/components/Col';
-export { default as GridThemeProvider } from './library/imreact-styled-grid/components/ThemeProvider';
-export * from './library/imreact-styled-grid/media/types';
-export * from './library/imreact-styled-grid/components/Col/types';
-export * from './library/imreact-styled-grid/components/Container/types';
-export * from './library/imreact-styled-grid/components/Row/types';
-export * from './library/imreact-styled-grid/components/ThemeProvider/types';
+export { default as media } from './library/react-styled-grid/media';
+export { default as Container } from './library/react-styled-grid/components/Container';
+export { default as Row } from './library/react-styled-grid/components/Row';
+export { default as Col } from './library/react-styled-grid/components/Col';
+export { default as GridThemeProvider } from './library/react-styled-grid/components/ThemeProvider';
+export * from './library/react-styled-grid/media/types';
+export * from './library/react-styled-grid/components/Col/types';
+export * from './library/react-styled-grid/components/Container/types';
+export * from './library/react-styled-grid/components/Row/types';
+export * from './library/react-styled-grid/components/ThemeProvider/types';

dist/index.js

@@ -77,3 +77,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var getBreakpoints = function getBreakpoints(props) {
-  var theme = props.theme.imreactStyledGrid;
+  var theme = props.theme.reactStyledGrid;
   var gridBreakPoints = Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.gridBreakpoints);
@@ -144,5 +144,5 @@ return _extends({}, defaultTheme.gridBreakpoints, gridBreakPoints);
 var generateMedia = function generateMedia(props) {
-  return Object.keys(props.theme.imreactStyledGrid.gridBreakpoints).map(function (sizeName) {
-    if (props.theme.imreactStyledGrid.gridBreakpoints[sizeName] > 0) {
-      return media[sizeName](_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n                max-width: ", "px;\n            "])), props.theme.imreactStyledGrid.containerMaxWidths[sizeName]);
+  return Object.keys(props.theme.reactStyledGrid.gridBreakpoints).map(function (sizeName) {
+    if (props.theme.reactStyledGrid.gridBreakpoints[sizeName] > 0) {
+      return media[sizeName](_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n                max-width: ", "px;\n            "])), props.theme.reactStyledGrid.containerMaxWidths[sizeName]);
     }
@@ -163,7 +163,7 @@
   displayName: "Container",
-  componentId: "sc-1p2zyxc-0"
+  componentId: "sc-qlnlpv-0"
 })(["width:100%;margin-right:auto;margin-left:auto;", ""], function (props) {
-  var _props$theme$imreactS, _props$theme$imreactS2;
+  var _props$theme$reactSty, _props$theme$reactSty2;
 
-  return _styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), (_props$theme$imreactS = props.theme.imreactStyledGrid) === null || _props$theme$imreactS === void 0 ? void 0 : _props$theme$imreactS.gridGutterWidth, (_props$theme$imreactS2 = props.theme.imreactStyledGrid) === null || _props$theme$imreactS2 === void 0 ? void 0 : _props$theme$imreactS2.gridGutterWidth, !props.fluid && _styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
+  return _styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), (_props$theme$reactSty = props.theme.reactStyledGrid) === null || _props$theme$reactSty === void 0 ? void 0 : _props$theme$reactSty.gridGutterWidth, (_props$theme$reactSty2 = props.theme.reactStyledGrid) === null || _props$theme$reactSty2 === void 0 ? void 0 : _props$theme$reactSty2.gridGutterWidth, !props.fluid && _styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
 });
@@ -184,9 +184,9 @@
 var getRowMargin = function getRowMargin(props) {
-  return props.noGutters ? 0 : "-" + props.theme.imreactStyledGrid.gridGutterWidth + "px";
+  return props.noGutters ? 0 : "-" + props.theme.reactStyledGrid.gridGutterWidth + "px";
 };
 
 var generateMedia$1 = function generateMedia(props) {
-  return Object.keys(props.theme.imreactStyledGrid.gridBreakpoints).map(function (sizeName) {
-    if (props.theme.imreactStyledGrid.gridBreakpoints[sizeName] > 0) {
-      return media[sizeName](_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n                margin-left: -", "px;\n                margin-right: -", "px;\n            "])), props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName]);
+  return Object.keys(props.theme.reactStyledGrid.gridBreakpoints).map(function (sizeName) {
+    if (props.theme.reactStyledGrid.gridBreakpoints[sizeName] > 0) {
+      return media[sizeName](_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n                margin-left: -", "px;\n                margin-right: -", "px;\n            "])), props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName]);
     }
@@ -207,3 +207,3 @@
   displayName: "Row",
-  componentId: "sc-fuc8p9-0"
+  componentId: "sc-17ap04z-0"
 })(["display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;", ""], function (props) {
@@ -271,6 +271,6 @@ return _styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n     margin-right: ", ";\n     margin-left: ", ";\n\n     // ps: \u8A2D\u5B9A\u6703 width 100% \u6703\u7522\u751F margin \u62B5\u92B7\u5931\u6557\n\n\n     ", "\n\n     ", "\n "])), getRowMargin(props), getRowMargin(props), !props.noGutters && _styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        ", "\n     "])), generateMedia$1(props)), props.noGutters && _styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        >[data-grid=col]{\n            padding-right: 0;\n            padding-left: 0;\n        }\n     "]))));
 var generateMedia$2 = function generateMedia(props) {
-  return Object.keys(props.theme.imreactStyledGrid.gridBreakpoints).filter(function (sizeName) {
+  return Object.keys(props.theme.reactStyledGrid.gridBreakpoints).filter(function (sizeName) {
     return sizeName !== 'xs';
   }).map(function (sizeName) {
-    return media[sizeName](_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n             padding-right: ", "px;\n             padding-left: ", "px;\n\n            ", "\n    "])), props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName], !isEmpty(props[sizeName]) && _styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n                ", ";\n            "])), css.col(props[sizeName], props.theme.imreactStyledGrid.gridColumns)));
+    return media[sizeName](_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n             padding-right: ", "px;\n             padding-left: ", "px;\n\n            ", "\n    "])), props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName], !isEmpty(props[sizeName]) && _styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n                ", ";\n            "])), css.col(props[sizeName], props.theme.reactStyledGrid.gridColumns)));
   });
@@ -286,5 +286,5 @@ };
   displayName: "Col",
-  componentId: "sc-1sxksm6-0"
+  componentId: "sc-1cju735-0"
 })(["position:relative;width:100%;min-height:1px;", ""], function (props) {
-  return _styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     >[data-grid=row]{\n        flex: 0 1 100%;\n    }\n\n     min-width: 0; // \u89E3\u6C7A\u4E0B\u5C64\u6709\u4F7F\u7528 white-space: nowrap; \u7522\u751F\u885D\u7A81\u8DD1\u7248\n     ", ";\n\n     ", ";\n "])), props.theme.imreactStyledGrid.gridGutterWidth, props.theme.imreactStyledGrid.gridGutterWidth, props.col && css.col(props.col, props.theme.imreactStyledGrid.gridColumns), generateMedia$2(props));
+  return _styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     >[data-grid=row]{\n        flex: 0 1 100%;\n    }\n\n     min-width: 0; // \u89E3\u6C7A\u4E0B\u5C64\u6709\u4F7F\u7528 white-space: nowrap; \u7522\u751F\u885D\u7A81\u8DD1\u7248\n     ", ";\n\n     ", ";\n "])), props.theme.reactStyledGrid.gridGutterWidth, props.theme.reactStyledGrid.gridGutterWidth, props.col && css.col(props.col, props.theme.reactStyledGrid.gridColumns), generateMedia$2(props));
 });
@@ -308,3 +308,3 @@
   var composeGridTheme = {
-    imreactStyledGrid: Object.assign({}, defaultTheme, gridTheme)
+    reactStyledGrid: Object.assign({}, defaultTheme, gridTheme)
   };
@@ -311,0 +311,0 @@ return React.createElement(_styled.ThemeProvider, {

dist/index.modern.js

@@ -74,3 +74,3 @@ import _styled, { css as css$1, ThemeProvider } from 'styled-components';
 var getBreakpoints = function getBreakpoints(props) {
-  var theme = props.theme.imreactStyledGrid;
+  var theme = props.theme.reactStyledGrid;
   var gridBreakPoints = Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.gridBreakpoints);
@@ -141,5 +141,5 @@ return _extends({}, defaultTheme.gridBreakpoints, gridBreakPoints);
 var generateMedia = function generateMedia(props) {
-  return Object.keys(props.theme.imreactStyledGrid.gridBreakpoints).map(function (sizeName) {
-    if (props.theme.imreactStyledGrid.gridBreakpoints[sizeName] > 0) {
-      return media[sizeName](_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n                max-width: ", "px;\n            "])), props.theme.imreactStyledGrid.containerMaxWidths[sizeName]);
+  return Object.keys(props.theme.reactStyledGrid.gridBreakpoints).map(function (sizeName) {
+    if (props.theme.reactStyledGrid.gridBreakpoints[sizeName] > 0) {
+      return media[sizeName](_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n                max-width: ", "px;\n            "])), props.theme.reactStyledGrid.containerMaxWidths[sizeName]);
     }
@@ -160,7 +160,7 @@
   displayName: "Container",
-  componentId: "sc-1p2zyxc-0"
+  componentId: "sc-qlnlpv-0"
 })(["width:100%;margin-right:auto;margin-left:auto;", ""], function (props) {
-  var _props$theme$imreactS, _props$theme$imreactS2;
+  var _props$theme$reactSty, _props$theme$reactSty2;
 
-  return css$1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), (_props$theme$imreactS = props.theme.imreactStyledGrid) === null || _props$theme$imreactS === void 0 ? void 0 : _props$theme$imreactS.gridGutterWidth, (_props$theme$imreactS2 = props.theme.imreactStyledGrid) === null || _props$theme$imreactS2 === void 0 ? void 0 : _props$theme$imreactS2.gridGutterWidth, !props.fluid && css$1(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
+  return css$1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), (_props$theme$reactSty = props.theme.reactStyledGrid) === null || _props$theme$reactSty === void 0 ? void 0 : _props$theme$reactSty.gridGutterWidth, (_props$theme$reactSty2 = props.theme.reactStyledGrid) === null || _props$theme$reactSty2 === void 0 ? void 0 : _props$theme$reactSty2.gridGutterWidth, !props.fluid && css$1(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
 });
@@ -181,9 +181,9 @@
 var getRowMargin = function getRowMargin(props) {
-  return props.noGutters ? 0 : "-" + props.theme.imreactStyledGrid.gridGutterWidth + "px";
+  return props.noGutters ? 0 : "-" + props.theme.reactStyledGrid.gridGutterWidth + "px";
 };
 
 var generateMedia$1 = function generateMedia(props) {
-  return Object.keys(props.theme.imreactStyledGrid.gridBreakpoints).map(function (sizeName) {
-    if (props.theme.imreactStyledGrid.gridBreakpoints[sizeName] > 0) {
-      return media[sizeName](_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n                margin-left: -", "px;\n                margin-right: -", "px;\n            "])), props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName]);
+  return Object.keys(props.theme.reactStyledGrid.gridBreakpoints).map(function (sizeName) {
+    if (props.theme.reactStyledGrid.gridBreakpoints[sizeName] > 0) {
+      return media[sizeName](_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n                margin-left: -", "px;\n                margin-right: -", "px;\n            "])), props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName]);
     }
@@ -204,3 +204,3 @@
   displayName: "Row",
-  componentId: "sc-fuc8p9-0"
+  componentId: "sc-17ap04z-0"
 })(["display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;", ""], function (props) {
@@ -268,6 +268,6 @@ return css$1(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n     margin-right: ", ";\n     margin-left: ", ";\n\n     // ps: \u8A2D\u5B9A\u6703 width 100% \u6703\u7522\u751F margin \u62B5\u92B7\u5931\u6557\n\n\n     ", "\n\n     ", "\n "])), getRowMargin(props), getRowMargin(props), !props.noGutters && css$1(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        ", "\n     "])), generateMedia$1(props)), props.noGutters && css$1(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        >[data-grid=col]{\n            padding-right: 0;\n            padding-left: 0;\n        }\n     "]))));
 var generateMedia$2 = function generateMedia(props) {
-  return Object.keys(props.theme.imreactStyledGrid.gridBreakpoints).filter(function (sizeName) {
+  return Object.keys(props.theme.reactStyledGrid.gridBreakpoints).filter(function (sizeName) {
     return sizeName !== 'xs';
   }).map(function (sizeName) {
-    return media[sizeName](_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n             padding-right: ", "px;\n             padding-left: ", "px;\n\n            ", "\n    "])), props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.imreactStyledGrid.gridGutterWidthMedia[sizeName], !isEmpty(props[sizeName]) && css$1(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n                ", ";\n            "])), css.col(props[sizeName], props.theme.imreactStyledGrid.gridColumns)));
+    return media[sizeName](_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n             padding-right: ", "px;\n             padding-left: ", "px;\n\n            ", "\n    "])), props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName], props.theme.reactStyledGrid.gridGutterWidthMedia[sizeName], !isEmpty(props[sizeName]) && css$1(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n                ", ";\n            "])), css.col(props[sizeName], props.theme.reactStyledGrid.gridColumns)));
   });
@@ -283,5 +283,5 @@ };
   displayName: "Col",
-  componentId: "sc-1sxksm6-0"
+  componentId: "sc-1cju735-0"
 })(["position:relative;width:100%;min-height:1px;", ""], function (props) {
-  return css$1(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     >[data-grid=row]{\n        flex: 0 1 100%;\n    }\n\n     min-width: 0; // \u89E3\u6C7A\u4E0B\u5C64\u6709\u4F7F\u7528 white-space: nowrap; \u7522\u751F\u885D\u7A81\u8DD1\u7248\n     ", ";\n\n     ", ";\n "])), props.theme.imreactStyledGrid.gridGutterWidth, props.theme.imreactStyledGrid.gridGutterWidth, props.col && css.col(props.col, props.theme.imreactStyledGrid.gridColumns), generateMedia$2(props));
+  return css$1(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     >[data-grid=row]{\n        flex: 0 1 100%;\n    }\n\n     min-width: 0; // \u89E3\u6C7A\u4E0B\u5C64\u6709\u4F7F\u7528 white-space: nowrap; \u7522\u751F\u885D\u7A81\u8DD1\u7248\n     ", ";\n\n     ", ";\n "])), props.theme.reactStyledGrid.gridGutterWidth, props.theme.reactStyledGrid.gridGutterWidth, props.col && css.col(props.col, props.theme.reactStyledGrid.gridColumns), generateMedia$2(props));
 });
@@ -305,3 +305,3 @@
   var composeGridTheme = {
-    imreactStyledGrid: Object.assign({}, defaultTheme, gridTheme)
+    reactStyledGrid: Object.assign({}, defaultTheme, gridTheme)
   };
@@ -308,0 +308,0 @@ return React.createElement(ThemeProvider, {

package.json

 {
   "name": "@imagine10255/react-styled-grid",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Most modern mobile touch slider with hardware accelerated transitions by react",
@@ -5,0 +5,0 @@ "author": "imagine10255",

No alert changes

Improved metrics

Total package byte prevSize

77528

increased by6.24%

Number of package files

56

increased by75%

Lines of code

861

increased by23.35%

No dependency changes