@tecsinapse/react-core 1.12.0 → 1.12.1
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
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.0...@tecsinapse/react-core@1.12.1) (2021-12-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* wrapper on gridItem. ([db99917](https://github.com/tecsinapse/design-system/commit/db999176d1440ed12b91a041fbfb850f76b3b867))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [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
18
|
|
|
8
19
|
|
|
@@ -19,6 +19,7 @@ export interface IGridItem {
|
|
|
19
19
|
flexShrink?: number;
|
|
20
20
|
justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
|
|
21
21
|
spacing?: SpacingType;
|
|
22
|
+
wrapper?: boolean;
|
|
22
23
|
}
|
|
23
|
-
declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, ...rest }: IGridItem) =>
|
|
24
|
+
declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
|
|
24
25
|
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,21 @@ const GridItem = ({
|
|
|
32
35
|
return loadingComponent;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
const style = { ...rest,
|
|
39
|
+
boxSizing: 'border-box',
|
|
40
|
+
flexBasis: `${100 / (columns / span)}%`,
|
|
41
|
+
padding: _spacing ? (0, _reactCore.extractNumbersFromString)(spacing[_spacing]) : undefined
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const clone = _react.default.cloneElement(children, { ...(children === null || children === void 0 ? void 0 : children.props),
|
|
45
|
+
style: wrapper ? children === null || children === void 0 ? void 0 : children.props.style : { ...style,
|
|
46
|
+
...(children === null || children === void 0 ? void 0 : children.props.style)
|
|
41
47
|
}
|
|
42
48
|
});
|
|
49
|
+
|
|
50
|
+
return wrapper ? _react.default.createElement(_reactNative.View, {
|
|
51
|
+
style: style
|
|
52
|
+
}, clone) : clone;
|
|
43
53
|
};
|
|
44
54
|
|
|
45
55
|
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","style","boxSizing","flexBasis","padding","undefined","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;AA+BA,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,KAAK,GAAG,EACZ,GAAGL,IADS;AAEZM,IAAAA,SAAS,EAAE,YAFC;AAGZC,IAAAA,SAAS,EAAG,GAAE,OAAOb,OAAO,GAAGD,IAAjB,CAAuB,GAHzB;AAIZe,IAAAA,OAAO,EAAEV,QAAQ,GAAG,yCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAH,GAAiDW;AAJtD,GAAd;;AAOA,QAAMC,KAAK,GAAGT,eAAMU,YAAN,CAAmBnB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEoB,KAAb,CADyC;AAEzCP,IAAAA,KAAK,EAAEN,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEoB,KAAV,CAAgBP,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGb,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEoB,KAAV,CAAgBP,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAON,OAAO,GAAG,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEM;AAAb,KAAqBK,KAArB,CAAH,GAAwCA,KAAtD;AACD,CAjCD;;eAmCenB,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\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?: SpacingType;\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 style = {\n ...rest,\n boxSizing: 'border-box',\n flexBasis: `${100 / (columns / span)}%`,\n padding: _spacing ? extractNumbersFromString(spacing[_spacing]) : undefined,\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.1",
|
|
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": "50b3fc522e7726e43f9dd16d9681faf0a1e5a4d6"
|
|
35
35
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
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';
|
|
@@ -26,6 +31,8 @@ export interface IGridItem {
|
|
|
26
31
|
justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
|
|
27
32
|
/** You don't have to give this property since is inherited from Grid */
|
|
28
33
|
spacing?: SpacingType;
|
|
34
|
+
/** Used to wrap children in a View when its style extrapolates the dimensions*/
|
|
35
|
+
wrapper?: boolean;
|
|
29
36
|
}
|
|
30
37
|
|
|
31
38
|
const GridItem = ({
|
|
@@ -35,6 +42,7 @@ const GridItem = ({
|
|
|
35
42
|
loadingComponent,
|
|
36
43
|
loading = false,
|
|
37
44
|
spacing: _spacing,
|
|
45
|
+
wrapper = false,
|
|
38
46
|
...rest
|
|
39
47
|
}: IGridItem) => {
|
|
40
48
|
const { spacing } = useTheme();
|
|
@@ -45,18 +53,21 @@ const GridItem = ({
|
|
|
45
53
|
return loadingComponent;
|
|
46
54
|
}
|
|
47
55
|
|
|
48
|
-
|
|
56
|
+
const style = {
|
|
57
|
+
...rest,
|
|
58
|
+
boxSizing: 'border-box',
|
|
59
|
+
flexBasis: `${100 / (columns / span)}%`,
|
|
60
|
+
padding: _spacing ? extractNumbersFromString(spacing[_spacing]) : undefined,
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const clone = React.cloneElement(children, {
|
|
49
64
|
...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
|
-
},
|
|
65
|
+
style: wrapper
|
|
66
|
+
? children?.props.style
|
|
67
|
+
: { ...style, ...children?.props.style },
|
|
59
68
|
});
|
|
69
|
+
|
|
70
|
+
return wrapper ? <View style={style}>{clone}</View> : clone;
|
|
60
71
|
};
|
|
61
72
|
|
|
62
73
|
export default GridItem;
|