@bigbinary/neetoui-rn 0.0.268 → 0.0.270

package/src/components/ParentView.jsx

@@ -1,139 +0,0 @@
-import React, { useContext } from "react";
-import { Keyboard, StatusBar } from "react-native";
-
-import PropTypes from "prop-types";
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { ThemeContext } from "styled-components/native";
-
-import { Container } from "@components";
-
-import { useKeyboard } from "../hooks/useKeyboard";
-
-/**
- *ParentView wraps the children with SafeAreaView.
- *
- *  ## Usage
- * ```js
- * import * as React from "react";
- * import { moderateScale } from "react-native-size-matters";
- * import { Typography, ParentView } from "@bigbinary/neetoui-rn";
- *
- *export default function Main() {
- *  return (
- *    <ParentView>
- *        <Typography> This is wrapped in ParentView</Typography>
- *    </ParentView>
- *  );
- *}
- *
- * ```
- */
-
-export const ParentView = ({
-  barStyle = "light-content",
-  children,
-  backgroundColor,
-  bg,
-  topInset = true,
-  rightInset = true,
-  leftInset = true,
-  bottomInset = true,
-  shouldDismissKeyboardOnTap = true,
-  ...rest
-}) => {
-  const theme = useContext(ThemeContext);
-  const keyboardHeight = useKeyboard();
-
-  const safeAreaViewProps = {
-    edges: [
-      ...(topInset ? ["top"] : []),
-      ...(rightInset ? ["right"] : []),
-      ...(leftInset ? ["left"] : []),
-    ],
-  };
-
-  const newBackgroundColor =
-    backgroundColor || bg || theme.colors.background.parentView;
-
-  const statusBarColors = {
-    default: theme.colors.background.white,
-    "dark-content": theme.colors.background.white,
-    "light-content": theme.colors.background.base,
-  };
-
-  const statusBarColor =
-    statusBarColors[barStyle] || statusBarColors["default"];
-
-  const insets = useSafeAreaInsets();
-
-  return (
-    <SafeAreaView
-      flex={1}
-      {...safeAreaViewProps}
-      style={{ backgroundColor: statusBarColor }}
-    >
-      <StatusBar backgroundColor={statusBarColor} barStyle={barStyle} />
-      <Container
-        {...(shouldDismissKeyboardOnTap
-          ? {
-              onTouchStart: e => {
-                if (
-                  keyboardHeight &&
-                  e?.target?._internalFiberInstanceHandleDEV?.elementType?.indexOf(
-                    "TextInput"
-                  ) === -1
-                ) {
-                  Keyboard.dismiss();
-                }
-              },
-            }
-          : {})}
-        backgroundColor={newBackgroundColor}
-        flex={1}
-        {...rest}
-        {...(bottomInset && { pb: insets.bottom })}
-      >
-        {children}
-      </Container>
-    </SafeAreaView>
-  );
-};
-
-ParentView.propTypes = {
-  /**
-   * Sets the color of the status bar text.
-   */
-  barStyle: PropTypes.string,
-  children: PropTypes.node,
-  /**
-   * Sets the background color
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * Sets the background color
-   */
-  bg: PropTypes.string,
-  /**
-   * Sets Top Inset
-   */
-  topInset: PropTypes.bool,
-  /**
-   * Sets Right Inset
-   */
-  rightInset: PropTypes.bool,
-  /**
-   * Sets Left Inset
-   */
-  leftInset: PropTypes.bool,
-  /**
-   * Sets Bottom Inset
-   */
-  bottomInset: PropTypes.bool,
-  /**
-   * Dismiss keyboard on tap
-   */
-  shouldDismissKeyboardOnTap: PropTypes.bool,
-};

package/src/components/Popover.jsx

