@bigbinary/neetoui-rn 0.0.125 → 0.0.128

package/src/components/OtpInputs.js

@@ -53,7 +53,7 @@ const styles = {
   },
   defaultTextStyles: {
     fontSize: theme.fontSizes.xl,
-    fontFamily: theme.fonts.inter700,
+    fontFamily: theme.fonts.sf700,
   },
 };
 

package/src/components/Popover.js

@@ -45,7 +45,19 @@ PopOverItem.propTypes = {
   fontFamily: PropTypes.string,
   fontSize: PropTypes.oneOfType([
     PropTypes.number,
-    PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
+    PropTypes.oneOf([
+      "3xs",
+      "2xs",
+      "xs",
+      "s",
+      "m",
+      "l",
+      "xl",
+      "2xl",
+      "3xl",
+      "4xl",
+      "5xl",
+    ]),
   ]),
 };
 

package/src/components/RadioButton.js

@@ -1,14 +1,14 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import Proptypes from "prop-types";
+import { ThemeContext } from "styled-components/native";
 
-import { Container, Touchable, Typography } from "@components";
-const labelPositions = ["left", "right"];
-
-const LabelComponent = ({ label, labelComponent, labelProp }) => {
-  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
-};
+import { Container, Typography, Touchable } from "@components";
 
 /**
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/radioButton/radioButton.png" />
+ * </div>
  *
  * This component supports below props categories from [styled-system ](/styled-system).
  * <ul>
@@ -26,149 +26,123 @@ const LabelComponent = ({ label, labelComponent, labelProp }) => {
  * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
- *  const [selected, setSelected] = useState(false);
+ *  const [selected1, setSelected1] = useState(true);
+ *  const [selected2, setSelected2] = useState(false);
  *
- *   return (
- *     <Container>
+ *  return (
+ *    <Container>
  *      <RadioButton
- *       selected={selected}
- *       onSelect={() => setSelected(!selected)}
- *       label="option label 1"
- *       labelPosition="left"
+ *        mt={2}
+ *        selected={selected1}
+ *        onSelect={() => setSelected1(prev => !prev)}
+ *        label={`Radio button marked as ${!selected1 ? "un" : ""}selected`}
  *      />
- *     </Container>
- *   );
- *  }
+ *      <RadioButton
+ *        mt={3}
+ *        selected={selected2}
+ *        onSelect={() => setSelected2(prev => !prev)}
+ *        label={`Radio button marked as ${!selected2 ? "un" : ""}selected`}
+ *      />
+ *      <RadioButton mt={3} disabled label="Disabled Radio button" />
+ *    </Container>
+ *  );
+ * }
  * ```
  *
  */
 
 export const RadioButton = ({
-  radioButtonWidth = 20,
-  radioButtonSelectedWidth = 10,
-  containerBg = "background.grey",
-  innerActiveBg = "background.base",
-  innerInActiveBg = "background.secondary",
-  onSelect = () => {},
-  selected = null,
-  density = 5,
-  label = "Option",
-  labelComponent = null,
-  labelProp = {},
-  labelPosition = "right",
-  disabled = false,
+  selected,
+  onSelect,
+  disabled,
+  label,
+  radioButtonStyle,
+  labelStyle,
   ...rest
 }) => {
+  const theme = useContext(ThemeContext);
+  const disabledProps = {
+    borderColor: theme.colors.border.secondary,
+    labelProps: {
+      color: theme.colors.font.grey400,
+    },
+  };
+  const selectedProps = {
+    borderWidth: 4,
+    borderColor: theme.colors.background.base,
+    labelProps: {
+      fontFamily: theme.fonts.sf500,
+      color: theme.colors.font.primary,
+    },
+  };
+  const unselectedProps = {
+    borderWidth: 2,
+    borderColor: theme.colors.border.secondary,
+    labelProps: {
+      fontFamily: theme.fonts.sf400,
+      color: theme.colors.font.secondary,
+    },
+  };
   return (
     <Touchable
       disabled={disabled}
-      opacity={disabled ? 0.5 : 1}
       onPress={onSelect}
       flexDirection="row"
       alignItems="center"
-      py={1}
       {...rest}
     >
-      {labelPosition === labelPositions[0] ? (
-        <LabelComponent
-          label={label}
-          labelComponent={labelComponent}
-          labelProp={{ mr: 2, ...labelProp }}
-        />
-      ) : null}
       <Container
-        bg={containerBg}
-        height={radioButtonWidth}
-        width={radioButtonWidth}
-        borderRadius={radioButtonWidth / 2}
-        justifyContent="center"
-        alignItems="center"
+        height={16}
+        width={16}
+        borderRadius={8}
+        bg={theme.colors.background.white}
+        {...(selected && selectedProps)}
+        {...(!selected && unselectedProps)}
+        {...(disabled && disabledProps)}
+        {...radioButtonStyle}
+      />
+      <Typography
+        ml={2}
+        fontSize="m"
+        {...(selected && selectedProps.labelProps)}
+        {...(!selected && unselectedProps.labelProps)}
+        {...(disabled && disabledProps.labelProps)}
+        {...labelStyle}
       >
-        <Container
-          height={radioButtonSelectedWidth + density}
-          width={radioButtonSelectedWidth + density}
-          borderRadius={(radioButtonSelectedWidth + density) / 2}
-          bg="background.white"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <Container
-            bg={selected ? innerActiveBg : innerInActiveBg}
-            height={radioButtonSelectedWidth}
-            width={radioButtonSelectedWidth}
-            borderRadius={radioButtonSelectedWidth / 2}
-            m={1}
-          />
-        </Container>
-      </Container>
-      {labelPosition === labelPositions[1] ? (
-        <LabelComponent
-          label={label}
-          labelComponent={labelComponent}
-          labelProp={{ ml: 2, ...labelProp }}
-        />
-      ) : null}
+        {label}
+      </Typography>
     </Touchable>
   );
 };
 
 RadioButton.propTypes = {
   /**
-   * Function to execute on press.
-   */
-  onSelect: PropTypes.func.isRequired,
-  /**
-   * Whether radio is selected.
-   */
-  selected: PropTypes.any.isRequired,
-  /**
-   * Text label to be shown with radio button.
+   * Whether radio button is selected or not.
    */
-  label: PropTypes.string,
+  selected: Proptypes.bool.isRequired,
   /**
-   * Props for the label.
-   */
-  labelProp: PropTypes.object,
-  /**
-   * Label can passed as a component as well.
-   */
-  labelComponent: PropTypes.element,
-  /**
-   * Position of label relative to the radio button. It can be either `left` or `right`
-   */
-  labelPosition: PropTypes.oneOf(labelPositions),
-  /**
-   * Whether radio is disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Size of radio button.
-   */
-  radioButtonWidth: PropTypes.number,
-  /**
-   * Size of radio button when selected.
+   * Function to execute on press.
    */
-  radioButtonSelectedWidth: PropTypes.number,
+  onSelect: Proptypes.func.isRequired,
   /**
-   * Background color of radio button.
+   * To disable the component.
    */
-  containerBg: PropTypes.string,
+  disabled: Proptypes.bool,
   /**
-   * Color of radio button when selected.
+   * Text label to be shown with radio button.
    */
-  innerActiveBg: PropTypes.string,
+  label: Proptypes.string,
   /**
-   * Color of radio button when not selected.
+   * Customize radio button style.
    */
-  innerInActiveBg: PropTypes.string,
+  radioButtonStyle: Proptypes.object,
   /**
-   * Thickness of radio button container component.
+   * Customize label style.
    */
-  density: PropTypes.number,
+  labelStyle: Proptypes.object,
 };
 
