@bigbinary/neetoui-rn 0.0.268 → 0.0.270

package/src/components/BottomSheet.jsx

@@ -1,487 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { StyleSheet, FlatList, Keyboard } from "react-native";
-
-import PropTypes from "prop-types";
-import Modal from "react-native-modal";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { moderateScale } from "react-native-size-matters";
-
-import {
-  Typography,
-  Container,
-  Touchable,
-  SearchBar,
-  Loader,
-} from "@components";
-
-import { Divider } from "./Divider";
-
-import { theme } from "../theme";
-
-const Title = ({
-  title,
-  bg,
-  isVisible,
-  hide,
-  titleContainerStyle,
-  titleTextStyle,
-  contentType,
-  canSearch,
-  setSearchText,
-  onDonePress,
-  searchBarProps,
-}) => {
-  let touchY;
-
-  useEffect(() => {
-    setSearchText("");
-  }, [isVisible, setSearchText]);
-
-  return (
-    <Container
-      bg={bg}
-      borderRadius={moderateScale(20)}
-      pb={moderateScale(12)}
-      onTouchStart={e => (touchY = e.nativeEvent.pageY)}
-      onTouchEnd={e => {
-        // Swipe Down Detection
-        if (e.nativeEvent.pageY - touchY > 20) hide();
-      }}
-      {...titleContainerStyle}
-    >
-      <Container flexDirection="row" justifyContent="space-between">
-        {title && (
-          <Typography textStyle="modalHeader" {...titleTextStyle}>
-            {title}
-          </Typography>
-        )}
-        {contentType && (
-          <Touchable
-            onPress={() => {
-              hide();
-              onDonePress();
-            }}
-          >
-            <Typography color="font.purple500" textStyle="modalHeader">
-              Done
-            </Typography>
-          </Touchable>
-        )}
-      </Container>
-      {canSearch && (
-        <SearchBar
-          containerProps={{ mt: moderateScale(16) }}
-          debounceDelay={200}
-          placeholder="Search"
-          showCancelButton={false}
-          onChangeText={setSearchText}
-          onCancel={() => {
-            setSearchText("");
-          }}
-          {...searchBarProps}
-        />
-      )}
-    </Container>
-  );
-};
-
-Title.propTypes = {
-  title: PropTypes.string,
-  isVisible: PropTypes.bool,
-  hide: PropTypes.func,
-  bg: PropTypes.string,
-  titleContainerStyle: PropTypes.object,
-  titleTextStyle: PropTypes.object,
-  contentType: PropTypes.oneOf(["checkbox", null]),
-  canSearch: PropTypes.bool,
-  setSearchText: PropTypes.func,
-  onDonePress: PropTypes.func,
-  searchBarProps: PropTypes.object,
-};
-
-/**
- * BottomSheet can be used to select an item from list of items. Like a DropDown
- *
- * <div class="screenshots">
- *   <img src="screenshots/bottomsheet/bottomsheet.png" />
- * </div>
- *
- * ## Usage
- * ```js
- * import React, { useState } from 'react';
- * import { Container, BottomSheet } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  const [isBottomSheetVisible, setBottomSheetVisibility] = useState(false);
- *  const [selectedItem, setSelectedItem] = useState(null);
- *  const data = ["neeto-ui-rn", "neeto-desk-rn", "neeto-hq"];
- *
- *  return (
- *    <Container>
- *     <BottomSheet
- *       maxHeight={moderateScale(200)}
- *       isVisible={isBottomSheetVisible}
- *       hide={() => {
- *         setBottomSheetVisibility(false);
- *       }}
- *       onItemPress={({item}) => {
- *         setSelectedItem(item);
- *       }}
- *       title="PROJECT"
- *       data={data}
- *       selectedItem={selectedItem}
- *       ContentRow={() => <CustomComponent />}
- *      />
- *   </Container>
- *  );
- * }
- * ```
- *
- * @extends StyledSystems props /styled-system
- */
-
-export const BottomSheet = ({
-  showCreateOption,
-  CreateItemComponent,
-  showCreateOptionLoader,
-  createSearchedOptionLabelStyle,
-  createOptionLabel,
-  onPressCreateOption,
-  createSearchedOptionContainerStyle,
-  data = [],
-  title,
-  hide,
-  isVisible,
-  onItemPress,
-  bg,
-  children,
-  titleContainerStyle,
-  titleTextStyle,
-  modalParams,
-  HeaderComponent,
-  ContentRow,
-  contentType,
-  canSearch,
-  onDonePress,
-  disabled,
-  noResultsLabelContainerStyle,
-  noResultsLabelStyle,
-  noResultsLabel,
-  NoResultsComponent,
-  labelExtractor,
-  valueExtractor,
-  selectedItem,
-  onBackdropPress,
-  searchBarProps,
-  shouldHideKeyboardOnScrollBegin = true,
-  shouldShowItemSeparator = true,
-  flatListRef,
-  ...rest
-}) => {
-  const [searchText, setSearchText] = useState("");
-
-  const getLabel = useCallback(
-    (item, index) => item?.label || labelExtractor(item, index) || item,
-    [labelExtractor]
-  );
-
-  const generatedData = useMemo(() => {
-    if (searchText.length) {
-      return data.filter(item =>
-        getLabel(item).toLowerCase().includes(searchText.toLowerCase())
-      );
-    }
-
-    return data;
-  }, [data, getLabel, searchText]);
-
-  const shouldHideCreateComponent = useMemo(() => {
-    const filteredItemCount = generatedData.filter(
-      data =>
-        getLabel(data).toLocaleLowerCase() === searchText.toLocaleLowerCase()
-    ).length;
-
-    return filteredItemCount > 0;
-  }, [generatedData, getLabel, searchText]);
-
-  const checkIsSelected = item => {
-    const itemValue = item?.value || valueExtractor(item) || item;
-    const selectedItemValue =
-      selectedItem?.value || valueExtractor(selectedItem) || selectedItem;
-
-    return itemValue === selectedItemValue;
-  };
-
-  return (
-    <Modal
-      avoidKeyboard
-      hideModalContentWhileAnimating
-      useNativeDriver
-      isVisible={isVisible}
-      style={styles.modalStyle}
-      onRequestClose={hide}
-      onBackdropPress={() => {
-        onBackdropPress();
-        hide();
-      }}
-      {...modalParams}
-    >
-      <SafeAreaView style={styles.safeAreaView}>
-        <Container
-          bg={bg}
-          borderTopLeftRadius={moderateScale(20)}
-          borderTopRightRadius={moderateScale(20)}
-          flexShrink={1}
-          p={moderateScale(16)}
-          {...rest}
-        >
-          {title && (
-            <Title
-              HeaderComponent={HeaderComponent}
-              bg={bg}
-              canSearch={canSearch}
-              contentType={contentType}
-              hide={hide}
-              isVisible={isVisible}
-              searchBarProps={searchBarProps}
-              searchText={searchText}
-              setSearchText={setSearchText}
-              title={title}
-              titleContainerStyle={titleContainerStyle}
-              titleTextStyle={titleTextStyle}
-              onDonePress={onDonePress}
-            />
-          )}
-          {data && (
-            <FlatList
-              data={generatedData}
-              initialNumToRender={data.length}
-              keyExtractor={(_item, index) => index}
-              keyboardShouldPersistTaps="handled"
-              ref={flatListRef}
-              showsVerticalScrollIndicator={false}
-              ItemSeparatorComponent={
-                shouldShowItemSeparator ? (
-                  <Divider bg="background.grey200" />
-                ) : null
-              }
-              ListFooterComponent={
-                <Container>
-                  {children}
-                  {!!searchText &&
-                    !generatedData.length &&
-                    !showCreateOption &&
-                    (NoResultsComponent ? (
-                      <NoResultsComponent />
-                    ) : (
-                      <Container
-                        alignItems="center"
-                        mb={moderateScale(2)}
-                        py={moderateScale(2)}
-                        {...noResultsLabelContainerStyle}
-                      >
-                        <Typography
-                          color="font.grey"
-                          fontFamily="sf600"
-                          fontSize="s"
-                          {...noResultsLabelStyle}
-                        >
-                          {noResultsLabel || "No options found"}
-                        </Typography>
-                      </Container>
-                    ))}
-                  {!disabled &&
-                    !shouldHideCreateComponent &&
-                    (showCreateOptionLoader ? (
-                      <Loader color={theme.colors.background.base} />
-                    ) : (
-                      !!searchText &&
-                      showCreateOption && (
-                        <Container>
-                          {CreateItemComponent ? (
-                            <CreateItemComponent searchText={searchText} />
-                          ) : (
-                            <Touchable
-                              alignItems="center"
-                              height={moderateScale(40)}
-                              justifyContent="center"
-                              onPress={() => onPressCreateOption(searchText)}
-                              {...createSearchedOptionContainerStyle}
-                            >
-                              <Typography
-                                color="font.grey"
-                                fontFamily="sf400"
-                                fontSize="s"
-                                {...createSearchedOptionLabelStyle}
-                              >
-                                {createOptionLabel ||
-                                  `Create ${searchText} option`}
-                              </Typography>
-                            </Touchable>
-                          )}
-                        </Container>
-                      )
-                    ))}
-                </Container>
-              }
-              renderItem={({ item, index }) => (
-                <ContentRow
-                  index={index}
-                  isSelected={checkIsSelected(item)}
-                  item={item}
-                  key={index}
-                  onPress={() => {
-                    !contentType && hide();
-                    onItemPress({ index, item });
-                  }}
-                />
-              )}
-              onScrollBeginDrag={
-                shouldHideKeyboardOnScrollBegin && Keyboard.dismiss
-              }
-            />
-          )}
-        </Container>
-      </SafeAreaView>
-    </Modal>
-  );
-};
-
-BottomSheet.defaultProps = {
-  bg: "background.primary",
-  showCreateOption: false,
-  showCreateOptionLoader: false,
-  createOptionLabel: null,
-  onPressCreateOption: () => {},
-  CreateItemComponent: null,
-  onDonePress: () => {},
-  valueExtractor: () => {},
-  labelExtractor: () => {},
-  onBackdropPress: () => {},
-  searchBarProps: {},
-};
-
-BottomSheet.propTypes = {
-  /**
-   * List of items.
-   */
-  data: PropTypes.array,
-  /**
-   * Title to be displayed in the bottom sheet header.
-   */
-  title: PropTypes.string,
-  /**
-   * If true bottom sheet will be shown.
-   */
-  isVisible: PropTypes.bool,
-  /**
-   * Callback that will be called on while hiding the bottom sheet.
-   */
-  hide: PropTypes.func,
-  /**
-   * Callback which returns the index of selected item.
-   */
-  onItemPress: PropTypes.func,
-  /**
-   * Callback that will be called on Done button press
-   */
-  onDonePress: PropTypes.func,
-  /**
-   * Background color.
-   */
-  bg: PropTypes.string,
-  /**
-   * To customize title container styles.
-   */
-  titleContainerStyle: PropTypes.object,
-  /**
-   * To customize title text styles.
-   */
-  titleTextStyle: PropTypes.object,
-  /**
-   * Show option to create the searched label if not present in the options list
-   */
-  showCreateOption: PropTypes.bool,
-  /**
-   * Show loader while creating a searched option not present in the options list
-   */
-  showCreateOptionLoader: PropTypes.bool,
-  /**
-   * Custom label for creating searched option not present in the options list
-   */
-  createOptionLabel: PropTypes.string,
-  /**
-   * Callback when create searched option is pressed
-   */
-  onPressCreateOption: PropTypes.func,
-  /**
-   * Component that renders when searched item doesn't exists
-   */
-  CreateItemComponent: PropTypes.func,
-  /**
-   * To customize empty options placeholder text style.
-   */
-  createSearchedOptionLabelStyle: PropTypes.object,
-  /**
-   * Flag will disable create item feature
-   */
-  disabled: PropTypes.bool,
-  /**
-   * To customize empty options placeholder container style.
-   */
-  createSearchedOptionContainerStyle: PropTypes.object,
-  noResultsLabelContainerStyle: PropTypes.object,
-  noResultsLabelStyle: PropTypes.object,
-  noResultsLabel: PropTypes.string,
-  NoResultsComponent: PropTypes.node,
-  /**
-   * Use custom key as label.
-   */
-  labelExtractor: PropTypes.func,
-  /**
-   * Use custom key as value.
-   */
-  valueExtractor: PropTypes.func,
-  /**
-   * Function to customize back drop press
-   */
-  onBackdropPress: PropTypes.func,
-  /**
-   * Currently selected item
-   */
-  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * Object to update the searchbar component
-   */
-  searchBarProps: PropTypes.object,
-  /**
-   * To support more Modal params.
-   */
-  modalParams: PropTypes.object,
-  children: PropTypes.node,
-  HeaderComponent: PropTypes.elementType,
-  ContentRow: PropTypes.elementType,
-  contentType: PropTypes.oneOf(["checkbox", null]),
-  canSearch: PropTypes.bool,
-  shouldHideKeyboardOnScrollBegin: PropTypes.bool,
-  shouldShowItemSeparator: PropTypes.bool,
-  flatListRef: PropTypes.object,
-};
-
-const styles = StyleSheet.create({
-  safeAreaView: {
-    maxHeight: "70%",
-    backgroundColor: theme.colors.background.primary,
-    borderTopRightRadius: moderateScale(20),
-    borderTopLeftRadius: moderateScale(20),
-  },
-  modalStyle: {
-    margin: 0,
-    justifyContent: "flex-end",
-    flex: 1,
-  },
-  inputContainerStyle: {
-    backgroundColor: "white",
-    borderRadius: moderateScale(10),
-  },
-});