@@ -1,221 +0,0 @@
-import React, { useRef } from "react";
-import { StyleSheet } from "react-native";
-
-import PropTypes from "prop-types";
-import OriginalPopover from "react-native-popover-view";
-import { moderateScale } from "react-native-size-matters";
-import styled from "styled-components/native";
-import { flexbox, space, border, color, layout } from "styled-system";
-
-import { Typography, Divider } from "@components";
-
-export const TouchableOpacity = styled.TouchableOpacity`
-  ${space}
-  ${border}
-  ${color}
-  ${flexbox}
-  ${layout}
-`;
-
-const PopOverItem = ({
-  item,
-  onPress,
-  fontFamily,
-  fontSize,
-  shouldShowDivider,
-}) => {
-  const { Icon, label, labelProps } = item;
-
-  return (
-    <>
-      <TouchableOpacity
-        alignItems="center"
-        flexDirection="row"
-        p={moderateScale(2)}
-        px={moderateScale(8)}
-        py={moderateScale(8)}
-        onPress={onPress}
-      >
-        <Icon />
-        <Typography
-          fontColor="font.primary"
-          fontFamily={fontFamily}
-          fontSize={fontSize}
-          px={moderateScale(2)}
-          {...labelProps}
-        >
-          {label}
-        </Typography>
-      </TouchableOpacity>
-      {shouldShowDivider && (
-        <Divider backgroundColor="background.grey200" mx={moderateScale(8)} />
-      )}
-    </>
-  );
-};
-
-PopOverItem.propTypes = {
-  shouldShowDivider: PropTypes.bool,
-  item: PropTypes.object,
-  onPress: PropTypes.func,
-  fontFamily: PropTypes.string,
-  fontSize: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf([
-      "3xs",
-      "2xs",
-      "xs",
-      "s",
-      "m",
-      "l",
-      "xl",
-      "2xl",
-      "3xl",
-      "4xl",
-      "5xl",
-    ]),
-  ]),
-};
-
-/**
- *
- * A Lightweight Popover component over [react-native-popover-view](https://www.npmjs.com/package/react-native-popover-view)  which can be rendered with array of data or with custom body.
- *
- * <div class="screenshots">
- *   <img src="screenshots/popover/popover.png" />
- * </div>
- *
- *   ## Usage
- * ```js
- * import * as React from 'react';
- * import { Text } from "react-native";
- * import { Container, Button, Popover } from '@bigbinary/neetoui-rn';
- * import { ThemeContext } from "styled-components/native";
- *
- * export default function Main(){
- *   const theme = useContext(ThemeContext);
- *   const data = [
- *     {
- *       label: "Search Product",
- *       Icon: () => {
- *         return (
- *           <Icon
- *             name="ri-search-line"
- *             size={moderateScale(20)}
- *             color={theme.colors.background.grey800}
- *           />
- *         );
- *       },
- *       onPress: () => {
- *         alert("Clicked here");
- *       },
- *     },
- *     {
- *       label: "Create Product",
- *       Icon: () => {
- *         return (
- *           <Icon
- *             name="ri-search-line"
- *             size={moderateScale(20)}
- *             color={theme.colors.background.grey800}
- *           />
- *         );
- *       },
- *       onPress: () => {
- *         alert("Clicked here");
- *       },
- *     },
- *   ];
- *
- *  return (
- *    <Container flex={1} alignItems="center" justifyContent="center">
- *      <Container p={moderateScale(2)}>
- *        <Popover data={data} from={<Button label="With Data" />} />
- *      </Container>
- *      <Container p={moderateScale(2)}>
- *      <Popover from={<Button label="With Custom Popup Content" />}>
- *
- *          <Container bg="background.white" flex={1}>
- *            <Text>This is the contents of the popover</Text>
- *          </Container>
- *        </Popover>
- *      </Container>
- *
- *      <Container p={moderateScale(2)}>
- *        <Popover
- *          data={data}
- *          from={<Button label="With Custom Popup Content and data" />}
- *        >
- *          <Container bg="background.white" flex={1}>
- *            <Text>This is the contents of the popover</Text>
- *          </Container>
- *        </Popover>
- *      </Container>
- *    </Container>
- *  );
- * }
- * ```
- */
-
-export const Popover = ({
-  children,
-  data,
-  fontFamily = null,
-  fontSize = "l",
-  ...rest
-}) => {
-  const popoverRef = useRef();
-  const onPressItemRef = useRef(() => {});
-
-  return (
-    <OriginalPopover
-      popoverStyle={styles.popoverStyle}
-      ref={popoverRef}
-      onCloseComplete={() => onPressItemRef.current()}
-      onOpenStart={() => {
-        onPressItemRef.current = () => {};
-      }}
-      {...rest}
-    >
-      {data?.map((item, index) => (
-        <PopOverItem
-          fontFamily={fontFamily}
-          fontSize={fontSize}
-          item={item}
-          key={index}
-          shouldShowDivider={index !== data.length - 1}
-          onPress={() => {
-            popoverRef?.current?.setState({ isVisible: false });
-            onPressItemRef.current = item.onPress;
-          }}
-        />
-      ))}
-      {children}
-    </OriginalPopover>
-  );
-};
-
-Popover.propTypes = {
-  children: PropTypes.node,
-  /**
-   * Data should be array of
-   * {
-   *  label: "This would be label of button",
-   *  Icon: "Icon to be shown prior to label",
-   *  onPress: "Handler to be called onPress"
-   * }.
-   */
-  data: PropTypes.array,
-  fontFamily: PropTypes.string,
-  fontSize: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
-  ]),
-};
-
-const styles = StyleSheet.create({
-  popoverStyle: {
-    borderRadius: moderateScale(10),
-    padding: moderateScale(5),
-  },
-});

