@tecsinapse/react-core 1.12.0 → 1.12.4
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/CHANGELOG.md +41 -0
- package/dist/components/atoms/shared/PaperAndCard.js +0 -1
- package/dist/components/atoms/shared/PaperAndCard.js.map +1 -1
- package/dist/components/molecules/Grid/Grid.d.ts +6 -1
- package/dist/components/molecules/Grid/Grid.js +1 -1
- package/dist/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/components/molecules/Grid/Item/Item.d.ts +8 -2
- package/dist/components/molecules/Grid/Item/Item.js +27 -6
- package/dist/components/molecules/Grid/Item/Item.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/shared/PaperAndCard.ts +0 -1
- package/src/components/molecules/Grid/Grid.tsx +9 -2
- package/src/components/molecules/Grid/Item/Item.tsx +45 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,47 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.12.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.3...@tecsinapse/react-core@1.12.4) (2021-12-23)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* remove padding from paper and card ([e88fad7](https://github.com/tecsinapse/design-system/commit/e88fad77adc5aaa21ffe093e6f79b76c60613cc9))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.12.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.2...@tecsinapse/react-core@1.12.3) (2021-12-23)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @tecsinapse/react-core
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [1.12.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.1...@tecsinapse/react-core@1.12.2) (2021-12-22)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* spacing grid ([4929fd8](https://github.com/tecsinapse/design-system/commit/4929fd83cb91484959e19aeee2dfc8cfcce6f009))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## [1.12.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.0...@tecsinapse/react-core@1.12.1) (2021-12-21)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Bug Fixes
|
|
40
|
+
|
|
41
|
+
* wrapper on gridItem. ([db99917](https://github.com/tecsinapse/design-system/commit/db999176d1440ed12b91a041fbfb850f76b3b867))
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
6
47
|
# [1.12.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.11.1...@tecsinapse/react-core@1.12.0) (2021-12-21)
|
|
7
48
|
|
|
8
49
|
|
|
@@ -10,7 +10,6 @@ var _native = require("@emotion/native");
|
|
|
10
10
|
const baseStyles = ({
|
|
11
11
|
theme
|
|
12
12
|
}) => (0, _native.css)`
|
|
13
|
-
padding: ${theme.spacing.deca};
|
|
14
13
|
border-radius: ${theme.borderRadius.mili};
|
|
15
14
|
background-color: ${theme.miscellaneous.surfaceColor};
|
|
16
15
|
overflow: hidden;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/shared/PaperAndCard.ts"],"names":["baseStyles","theme","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/shared/PaperAndCard.ts"],"names":["baseStyles","theme","borderRadius","mili","miscellaneous","surfaceColor","elevatedStyles","elevated","shadowColor","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation"],"mappings":";;;;;;;AAAA;;AAIO,MAAMA,UAAU,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgC,gBAAI;AAC9D,mBAAmBA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBF,KAAK,CAACG,aAAN,CAAoBC,YAAa;AACvD;AACA,CAJO;;;;AAOA,MAAMC,cAAc,GAAG,CAAC;AAC7BL,EAAAA,KAD6B;AAE7BM,EAAAA,QAAQ,GAAG;AAFkB,CAAD,KAI5BA,QAAQ,IAAI,CACV,iBAAI;AACFC,EAAAA,WAAW,EAAEP,KAAK,CAACG,aAAN,CAAoBK,MAD/B;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,GAHb;AAIFC,EAAAA,YAAY,EAAE,GAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADU,CAJP","sourcesContent":["import { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const baseStyles = ({ theme }: StyleProps): any => css`\n border-radius: ${theme.borderRadius.mili};\n background-color: ${theme.miscellaneous.surfaceColor};\n overflow: hidden;\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const elevatedStyles = ({\n theme,\n elevated = false,\n}: { elevated?: boolean } & StyleProps): any =>\n elevated && [\n css({\n shadowColor: theme.miscellaneous.shadow,\n shadowOffset: { width: 0, height: 1 },\n shadowOpacity: 0.2,\n shadowRadius: 1.4,\n elevation: 2,\n }),\n ];\n/* eslint-enable @typescript-eslint/no-explicit-any */\n"],"file":"PaperAndCard.js"}
|
|
@@ -4,7 +4,12 @@ export interface IGrid extends ViewProps {
|
|
|
4
4
|
children: JSX.Element[];
|
|
5
5
|
layout?: number[][];
|
|
6
6
|
columns?: number;
|
|
7
|
-
spacing?: SpacingType
|
|
7
|
+
spacing?: SpacingType | {
|
|
8
|
+
top?: SpacingType;
|
|
9
|
+
right?: SpacingType;
|
|
10
|
+
bottom?: SpacingType;
|
|
11
|
+
left?: SpacingType;
|
|
12
|
+
};
|
|
8
13
|
}
|
|
9
14
|
declare const Grid: ({ children, columns, layout, style, spacing, ...rest }: IGrid) => JSX.Element;
|
|
10
15
|
export default Grid;
|
|
@@ -47,7 +47,7 @@ const Grid = ({
|
|
|
47
47
|
}, rest), _react.default.Children.map(children, child => {
|
|
48
48
|
return _react.default.cloneElement(child, { ...(child === null || child === void 0 ? void 0 : child.props),
|
|
49
49
|
columns,
|
|
50
|
-
spacing
|
|
50
|
+
spacing: (child === null || child === void 0 ? void 0 : child.props.spacing) ?? spacing
|
|
51
51
|
});
|
|
52
52
|
}));
|
|
53
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Grid/Grid.tsx"],"names":["Grid","children","columns","layout","style","spacing","rest","flatLayout","flat","display","flexDirection","flexWrap","React","Children","map","child","index","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Grid/Grid.tsx"],"names":["Grid","children","columns","layout","style","spacing","rest","flatLayout","flat","display","flexDirection","flexWrap","React","Children","map","child","index","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AA0BA,MAAMA,IAAI,GAAG,CAAC;AACZC,EAAAA,QADY;AAEZC,EAAAA,OAAO,GAAG,EAFE;AAGZC,EAAAA,MAHY;AAIZC,EAAAA,KAJY;AAKZC,EAAAA,OALY;AAMZ,KAAGC;AANS,CAAD,KAOA;AACX,MAAIH,MAAJ,EAAY;AACV,UAAMI,UAAU,GAAGJ,MAAM,CAACK,IAAP,EAAnB;AACA,WACE,6BAAC,iBAAD;AACE,MAAA,KAAK,EAAE,CACLJ,KADK,EAEL;AACEK,QAAAA,OAAO,EAAE,MADX;AAEEC,QAAAA,aAAa,EAAE,KAFjB;AAGEC,QAAAA,QAAQ,EAAE;AAHZ,OAFK;AADT,OASML,IATN,GAWGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQC,KAAR,KAC5B,6BAAC,cAAD;AACE,MAAA,OAAO,EAAEd,OADX;AAEE,MAAA,IAAI,EAAEK,UAAU,CAACS,KAAD,CAFlB;AAGE,MAAA,OAAO,EAAEX;AAHX,OAKGU,KALH,CADD,CAXH,CADF;AAuBD;;AAED,SACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACLX,KADK,EAEL;AACEK,MAAAA,OAAO,EAAE,MADX;AAEEC,MAAAA,aAAa,EAAE,KAFjB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KAFK;AADT,KASML,IATN,GAWGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6Bc,KAAK,IAAI;AACrC,WAAOH,eAAMK,YAAN,CAAmBF,KAAnB,EAA0B,EAC/B,IAAGA,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEG,KAAV,CAD+B;AAE/BhB,MAAAA,OAF+B;AAG/BG,MAAAA,OAAO,EAAE,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,KAAP,CAAab,OAAb,KAAwBA;AAHF,KAA1B,CAAP;AAKD,GANA,CAXH,CADF;AAqBD,CAxDD;;eA0DeL,I","sourcesContent":["import React from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { GridItem } from './Item';\nimport { SpacingType } from '@tecsinapse/react-core';\n\nexport interface IGrid extends ViewProps {\n children: JSX.Element[];\n /** Layout should represent the multiplier of columns to fill the rows properly.\n * Example:\n * const layout = [\n * [6, 6], // Two elements on row\n * [4, 4, 4], // Three elements on row\n * [12], // One element on row\n * ];\n * */\n layout?: number[][];\n /** Number of grid columns to be considered (not the number of elements per row) */\n columns?: number;\n spacing?:\n | SpacingType\n | {\n top?: SpacingType;\n right?: SpacingType;\n bottom?: SpacingType;\n left?: SpacingType;\n };\n}\n\nconst Grid = ({\n children,\n columns = 12,\n layout,\n style,\n spacing,\n ...rest\n}: IGrid) => {\n if (layout) {\n const flatLayout = layout.flat();\n return (\n <View\n style={[\n style,\n {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n },\n ]}\n {...rest}\n >\n {React.Children.map(children, (child, index) => (\n <GridItem\n columns={columns}\n span={flatLayout[index]}\n spacing={spacing}\n >\n {child}\n </GridItem>\n ))}\n </View>\n );\n }\n\n return (\n <View\n style={[\n style,\n {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n },\n ]}\n {...rest}\n >\n {React.Children.map(children, child => {\n return React.cloneElement(child, {\n ...child?.props,\n columns,\n spacing: child?.props.spacing ?? spacing,\n });\n })}\n </View>\n );\n};\n\nexport default Grid;\n"],"file":"Grid.js"}
|
|
@@ -18,7 +18,13 @@ export interface IGridItem {
|
|
|
18
18
|
flexGrow?: number;
|
|
19
19
|
flexShrink?: number;
|
|
20
20
|
justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
|
|
21
|
-
spacing?: SpacingType
|
|
21
|
+
spacing?: SpacingType | {
|
|
22
|
+
top?: SpacingType;
|
|
23
|
+
right?: SpacingType;
|
|
24
|
+
bottom?: SpacingType;
|
|
25
|
+
left?: SpacingType;
|
|
26
|
+
};
|
|
27
|
+
wrapper?: boolean;
|
|
22
28
|
}
|
|
23
|
-
declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, ...rest }: IGridItem) =>
|
|
29
|
+
declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
|
|
24
30
|
export default GridItem;
|
|
@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactCore = require("@tecsinapse/react-core");
|
|
11
11
|
|
|
12
|
+
var _reactNative = require("react-native");
|
|
13
|
+
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
const GridItem = ({
|
|
@@ -18,6 +20,7 @@ const GridItem = ({
|
|
|
18
20
|
loadingComponent,
|
|
19
21
|
loading = false,
|
|
20
22
|
spacing: _spacing,
|
|
23
|
+
wrapper = false,
|
|
21
24
|
...rest
|
|
22
25
|
}) => {
|
|
23
26
|
const {
|
|
@@ -32,14 +35,32 @@ const GridItem = ({
|
|
|
32
35
|
return loadingComponent;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
const getPadding = pos => {
|
|
39
|
+
if (_spacing) {
|
|
40
|
+
if (typeof _spacing === 'string') return (0, _reactCore.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
|
|
41
|
+
return (0, _reactCore.extractNumbersFromString)(spacing[_spacing[pos]]);
|
|
42
|
+
} else return undefined;
|
|
43
|
+
} else return undefined;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const style = { ...rest,
|
|
47
|
+
boxSizing: 'border-box',
|
|
48
|
+
flexBasis: `${100 / (columns / span)}%`,
|
|
49
|
+
paddingTop: getPadding('top'),
|
|
50
|
+
paddingBottom: getPadding('bottom'),
|
|
51
|
+
paddingRight: getPadding('right'),
|
|
52
|
+
paddingLeft: getPadding('left')
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const clone = _react.default.cloneElement(children, { ...(children === null || children === void 0 ? void 0 : children.props),
|
|
56
|
+
style: wrapper ? children === null || children === void 0 ? void 0 : children.props.style : { ...style,
|
|
57
|
+
...(children === null || children === void 0 ? void 0 : children.props.style)
|
|
41
58
|
}
|
|
42
59
|
});
|
|
60
|
+
|
|
61
|
+
return wrapper ? _react.default.createElement(_reactNative.View, {
|
|
62
|
+
style: style
|
|
63
|
+
}, clone) : clone;
|
|
43
64
|
};
|
|
44
65
|
|
|
45
66
|
var _default = GridItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","rest","React","Children","only","Error","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","wrapper","rest","React","Children","only","Error","getPadding","pos","undefined","style","boxSizing","flexBasis","paddingTop","paddingBottom","paddingRight","paddingLeft","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;AAwCA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAFgB;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhB,KAAGC;AARa,CAAD,KASA;AACf,QAAM;AAAEH,IAAAA;AAAF,MAAc,0BAApB;;AACA,MAAI,CAACI,eAAMC,QAAN,CAAeC,IAAf,CAAoBX,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAIY,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAIT,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMU,UAAU,GAAIC,GAAD,IAA0B;AAC3C,QAAIR,QAAJ,EAAc;AACZ,UAAI,OAAOA,QAAP,KAAoB,QAAxB,EACE,OAAO,yCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAP,CADF,KAEK,IAAI,OAAOA,QAAP,KAAoB,QAApB,IAAgCA,QAAQ,CAACQ,GAAD,CAA5C,EAAmD;AACtD,eAAO,yCAAyBT,OAAO,CAACC,QAAQ,CAACQ,GAAD,CAAT,CAAhC,CAAP;AACD,OAFI,MAEE,OAAOC,SAAP;AACR,KAND,MAMO,OAAOA,SAAP;AACR,GARD;;AAUA,QAAMC,KAAK,GAAG,EACZ,GAAGR,IADS;AAEZS,IAAAA,SAAS,EAAE,YAFC;AAGZC,IAAAA,SAAS,EAAG,GAAE,OAAOhB,OAAO,GAAGD,IAAjB,CAAuB,GAHzB;AAIZkB,IAAAA,UAAU,EAAEN,UAAU,CAAC,KAAD,CAJV;AAKZO,IAAAA,aAAa,EAAEP,UAAU,CAAC,QAAD,CALb;AAMZQ,IAAAA,YAAY,EAAER,UAAU,CAAC,OAAD,CANZ;AAOZS,IAAAA,WAAW,EAAET,UAAU,CAAC,MAAD;AAPX,GAAd;;AAUA,QAAMU,KAAK,GAAGd,eAAMe,YAAN,CAAmBxB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAb,CADyC;AAEzCT,IAAAA,KAAK,EAAET,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEyB,KAAV,CAAgBT,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGhB,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAV,CAAgBT,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAOT,OAAO,GAAG,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAES;AAAb,KAAqBO,KAArB,CAAH,GAAwCA,KAAtD;AACD,CA9CD;;eAgDexB,Q","sourcesContent":["import React from 'react';\nimport {\n extractNumbersFromString,\n SpacingType,\n useTheme,\n} from '@tecsinapse/react-core';\nimport { View } from 'react-native';\n\ntype FlexPositioning = 'flex-start' | 'flex-end' | 'center';\ntype FlexAlignBase = FlexPositioning | 'stretch';\ntype FlexAlignType = FlexAlignBase | 'baseline';\ntype FlexSpacing = 'space-between' | 'space-around';\n\ntype PaddingPosition = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface IGridItem {\n children: React.ReactElement;\n /** Number of columns to fill */\n span: number;\n /** You don't have to give this property since is inherited from Grid */\n columns?: number;\n loading?: boolean;\n /** If your GridItem has a loading state, specify the component here (Skeleton) */\n loadingComponent?: React.ReactElement;\n /** Flex properties below */\n alignContent?: FlexAlignBase | FlexSpacing;\n alignItems?: FlexAlignType;\n alignSelf?: 'auto' | FlexAlignType;\n flex?: number;\n flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n flexGrow?: number;\n flexShrink?: number;\n justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';\n /** You don't have to give this property since is inherited from Grid */\n spacing?:\n | SpacingType\n | {\n top?: SpacingType;\n right?: SpacingType;\n bottom?: SpacingType;\n left?: SpacingType;\n };\n /** Used to wrap children in a View when its style extrapolates the dimensions*/\n wrapper?: boolean;\n}\n\nconst GridItem = ({\n children,\n span,\n columns = 12,\n loadingComponent,\n loading = false,\n spacing: _spacing,\n wrapper = false,\n ...rest\n}: IGridItem) => {\n const { spacing } = useTheme();\n if (!React.Children.only(children)) {\n throw new Error('The number of children in GridItem should be one');\n }\n if (loadingComponent && loading) {\n return loadingComponent;\n }\n\n const getPadding = (pos: PaddingPosition) => {\n if (_spacing) {\n if (typeof _spacing === 'string')\n return extractNumbersFromString(spacing[_spacing]);\n else if (typeof _spacing === 'object' && _spacing[pos]) {\n return extractNumbersFromString(spacing[_spacing[pos]!]);\n } else return undefined;\n } else return undefined;\n };\n\n const style = {\n ...rest,\n boxSizing: 'border-box',\n flexBasis: `${100 / (columns / span)}%`,\n paddingTop: getPadding('top'),\n paddingBottom: getPadding('bottom'),\n paddingRight: getPadding('right'),\n paddingLeft: getPadding('left'),\n };\n\n const clone = React.cloneElement(children, {\n ...children?.props,\n style: wrapper\n ? children?.props.style\n : { ...style, ...children?.props.style },\n });\n\n return wrapper ? <View style={style}>{clone}</View> : clone;\n};\n\nexport default GridItem;\n"],"file":"Item.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
3
|
"description": "TecSinapse hybrid React components",
|
|
4
|
-
"version": "1.12.
|
|
4
|
+
"version": "1.12.4",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"react-native": ">=0.64.0",
|
|
32
32
|
"react-native-vector-icons": ">=8.1.0"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "c327984ecc6007df35e763f64b512dca84dba446"
|
|
35
35
|
}
|
|
@@ -3,7 +3,6 @@ import { StyleProps } from '@tecsinapse/react-core';
|
|
|
3
3
|
|
|
4
4
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5
5
|
export const baseStyles = ({ theme }: StyleProps): any => css`
|
|
6
|
-
padding: ${theme.spacing.deca};
|
|
7
6
|
border-radius: ${theme.borderRadius.mili};
|
|
8
7
|
background-color: ${theme.miscellaneous.surfaceColor};
|
|
9
8
|
overflow: hidden;
|
|
@@ -16,7 +16,14 @@ export interface IGrid extends ViewProps {
|
|
|
16
16
|
layout?: number[][];
|
|
17
17
|
/** Number of grid columns to be considered (not the number of elements per row) */
|
|
18
18
|
columns?: number;
|
|
19
|
-
spacing?:
|
|
19
|
+
spacing?:
|
|
20
|
+
| SpacingType
|
|
21
|
+
| {
|
|
22
|
+
top?: SpacingType;
|
|
23
|
+
right?: SpacingType;
|
|
24
|
+
bottom?: SpacingType;
|
|
25
|
+
left?: SpacingType;
|
|
26
|
+
};
|
|
20
27
|
}
|
|
21
28
|
|
|
22
29
|
const Grid = ({
|
|
@@ -70,7 +77,7 @@ const Grid = ({
|
|
|
70
77
|
return React.cloneElement(child, {
|
|
71
78
|
...child?.props,
|
|
72
79
|
columns,
|
|
73
|
-
spacing,
|
|
80
|
+
spacing: child?.props.spacing ?? spacing,
|
|
74
81
|
});
|
|
75
82
|
})}
|
|
76
83
|
</View>
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
extractNumbersFromString,
|
|
4
|
+
SpacingType,
|
|
5
|
+
useTheme,
|
|
6
|
+
} from '@tecsinapse/react-core';
|
|
7
|
+
import { View } from 'react-native';
|
|
3
8
|
|
|
4
9
|
type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
|
|
5
10
|
type FlexAlignBase = FlexPositioning | 'stretch';
|
|
6
11
|
type FlexAlignType = FlexAlignBase | 'baseline';
|
|
7
12
|
type FlexSpacing = 'space-between' | 'space-around';
|
|
8
13
|
|
|
14
|
+
type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
15
|
+
|
|
9
16
|
export interface IGridItem {
|
|
10
17
|
children: React.ReactElement;
|
|
11
18
|
/** Number of columns to fill */
|
|
@@ -25,7 +32,16 @@ export interface IGridItem {
|
|
|
25
32
|
flexShrink?: number;
|
|
26
33
|
justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
|
|
27
34
|
/** You don't have to give this property since is inherited from Grid */
|
|
28
|
-
spacing?:
|
|
35
|
+
spacing?:
|
|
36
|
+
| SpacingType
|
|
37
|
+
| {
|
|
38
|
+
top?: SpacingType;
|
|
39
|
+
right?: SpacingType;
|
|
40
|
+
bottom?: SpacingType;
|
|
41
|
+
left?: SpacingType;
|
|
42
|
+
};
|
|
43
|
+
/** Used to wrap children in a View when its style extrapolates the dimensions*/
|
|
44
|
+
wrapper?: boolean;
|
|
29
45
|
}
|
|
30
46
|
|
|
31
47
|
const GridItem = ({
|
|
@@ -35,6 +51,7 @@ const GridItem = ({
|
|
|
35
51
|
loadingComponent,
|
|
36
52
|
loading = false,
|
|
37
53
|
spacing: _spacing,
|
|
54
|
+
wrapper = false,
|
|
38
55
|
...rest
|
|
39
56
|
}: IGridItem) => {
|
|
40
57
|
const { spacing } = useTheme();
|
|
@@ -45,18 +62,34 @@ const GridItem = ({
|
|
|
45
62
|
return loadingComponent;
|
|
46
63
|
}
|
|
47
64
|
|
|
48
|
-
|
|
65
|
+
const getPadding = (pos: PaddingPosition) => {
|
|
66
|
+
if (_spacing) {
|
|
67
|
+
if (typeof _spacing === 'string')
|
|
68
|
+
return extractNumbersFromString(spacing[_spacing]);
|
|
69
|
+
else if (typeof _spacing === 'object' && _spacing[pos]) {
|
|
70
|
+
return extractNumbersFromString(spacing[_spacing[pos]!]);
|
|
71
|
+
} else return undefined;
|
|
72
|
+
} else return undefined;
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const style = {
|
|
76
|
+
...rest,
|
|
77
|
+
boxSizing: 'border-box',
|
|
78
|
+
flexBasis: `${100 / (columns / span)}%`,
|
|
79
|
+
paddingTop: getPadding('top'),
|
|
80
|
+
paddingBottom: getPadding('bottom'),
|
|
81
|
+
paddingRight: getPadding('right'),
|
|
82
|
+
paddingLeft: getPadding('left'),
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const clone = React.cloneElement(children, {
|
|
49
86
|
...children?.props,
|
|
50
|
-
style:
|
|
51
|
-
|
|
52
|
-
...
|
|
53
|
-
boxSizing: 'border-box',
|
|
54
|
-
flexBasis: `${100 / (columns / span)}%`,
|
|
55
|
-
padding: _spacing
|
|
56
|
-
? extractNumbersFromString(spacing[_spacing])
|
|
57
|
-
: undefined,
|
|
58
|
-
},
|
|
87
|
+
style: wrapper
|
|
88
|
+
? children?.props.style
|
|
89
|
+
: { ...style, ...children?.props.style },
|
|
59
90
|
});
|
|
91
|
+
|
|
92
|
+
return wrapper ? <View style={style}>{clone}</View> : clone;
|
|
60
93
|
};
|
|
61
94
|
|
|
62
95
|
export default GridItem;
|