-LabelComponent.propTypes = {
-  label: PropTypes.string,
-  labelComponent: PropTypes.element,
-  labelProp: PropTypes.object,
+RadioButton.defaultProps = {
+  selected: false,
+  onSelect: () => {},
 };

package/src/components/SearchBar.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useRef, useState } from "react";
+import { TextInput, Animated, StyleSheet } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-remix-icon";
+
+import { Container, Button } from "@components";
+import { useDebounce } from "@hooks";
+import { theme } from "@theme";
+
+/**
+ * SearchBars are used to search or filter items.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, SearchBar } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *      <SearchBar placeholder="Search" onChangeText={() => {}} />
+ *    </Container>
+ *  );
+ * }
+ * ```
+ */
+
+export const SearchBar = props => {
+  const {
+    placeholder = "Search",
+    onChangeText = () => {},
+    debounceDelay = 1000,
+    ...rest
+  } = props;
+  const inputRef = useRef();
+  const [searchText, setSearchText] = useState("");
+  const debouncedSearchTextValue = useDebounce(
+    searchText,
+    Number(debounceDelay)
+  );
+  const searchAnimationController = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    onChangeText(debouncedSearchTextValue);
+  }, [debouncedSearchTextValue, onChangeText]);
+
+  const animateSearchInput = val => {
+    Animated.timing(searchAnimationController, {
+      toValue: val,
+      duration: 350,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const searchInputWidth = searchAnimationController.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["100%", "85%"],
+  });
+
+  const onCancelHandle = () => {
+    animateSearchInput(0);
+    setSearchText("");
+    inputRef.current.blur();
+  };
+
+  return (
+    <Container flexDirection="row" alignItems="center">
+      <Animated.View
+        style={{
+          ...styles.inputContainerStyles,
+          width: searchInputWidth,
+        }}
+      >
+        <Container px={10}>
+          <Icon
+            name="ri-search-line"
+            size={20}
+            color={theme.colors.font.grey600}
+          />
+        </Container>
+        <TextInput
+          ref={inputRef}
+          value={searchText}
+          onChangeText={setSearchText}
+          onFocus={() => {
+            animateSearchInput(1);
+          }}
+          onBlur={() => {
+            if (!searchText) animateSearchInput(0);
+          }}
+          placeholder={placeholder}
+          fontSize={16}
+          flex={1}
+          placeholderTextColor={theme.colors.font.grey600}
+          color="font.primary"
+          {...rest.searchbarProps}
+        />
+      </Animated.View>
+      <Animated.View
+        style={{
+          opacity: searchAnimationController,
+        }}
+      >
+        <Button variant="text" label="Cancel" onPress={onCancelHandle} />
+      </Animated.View>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputContainerStyles: {
+    height: 42,
+    borderWidth: 1,
+    borderColor: theme.colors.border.grey400,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+SearchBar.propTypes = {
+  /**
+   * Set the placeholder text
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Method to fire when text is changed
+   */
+  onChangeText: PropTypes.func.isRequired,
+  /**
+   * Takes numeric value which is used to set the debounce delay
+   */
+  debounceDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};

package/src/components/SegmentPicker.js

@@ -0,0 +1,210 @@
+import PropTypes from "prop-types";
+import React, { useEffect, useCallback } from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { Typography, Touchable } from "@components";
+
+const defaultShadowStyle = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 2,
+  },
+  shadowOpacity: 0.23,
+  shadowRadius: 2.62,
+
+  elevation: 4,
+};
+
+// eslint-disable-next-line neeto/no-dangling-constants
+const DEFAULT_SPRING_CONFIG = {
+  stiffness: 150,
+  damping: 20,
+  mass: 1,
+  overshootClamping: false,
+  restSpeedThreshold: 0.001,
+  restDisplacementThreshold: 0.001,
+};
+
+// So that it stretches in landscape mode.
+const width = Dimensions.get("screen").width - 32;
+
+/**
+ *
+ * A Segment Picker component that provides toggling between two or more views.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/segmentPicker/segmentpickers.png" />
+ * </div>
+ *
+ *   ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, SegmentPicker } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main(){
+ *   const [tabIndex, setTabIndex] = useState(1);
+ *
+ *  return (
+ *    <Container flex={1} alignItems="center" justifyContent="center">
+ *      <Container my={3}>
+ *        <SegmentPicker
+ *          tabs={["On", "Off"]}
+ *          currentIndex={tabIndex}
+ *          onChange={setTabIndex}
+ *        />
+ *      </Container>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ */
+
+export const SegmentPicker = ({
+  tabs,
+  onChange,
+  currentIndex,
+  inactiveSegmentStyle,
+  activeSegmentStyle,
+  activeTextStyle,
+  inactiveTextStyle,
+  py,
+}) => {
+  const translateValue = (width - 4) / tabs?.length;
+  const tabTranslateValue = useSharedValue(0);
+
+  // useCallBack with an empty array as input, which will call inner lambda only once and memoize the reference for future calls
+  const memoizedTabPressCallback = useCallback(
+    index => {
+      onChange(index);
+    },
+    [onChange]
+  );
+
+  useEffect(() => {
+    tabTranslateValue.value = withSpring(
+      currentIndex * (translateValue * 1),
+      DEFAULT_SPRING_CONFIG
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentIndex]);
+
+  const tabTranslateAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: tabTranslateValue.value }],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[styles.defaultSegmentedControlWrapper, inactiveSegmentStyle]}
+    >
+      <Animated.View
+        style={[
+          styles.movingSegmentStyle,
+          activeSegmentStyle,
+          defaultShadowStyle,
+          StyleSheet.absoluteFill,
+          {
+            width: width / tabs?.length,
+          },
+          tabTranslateAnimatedStyles,
+        ]}
+      />
+
+      {tabs.map((label, index) => {
+        const currentIndexTextStyle =
+          currentIndex === index ? activeTextStyle : inactiveTextStyle;
+        return (
+          <Touchable
+            key={index}
+            flex={1}
+            elevation={6}
+            onPress={() => memoizedTabPressCallback(index)}
+            py={py}
+            activeOpacity={0.7}
+          >
+            <Typography
+              fontSize="xs"
+              textAlign="center"
+              color="font.grey800"
+              fontFamily="sf500"
+              {...currentIndexTextStyle}
+            >
+              {label}
+            </Typography>
+          </Touchable>
+        );
+      })}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  segmentedControlWrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 8,
+    width: width,
+  },
+  defaultSegmentedControlWrapper: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 8,
+    backgroundColor: "#E5E5EA",
+    width: width,
+  },
+  movingSegmentStyle: {
+    top: 0,
+    marginVertical: 2,
+    marginHorizontal: 2,
+    borderRadius: 6,
+    backgroundColor: "#FFFFFF",
+  },
+});
+
+SegmentPicker.propTypes = {
+  /**
+   * Array of texts for the labels of each Segment/Tab.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * Callback called with the new value when it changes.
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Index value of the currently selected Segment/Tab.
+   */
+  currentIndex: PropTypes.number.isRequired,
+  /**
+   * To change the inactive segment container style.
+   */
+  inactiveSegmentStyle: PropTypes.object,
+  /**
+   * To change the active segment container style.
+   */
+  activeSegmentStyle: PropTypes.object,
+  /**
+   * To change the inactive segment font style.
+   */
+  inactiveTextStyle: PropTypes.object,
+  /**
+   * To change the active segment font style.
+   */
+  activeTextStyle: PropTypes.object,
+  py: PropTypes.number,
+};
+
+SegmentPicker.defaultProps = {
+  tabs: [],
+  onChange: () => {},
+  currentIndex: 0,
+  py: 12,
+};