package/src/components/BottomTabBar.jsx

@@ -1,232 +0,0 @@
-import React, { useEffect } from "react";
-import { StyleSheet, TouchableWithoutFeedback } from "react-native";
-
-import PropTypes from "prop-types";
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  interpolate,
-  Extrapolation,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { moderateScale } from "react-native-size-matters";
-
-import { Container, Typography } from "@components";
-
-const TabElement = ({
-  isFocused,
-  onPress,
-  label,
-  tabBarActiveTintColor,
-  tabBarInactiveTintColor,
-  icon: Icon,
-  size,
-}) => {
-  const offset = useSharedValue(isFocused ? 1 : 0);
-
-  useEffect(() => {
-    if (isFocused) {
-      offset.value = withTiming(1, { duration: 500 });
-    } else {
-      offset.value = withTiming(0, { duration: 0 });
-    }
-  }, [isFocused]);
-
-  const animatedStyles = useAnimatedStyle(() => ({
-    opacity: interpolate(offset.value, [0, 1], [1, 0], {
-      extrapolateRight: Extrapolation.CLAMP,
-    }),
-  }));
-
-  const animatedStyles2 = useAnimatedStyle(() => ({
-    opacity: interpolate(offset.value, [0, 0.9, 1], [0, 0.5, 1], {
-      extrapolateRight: Extrapolation.CLAMP,
-    }),
-    transform: [
-      {
-        scale: interpolate(offset.value, [0, 0.8, 1], [1, 1.2, 1], {
-          extrapolateRight: Extrapolation.CLAMP,
-        }),
-      },
-    ],
-  }));
-
-  return (
-    <TouchableWithoutFeedback onPress={onPress}>
-      <Container
-        alignItems="center"
-        borderColor="background.grey200"
-        borderTopWidth={moderateScale(1)}
-        flex={1}
-      >
-        <Container
-          alignItems="center"
-          height={moderateScale(35)}
-          mb={moderateScale(4)}
-          width={moderateScale(48)}
-        >
-          <Animated.View style={[styles.iconContainer, animatedStyles]}>
-            <Icon
-              size={size}
-              color={
-                isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor
-              }
-            />
-          </Animated.View>
-          <Animated.View style={[styles.iconContainer, animatedStyles2]}>
-            <Icon
-              size={size}
-              color={
-                isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor
-              }
-            />
-          </Animated.View>
-        </Container>
-        <Typography
-          color={isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor}
-          fontFamily="sf500"
-          fontSize="4xs"
-        >
-          {label}
-        </Typography>
-      </Container>
-    </TouchableWithoutFeedback>
-  );
-};
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    position: "absolute",
-    margin: moderateScale(10),
-  },
-});
-
-/**
- *
- * BottomTabBar is animated custom tabbar component which needs to used along with [React Navigation & Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/)
- * <div class="screenshots">
- *   <img src="screenshots/bottomTabBar/bottomTabBar-1.png" />
- *   <img src="screenshots/bottomTabBar/bottomTabBar-2.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Typography, BottomTabBar  } from '@bigbinary/neetoui-rn';
- * import { NavigationContainer } from '@react-navigation/native';
- * import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
- * import { ThemeContext } from "styled-components/native";
- * import { moderateScale } from "react-native-size-matters";
- *
- * const Tab = createBottomTabNavigator();
- *
- * const HomeScreen = () => {
- *  return (
- *   <Typography fontSize="14px">Home Screen</Typography>
- *  )
- * }
- *
- * const SettingsScreen = () => {
- *   return (
- *     <Typography fontSize="14px">Settings Screen</Typography>
- *   )
- * }
- *
- * export default function Main() {
- *  const theme = useContext(ThemeContext);
- *  return (
- *    <Tab.Navigator
- *      screenOptions={{
- *        tabBarActiveTintColor: theme.colors.background.base,
- *        tabBarInactiveTintColor: theme.colors.background.grey500,
- *      }}
- *      tabBar={props => <BottomTabBar {...props} />}
- *    >
- *      <Tab.Screen name="Home" component={HomeScreen}
- *        options={{
- *          customTabBarProps: {
- *            icon: "home-5-line",
- *            size: moderateScale(26),
- *          },
- *        }}
- *      />
- *      <Tab.Screen name="Settings" component={SettingsScreen}
- *        options={{
- *          customTabBarProps: {
- *            icon: "user-3-line",
- *            size: moderateScale(26),
- *          },
- *        }} />
- *    </Tab.Navigator>
- *  );
- * }
- * ```
- *
- */
-
-export const BottomTabBar = ({ state, descriptors, navigation }) => {
-  const { bottom } = useSafeAreaInsets();
-
-  return (
-    <Container
-      bg="background.white"
-      flexDirection="row"
-      height={bottom === 0 ? moderateScale(63) : moderateScale(83)}
-    >
-      {state.routes.map(({ key, name }, index) => {
-        const { options } = descriptors[key];
-        const isFocused = state.index === index;
-        const { icon, size } = options?.customTabBarProps || {};
-        const { tabBarActiveTintColor, tabBarInactiveTintColor } = options;
-        const onPress = () => {
-          const event = navigation.emit({
-            type: "tabPress",
-            target: key,
-            canPreventDefault: true,
-          });
-
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate({ name, merge: true });
-          }
-        };
-
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : name;
-
-        return (
-          <TabElement
-            icon={icon}
-            isFocused={isFocused}
-            key={index}
-            label={label}
-            size={size}
-            tabBarActiveTintColor={tabBarActiveTintColor}
-            tabBarInactiveTintColor={tabBarInactiveTintColor}
-            onPress={onPress}
-          />
-        );
-      })}
-    </Container>
-  );
-};
-
-TabElement.propTypes = {
-  isFocused: PropTypes.bool,
-  onPress: PropTypes.func,
-  label: PropTypes.string,
-  tabBarActiveTintColor: PropTypes.string,
-  tabBarInactiveTintColor: PropTypes.string,
-  icon: PropTypes.elementType,
-  size: PropTypes.number,
-};
-
-BottomTabBar.propTypes = {
-  state: PropTypes.object,
-  descriptors: PropTypes.object,
-  navigation: PropTypes.object,
-};