@elliemae/ds-grid 3.0.0-alpha.3 → 3.0.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Grid.js +12 -11
- package/dist/cjs/Grid.js.map +2 -2
- package/dist/cjs/GridItem.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +92 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils/constants.js +1 -8
- package/dist/cjs/utils/constants.js.map +2 -2
- package/dist/cjs/utils/styles.js +82 -75
- package/dist/cjs/utils/styles.js.map +2 -2
- package/dist/esm/Grid.js +11 -10
- package/dist/esm/Grid.js.map +2 -2
- package/dist/esm/GridItem.js +8 -1
- package/dist/esm/GridItem.js.map +2 -2
- package/dist/esm/{propTypes.js → react-desc-prop-types.js} +39 -20
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/utils/constants.js +1 -8
- package/dist/esm/utils/constants.js.map +2 -2
- package/dist/esm/utils/styles.js +82 -75
- package/dist/esm/utils/styles.js.map +2 -2
- package/package.json +3 -2
- package/dist/cjs/defaultProps.js +0 -43
- package/dist/cjs/defaultProps.js.map +0 -7
- package/dist/cjs/propTypes.js +0 -79
- package/dist/cjs/propTypes.js.map +0 -7
- package/dist/esm/defaultProps.js +0 -14
- package/dist/esm/defaultProps.js.map +0 -7
- package/dist/esm/propTypes.js.map +0 -7
package/dist/cjs/Grid.js
CHANGED
|
@@ -62,14 +62,15 @@ __export(Grid_exports, {
|
|
|
62
62
|
});
|
|
63
63
|
var React = __toESM(require("react"));
|
|
64
64
|
var import_react = __toESM(require("react"));
|
|
65
|
-
var
|
|
65
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
66
66
|
var import_lodash = require("lodash");
|
|
67
67
|
var import_ds_system = require("@elliemae/ds-system");
|
|
68
|
-
var
|
|
68
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
69
69
|
var import_GridItem = require("./GridItem");
|
|
70
|
-
var import_defaultProps = require("./defaultProps");
|
|
71
70
|
const Grid = import_react.default.forwardRef((props, ref) => {
|
|
72
|
-
const _a = props, {
|
|
71
|
+
const _a = props, { children } = _a, propsWithoutChildren = __objRest(_a, ["children"]);
|
|
72
|
+
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsWithoutChildren, import_react_desc_prop_types.defaultProps);
|
|
73
|
+
const _b = propsWithDefaults, { rows, cols, alignItems, className, justify, gutter, wrap, width, height } = _b, rest = __objRest(_b, ["rows", "cols", "alignItems", "className", "justify", "gutter", "wrap", "width", "height"]);
|
|
73
74
|
let isSpanParent = true;
|
|
74
75
|
const renderChildren = import_react.default.Children.map(children, (child) => {
|
|
75
76
|
if ((0, import_lodash.get)(child, "child.type.name") === "Grid" || (0, import_lodash.get)(child, "type.displayName") === "Grid" || parseInt((0, import_lodash.get)(child, "props.span", 0), 10) > 0) {
|
|
@@ -83,7 +84,7 @@ const Grid = import_react.default.forwardRef((props, ref) => {
|
|
|
83
84
|
}
|
|
84
85
|
return child;
|
|
85
86
|
});
|
|
86
|
-
return /* @__PURE__ */ import_react.default.createElement(import_GridItem.GridItem, __spreadValues({
|
|
87
|
+
return /* @__PURE__ */ import_react.default.createElement(import_GridItem.GridItem, __spreadProps(__spreadValues({
|
|
87
88
|
alignItems,
|
|
88
89
|
className,
|
|
89
90
|
cols,
|
|
@@ -93,16 +94,16 @@ const Grid = import_react.default.forwardRef((props, ref) => {
|
|
|
93
94
|
rows,
|
|
94
95
|
wrap,
|
|
95
96
|
childNumber: import_react.default.Children.count(children),
|
|
96
|
-
ref
|
|
97
|
+
ref
|
|
98
|
+
}, rest), {
|
|
97
99
|
w: width,
|
|
98
100
|
h: height
|
|
99
|
-
}
|
|
101
|
+
}), renderChildren);
|
|
100
102
|
});
|
|
101
103
|
Grid.displayName = "Grid";
|
|
102
|
-
Grid.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
DSGridWithSchema.propTypes = import_propTypes.propTypes;
|
|
104
|
+
Grid.propTypes = import_react_desc_prop_types.DSGridPropTypes;
|
|
105
|
+
const DSGridWithSchema = (0, import_ds_props_helpers.describe)(Grid);
|
|
106
|
+
DSGridWithSchema.propTypes = import_react_desc_prop_types.DSGridPropTypes;
|
|
106
107
|
var Grid_default = Grid;
|
|
107
108
|
module.exports = __toCommonJS(Grid_exports);
|
|
108
109
|
//# sourceMappingURL=Grid.js.map
|
package/dist/cjs/Grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Grid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport { DSGridT, DSGridPropTypes, defaultProps } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const { children, ...propsWithoutChildren } = props;\n const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);\n\n const { rows, cols, alignItems, className, justify, gutter, wrap, width, height, ...rest } = propsWithDefaults;\n\n let isSpanParent = true;\n\n const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n if (\n get(child, 'child.type.name') === 'Grid' ||\n get(child, 'type.displayName') === 'Grid' ||\n parseInt(get(child, 'props.span', 0) as string, 10) > 0\n ) {\n const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n if (!span) isSpanParent = false;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(child as React.ReactElement, {\n ...(child as React.ReactElement).props,\n width: fixSpaceGutter(wc),\n height: fixSpaceGutter(hc),\n });\n }\n return child;\n });\n\n return (\n <GridItem\n alignItems={alignItems}\n className={className}\n cols={cols}\n gutter={gutter}\n isSpanParent={isSpanParent}\n justify={justify}\n rows={rows}\n wrap={wrap}\n childNumber={React.Children.count(children)}\n ref={ref}\n {...rest}\n w={width}\n h={height}\n >\n {renderChildren}\n </GridItem>\n );\n});\n\n// Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.\nGrid.displayName = 'Grid';\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAuD;AACvD,oBAAoB;AACpB,uBAA+B;AAC/B,mCAAuD;AACvD,sBAAyB;AAEzB,MAAM,OAAO,qBAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAA8C,YAAtC,eAAsC,IAAzB,iCAAyB,IAAzB,CAAb;AACR,QAAM,oBAAoB,0DAA6B,sBAAsB;AAE7E,QAA6F,wBAArF,QAAM,MAAM,YAAY,WAAW,SAAS,QAAQ,MAAM,OAAO,WAAoB,IAAT,iBAAS,IAAT,CAA5E,QAAM,QAAM,cAAY,aAAW,WAAS,UAAQ,QAAM,SAAO;AAEzE,MAAI,eAAe;AAEnB,QAAM,iBAAiB,qBAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,uBAAI,OAAO,uBAAuB,UAClC,uBAAI,OAAO,wBAAwB,UACnC,SAAS,uBAAI,OAAO,cAAc,IAAc,MAAM,GACtD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAU,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,qBAAM,aAAa,OAA6B,iCACjD,MAA6B,QADoB;AAAA,QAErD,OAAO,qCAAe;AAAA,QACtB,QAAQ,qCAAe;AAAA;AAAA;AAG3B,WAAO;AAAA;AAGT,SACE,mDAAC,0BAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,qBAAM,SAAS,MAAM;AAAA,IAClC;AAAA,KACI,OAXN;AAAA,IAYE,GAAG;AAAA,IACH,GAAG;AAAA,MAEF;AAAA;AAMP,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,sCAAS;AAClC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/GridItem.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/GridItem.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,+BAAmB;AACnB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {\n space,\n width,\n height,\n flexboxes,\n grids,\n sizing,\n LayoutProps,\n SpaceProps,\n SizingProps,\n} from '@xstyled/styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n column-gap: ${({ gutter }) => mapGap(gutter)};\n row-gap: ${({ gutter }) => mapGap(gutter)};\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${height}\n ${width}\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,+BAAmB;AACnB,gCAUO;AACP,uBAAuB;AACvB,oBAAmD;AAG5C,MAAM,WAAW,iCAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,aAAa,6BAAO;AAAA,aAC1B,CAAC,EAAE,aAAa,6BAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __export = (target, all) => {
|
|
26
|
+
for (var name in all)
|
|
27
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
+
};
|
|
29
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
30
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
31
|
+
for (let key of __getOwnPropNames(module2))
|
|
32
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
33
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __toESM = (module2, isNodeMode) => {
|
|
38
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
39
|
+
};
|
|
40
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
41
|
+
return (module2, temp) => {
|
|
42
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
43
|
+
};
|
|
44
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
45
|
+
var react_desc_prop_types_exports = {};
|
|
46
|
+
__export(react_desc_prop_types_exports, {
|
|
47
|
+
DSGridPropTypes: () => DSGridPropTypes,
|
|
48
|
+
defaultProps: () => defaultProps
|
|
49
|
+
});
|
|
50
|
+
var React = __toESM(require("react"));
|
|
51
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
52
|
+
var import_constants = require("./utils/constants");
|
|
53
|
+
const defaultProps = {
|
|
54
|
+
rows: [],
|
|
55
|
+
cols: [],
|
|
56
|
+
className: "",
|
|
57
|
+
justify: "flex-start",
|
|
58
|
+
gutter: 0,
|
|
59
|
+
wrap: "wrap",
|
|
60
|
+
span: 1
|
|
61
|
+
};
|
|
62
|
+
const rowColBreakpoints = import_ds_props_helpers.PropTypes.shape({
|
|
63
|
+
small: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
|
|
64
|
+
medium: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
|
|
65
|
+
large: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]))
|
|
66
|
+
});
|
|
67
|
+
const spanBreakpoints = import_ds_props_helpers.PropTypes.shape({
|
|
68
|
+
small: import_ds_props_helpers.PropTypes.number,
|
|
69
|
+
medium: import_ds_props_helpers.PropTypes.number,
|
|
70
|
+
large: import_ds_props_helpers.PropTypes.number
|
|
71
|
+
});
|
|
72
|
+
const DSGridPropTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), import_ds_props_helpers.xstyledPropTypes), {
|
|
73
|
+
rows: import_ds_props_helpers.PropTypes.oneOfType([
|
|
74
|
+
import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
|
|
75
|
+
rowColBreakpoints
|
|
76
|
+
]).description("Row layout cells").defaultValue([]),
|
|
77
|
+
cols: import_ds_props_helpers.PropTypes.oneOfType([
|
|
78
|
+
import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
|
|
79
|
+
rowColBreakpoints
|
|
80
|
+
]).description("Column layout cells").defaultValue([]),
|
|
81
|
+
span: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, spanBreakpoints]).description("Expands the grid element within columns."),
|
|
82
|
+
alignItems: import_ds_props_helpers.PropTypes.oneOf(import_constants.alignItemsPlacement).description("flex-like align items prop"),
|
|
83
|
+
children: import_ds_props_helpers.PropTypes.node.description("Children node inside grid cell"),
|
|
84
|
+
className: import_ds_props_helpers.PropTypes.string.description("CSS class").defaultValue(""),
|
|
85
|
+
justifyContent: import_ds_props_helpers.PropTypes.oneOf(import_constants.justifyPlacement).description("flex-like justify prop").defaultValue(import_constants.justifyPlacement[0]),
|
|
86
|
+
gutter: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description("Space between cells prop").defaultValue(0),
|
|
87
|
+
wrap: import_ds_props_helpers.PropTypes.oneOf(import_constants.wrap).description("Wrap type").defaultValue(import_constants.wrap[0]),
|
|
88
|
+
height: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description("Grid height."),
|
|
89
|
+
width: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description("Grid width.")
|
|
90
|
+
});
|
|
91
|
+
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
92
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number[];\n medium?: string | number[];\n large?: string | number[];\n }\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n interface IProps {\n height?: string;\n width?: string;\n rows?: string[] | string | number[] | RowColBreakpoints;\n cols?: string[] | string | number[] | RowColBreakpoints;\n justifyContent?: typeof justifyPlacement[number];\n alignItems?: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className?: string;\n justify?: typeof justifyPlacement[number];\n gutter?: string | number;\n wrap?: typeof wrap[number];\n span?: number;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems: typeof alignItemsPlacement[number];\n children: React.ReactNode;\n className: string;\n justify: typeof justifyPlacement[number];\n gutter: string | number;\n wrap: typeof wrap[number];\n childNumber: number;\n isSpanParent: boolean;\n span?: number | SpanBreakpoints;\n ref: React.ForwardedRef<HTMLDivElement>;\n }\n}\n\nexport const defaultProps = {\n rows: [],\n cols: [],\n className: '',\n justify: 'flex-start',\n gutter: 0,\n wrap: 'wrap',\n span: 1,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n small: PropTypes.number,\n medium: PropTypes.number,\n large: PropTypes.number,\n});\n\nexport const DSGridPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n rows: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n rowColBreakpoints,\n ])\n .description('Row layout cells')\n .defaultValue([]),\n cols: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n rowColBreakpoints,\n ])\n .description('Column layout cells')\n .defaultValue([]),\n span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description(\n 'Expands the grid element within columns.',\n ),\n alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),\n children: PropTypes.node.description('Children node inside grid cell'),\n className: PropTypes.string.description('CSS class').defaultValue(''),\n justifyContent: PropTypes.oneOf(justifyPlacement)\n .description('flex-like justify prop')\n .defaultValue(justifyPlacement[0]),\n gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Space between cells prop')\n .defaultValue(0),\n wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAMO;AACP,uBAA4D;AAgDrD,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;AAMR,MAAM,oBAAoB,kCAAU,MAAM;AAAA,EACxC,OAAO,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU;AAAA,EAC1E,QAAQ,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU;AAAA,EAC3E,OAAO,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU;AAAA;AAG5E,MAAM,kBAAkB,kCAAU,MAAM;AAAA,EACtC,OAAO,kCAAU;AAAA,EACjB,QAAQ,kCAAU;AAAA,EAClB,OAAO,kCAAU;AAAA;AAGZ,MAAM,kBAAkB,gDAC1B,oDACA,2CAF0B;AAAA,EAG7B,MAAM,kCAAU,UAAU;AAAA,IACxB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU;AAAA,IACnE;AAAA,KAEC,YAAY,oBACZ,aAAa;AAAA,EAChB,MAAM,kCAAU,UAAU;AAAA,IACxB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU;AAAA,IACnE;AAAA,KAEC,YAAY,uBACZ,aAAa;AAAA,EAChB,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kBAAkB,YAC7D;AAAA,EAEF,YAAY,kCAAU,MAAM,sCAAqB,YAAY;AAAA,EAC7D,UAAU,kCAAU,KAAK,YAAY;AAAA,EACrC,WAAW,kCAAU,OAAO,YAAY,aAAa,aAAa;AAAA,EAClE,gBAAgB,kCAAU,MAAM,mCAC7B,YAAY,0BACZ,aAAa,kCAAiB;AAAA,EACjC,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,SACtD,YAAY,4BACZ,aAAa;AAAA,EAChB,MAAM,kCAAU,MAAM,uBAAM,YAAY,aAAa,aAAa,sBAAK;AAAA,EACvE,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,SAAS,YAAY;AAAA,EAC9E,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,SAAS,YAAY;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';\n\ninterface RowColBreakpoints {\n small?: string | number[];\n medium?: string | number[];\n large?: string | number[];\n}\n\ninterface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n}\n\nexport interface GridPropsT {\n height?: string;\n width?: string;\n rows?: string[] | string | number[] | RowColBreakpoints;\n cols?: string[] | string | number[] | RowColBreakpoints;\n justifyContent?: typeof justifyPlacement[number];\n alignItems?: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className?: string;\n justify?: typeof justifyPlacement[number];\n gutter?: string | number;\n wrap?: typeof wrap[number];\n span?: number;\n p?: string | number;\n m?: string | number;\n px?: string | number;\n mx?: string | number;\n py?: string | number;\n my?: string | number;\n ml?: string | number;\n mr?: string | number;\n mt?: string | number;\n mb?: string | number;\n pl?: string | number;\n pr?: string | number;\n pt?: string | number;\n pb?: string | number;\n}\n\nexport interface GridPropsWithDefaultT {\n rows: string | number[] | RowColBreakpoints;\n cols: string | number[] | RowColBreakpoints;\n alignItems: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className: string;\n justify: typeof justifyPlacement[number];\n gutter: string | number;\n wrap: typeof wrap[number];\n span: number | SpanBreakpoints;\n}\n
|
|
4
|
+
"sourcesContent": ["import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';\n\ninterface RowColBreakpoints {\n small?: string | number[];\n medium?: string | number[];\n large?: string | number[];\n}\n\ninterface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n}\n\nexport interface GridPropsT {\n height?: string;\n width?: string;\n rows?: string[] | string | number[] | RowColBreakpoints;\n cols?: string[] | string | number[] | RowColBreakpoints;\n justifyContent?: typeof justifyPlacement[number];\n alignItems?: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className?: string;\n justify?: typeof justifyPlacement[number];\n gutter?: string | number;\n wrap?: typeof wrap[number];\n span?: number;\n p?: string | number;\n m?: string | number;\n px?: string | number;\n mx?: string | number;\n py?: string | number;\n my?: string | number;\n ml?: string | number;\n mr?: string | number;\n mt?: string | number;\n mb?: string | number;\n pl?: string | number;\n pr?: string | number;\n pt?: string | number;\n pb?: string | number;\n}\n\nexport interface GridPropsWithDefaultT {\n rows: string | number[] | RowColBreakpoints;\n cols: string | number[] | RowColBreakpoints;\n alignItems: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className: string;\n justify: typeof justifyPlacement[number];\n gutter: string | number;\n wrap: typeof wrap[number];\n span: number | SpanBreakpoints;\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,14 +32,7 @@ __export(constants_exports, {
|
|
|
32
32
|
wrap: () => wrap
|
|
33
33
|
});
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
const justifyPlacement = [
|
|
36
|
-
"flex-start",
|
|
37
|
-
"center",
|
|
38
|
-
"flex-end",
|
|
39
|
-
"space-between",
|
|
40
|
-
"space-around",
|
|
41
|
-
"space-evenly"
|
|
42
|
-
];
|
|
35
|
+
const justifyPlacement = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
|
|
43
36
|
const alignItemsPlacement = ["flex-start", "center", "flex-end", "stretch", "baseline"];
|
|
44
37
|
const wrap = ["wrap", "nowrap", "wrap-reverse"];
|
|
45
38
|
module.exports = __toCommonJS(constants_exports);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const justifyPlacement = [
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB
|
|
4
|
+
"sourcesContent": ["export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB;AAE/F,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW;AAE5E,MAAM,OAAO,CAAC,QAAQ,UAAU;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils/styles.js
CHANGED
|
@@ -37,28 +37,32 @@ const manageSpan = import_ds_system.css`
|
|
|
37
37
|
${({ isSpanParent, span, theme }) => {
|
|
38
38
|
if (!isSpanParent)
|
|
39
39
|
return "";
|
|
40
|
-
if (typeof span === "
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
if (typeof span === "number") {
|
|
41
|
+
return `
|
|
42
|
+
-ms-grid-column: auto / span ${span};
|
|
43
|
+
grid-column: auto / span ${span};`;
|
|
44
|
+
}
|
|
45
|
+
if (typeof span !== "object")
|
|
46
|
+
return ``;
|
|
47
|
+
let data = "";
|
|
48
|
+
Object.keys(theme.media).forEach((key) => {
|
|
49
|
+
const theKey = key;
|
|
50
|
+
const spanValue = span[theKey];
|
|
51
|
+
if (!!spanValue && theme.breakpoints[theKey]) {
|
|
52
|
+
if (theKey === "small") {
|
|
53
|
+
data += `
|
|
54
|
+
-ms-grid-column: auto / span ${spanValue};
|
|
55
|
+
grid-column: auto / span ${spanValue};
|
|
48
56
|
`;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
57
|
+
} else {
|
|
58
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
59
|
+
-ms-grid-column: auto / span ${spanValue};
|
|
60
|
+
grid-column: auto / span ${spanValue};
|
|
61
|
+
}`;
|
|
55
62
|
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return `
|
|
60
|
-
-ms-grid-column: auto / span ${span};
|
|
61
|
-
grid-column: auto / span ${span};`;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
return data;
|
|
62
66
|
}}
|
|
63
67
|
`;
|
|
64
68
|
const manageCols = import_ds_system.css`
|
|
@@ -66,31 +70,33 @@ const manageCols = import_ds_system.css`
|
|
|
66
70
|
if (typeof cols === "object" && !Array.isArray(cols)) {
|
|
67
71
|
let data = "";
|
|
68
72
|
Object.keys(theme.media).forEach((key) => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
const theKey = key;
|
|
74
|
+
const colValue = cols[theKey];
|
|
75
|
+
if (!!colValue && Array.isArray(colValue)) {
|
|
76
|
+
const mtg = (0, import_ds_system.mapTemplateGrid)(colValue).join(" ");
|
|
77
|
+
const mtgs = (0, import_ds_system.mapTemplateGrid)(colValue).map((c) => `minmax(0, ${c})`).join(" ");
|
|
78
|
+
if (theKey === "small") {
|
|
73
79
|
data += `-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
grid-template-columns: ${mtg || "auto"};
|
|
81
|
+
-ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
|
|
82
|
+
grid-template-columns: ${mtgs || "auto"};`;
|
|
77
83
|
} else {
|
|
78
|
-
data += `@media (min-width: ${theme.breakpoints[
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
85
|
+
-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
|
|
86
|
+
grid-template-columns: ${mtg || "auto"};
|
|
87
|
+
-ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
|
|
88
|
+
grid-template-columns: ${mtgs || "auto"};
|
|
89
|
+
}`;
|
|
84
90
|
}
|
|
85
|
-
} else if (isSpanParent) {
|
|
86
|
-
if (
|
|
87
|
-
data += `-ms-grid-columns: repeat(${
|
|
88
|
-
|
|
91
|
+
} else if (!!colValue && isSpanParent) {
|
|
92
|
+
if (theKey === "small") {
|
|
93
|
+
data += `-ms-grid-columns: repeat(${colValue}, 1fr);
|
|
94
|
+
grid-template-columns: repeat(${colValue}, 1fr);`;
|
|
89
95
|
} else {
|
|
90
|
-
data += `@media (min-width: ${theme.breakpoints[
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
96
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
97
|
+
-ms-grid-columns: repeat(${colValue}, 1fr);
|
|
98
|
+
grid-template-columns: repeat(${colValue}, 1fr);
|
|
99
|
+
}`;
|
|
94
100
|
}
|
|
95
101
|
}
|
|
96
102
|
});
|
|
@@ -100,16 +106,15 @@ const manageCols = import_ds_system.css`
|
|
|
100
106
|
const mtg = (0, import_ds_system.mapTemplateGrid)(cols).join(" ");
|
|
101
107
|
const mtgs = (0, import_ds_system.mapTemplateGrid)(cols).map((c) => `minmax(0, ${c})`).join(" ");
|
|
102
108
|
return `
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
`;
|
|
109
|
+
-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
|
|
110
|
+
grid-template-columns: ${mtg || "auto"};
|
|
111
|
+
-ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
|
|
112
|
+
grid-template-columns: ${mtgs || "auto"};`;
|
|
108
113
|
}
|
|
109
114
|
if (isSpanParent) {
|
|
110
115
|
return `
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
-ms-grid-columns: repeat(${cols}, 1fr);
|
|
117
|
+
grid-template-columns: repeat(${cols}, 1fr);`;
|
|
113
118
|
}
|
|
114
119
|
return "";
|
|
115
120
|
}}
|
|
@@ -119,31 +124,33 @@ const manageRows = import_ds_system.css`
|
|
|
119
124
|
if (typeof rows === "object" && !Array.isArray(rows)) {
|
|
120
125
|
let data = "";
|
|
121
126
|
Object.keys(theme.media).forEach((key) => {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
127
|
+
const theKey = key;
|
|
128
|
+
const rowValue = rows[theKey];
|
|
129
|
+
if (rowValue && Array.isArray(rowValue)) {
|
|
130
|
+
const mtg = (0, import_ds_system.mapTemplateGrid)(rowValue).join(" ");
|
|
131
|
+
const mtgs = (0, import_ds_system.mapTemplateGrid)(rowValue).map((c) => `minmax(0, ${c})`).join(" ");
|
|
125
132
|
if (key === "small") {
|
|
126
133
|
data += `-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
134
|
+
grid-template-rows: ${mtg || "auto"};
|
|
135
|
+
-ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
|
|
136
|
+
grid-template-rows: ${mtgs || "auto"};`;
|
|
130
137
|
} else {
|
|
131
|
-
data += `@media (min-width: ${theme.breakpoints[
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
138
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
139
|
+
-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
|
|
140
|
+
grid-template-rows: ${mtg || "auto"};
|
|
141
|
+
-ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
|
|
142
|
+
grid-template-rows: ${mtgs || "auto"};
|
|
143
|
+
}`;
|
|
137
144
|
}
|
|
138
|
-
} else if (isSpanParent) {
|
|
139
|
-
if (
|
|
140
|
-
data += `-ms-grid-rows: repeat(${
|
|
141
|
-
|
|
145
|
+
} else if (!!rowValue && isSpanParent) {
|
|
146
|
+
if (theKey === "small") {
|
|
147
|
+
data += `-ms-grid-rows: repeat(${rowValue}, 1fr);
|
|
148
|
+
grid-template-rows: repeat(${rowValue}, 1fr);`;
|
|
142
149
|
} else {
|
|
143
|
-
data += `@media (min-width: ${theme.breakpoints[
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
150
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
151
|
+
-ms-grid-rows: repeat(${rowValue}, 1fr);
|
|
152
|
+
grid-template-rows: repeat(${rowValue}, 1fr);
|
|
153
|
+
}`;
|
|
147
154
|
}
|
|
148
155
|
}
|
|
149
156
|
});
|
|
@@ -153,16 +160,16 @@ const manageRows = import_ds_system.css`
|
|
|
153
160
|
const mtg = (0, import_ds_system.mapTemplateGrid)(rows).join(" ");
|
|
154
161
|
const mtgs = (0, import_ds_system.mapTemplateGrid)(rows).map((c) => `minmax(0, ${c})`).join(" ");
|
|
155
162
|
return `
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
163
|
+
-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
|
|
164
|
+
grid-template-rows: ${mtg || "auto"};
|
|
165
|
+
-ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
|
|
166
|
+
grid-template-rows: ${mtgs || "auto"};
|
|
167
|
+
`;
|
|
161
168
|
}
|
|
162
169
|
if (isSpanParent) {
|
|
163
170
|
return `
|
|
164
|
-
|
|
165
|
-
|
|
171
|
+
-ms-grid-rows: repeat(${rows}, 1fr);
|
|
172
|
+
grid-template-rows: repeat(${rows}, 1fr);`;
|
|
166
173
|
}
|
|
167
174
|
return "";
|
|
168
175
|
}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\n\nexport const manageSpan = css
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAqC;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport { DSGridT } from '../react-desc-prop-types';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n ${({ isSpanParent, span, theme }) => {\n if (!isSpanParent) return '';\n\n if (typeof span === 'number') {\n return `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};`;\n }\n\n if (typeof span !== 'object') return ``;\n\n // Span object\n\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n // Type castings\n const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n const spanValue = span[theKey];\n\n if (!!spanValue && theme.breakpoints[theKey]) {\n if (theKey === 'small') {\n data += `\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n `;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n }`;\n }\n }\n });\n return data;\n }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n ${({ cols, theme, isSpanParent }) => {\n if (typeof cols === 'object' && !Array.isArray(cols)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof cols;\n const colValue = cols[theKey];\n if (!!colValue && Array.isArray(colValue)) {\n const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n if (theKey === 'small') {\n data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!colValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(cols)) {\n const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n }\n if (isSpanParent) {\n return `\n -ms-grid-columns: repeat(${cols}, 1fr);\n grid-template-columns: repeat(${cols}, 1fr);`;\n }\n return '';\n }}\n`;\n\nexport const manageRows = css<DSGridT.ItemProps>`\n ${({ rows, theme, isSpanParent }) => {\n if (typeof rows === 'object' && !Array.isArray(rows)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n const rowValue = rows[theKey];\n if (rowValue && Array.isArray(rowValue)) {\n const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n if (key === 'small') {\n data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!rowValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(rows)) {\n const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n `;\n }\n if (isSpanParent) {\n return `\n -ms-grid-rows: repeat(${rows}, 1fr);\n grid-template-rows: repeat(${rows}, 1fr);`;\n }\n return '';\n }}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Grid.js
CHANGED
|
@@ -31,14 +31,15 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import React2 from "react";
|
|
34
|
-
import { describe } from "
|
|
34
|
+
import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
35
35
|
import { get } from "lodash";
|
|
36
36
|
import { fixSpaceGutter } from "@elliemae/ds-system";
|
|
37
|
-
import {
|
|
37
|
+
import { DSGridPropTypes, defaultProps } from "./react-desc-prop-types";
|
|
38
38
|
import { GridItem } from "./GridItem";
|
|
39
|
-
import { defaultProps } from "./defaultProps";
|
|
40
39
|
const Grid = React2.forwardRef((props, ref) => {
|
|
41
|
-
const _a = props, {
|
|
40
|
+
const _a = props, { children } = _a, propsWithoutChildren = __objRest(_a, ["children"]);
|
|
41
|
+
const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);
|
|
42
|
+
const _b = propsWithDefaults, { rows, cols, alignItems, className, justify, gutter, wrap, width, height } = _b, rest = __objRest(_b, ["rows", "cols", "alignItems", "className", "justify", "gutter", "wrap", "width", "height"]);
|
|
42
43
|
let isSpanParent = true;
|
|
43
44
|
const renderChildren = React2.Children.map(children, (child) => {
|
|
44
45
|
if (get(child, "child.type.name") === "Grid" || get(child, "type.displayName") === "Grid" || parseInt(get(child, "props.span", 0), 10) > 0) {
|
|
@@ -52,7 +53,7 @@ const Grid = React2.forwardRef((props, ref) => {
|
|
|
52
53
|
}
|
|
53
54
|
return child;
|
|
54
55
|
});
|
|
55
|
-
return /* @__PURE__ */ React2.createElement(GridItem, __spreadValues({
|
|
56
|
+
return /* @__PURE__ */ React2.createElement(GridItem, __spreadProps(__spreadValues({
|
|
56
57
|
alignItems,
|
|
57
58
|
className,
|
|
58
59
|
cols,
|
|
@@ -62,16 +63,16 @@ const Grid = React2.forwardRef((props, ref) => {
|
|
|
62
63
|
rows,
|
|
63
64
|
wrap,
|
|
64
65
|
childNumber: React2.Children.count(children),
|
|
65
|
-
ref
|
|
66
|
+
ref
|
|
67
|
+
}, rest), {
|
|
66
68
|
w: width,
|
|
67
69
|
h: height
|
|
68
|
-
}
|
|
70
|
+
}), renderChildren);
|
|
69
71
|
});
|
|
70
72
|
Grid.displayName = "Grid";
|
|
71
|
-
Grid.
|
|
72
|
-
Grid.propTypes = propTypes;
|
|
73
|
+
Grid.propTypes = DSGridPropTypes;
|
|
73
74
|
const DSGridWithSchema = describe(Grid);
|
|
74
|
-
DSGridWithSchema.propTypes =
|
|
75
|
+
DSGridWithSchema.propTypes = DSGridPropTypes;
|
|
75
76
|
var Grid_default = Grid;
|
|
76
77
|
export {
|
|
77
78
|
DSGridWithSchema,
|
package/dist/esm/Grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Grid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport { DSGridT, DSGridPropTypes, defaultProps } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const { children, ...propsWithoutChildren } = props;\n const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);\n\n const { rows, cols, alignItems, className, justify, gutter, wrap, width, height, ...rest } = propsWithDefaults;\n\n let isSpanParent = true;\n\n const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n if (\n get(child, 'child.type.name') === 'Grid' ||\n get(child, 'type.displayName') === 'Grid' ||\n parseInt(get(child, 'props.span', 0) as string, 10) > 0\n ) {\n const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n if (!span) isSpanParent = false;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(child as React.ReactElement, {\n ...(child as React.ReactElement).props,\n width: fixSpaceGutter(wc),\n height: fixSpaceGutter(hc),\n });\n }\n return child;\n });\n\n return (\n <GridItem\n alignItems={alignItems}\n className={className}\n cols={cols}\n gutter={gutter}\n isSpanParent={isSpanParent}\n justify={justify}\n rows={rows}\n wrap={wrap}\n childNumber={React.Children.count(children)}\n ref={ref}\n {...rest}\n w={width}\n h={height}\n >\n {renderChildren}\n </GridItem>\n );\n});\n\n// Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.\nGrid.displayName = 'Grid';\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAA8C,YAAtC,eAAsC,IAAzB,iCAAyB,IAAzB,CAAb;AACR,QAAM,oBAAoB,6BAA6B,sBAAsB;AAE7E,QAA6F,wBAArF,QAAM,MAAM,YAAY,WAAW,SAAS,QAAQ,MAAM,OAAO,WAAoB,IAAT,iBAAS,IAAT,CAA5E,QAAM,QAAM,cAAY,aAAW,WAAS,UAAQ,QAAM,SAAO;AAEzE,MAAI,eAAe;AAEnB,QAAM,iBAAiB,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,uBAAuB,UAClC,IAAI,OAAO,wBAAwB,UACnC,SAAS,IAAI,OAAO,cAAc,IAAc,MAAM,GACtD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAU,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,OAAM,aAAa,OAA6B,iCACjD,MAA6B,QADoB;AAAA,QAErD,OAAO,eAAe;AAAA,QACtB,QAAQ,eAAe;AAAA;AAAA;AAG3B,WAAO;AAAA;AAGT,SACE,qCAAC,UAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,OAAM,SAAS,MAAM;AAAA,IAClC;AAAA,KACI,OAXN;AAAA,IAYE,GAAG;AAAA,IACH,GAAG;AAAA,MAEF;AAAA;AAMP,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS;AAClC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/GridItem.js
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
space,
|
|
5
|
+
width,
|
|
6
|
+
height,
|
|
7
|
+
flexboxes,
|
|
8
|
+
grids,
|
|
9
|
+
sizing
|
|
10
|
+
} from "@xstyled/styled-components";
|
|
4
11
|
import { mapGap } from "@elliemae/ds-system";
|
|
5
12
|
import { manageCols, manageRows, manageSpan } from "./utils/styles";
|
|
6
13
|
const GridItem = styled.div`
|