@tecsinapse/react-native-kit 1.22.1 → 1.22.3

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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-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,33 +0,0 @@
-import { InputPasswordIcon } from '@tecsinapse/react-core';
-import React, { useState } from 'react';
-import { Input, InputNativeProps } from '../../atoms/Input';
-import { TextInput } from 'react-native';
-
-export type InputPasswordNativeProps = InputNativeProps;
-
-const InputPassword = React.forwardRef<TextInput, InputPasswordNativeProps>(
-  ({ rightComponent, ...rest }, ref) => {
-    const [revealed, setRevealed] = useState(false);
-    return (
-      <Input
-        {...rest}
-        ref={ref}
-        secureTextEntry={!revealed}
-        rightComponent={
-          <>
-            <InputPasswordIcon
-              onChangeState={setRevealed}
-              revealed={revealed}
-              effect="none"
-            />
-            {rightComponent}
-          </>
-        }
-      />
-    );
-  }
-);
-
-InputPassword.displayName = 'InputPassword';
-
-export default InputPassword;

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

@@ -1,2 +0,0 @@
-export { default as InputPassword } from './InputPassword';
-export type { InputPasswordNativeProps } from './InputPassword';

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

@@ -1,46 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
-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/Modal.tsx

@@ -1,263 +0,0 @@
-import {
-  Checkbox,
-  getStatusBarHeight,
-  RadioButton,
-  RFValue,
-  useDebouncedState,
-} from '@tecsinapse/react-core';
-import * as React from 'react';
-import { FlatList, ListRenderItemInfo, View } from 'react-native';
-import { Button } from '../../atoms/Button';
-import { Header } from '../../atoms/Header';
-import { Input } from '../../atoms/Input';
-import { IBaseModal, ModalView } from '../../atoms/Modal';
-import { Text } from '../../atoms/Text';
-import { SelectNativeProps } from './Select';
-import {
-  FetchIndicator,
-  getStyledModal,
-  ListItem,
-  ModalFooter,
-  SearchBarContainer,
-  SelectIcon,
-  TextTitleModal,
-} from './styled';
-
-interface LoadingProps {
-  loading?: boolean;
-}
-
-const Component = <Data, Type extends 'single' | 'multi'>({
-  options,
-  keyExtractor,
-  labelExtractor,
-  hideSearchBar,
-  searchBarPlaceholder,
-  focused,
-  type,
-  value,
-  onSelect,
-  onSearch,
-  selectModalTitle,
-  selectModalTitleComponent,
-  confirmButtonText,
-  loading,
-  close,
-  closeOnPick,
-  ...others
-}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {
-  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);
-  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
-  const ModalComponent = React.useMemo(
-    () => getStyledModal(getStatusBarHeight(true)),
-    []
-  );
-  const _closeOnPick = closeOnPick && type === 'single';
-
-  // Resets the temporary state to the initial state whenever the
-  // modal is reopened or the value changes
-  React.useEffect(() => {
-    setSelectedValues(
-      (value ? (type === 'multi' ? value : [value]) : []) as Data[]
-    );
-  }, [value, focused, setSelectedValues]);
-
-  const getData = React.useCallback(
-    (options: Data[]) => {
-      return options?.map((option, index) => ({
-        ...option,
-        _checked:
-          type === 'multi'
-            ? !!selectedValues.find(
-                value =>
-                  keyExtractor(option, index) == keyExtractor(value, index)
-              )
-            : keyExtractor((selectedValues[0] || {}) as Data, index) ==
-              keyExtractor(option, index),
-      }));
-    },
-    [keyExtractor, selectedValues, type]
-  );
-
-  const data = React.useMemo(
-    () => (typeof options !== 'function' ? getData(options) : []),
-    [options, getData]
-  );
-
-  const handlePressItem = React.useCallback(
-    (option: Data) => {
-      setSelectedValues(selectedValues => {
-        if (type === 'multi') {
-          const newArr: Data[] = [];
-          let found = false;
-          for (const value of selectedValues) {
-            if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);
-            else found = true;
-          }
-          if (!found) newArr.push(option);
-          return newArr;
-        }
-        return keyExtractor((selectedValues[0] || {}) as Data) ===
-          keyExtractor(option)
-          ? []
-          : [option];
-      });
-    },
-    [selectedValues, setSelectedValues, keyExtractor, type]
-  );
-
-  React.useEffect(() => {
-    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
-      handleConfirm();
-    }
-  }, [selectedValues[0], value, closeOnPick]);
-
-  const handleConfirm = React.useCallback(() => {
-    // TS Workaround since TS won't infer the ternary operator's result type correctly
-    type OnSelectArg = Parameters<typeof onSelect>[0];
-    onSelect(
-      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg
-    );
-    close?.();
-  }, [selectedValues]);
-
-  const optionBuilder = React.useCallback(
-    ({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (
-      <MemoizedOption
-        item={item}
-        type={type}
-        handlePressItem={handlePressItem}
-        labelExtractor={labelExtractor}
-      />
-    ),
-    []
-  );
-
-  const anyChecked = data.filter(item => item._checked).length;
-  const dataLengthChanged = data.length;
-
-  const memoizedFlatlist = React.useMemo(
-    () => (
-      <FlatList
-        data={data}
-        keyExtractor={keyExtractor}
-        fadingEdgeLength={200}
-        renderItem={optionBuilder}
-      />
-    ),
-    [selectedValues, anyChecked, dataLengthChanged]
-  );
-
-  const titleTextModal = selectModalTitle ? (
-    <TextTitleModal
-      typography="h4"
-      fontWeight="bold"
-      numberOfLines={3}
-      style={{ maxWidth: RFValue(250) }}
-    >
-      {selectModalTitle}
-    </TextTitleModal>
-  ) : null;
-
-  const headerContent = selectModalTitleComponent
-    ? selectModalTitleComponent
-    : titleTextModal;
-
-  return (
-    <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>
-      <Header
-        rightButton={{
-          onPress: close,
-          icon: {
-            name: 'close',
-            type: 'material-community',
-            fontColor: 'light',
-          },
-        }}
-      >
-        {headerContent}
-      </Header>
-
-      {!hideSearchBar && (
-        <SearchBarContainer>
-          <Input
-            placeholder={searchBarPlaceholder}
-            value={searchArg}
-            onChange={setSearchArg}
-            leftComponent={
-              <SelectIcon name="search" type="ionicon" size="centi" />
-            }
-          />
-        </SearchBarContainer>
-      )}
-
-      {loading && (
-        <FetchIndicator animating={true} color={'grey'} size={'large'} />
-      )}
-
-      {memoizedFlatlist}
-
-      {!_closeOnPick && (
-        <ModalFooter>
-          <Button
-            variant={'filled'}
-            color={'primary'}
-            onPress={handleConfirm}
-            disabled={loading}
-          >
-            <Text fontColor={'light'} fontWeight="bold">
-              {confirmButtonText}
-            </Text>
-          </Button>
-        </ModalFooter>
-      )}
-    </ModalView>
-  );
-};
-
-interface IOption<T> {
-  item: T & { _checked: boolean };
-  type: 'single' | 'multi';
-  labelExtractor: (option: T) => string;
-  handlePressItem: (option: T) => void;
-}
-
-const MemoizedOption = <T,>({
-  handlePressItem,
-  labelExtractor,
-  item,
-  type,
-}: IOption<T>): JSX.Element => {
-  return React.useMemo(() => {
-    const label = labelExtractor(item);
-    return (
-      <ListItem onPress={() => handlePressItem(item)}>
-        <View pointerEvents={'none'}>
-          {type === 'multi' ? (
-            <Checkbox
-              color={'primary'}
-              labelPosition={'right'}
-              checked={item._checked}
-            >
-              <Text fontWeight={item._checked ? 'bold' : 'regular'}>
-                {label}
-              </Text>
-            </Checkbox>
-          ) : (
-            <RadioButton
-              color={'primary'}
-              labelPosition={'right'}
-              checked={item._checked}
-            >
-              <Text fontWeight={item._checked ? 'bold' : 'regular'}>
-                {label}
-              </Text>
-            </RadioButton>
-          )}
-        </View>
-      </ListItem>
-    );
-  }, [item._checked]);
-};
-
-export const Modal = Component;