@tecsinapse/react-native-kit 1.18.6 → 1.21.0

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,6 +1,6 @@
 import {
   DateTimePicker as DateTimePickerCore,
-  DateTimePickerProps
+  DateTimePickerProps,
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { getLocale } from '../../../utils/date';
@@ -8,11 +8,19 @@ import { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';
 import { Text } from '../../atoms/Text';
 import { DateTimeSelector } from '../DateTimeSelector';
 
-export type NativeDateTimePickerProps = Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>
+export type NativeDateTimePickerProps = Omit<
+  DateTimePickerProps,
+  | 'DateTimeSelectorComponent'
+  | 'renderSelector'
+  | 'requestCloseSelector'
+  | 'requestShowSelector'
+>;
 
-export const DateTimePicker: FC<NativeDateTimePickerProps> = ({ locale, ...rest }) => {
-
-  const modal = useLazyModalManager()
+export const DateTimePicker: FC<NativeDateTimePickerProps> = ({
+  locale,
+  ...rest
+}) => {
+  const modal = useLazyModalManager();
 
   return (
     <DateTimePickerCore
@@ -22,19 +30,13 @@ export const DateTimePicker: FC<NativeDateTimePickerProps> = ({ locale, ...rest
       locale={locale ?? getLocale()}
       requestShowSelector={() => modal.show()}
       requestCloseSelector={() => modal.close()}
-      renderSelector={(selector, blur) => modal.sync(
-        <NativeModal onClose={blur}>
-          {selector}
-        </NativeModal>
-      )}
+      renderSelector={(selector, blur) =>
+        modal.sync(<NativeModal onClose={blur}>{selector}</NativeModal>)
+      }
     />
   );
 };
 
 const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
-  return (
-    <ModalView {...others}>
-      {children}
-    </ModalView>
-  )
-}
+  return <ModalView {...others}>{children}</ModalView>;
+};

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -6,7 +6,10 @@ import React, { FC } from 'react';
 import { Text } from '../../atoms/Text';
 import { getLocale } from '../../../utils/date';
 
-export const DateTimeSelector: FC<DateTimeSelectorProps> = ({locale, ...rest}) => {
+export const DateTimeSelector: FC<DateTimeSelectorProps> = ({
+  locale,
+  ...rest
+}) => {
   return (
     <DateTimeSelectorCore
       {...rest}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { GridItem } from './Item';
+import { IGrid } from '@tecsinapse/react-core';
+
+export type IGridNative = IGrid & ViewProps;
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}: IGridNative): JSX.Element => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return (
+      <View
+        style={[
+          style,
+          {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}
+        {...rest}
+      >
+        {React.Children.map(children, (child, index) => (
+          <GridItem
+            key={`child-${index}`}
+            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, index) => {
+        return React.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+          key: `child-${index}`,
+        });
+      })}
+    </View>
+  );
+};
+
+export default Grid;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import {
+  IGridItem,
+  useTheme,
+  getGridItemColumSpan,
+  getGridItemPadding,
+} from '@tecsinapse/react-core';
+
+export type IGridItemNative = IGridItem &
+  ViewProps & {
+    /** Only specify this property if the GridItem will be 'dynamic', adjusting itself to content. Use this with `wrapper` for better result. */
+    flexBasis?: string | 'auto';
+  };
+
+const GridItem = ({
+  children,
+  span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  justifyContent,
+  flexBasis,
+  style,
+  ...rest
+}: IGridItemNative): JSX.Element => {
+  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 = {
+    alignContent,
+    alignItems,
+    alignSelf,
+    flex,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    justifyContent,
+    boxSizing: 'border-box',
+    flexBasis: flexBasis ?? `${getGridItemColumSpan(columns, span)}%`,
+    paddingTop: getGridItemPadding('top', _spacing, spacing),
+    paddingBottom: getGridItemPadding('bottom', _spacing, spacing),
+    paddingRight: getGridItemPadding('right', _spacing, spacing),
+    paddingLeft: getGridItemPadding('left', _spacing, spacing),
+  };
+
+  const clone = React.cloneElement(children, {
+    ...children?.props,
+    style: wrapper
+      ? children?.props.style
+      : { ..._style, ...children?.props.style },
+  });
+
+  return wrapper ? (
+    <View {...rest} style={[style, _style]}>
+      {clone}
+    </View>
+  ) : (
+    clone
+  );
+};
+
+export default GridItem;

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

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

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

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

package/src/components/molecules/IconTextButton/IconTextButton.tsx

@@ -0,0 +1,55 @@
+import {
+  fontColorVC,
+  IconComponent,
+  IconTextButtonProps,
+} from '@tecsinapse/react-core';
+import React from 'react';
+import { ButtonNativeProps } from '../../atoms/Button';
+import { StyledIconTextButton } from './styled';
+import TextComponent from './TextComponent';
+
+export type NativeIconTextButtonProps = IconTextButtonProps &
+  Omit<ButtonNativeProps, 'ButtonProps'>;
+
+const IconTextButton: React.FC<NativeIconTextButtonProps> = ({
+  iconProps,
+  iconPosition = 'left',
+  textProps,
+  label,
+  variant = 'filled',
+  size = 'default',
+  ...rest
+}) => {
+  return (
+    <StyledIconTextButton boxed={!label} variant={variant} {...rest}>
+      {iconPosition === 'left' ? (
+        <IconComponent
+          iconProps={iconProps}
+          size={size}
+          defaultFontColor={fontColorVC[variant]}
+        />
+      ) : (
+        <></>
+      )}
+      <TextComponent
+        label={label}
+        defaultFontColor={fontColorVC[variant]}
+        hasIcon={!!iconProps}
+        iconPosition={iconPosition}
+        textProps={textProps}
+        size={size}
+      />
+      {iconPosition === 'right' ? (
+        <IconComponent
+          iconProps={iconProps}
+          size={size}
+          defaultFontColor={fontColorVC[variant]}
+        />
+      ) : (
+        <></>
+      )}
+    </StyledIconTextButton>
+  );
+};
+
+export default IconTextButton;

package/src/components/molecules/IconTextButton/TextComponent.tsx

@@ -0,0 +1,43 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  IconPositionOptions,
+  TextProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { StyledText } from './styled';
+
+interface TextComponentProps {
+  textProps?: TextProps;
+  size?: ButtonSizeType;
+  defaultFontColor: keyof FontColor;
+  label?: string;
+  iconPosition?: IconPositionOptions;
+  hasIcon?: boolean;
+}
+
+const TextComponent: FC<TextComponentProps> = ({
+  textProps,
+  size = 'default',
+  defaultFontColor,
+  label,
+  iconPosition = 'left',
+  hasIcon = false,
+}) => {
+  return label ? (
+    <StyledText
+      typography={textProps?.typography ?? size === 'small' ? 'sub' : 'base'}
+      fontWeight={textProps?.fontWeight ?? 'bold'}
+      fontColor={textProps?.fontColor ?? defaultFontColor}
+      iconPosition={iconPosition}
+      hasIcon={hasIcon}
+      {...textProps}
+    >
+      {label}
+    </StyledText>
+  ) : (
+    <></>
+  );
+};
+
+export default React.memo(TextComponent);

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

@@ -0,0 +1,4 @@
+export {
+  default as IconTextButton,
+  NativeIconTextButtonProps,
+} from './IconTextButton';

package/src/components/molecules/IconTextButton/styled.ts

@@ -0,0 +1,35 @@
+import styled, { css } from '@emotion/native';
+import { IconPositionOptions, StyleProps } from '@tecsinapse/react-core';
+import { Button } from '../../atoms/Button';
+import { Text } from '../../atoms/Text';
+
+const boxedStyle = ({ theme }: Partial<StyleProps>) => `
+    padding: ${theme?.spacing.centi};
+    aspect-ratio: 1;
+  `;
+
+export const StyledIconTextButton = styled(Button)<
+  Partial<StyleProps> & {
+    boxed: boolean;
+  }
+>`
+  ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
+`;
+
+export const StyledText = styled(Text)<
+  Partial<StyleProps> & {
+    iconPosition: IconPositionOptions;
+    hasIcon?: boolean;
+  }
+>`
+  ${({ theme, iconPosition, hasIcon = false }) => {
+    if (hasIcon && iconPosition === 'left')
+      return css`
+        margin-left: ${theme?.spacing.mili};
+      `;
+    else if (hasIcon && iconPosition === 'right')
+      return css`
+        margin-right: ${theme?.spacing.mili};
+      `;
+  }}
+`;

package/src/components/molecules/InputPassword/InputPassword.tsx

@@ -1,10 +1,11 @@
 import { InputPasswordIcon } from '@tecsinapse/react-core';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { Input, InputNativeProps } from '../../atoms/Input';
+import { TextInput } from 'react-native';
 
 export type InputPasswordNativeProps = InputNativeProps;
 
-const InputPassword: FC<InputPasswordNativeProps> = React.forwardRef(
+const InputPassword = React.forwardRef<TextInput, InputPasswordNativeProps>(
   ({ rightComponent, ...rest }, ref) => {
     const [revealed, setRevealed] = useState(false);
     return (

package/src/components/molecules/LabeledSwitch/LabelComponent.tsx

@@ -0,0 +1,46 @@
+import {
+  FontColor,
+  FontWeight,
+  LabelPositionOptions,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Pressable, PressableProps } from 'react-native';
+import { TextNativeProps } from '../../atoms/Text';
+import { StyledLabel } from './styled';
+
+export interface LabelComponentProps extends PressableProps {
+  label: string;
+  labelPosition: LabelPositionOptions;
+  labelProps?: TextNativeProps;
+  active: boolean;
+  switchDisabled?: boolean;
+}
+
+const LabelComponent: FC<LabelComponentProps> = ({
+  label,
+  labelPosition,
+  labelProps,
+  active,
+  switchDisabled = false,
+  ...rest
+}) => {
+  const defaultFontColor: keyof FontColor =
+    active && !switchDisabled ? 'dark' : 'medium';
+  const defaultFontWeight: keyof FontWeight =
+    active && !switchDisabled ? 'bold' : 'regular';
+
+  return (
+    <Pressable {...rest}>
+      <StyledLabel
+        labelPosition={labelPosition}
+        fontColor={labelProps?.fontColor ?? defaultFontColor}
+        fontWeight={labelProps?.fontWeight ?? defaultFontWeight}
+        {...labelProps}
+      >
+        {label}
+      </StyledLabel>
+    </Pressable>
+  );
+};
+
+export default React.memo(LabelComponent);

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx

@@ -0,0 +1,59 @@
+import { LabeledSwitchProps, Switch } from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { TextNativeProps } from '../../atoms/Text';
+import LabelComponent from './LabelComponent';
+import { StyledView } from './styled';
+
+export type LabeledSwitchNativeProps = LabeledSwitchProps & {
+  labelProps?: TextNativeProps;
+};
+
+const LabeledSwitch: FC<LabeledSwitchNativeProps> = ({
+  label,
+  labelPosition = 'right',
+  labelProps,
+  pressableLabel = false,
+  active,
+  disabled,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <StyledView>
+      {labelPosition === 'left' ? (
+        <LabelComponent
+          active={active}
+          label={label}
+          labelPosition={'left'}
+          labelProps={labelProps}
+          disabled={!pressableLabel || disabled}
+          switchDisabled={disabled}
+          onPress={() => onChange(!active)}
+        />
+      ) : (
+        <></>
+      )}
+      <Switch
+        active={active}
+        onChange={onChange}
+        disabled={disabled}
+        {...rest}
+      />
+      {labelPosition === 'right' ? (
+        <LabelComponent
+          active={active}
+          label={label}
+          labelPosition={'right'}
+          labelProps={labelProps}
+          disabled={!pressableLabel || disabled}
+          switchDisabled={disabled}
+          onPress={() => onChange(!active)}
+        />
+      ) : (
+        <></>
+      )}
+    </StyledView>
+  );
+};
+
+export default LabeledSwitch;

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

@@ -0,0 +1,4 @@
+export {
+  default as LabeledSwitch,
+  LabeledSwitchNativeProps,
+} from './LabeledSwitch';

package/src/components/molecules/LabeledSwitch/styled.ts

@@ -0,0 +1,27 @@
+import styled, { css } from '@emotion/native';
+import { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import { Text } from '../../atoms/Text';
+
+export const StyledView = styled(View)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const StyledLabel = styled(Text)<
+  Partial<StyleProps> & {
+    labelPosition: LabelPositionOptions;
+  }
+>`
+  ${({ theme, labelPosition }) => {
+    if (labelPosition === 'right')
+      return css`
+        margin-left: ${theme?.spacing.centi};
+      `;
+    else if (labelPosition === 'left')
+      return css`
+        margin-right: ${theme?.spacing.centi};
+      `;
+  }}
+`;