package/src/components/Select.js

@@ -37,7 +37,7 @@ const DropdownItem = ({
       {...(isSelectedItem && selectedItemContainerStyle)}
     >
       <Typography
-        fontFamily="inter400"
+        fontFamily="sf400"
         fontSize="s"
         color={isSelectedItem ? "font.white" : "font.grey"}
         {...itemLabelStyle}
@@ -215,7 +215,7 @@ export const Select = ({
   return (
     <Container {...containerStyle}>
       <Typography
-        fontFamily="inter400"
+        fontFamily="sf400"
         mb={1}
         fontSize="s"
         color="font.base"
@@ -237,7 +237,7 @@ export const Select = ({
           {...inputContainerStyle}
           {...rest}
         >
-          <Typography fontFamily="inter400" fontSize="s" color="font.grey">
+          <Typography fontFamily="sf400" fontSize="s" color="font.grey">
             {selectedOptionLabel || placeholder}
           </Typography>
           {isLoading ? (
@@ -287,7 +287,7 @@ export const Select = ({
                   {...emptyOptionsContainerStyle}
                 >
                   <Typography
-                    fontFamily="inter400"
+                    fontFamily="sf400"
                     fontSize="s"
                     color="font.grey"
                     {...emptyOptionsLabelStyle}
@@ -311,7 +311,7 @@ export const Select = ({
                     />
                   ) : (
                     <Typography
-                      fontFamily="inter400"
+                      fontFamily="sf400"
                       fontSize="s"
                       color="font.grey"
                       {...createSearchedOptionLabelStyle}