@tecsinapse/react-core 1.10.4 → 1.12.1

package/src/components/molecules/Grid/Item/Item.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  extractNumbersFromString,
+  SpacingType,
+  useTheme,
+} from '@tecsinapse/react-core';
+import { View } from 'react-native';
+
+type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+type FlexAlignBase = FlexPositioning | 'stretch';
+type FlexAlignType = FlexAlignBase | 'baseline';
+type FlexSpacing = 'space-between' | 'space-around';
+
+export interface IGridItem {
+  children: React.ReactElement;
+  /** Number of columns to fill */
+  span: number;
+  /** You don't have to give this property since is inherited from Grid */
+  columns?: number;
+  loading?: boolean;
+  /** If your GridItem has a loading state, specify the component here (Skeleton) */
+  loadingComponent?: React.ReactElement;
+  /** Flex properties below */
+  alignContent?: FlexAlignBase | FlexSpacing;
+  alignItems?: FlexAlignType;
+  alignSelf?: 'auto' | FlexAlignType;
+  flex?: number;
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexGrow?: number;
+  flexShrink?: number;
+  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+  /** You don't have to give this property since is inherited from Grid */
+  spacing?: SpacingType;
+  /** Used to wrap children in a View when its style extrapolates the dimensions*/
+  wrapper?: boolean;
+}
+
+const GridItem = ({
+  children,
+  span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  ...rest
+}: IGridItem) => {
+  const { spacing } = useTheme();
+  if (!React.Children.only(children)) {
+    throw new Error('The number of children in GridItem should be one');
+  }
+  if (loadingComponent && loading) {
+    return loadingComponent;
+  }
+
+  const style = {
+    ...rest,
+    boxSizing: 'border-box',
+    flexBasis: `${100 / (columns / span)}%`,
+    padding: _spacing ? extractNumbersFromString(spacing[_spacing]) : undefined,
+  };
+
+  const clone = React.cloneElement(children, {
+    ...children?.props,
+    style: wrapper
+      ? children?.props.style
+      : { ...style, ...children?.props.style },
+  });
+
+  return wrapper ? <View style={style}>{clone}</View> : clone;
+};
+
+export default GridItem;

package/src/components/molecules/Grid/Item/index.ts

@@ -0,0 +1 @@
+export { default as GridItem, IGridItem } from './Item';

package/src/components/molecules/Grid/index.ts

@@ -0,0 +1,2 @@
+export { GridItem, IGridItem } from './Item';
+export { default as Grid, IGrid } from './Grid';

package/src/index.ts

@@ -79,6 +79,7 @@ export {
   TextAreaProps,
   TextAreaInputBase,
 } from './components/molecules/TextArea';
+export { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';