@tecsinapse/react-native-kit 1.22.1-beta.8 → 1.22.2

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+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};
+`;