package/src/components/RadioButton.jsx

@@ -1,155 +0,0 @@
-import React, { useContext } from "react";
-
-import { Radio, RadioInactive } from "@bigbinary/neeto-icons-rn";
-import Proptypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
-
-import { 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>
- * <li>flexbox</li>
- * <li>space</li>
- * <li>border</li>
- * <li>layout</li>
- * <li>color</li>
- * <li>buttonStyle</li>
- * </ul>
- *
- *  ## Usage
- * ```js
- * import * as React from "react";
- * import { moderateScale } from "react-native-size-matters";
- * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
- *
- * export default function Main() {
- *  const [selected1, setSelected1] = useState(true);
- *  const [selected2, setSelected2] = useState(false);
- *
- *  return (
- *    <Container>
- *      <RadioButton
- *        mt={moderateScale(2)}
- *        selected={selected1}
- *        onSelect={() => setSelected1(prev => !prev)}
- *        label={`Radio button marked as ${!selected1 ? "un" : ""}selected`}
- *      />
- *      <RadioButton
- *        mt={moderateScale(3)}
- *        selected={selected2}
- *        onSelect={() => setSelected2(prev => !prev)}
- *        label={`Radio button marked as ${!selected2 ? "un" : ""}selected`}
- *      />
- *      <RadioButton mt={moderateScale(3)} disabled label="Disabled Radio button" />
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-export const RadioButton = ({
-  selected,
-  onSelect,
-  disabled,
-  label,
-  selectIconStyle,
-  labelStyle,
-  ...rest
-}) => {
-  const theme = useContext(ThemeContext);
-  const disabledProps = {
-    borderColor: theme.colors.border.secondary,
-    labelProps: {
-      color: theme.colors.font.grey400,
-    },
-  };
-
-  const selectedProps = {
-    borderWidth: moderateScale(4),
-    borderColor: theme.colors.background.base,
-    labelProps: {
-      fontFamily: theme.fonts.sf500,
-      color: theme.colors.font.primary,
-    },
-  };
-
-  const unselectedProps = {
-    borderWidth: moderateScale(2),
-    borderColor: theme.colors.border.secondary,
-    labelProps: {
-      fontFamily: theme.fonts.sf400,
-      color: theme.colors.font.secondary,
-    },
-  };
-
-  const Icon = selected ? Radio : RadioInactive;
-
-  return (
-    <Touchable
-      alignItems="center"
-      disabled={disabled}
-      flexDirection="row"
-      py={moderateScale(8)}
-      onPress={onSelect}
-      {...rest}
-    >
-      <Typography
-        color="font.primary"
-        flex={1}
-        fontSize="m"
-        lineHeight={`${moderateScale(22)}px`}
-        {...(selected && selectedProps.labelProps)}
-        {...(!selected && unselectedProps.labelProps)}
-        {...(disabled && disabledProps.labelProps)}
-        {...labelStyle}
-      >
-        {label}
-      </Typography>
-      <Icon
-        color={theme.colors.font.primary}
-        size={moderateScale(22)}
-        {...selectIconStyle}
-      />
-    </Touchable>
-  );
-};
-
-RadioButton.propTypes = {
-  /**
-   * Whether radio button is selected or not.
-   */
-  selected: Proptypes.bool.isRequired,
-  /**
-   * Function to execute on press.
-   */
-  onSelect: Proptypes.func.isRequired,
-  /**
-   * To disable the component.
-   */
-  disabled: Proptypes.bool,
-  /**
-   * Text label to be shown with radio button.
-   */
-  label: Proptypes.string,
-  /**
-   * Customize radio button style.
-   */
-  selectIconStyle: Proptypes.object,
-  /**
-   * Customize label style.
-   */
-  labelStyle: Proptypes.object,
-};
-
-RadioButton.defaultProps = {
-  selected: false,
-  onSelect: () => {},
-};

package/src/components/RichTextEditor.jsx

@@ -1,163 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import PropTypes from "prop-types";
-import {
-  RichEditor,
-  RichToolbar,
-  actions,
-} from "react-native-pell-rich-editor";
-import styled from "styled-components/native";
-import { space, flexbox, border, layout } from "styled-system";
-
-import { Container } from "@components";
-import { useKeyboard } from "@hooks";
-
-export const ScrollView = styled.ScrollView.attrs(() => ({
-  keyboardShouldPersistTaps: "handled",
-  showsVerticalScrollIndicator: true,
-  showsHorizontalScrollIndicator: false,
-  contentContainerStyle: { flexGrow: 1 },
-}))`
-  ${space}
-  ${flexbox}
-  ${border}
-  ${layout}
-`;
-
-/**
- * RichTextEditor component is wrapper created around react-native-pell-rich-editor. This has dependency on react-native-webview, so make sure to add that as well.
- *
- *
- * <div class="screenshots">
- *   <img src="screenshots/rte/rte.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from "react";
- * import { moderateScale } from "react-native-size-matters";
- * import { Container, RichTextEditor, theme } from "@bigbinary/neetoui-rn";
- *
- * export default function Main() {
- * const [message, setMessage] = React.useState('');
- *
- * const editorProps = {
- *   initialContentHTML: "Rich Text Component...",
- *   initialFocus: true,
- *   editorStyle: {
- *     color: theme.colors.font.grey,
- *   },
- * };
- *
- * return (
- *   <Container flex={1}>
- *     <RichTextEditor
- *       onChange={setMessage}
- *       toolbarActions={[
- *         "keyboard",
- *         "setBold",
- *         "setItalic",
- *         "insertBulletsList",
- *         "insertOrderedList",
- *         "setStrikethrough",
- *         "setUnderline",
- *         "undo",
- *         "redo",
- *       ]}
- *       editorProps={editorProps}
- *     />
- *   </Container>
- *  );
- * };
- *
- * ```
- */
-
-export const RichTextEditor = ({
-  onChange,
-  placeholderText,
-  children,
-  toolbarActions,
-  editorProps,
-  toolBarProps,
-  ...rest
-}) => {
-  const richTextRef = useRef();
-  const keyboardHeight = useKeyboard();
-  const [toolbarVisible, setToolbarVisible] = useState(false);
-  const showToolbar = keyboardHeight > 0 && toolbarVisible;
-
-  const computeToolbarActions = () => {
-    const actionItems = [];
-    toolbarActions?.map(actionItem => {
-      actionItems.push(actions[actionItem]);
-    });
-
-    return actionItems;
-  };
-
-  return (
-    <ScrollView {...rest?.editorWrapperStyle}>
-      {showToolbar && (
-        <Container width="100%" {...rest?.toolbarWrapperStyle}>
-          <RichToolbar
-            actions={computeToolbarActions()}
-            editor={richTextRef}
-            {...toolBarProps}
-          />
-        </Container>
-      )}
-      <RichEditor
-        androidLayerType="software"
-        autoCapitalize="sentences"
-        placeholder={placeholderText}
-        ref={richTextRef}
-        useContainer={false}
-        onChange={onChange}
-        onBlur={() => {
-          setToolbarVisible(false);
-          editorProps?.onBlurFn();
-        }}
-        onFocus={() => {
-          setToolbarVisible(true);
-          editorProps?.onFocusFn();
-        }}
-        {...editorProps}
-      />
-      {children}
-    </ScrollView>
-  );
-};
-
-RichTextEditor.defaultProps = {
-  editorProps: {},
-  toolBarProps: {},
-  toolbarWrapperStyle: {},
-  placeholderText: "Type here...",
-};
-
-RichTextEditor.propTypes = {
-  /**
-   * Callback that is called when the text input's text changes.
-   */
-  onChange: PropTypes.func.isRequired,
-  children: PropTypes.node,
-  /**
-   * Placeholder for the input.
-   */
-  placeholderText: PropTypes.string,
-  /**
-   * An array of actions to be provided by this toolbar. Check react-native-pell-rich-editor for list of supported actions.
-   */
-  toolbarActions: PropTypes.array.isRequired,
-  /**
-   * Object which can be used to pass other supported props by the Editor.
-   */
-  editorProps: PropTypes.object,
-  /**
-   * Object which can be used to pass other supported props by the RichToolbar.
-   */
-  toolBarProps: PropTypes.object,
-  editorWrapperStyle: PropTypes.object,
-  toolbarWrapperStyle: PropTypes.object,
-};