@tecsinapse/react-native-kit 1.18.4 → 1.19.0

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/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};
+      `;
+  }}
+`;

package/src/components/molecules/Select/Select.tsx

@@ -165,7 +165,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
     if (Array.isArray(value)) {
       if (value.length === 0) return _placeholder;
       else {
-        let options =
+        const options =
           selectOptions.length > 0 ? selectOptions : (value as Data[]);
         return options
           ?.reduce(
@@ -180,7 +180,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
           .slice(0, -2);
       }
     } else {
-      if (value === undefined) return _placeholder;
+      if (!value) return _placeholder;
       const selectedOption = selectOptions?.find(
         (option, index) =>
           keyExtractor(option, index) == keyExtractor(value as Data, index)

package/src/index.ts

@@ -1,33 +1,39 @@
 export * from '@tecsinapse/react-core';
-export { Header, HeaderProps } from './components/atoms/Header';
-export { Select, SelectNativeProps } from './components/molecules/Select';
-export { Input, InputNativeProps } from './components/atoms/Input';
-export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
-export { TextArea, TextAreaProps } from './components/atoms/TextArea';
-export { Text, TextNativeProps } from './components/atoms/Text';
+export { Avatar } from './components/atoms/Avatar';
+export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export {
+  BottomNavigator,
+  BottomNavigatorProps,
+} from './components/atoms/BottomNavigator';
+export {
+  Button,
+  ButtonNativeProps,
   Error,
   Loading,
   Success,
-  Button,
-  ButtonNativeProps,
 } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
+export { Header, HeaderProps } from './components/atoms/Header';
+export { Input, InputNativeProps } from './components/atoms/Input';
+export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
 export {
-  InputPassword,
-  InputPasswordNativeProps,
-} from './components/molecules/InputPassword';
-export {
-  BottomNavigator,
-  BottomNavigatorProps,
-} from './components/atoms/BottomNavigator';
-export { Tag, TagProps } from './components/atoms/Tag';
+  IBaseModal,
+  ModalGroupManager,
+  ModalLifecycleHandler,
+  ModalView,
+  useLazyModalManager,
+  useModalManager,
+  useModalRemoteControl,
+} from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
 export {
   SnappingSlider,
   SnappingSliderProps,
 } from './components/atoms/SnappingSlider';
-export { Badge, BadgeNativeProps } from './components/atoms/Badge';
-export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Tag, TagProps } from './components/atoms/Tag';
+export { Text, TextNativeProps } from './components/atoms/Text';
+export { TextArea, TextAreaProps } from './components/atoms/TextArea';
+export { Calendar } from './components/molecules/Calendar';
 export {
   DatePicker,
   NativeDatePickerProps,
@@ -36,16 +42,19 @@ export {
   DateTimePicker,
   NativeDateTimePickerProps,
 } from './components/molecules/DateTimePicker';
-export { Avatar } from './components/atoms/Avatar';
-export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
 export {
-  ModalGroupManager,
-  ModalView,
-  ModalLifecycleHandler,
-  useLazyModalManager,
-  useModalManager,
-  useModalRemoteControl,
-  IBaseModal,
-} from './components/atoms/Modal';
-export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+  IconTextButton,
+  NativeIconTextButtonProps,
+} from './components/molecules/IconTextButton';
+export {
+  InputPassword,
+  InputPasswordNativeProps,
+} from './components/molecules/InputPassword';
+export {
+  LabeledSwitch,
+  LabeledSwitchNativeProps,
+} from './components/molecules/LabeledSwitch';
+export { Select, SelectNativeProps } from './components/molecules/Select';
+export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Grid, GridItem } from './components/molecules/Grid';