@tecsinapse/react-core 1.17.3 → 1.19.0

package/dist/components/molecules/Grid/Item/Item.js

@@ -1,68 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNative = require("react-native");
-
-var _hooks = require("../../../../hooks");
-
-var _utils = require("../../../../utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const GridItem = ({
-  children,
-  span,
-  columns = 12,
-  loadingComponent,
-  loading = false,
-  spacing: _spacing,
-  wrapper = false,
-  ...rest
-}) => {
-  const {
-    spacing
-  } = (0, _hooks.useTheme)();
-
-  if (!_react.default.Children.only(children)) {
-    throw new Error('The number of children in GridItem should be one');
-  }
-
-  if (loadingComponent && loading) {
-    return loadingComponent;
-  }
-
-  const getPadding = pos => {
-    if (_spacing) {
-      if (typeof _spacing === 'string') return (0, _utils.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return (0, _utils.extractNumbersFromString)(spacing[_spacing[pos]]);
-      } else return undefined;
-    } else return undefined;
-  };
-
-  const style = { ...rest,
-    boxSizing: 'border-box',
-    flexBasis: `${100 / (columns / span)}%`,
-    paddingTop: getPadding('top'),
-    paddingBottom: getPadding('bottom'),
-    paddingRight: getPadding('right'),
-    paddingLeft: getPadding('left')
-  };
-
-  const clone = _react.default.cloneElement(children, { ...(children == null ? void 0 : children.props),
-    style: wrapper ? children == null ? void 0 : children.props.style : { ...style,
-      ...(children == null ? void 0 : children.props.style)
-    }
-  });
-
-  return wrapper ? _react.default.createElement(_reactNative.View, {
-    style: style
-  }, clone) : clone;
-};
-
-var _default = GridItem;
-exports.default = _default;
-//# sourceMappingURL=Item.js.map

package/dist/components/molecules/Grid/Item/Item.js.map

@@ -1 +0,0 @@
-{"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;;AACA;;AAEA;;;;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,sBAApB;;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,qCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAP,CADF,KAEK,IAAI,OAAOA,QAAP,KAAoB,QAApB,IAAgCA,QAAQ,CAACQ,GAAD,CAA5C,EAAmD;AACtD,eAAO,qCAAyBT,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,oBAAGA,QAAQ,CAAEyB,KAAb,CADyC;AAEzCT,IAAAA,KAAK,EAAET,OAAO,GACVP,QADU,oBACVA,QAAQ,CAAEyB,KAAV,CAAgBT,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGhB,QAAH,oBAAGA,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 { View } from 'react-native';\nimport { useTheme } from '../../../../hooks';\nimport { SpacingType } from '../../../../types/defaults';\nimport { extractNumbersFromString } from '../../../../utils';\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/dist/components/molecules/Grid/Item/index.d.ts

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

package/dist/components/molecules/Grid/Item/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/index.ts"],"names":[],"mappings":";;;;;AAAA","sourcesContent":["export { default as GridItem, IGridItem } from './Item';\n"],"file":"index.js"}

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

@@ -1,132 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Grid, { IGrid } from './Grid';
-import { GridItem } from './Item';
-import { Text } from '@tecsinapse/react-core';
-import { View } from 'react-native';
-import styled from '@emotion/native';
-
-export default {
-  title: 'Hybrid/Grid',
-  component: Grid,
-  subcomponents: { GridItem },
-};
-
-const Container = styled(View)`
-  background-color: orange;
-  padding: 2px;
-  border-width: 1px;
-  border-color: white;
-  border-style: solid;
-  border-radius: 8px;
-`;
-
-const TemplateGrid: Story<IGrid> = args => {
-  return (
-    <Grid {...args}>
-      <GridItem span={12}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem span={6}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem span={6}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem span={4} flexShrink={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem span={4} flexGrow={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem span={4} flexShrink={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem span={3}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem span={3}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem span={3}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem span={3}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-    </Grid>
-  );
-};
-
-export const WithGridItem = TemplateGrid.bind({});
-
-WithGridItem.args = {
-  spacing: 'mili',
-};
-
-const TemplateLayout: Story<IGrid> = args => {
-  return (
-    <Grid {...args}>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-    </Grid>
-  );
-};
-
-export const WithLayout = TemplateLayout.bind({});
-
-WithLayout.args = {
-  layout: [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]],
-  spacing: 'mili',
-};

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

@@ -1,87 +0,0 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import { GridItem } from './Item';
-import { SpacingType } from '@tecsinapse/react-core';
-
-export interface IGrid extends ViewProps {
-  children: JSX.Element[];
-  /** Layout should represent the multiplier of columns to fill the rows properly.
-   * Example:
-   * const layout = [
-   *   [6, 6], // Two elements on row
-   *   [4, 4, 4], // Three elements on row
-   *   [12], // One element on row
-   * ];
-   * */
-  layout?: number[][];
-  /** Number of grid columns to be considered (not the number of elements per row) */
-  columns?: number;
-  spacing?:
-    | SpacingType
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-      };
-}
-
-const Grid = ({
-  children,
-  columns = 12,
-  layout,
-  style,
-  spacing,
-  ...rest
-}: IGrid) => {
-  if (layout) {
-    const flatLayout = layout.flat();
-    return (
-      <View
-        style={[
-          style,
-          {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-          },
-        ]}
-        {...rest}
-      >
-        {React.Children.map(children, (child, index) => (
-          <GridItem
-            columns={columns}
-            span={flatLayout[index]}
-            spacing={spacing}
-          >
-            {child}
-          </GridItem>
-        ))}
-      </View>
-    );
-  }
-
-  return (
-    <View
-      style={[
-        style,
-        {
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        },
-      ]}
-      {...rest}
-    >
-      {React.Children.map(children, child => {
-        return React.cloneElement(child, {
-          ...child?.props,
-          columns,
-          spacing: child?.props.spacing ?? spacing,
-        });
-      })}
-    </View>
-  );
-};
-
-export default Grid;

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

@@ -1,93 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useTheme } from '../../../../hooks';
-import { SpacingType } from '../../../../types/defaults';
-import { extractNumbersFromString } from '../../../../utils';
-
-type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
-type FlexAlignBase = FlexPositioning | 'stretch';
-type FlexAlignType = FlexAlignBase | 'baseline';
-type FlexSpacing = 'space-between' | 'space-around';
-
-type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
-
-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
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: 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 getPadding = (pos: PaddingPosition) => {
-    if (_spacing) {
-      if (typeof _spacing === 'string')
-        return extractNumbersFromString(spacing[_spacing]);
-      else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return extractNumbersFromString(spacing[_spacing[pos]!]);
-      } else return undefined;
-    } else return undefined;
-  };
-
-  const style = {
-    ...rest,
-    boxSizing: 'border-box',
-    flexBasis: `${100 / (columns / span)}%`,
-    paddingTop: getPadding('top'),
-    paddingBottom: getPadding('bottom'),
-    paddingRight: getPadding('right'),
-    paddingLeft: getPadding('left'),
-  };
-
-  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

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