@tecsinapse/react-core 1.12.2 → 1.12.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/CHANGELOG.md +8 -0
- package/dist/components/molecules/Grid/Grid.d.ts +6 -1
- package/dist/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/components/molecules/Grid/Item/Item.d.ts +6 -1
- package/dist/components/molecules/Grid/Item/Item.js +12 -1
- package/dist/components/molecules/Grid/Item/Item.js.map +1 -1
- package/package.json +2 -2
- package/src/components/molecules/Grid/Grid.tsx +8 -1
- package/src/components/molecules/Grid/Item/Item.tsx +24 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.2...@tecsinapse/react-core@1.12.3) (2021-12-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @tecsinapse/react-core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [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)
|
|
7
15
|
|
|
8
16
|
|
|
@@ -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;
|
|
@@ -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,12 @@ 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
|
+
};
|
|
22
27
|
wrapper?: boolean;
|
|
23
28
|
}
|
|
24
29
|
declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
|
|
@@ -35,10 +35,21 @@ const GridItem = ({
|
|
|
35
35
|
return loadingComponent;
|
|
36
36
|
}
|
|
37
37
|
|
|
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
|
+
|
|
38
46
|
const style = { ...rest,
|
|
39
47
|
boxSizing: 'border-box',
|
|
40
48
|
flexBasis: `${100 / (columns / span)}%`,
|
|
41
|
-
|
|
49
|
+
paddingTop: getPadding('top'),
|
|
50
|
+
paddingBottom: getPadding('bottom'),
|
|
51
|
+
paddingRight: getPadding('right'),
|
|
52
|
+
paddingLeft: getPadding('left')
|
|
42
53
|
};
|
|
43
54
|
|
|
44
55
|
const clone = _react.default.cloneElement(children, { ...(children === null || children === void 0 ? void 0 : children.props),
|
|
@@ -1 +1 @@
|
|
|
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","style","boxSizing","flexBasis","
|
|
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.3",
|
|
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": "70d4f967e058d9d50acaf752273a9063d64c6074"
|
|
35
35
|
}
|
|
@@ -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 = ({
|
|
@@ -11,6 +11,8 @@ type FlexAlignBase = FlexPositioning | 'stretch';
|
|
|
11
11
|
type FlexAlignType = FlexAlignBase | 'baseline';
|
|
12
12
|
type FlexSpacing = 'space-between' | 'space-around';
|
|
13
13
|
|
|
14
|
+
type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
15
|
+
|
|
14
16
|
export interface IGridItem {
|
|
15
17
|
children: React.ReactElement;
|
|
16
18
|
/** Number of columns to fill */
|
|
@@ -30,7 +32,14 @@ export interface IGridItem {
|
|
|
30
32
|
flexShrink?: number;
|
|
31
33
|
justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
|
|
32
34
|
/** You don't have to give this property since is inherited from Grid */
|
|
33
|
-
spacing?:
|
|
35
|
+
spacing?:
|
|
36
|
+
| SpacingType
|
|
37
|
+
| {
|
|
38
|
+
top?: SpacingType;
|
|
39
|
+
right?: SpacingType;
|
|
40
|
+
bottom?: SpacingType;
|
|
41
|
+
left?: SpacingType;
|
|
42
|
+
};
|
|
34
43
|
/** Used to wrap children in a View when its style extrapolates the dimensions*/
|
|
35
44
|
wrapper?: boolean;
|
|
36
45
|
}
|
|
@@ -53,11 +62,24 @@ const GridItem = ({
|
|
|
53
62
|
return loadingComponent;
|
|
54
63
|
}
|
|
55
64
|
|
|
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
|
+
|
|
56
75
|
const style = {
|
|
57
76
|
...rest,
|
|
58
77
|
boxSizing: 'border-box',
|
|
59
78
|
flexBasis: `${100 / (columns / span)}%`,
|
|
60
|
-
|
|
79
|
+
paddingTop: getPadding('top'),
|
|
80
|
+
paddingBottom: getPadding('bottom'),
|
|
81
|
+
paddingRight: getPadding('right'),
|
|
82
|
+
paddingLeft: getPadding('left'),
|
|
61
83
|
};
|
|
62
84
|
|
|
63
85
|
const clone = React.cloneElement(children, {
|