@tecsinapse/react-native-kit 1.22.0 → 1.22.1-beta.2

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;

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

@@ -1,257 +0,0 @@
-import {
-  HintInputContainer,
-  InputContainerProps,
-  useInputFocus,
-} from '@tecsinapse/react-core';
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { useLazyModalManager } from '../../atoms/Modal';
-import { Text } from '../../atoms/Text';
-import { Modal } from './Modal';
-import { SelectIcon, StyledSelectionText } from './styled';
-
-export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
-  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
-  options: ((searchInput?: string) => Promise<Data[]>) | Data[];
-  onSelect: (
-    option: Type extends 'single' ? Data | undefined : Data[]
-  ) => never | void;
-  value: Type extends 'single' ? Data | null | undefined : Data[];
-  type: Type;
-
-  keyExtractor: (t: Data, index?: number) => string;
-  labelExtractor: (t: Data) => string;
-  groupKeyExtractor?: (t: Data) => string;
-
-  hideSearchBar?: boolean;
-  placeholder?: string;
-  onFocus?: () => void | never;
-  onBlur?: () => void | never;
-  onSearch?:
-    | ((searchArg: string) => void)
-    | ((searchInput?: string) => Promise<Data[]>)
-    | never;
-  searchBarPlaceholder?: string;
-  confirmButtonText?: string;
-  selectModalTitle?: string;
-  selectModalTitleComponent?: JSX.Element;
-  closeOnPick?: boolean;
-  controlComponent?: (
-    onPress: () => void,
-    displayValue?: string
-  ) => JSX.Element;
-  numberOfLines?: number;
-}
-
-function Select<Data, Type extends 'single' | 'multi'>({
-  /** Select props */
-  value,
-  options,
-  keyExtractor,
-  groupKeyExtractor,
-  onSelect,
-  type,
-  labelExtractor,
-  placeholder,
-  onFocus,
-  onBlur,
-  disabled,
-  onSearch,
-  selectModalTitle,
-  selectModalTitleComponent,
-  searchBarPlaceholder,
-  hideSearchBar,
-  confirmButtonText,
-  rightComponent,
-  variant = 'default',
-  hintComponent,
-  hint,
-  style,
-  controlComponent,
-  closeOnPick = type === 'single',
-  label,
-  numberOfLines,
-  ...rest
-}: SelectNativeProps<Data, Type>): JSX.Element {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-
-  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
-  const modal = useLazyModalManager();
-
-  // TODO: Add Skeleton to modal height when loading is true
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const onlyLabel = label && !placeholder;
-  const hasValue =
-    type === 'single' ? !!value : ((value || []) as []).length > 0;
-  const _placeholder = onlyLabel ? label : placeholder;
-  const _label = hasValue ? label : undefined;
-
-  useEffect(() => {
-    if (typeof options !== 'function') {
-      setSelectOptions(options);
-    }
-  }, [options]);
-
-  const handleLazyFocus = React.useCallback(async () => {
-    if (typeof options === 'function' && !onSearch) {
-      setLoading(true);
-      try {
-        const result = await options();
-        if (result) {
-          if (
-            value &&
-            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))
-          ) {
-            setSelectOptions([value as Data, ...result]);
-          } else setSelectOptions(result);
-        }
-      } catch (e) {
-        // TODO: Catch error
-      } finally {
-        setLoading(false);
-      }
-    }
-  }, [options, value, setSelectOptions]);
-
-  const handleOnSearch = React.useCallback(
-    async (searchInput: string | undefined) => {
-      if (searchInput !== undefined && onSearch) {
-        setLoading(true);
-        modal.requestUpdate();
-        try {
-          const result = await onSearch(searchInput);
-          if (result) {
-            if (type === 'single') {
-              if (
-                value &&
-                !result.find(
-                  v => keyExtractor(value as Data) === keyExtractor(v)
-                )
-              ) {
-                setSelectOptions([value as Data, ...result]);
-              } else setSelectOptions(result);
-            } else {
-              if ((value as Data[])?.length) {
-                const selectedValues =
-                  (value as Data[]).filter(
-                    v =>
-                      !result.find(
-                        current =>
-                          keyExtractor(v as Data) === keyExtractor(current)
-                      )
-                  ) || [];
-                setSelectOptions([...selectedValues, ...result]);
-              } else {
-                setSelectOptions(result);
-              }
-            }
-          }
-        } catch (e) {
-          // TODO: Catch error
-        } finally {
-          modal.requestUpdate();
-          setLoading(false);
-        }
-      }
-    },
-    [options, value, keyExtractor]
-  );
-
-  const getDisplayValue = React.useCallback(() => {
-    if (Array.isArray(value)) {
-      if (value.length === 0) return _placeholder;
-      else {
-        const options =
-          selectOptions.length > 0 ? selectOptions : (value as Data[]);
-        return options
-          ?.reduce(
-            (acc, option, index) =>
-              value.find(
-                key => keyExtractor(option, index) == keyExtractor(key, index)
-              )
-                ? acc + labelExtractor(option) + ', '
-                : acc,
-            ''
-          )
-          .slice(0, -2);
-      }
-    } else {
-      if (!value) return _placeholder;
-      const selectedOption = selectOptions?.find(
-        (option, index) =>
-          keyExtractor(option, index) == keyExtractor(value as Data, index)
-      );
-      return labelExtractor(selectedOption ?? (value as Data));
-    }
-  }, [_placeholder, value, selectOptions]);
-
-  modal.sync(
-    <Modal
-      options={selectOptions || []}
-      focused={true}
-      keyExtractor={keyExtractor}
-      labelExtractor={labelExtractor}
-      groupKeyExtractor={groupKeyExtractor}
-      searchBarPlaceholder={searchBarPlaceholder}
-      type={type}
-      onSelect={onSelect}
-      value={value}
-      hideSearchBar={hideSearchBar}
-      onSearch={handleOnSearch}
-      selectModalTitle={selectModalTitle}
-      selectModalTitleComponent={selectModalTitleComponent}
-      confirmButtonText={confirmButtonText}
-      loading={loading}
-      onClose={handleBlur}
-      closeOnPick={closeOnPick}
-    />
-  );
-
-  const handlePressInput = async () => {
-    modal.show();
-    handleFocus();
-    await handleLazyFocus();
-  };
-
-  return (
-    <>
-      {controlComponent ? (
-        controlComponent(handlePressInput, getDisplayValue() || '')
-      ) : (
-        <HintInputContainer
-          viewStyle={style}
-          onPress={handlePressInput}
-          focused={focused}
-          disabled={disabled}
-          LabelComponent={Text}
-          variant={variant}
-          hint={hint}
-          hintComponent={hintComponent}
-          label={_label}
-          rightComponent={
-            <>
-              <SelectIcon name="chevron-down" type="ionicon" size="centi" />
-              {rightComponent}
-            </>
-          }
-          {...rest}
-        >
-          <StyledSelectionText
-            numberOfLines={numberOfLines}
-            fontWeight="bold"
-            disabled={disabled}
-          >
-            {getDisplayValue() || ' '}
-          </StyledSelectionText>
-        </HintInputContainer>
-      )}
-    </>
-  );
-}
-
-export default Select;

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

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

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

