@tecsinapse/react-native-kit 1.22.1 → 1.22.3

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

package/src/index.ts

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

package/src/utils/date.ts

@@ -1,17 +0,0 @@
-import { NativeModules, Platform } from 'react-native';
-import * as dateFnsLocales from 'date-fns/locale';
-
-export const getLocale = (): Locale => {
-  let locale: string;
-  if (Platform.OS === 'ios') {
-    locale =
-      NativeModules.SettingsManager.settings.AppleLocale ||
-      NativeModules.SettingsManager.settings.AppleLanguages[0];
-  } else {
-    locale = NativeModules.I18nManager.localeIdentifier;
-  }
-
-  const code = locale.replace('_', '');
-
-  return dateFnsLocales[code];
-};

package/tsconfig.build.esm.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declarationDir": "./esm",
-    "rootDir": "./src",
-    "baseUrl": "./"
-  },
-  "include": ["./src"]
-}

package/tsconfig.build.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declarationDir": "./dist",
-    "rootDir": "./src",
-    "baseUrl": "./"
-  },
-  "include": ["./src"]
-}