@bigbinary/neetoui-rn 0.0.269 → 0.0.270

package/src/components/InputEmailChip.jsx

@@ -1,246 +0,0 @@
-import React, { useContext, useRef, useState } from "react";
-import { Platform, StyleSheet, TextInput } from "react-native";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
-
-import { Container, Chip, Input, Typography } from "@components";
-
-import { endsWithChars, trimChars, isValidEmail } from "../utils/utils";
-
-const gap = moderateScale(4);
-
-const chipWrapperStyle = {
-  pt: gap,
-};
-
-const getChipContainerStyle = isReadyForDeletion => ({
-  borderColor: isReadyForDeletion ? "border.danger" : "border.grey200",
-});
-
-export const InputEmailChip = ({
-  disabled,
-  label,
-  emails = [],
-  onUpdate,
-  delimiters = [" ", ","],
-  ...rest
-}) => {
-  const theme = useContext(ThemeContext);
-  const inputRef = useRef();
-
-  const [textValue, setTextValue] = useState("");
-  const [shouldShowInput, setShouldShowInput] = useState(false);
-  const [emailIndexForDeletion, setEmailIndexForDeletion] = useState(-1);
-
-  const handleKeyPress = event => {
-    const { key } = event.nativeEvent || {};
-
-    if (!(textValue === "" && key === "Backspace" && emails.length > 0)) return;
-
-    if (emailIndexForDeletion === -1) {
-      setEmailIndexForDeletion(emails.length - 1);
-    } else {
-      removeEmail({ lastOne: true });
-      setEmailIndexForDeletion(-1);
-    }
-  };
-
-  const handleSubmitEditing = event => {
-    const { text } = event.nativeEvent || {};
-    setEmailIndexForDeletion(-1);
-    checkAndUpdateEmails(text);
-  };
-
-  const handleTextChange = text => {
-    if (!endsWithChars(text, delimiters)) {
-      setEmailIndexForDeletion(-1);
-      setTextValue(text);
-
-      return;
-    }
-
-    checkAndUpdateEmails(text);
-  };
-
-  const handleInputTouchStart = () => setEmailIndexForDeletion(-1);
-
-  const handleTouchStart = () => {
-    if (!inputRef.current?.isFocused()) {
-      inputRef.current?.focus();
-    }
-  };
-
-  const handleOnFocus = () => setShouldShowInput(true);
-
-  const handleOnBlur = () => {
-    if (textValue.trim() === "") {
-      setShouldShowInput(false);
-    }
-  };
-
-  const handleOnEndEditing = event => {
-    checkAndUpdateEmails(event.nativeEvent.text);
-  };
-
-  const checkAndUpdateEmails = text => {
-    const emailCandidate = trimChars(text, delimiters);
-
-    if (
-      emailCandidate !== "" && // Non empty email
-      isValidEmail(emailCandidate) && // Valid email
-      !emails.includes(emailCandidate) // Unique email
-    ) {
-      const _emails = [...emails, emailCandidate];
-      setTextValue("");
-      onUpdate && onUpdate(_emails);
-    } else {
-      setTextValue(text);
-    }
-  };
-
-  const removeEmail = ({ email, lastOne = false }) => {
-    const indexOfEmail = lastOne ? emails.length - 1 : emails.indexOf(email);
-
-    if (indexOfEmail !== -1) {
-      const _emails = [...emails];
-      _emails.splice(indexOfEmail, 1);
-      onUpdate && onUpdate(_emails);
-    }
-  };
-
-  const inputProps = {
-    autoCorrect: false,
-    fontSize: "xs",
-    returnKeyType: "done",
-    autoCapitalize: "none",
-    keyboardType: "email-address",
-    padding: 0,
-    minHeight: moderateScale(26),
-    selectionColor:
-      emailIndexForDeletion === -1 ? theme.colors.font.base : "transparent",
-  };
-
-  return (
-    <Container
-      flexDirection="row"
-      minHeight={moderateScale(30)}
-      py={moderateScale(2)}
-      width="100%"
-      {...rest}
-    >
-      {!!label && (
-        <Typography
-          color={disabled ? "font.grey400" : "font.grey600"}
-          fontSize="xs"
-          textAlign="left"
-          width={moderateScale(40)}
-          mt={Platform.select({
-            android: moderateScale(10),
-            ios: moderateScale(8),
-          })}
-        >
-          {label}
-        </Typography>
-      )}
-      <Container
-        alignItems="center"
-        flex={1}
-        flexDirection="row"
-        flexWrap="wrap"
-      >
-        {emails.map((email, index) => (
-          <Container key={email} {...chipWrapperStyle}>
-            <Chip
-              isDisabled={disabled}
-              label={email}
-              containerStyle={{
-                ...getChipContainerStyle(index === emailIndexForDeletion),
-                height: moderateScale(25),
-              }}
-              onClose={disabled ? null : () => removeEmail({ email })}
-            />
-          </Container>
-        ))}
-        {!disabled && (
-          <Container
-            alignItems="center"
-            flex={1}
-            justifyContent="center"
-            minWidth={moderateScale(160)}
-            paddingTop={Platform.select({
-              ios: gap,
-              android: moderateScale(7),
-            })}
-            {...(shouldShowInput || emails.length === 0 ? {} : { height: 0 })}
-          >
-            <Input
-              noBorder
-              disabled={disabled}
-              value={textValue}
-              containerProps={{
-                borderRadius: 0,
-              }}
-              inputProps={{
-                ...inputProps,
-                ref: inputRef,
-                onKeyPress: handleKeyPress,
-                onSubmitEditing: handleSubmitEditing,
-                onTouchStart: handleInputTouchStart,
-                onFocus: handleOnFocus,
-                onBlur: handleOnBlur,
-                onEndEditing: handleOnEndEditing,
-                borderBottomWidth: moderateScale(2),
-                borderColor: "background.grey200",
-              }}
-              onChangeText={handleTextChange}
-            />
-          </Container>
-        )}
-      </Container>
-      {!disabled && (
-        <TextInput
-          editable={false}
-          pointerEvents={shouldShowInput ? "box-none" : "auto"}
-          style={styles.touchableTextInputWrapper}
-          onTouchStart={handleTouchStart}
-        />
-      )}
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  touchableTextInputWrapper: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
-InputEmailChip.propTypes = {
-  /**
-   * Disable input component
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Label for the input field
-   */
-  label: PropTypes.string,
-  /**
-   * Array of emails to be set
-   */
-  emails: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Characters to be used for separating emails while entering
-   * By default `,`, ` ` and enter/done triggers chip creation for the entered email.
-   */
-  delimiters: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Callback containing the emails. It is triggered when an email is added or removed.
-   */
-  onUpdate: PropTypes.func,
-};

package/src/components/LineLoader.jsx

@@ -1,46 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-import ContentLoader, { Rect } from "react-content-loader/native";
-import { moderateScale } from "react-native-size-matters";
-
-import { theme } from "../theme";
-
-export const LineLoader = ({
-  isLoading,
-  backgroundColor = theme.colors.background.primary,
-  foregroundColor = theme.colors.background.base,
-  height = moderateScale(3),
-}) => (
-  <ContentLoader
-    animate={isLoading}
-    backgroundColor={backgroundColor}
-    foregroundColor={foregroundColor}
-    height={height}
-    interval={0}
-    key={isLoading}
-    speed={1}
-    width="100%"
-  >
-    <Rect height={height} width="100%" x={0} y={0} />
-  </ContentLoader>
-);
-
-LineLoader.propTypes = {
-  /**
-   * Shows loader when true.
-   */
-  isLoading: PropTypes.bool,
-  /**
-   * Custom background color of loader.
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * Custom foreground color of loader.
-   */
-  foregroundColor: PropTypes.string,
-  /**
-   * Height of loader.
-   */
-  height: PropTypes.number,
-};

package/src/components/ListItem.jsx

@@ -1,68 +0,0 @@
-import * as React from "react";
-
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Typography, Container } from "@components";
-
-/**
- * ListItems are components that displays a label with different values like string, toggle, button etc.
- *
- *  <div class="screenshots">
- *   <img src="screenshots/listitem/listItemStyles.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Container, ListItem, Typography } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *      <ListItem
- *        LeftComponent={() => <Typography mr={moderateScale(2)}>📣</Typography>}
- *        label="Organization"
- *        value={() => <Typography>Bigbinary</Typography>}
- *      />
- *    </Container>
- *  );
- * }
- * ```
- */
-
-export const ListItem = ({ LeftComponent, label, RightComponent, ...rest }) => (
-  <Container
-    alignItems="center"
-    bg="background.secondary"
-    borderRadius={moderateScale(6)}
-    flexDirection="row"
-    justifyContent="space-between"
-    px={moderateScale(16)}
-    py={moderateScale(12)}
-    width="100%"
-    {...rest}
-  >
-    <Container alignItems="center" flexDirection="row" width="50%">
-      {LeftComponent && <LeftComponent />}
-      <Typography color="font.grey800" fontFamily="sf500" fontSize="l">
-        {label}
-      </Typography>
-    </Container>
-    <Container alignItems="flex-end" width="50%">
-      <RightComponent />
-    </Container>
-  </Container>
-);
-
-ListItem.propTypes = {
-  ...propTypes.flexbox,
-  ...propTypes.space,
-  ...propTypes.border,
-  ...propTypes.color,
-  ...propTypes.layout,
-  LeftComponent: PropTypes.elementType,
-  label: PropTypes.string.isRequired,
-  RightComponent: PropTypes.elementType.isRequired,
-};

package/src/components/Loader.jsx

@@ -1,122 +0,0 @@
-import React, { useEffect } from "react";
-
-import PropTypes from "prop-types";
-import Animated, {
-  useSharedValue,
-  withTiming,
-  useAnimatedProps,
-  withRepeat,
-  Easing,
-  useAnimatedStyle,
-  interpolate,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-import Svg, { Circle } from "react-native-svg";
-
-import { Container } from "@components";
-import { theme } from "@theme";
-
-// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
-const LOADER_WIDTH = {
-  s: parseInt(moderateScale(18)),
-  m: parseInt(moderateScale(24)),
-  l: parseInt(moderateScale(36)),
-};
-
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-
-/**
- ** Component is used to show a loading indication to user.
- *
- * * <div class="screenshots">
- *   <img src="screenshots/loaders/loaders.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Container, Loader } from '@bigbinary/neetoui-rn';
- * export default function Main() {
- *  return (
- *    <Container>
- *      <Loader size='l'/>
- *    </Container>
- *  )
- * }
- * ```
- *
- */
-
-export const Loader = ({ color, size }) => {
-  const progress = useSharedValue(0);
-  const width = LOADER_WIDTH[size];
-  const stroke_width = width * 0.15;
-  const radius = (width - stroke_width) / 2;
-  const circumference = 2 * Math.PI * radius;
-
-  useEffect(() => {
-    progress.value = withRepeat(
-      withTiming(2, {
-        duration: 1500,
-        easing: Easing.linear,
-      }),
-      -1,
-      false
-    );
-  }, []);
-
-  const animatedProps = useAnimatedProps(() => ({
-    strokeDashoffset: -interpolate(
-      progress.value,
-      [0, 1, 2],
-      [0, circumference, circumference * 2]
-    ),
-  }));
-
-  const animatedStyles = useAnimatedStyle(() => {
-    const scale = interpolate(progress.value, [0, 2], [0, 420]);
-
-    return {
-      width,
-      height: width,
-      alignItems: "center",
-      justifyContent: "center",
-      transform: [{ rotate: `${scale}deg` }],
-    };
-  });
-
-  return (
-    <Container alignItems="center" justifyContent="center">
-      <Animated.View style={animatedStyles}>
-        <Svg height={width} width={width}>
-          <AnimatedCircle
-            animatedProps={animatedProps}
-            cx={width / 2}
-            cy={width / 2}
-            r={radius}
-            stroke={color}
-            strokeDasharray={circumference}
-            strokeLinecap="round"
-            strokeWidth={stroke_width}
-          />
-        </Svg>
-      </Animated.View>
-    </Container>
-  );
-};
-
-Loader.propTypes = {
-  /**
-   * Size variant to select the width of the loader.
-   */
-  size: PropTypes.oneOf(["s", "m", "l"]),
-  /**
-   * Color variant to select the color from the available options.
-   */
-  color: PropTypes.string,
-};
-
-Loader.defaultProps = {
-  size: "s",
-  color: theme.colors.background.lightBlue400,
-};