@@ -1,97 +0,0 @@
-import styled, { css } from '@emotion/native';
-import {
-  Button,
-  ButtonProps,
-  disabledInputStyles,
-  Icon,
-  InputContainerProps,
-  PressableSurface,
-  PressableSurfaceProps,
-  RFValue,
-  RFValueStr,
-  StyleProps,
-} from '@tecsinapse/react-core';
-import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
-import { Input, InputNativeProps } from '../../atoms/Input';
-import { Text } from '../../atoms/Text';
-
-export const getStyledModal = (safeTop = 0) => {
-  return styled(View)<ModalProps & Partial<StyleProps>>`
-    padding-top: ${`${RFValue(safeTop)}px`};
-    background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
-    height: 100%;
-  `;
-};
-
-export const StyledSelectionText = styled(Text)(
-  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`
-    line-height: ${props.theme?.typography.h5.lineHeight};
-    ${disabledInputStyles(props)};
-  `
-);
-
-export const Dummy = styled(View)`
-  aspect-ratio: 1;
-  height: 100%;
-`;
-
-export const StyledPressableSurface = styled(
-  PressableSurface
-)<PressableSurfaceProps>`
-  width: 100%;
-`;
-
-export const Header = styled(View)<ViewProps & Partial<StyleProps>>`
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${({ theme }) => theme.spacing.deca};
-  height: ${RFValueStr('75px')};
-`;
-
-export const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
-  aspect-ratio: 1;
-  height: 100%;
-`;
-
-export const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.deca};
-  position: relative;
-`;
-
-export const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`
-  margin-bottom: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const ListItem = styled(PressableSurface)<
-  PressableSurfaceProps & Partial<StyleProps>
->`
-  border-bottom-width: ${RFValueStr('1px')};
-  border-color: ${({ theme }) => theme.color.secondary.light};
-  padding-vertical: ${({ theme }) => theme.spacing.mili};
-  padding-horizontal: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const ModalFooter = styled(View)<Partial<StyleProps>>`
-  width: 100%;
-  height: auto;
-  bottom: 0;
-  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
-  padding: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const SelectIcon = styled(Icon)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi};
-  color: ${({ theme }) => theme.color.secondary.medium};
-`;
-
-export const FetchIndicator = styled(ActivityIndicator)`
-  align-self: center;
-`;
-
-export const TextTitleModal = styled(Text)<Partial<StyleProps>>`
-  text-align: center;
-`;

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { SnackbarProps as SnackPropsCore } from '@tecsinapse/react-core';
-import { Text, TextNativeProps } from '../../atoms/Text';
-import { SnackbarStyled } from './styled';
-
-export interface SnackbarNativeProps extends Omit<SnackPropsCore, 'children'> {
-  value: string;
-  textProps?: TextNativeProps;
-}
-
-const Snackbar: React.FC<SnackbarNativeProps> = ({
-  value,
-  textProps = { colorVariant: 'primary', colorTone: 'medium' },
-  ...rest
-}) => {
-  return (
-    <SnackbarStyled {...rest}>
-      <Text {...textProps} fontWeight="bold" typography="base">
-        {value}
-      </Text>
-    </SnackbarStyled>
-  );
-};
-
-export default Snackbar;

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

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

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

@@ -1,7 +0,0 @@
-import styled from '@emotion/native';
-import { Snackbar as SnackbarCore, StyleProps } from '@tecsinapse/react-core';
-
-export const SnackbarStyled = styled(SnackbarCore)<Partial<StyleProps>>`
-  left: ${({ theme }) => theme.spacing.deca};
-  right: ${({ theme }) => theme.spacing.deca};
-`;