@bigbinary/neetoui-rn 0.0.268 → 0.0.270

package/src/components/Ripple.jsx

@@ -1,281 +0,0 @@
-import React, { PureComponent } from "react";
-import {
-  View,
-  Animated,
-  Easing,
-  Platform,
-  I18nManager,
-  StyleSheet,
-} from "react-native";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import TouchableWithoutFeedback from "./TouchableWithoutFeedback";
-
-const radius = moderateScale(10);
-
-export default class Ripple extends PureComponent {
-  static defaultProps = {
-    ...TouchableWithoutFeedback.defaultProps,
-
-    rippleColor: "rgb(0, 0, 0)",
-    rippleOpacity: 0.3,
-    rippleDuration: 400,
-    rippleSize: 0,
-    rippleContainerBorderRadius: 0,
-    rippleCentered: false,
-    rippleSequential: false,
-    rippleFades: true,
-    rippleOutsideContainer: false,
-    disabled: false,
-
-    onRippleAnimation: (animation, onComplete) => animation.start(onComplete),
-  };
-
-  static propTypes = {
-    ...Animated.View.propTypes,
-    ...TouchableWithoutFeedback.propTypes,
-
-    children: PropTypes.node.isRequired,
-    rippleColor: PropTypes.string,
-    rippleOpacity: PropTypes.number,
-    rippleDuration: PropTypes.number,
-    rippleSize: PropTypes.number,
-    rippleContainerBorderRadius: PropTypes.number,
-    rippleCentered: PropTypes.bool,
-    rippleSequential: PropTypes.bool,
-    rippleFades: PropTypes.bool,
-    rippleOutsideContainer: PropTypes.bool,
-    disabled: PropTypes.bool,
-
-    onRippleAnimation: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.onLayout = this.onLayout.bind(this);
-    this.onPress = this.onPress.bind(this);
-    this.onPressIn = this.onPressIn.bind(this);
-    this.onPressOut = this.onPressOut.bind(this);
-    this.onLongPress = this.onLongPress.bind(this);
-    this.onAnimationEnd = this.onAnimationEnd.bind(this);
-
-    this.renderRipple = this.renderRipple.bind(this);
-
-    this.unique = 0;
-    this.mounted = false;
-
-    this.state = {
-      width: 0,
-      height: 0,
-      ripples: [],
-    };
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  onLayout(event) {
-    const { width, height } = event.nativeEvent.layout;
-    const { onLayout } = this.props;
-
-    if ("function" === typeof onLayout) {
-      onLayout(event);
-    }
-
-    this.setState({ width, height });
-  }
-
-  onPress(event) {
-    const { ripples } = this.state;
-    const { onPress, rippleSequential } = this.props;
-
-    if (!rippleSequential || !ripples.length) {
-      if ("function" === typeof onPress) {
-        requestAnimationFrame(() => onPress(event));
-      }
-
-      this.startRipple(event);
-    }
-  }
-
-  onLongPress(event) {
-    const { onLongPress } = this.props;
-
-    if ("function" === typeof onLongPress) {
-      requestAnimationFrame(() => onLongPress(event));
-    }
-
-    this.startRipple(event);
-  }
-
-  onPressIn(event) {
-    const { onPressIn } = this.props;
-
-    if ("function" === typeof onPressIn) {
-      onPressIn(event);
-    }
-  }
-
-  onPressOut(event) {
-    const { onPressOut } = this.props;
-
-    if ("function" === typeof onPressOut) {
-      onPressOut(event);
-    }
-  }
-
-  onAnimationEnd() {
-    if (this.mounted) {
-      this.setState(({ ripples }) => ({ ripples: ripples.slice(1) }));
-    }
-  }
-
-  startRipple(event) {
-    const { width, height } = this.state;
-    const { rippleDuration, rippleCentered, rippleSize, onRippleAnimation } =
-      this.props;
-
-    const w2 = 0.5 * width;
-    const h2 = 0.5 * height;
-
-    const { locationX, locationY } = rippleCentered
-      ? { locationX: w2, locationY: h2 }
-      : event.nativeEvent;
-
-    const offsetX = Math.abs(w2 - locationX);
-    const offsetY = Math.abs(h2 - locationY);
-
-    const size =
-      rippleSize > 0
-        ? 0.5 * rippleSize
-        : Math.sqrt(Math.pow(w2 + offsetX, 2) + Math.pow(h2 + offsetY, 2));
-
-    const ripple = {
-      unique: this.unique++,
-      progress: new Animated.Value(0),
-      locationX,
-      locationY,
-      size,
-    };
-
-    const animation = Animated.timing(ripple.progress, {
-      toValue: 1,
-      easing: Easing.out(Easing.ease),
-      duration: rippleDuration,
-      useNativeDriver: true,
-    });
-
-    onRippleAnimation(animation, this.onAnimationEnd);
-
-    this.setState(({ ripples }) => ({ ripples: ripples.concat(ripple) }));
-  }
-
-  renderRipple({ unique, progress, locationX, locationY, size }) {
-    const { rippleColor, rippleOpacity, rippleFades } = this.props;
-
-    const rippleStyle = {
-      top: locationY - radius,
-      [I18nManager.isRTL ? "right" : "left"]: locationX - radius,
-      backgroundColor: rippleColor,
-
-      transform: [
-        {
-          scale: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0.5 / radius, size / radius],
-          }),
-        },
-      ],
-
-      opacity: rippleFades
-        ? progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [rippleOpacity, 0],
-          })
-        : rippleOpacity,
-    };
-
-    return <Animated.View key={unique} style={[styles.ripple, rippleStyle]} />;
-  }
-
-  render() {
-    const { ripples } = this.state;
-    const {
-      delayLongPress,
-      delayPressIn,
-      delayPressOut,
-      disabled,
-      hitSlop,
-      pressRetentionOffset,
-      children,
-      rippleContainerBorderRadius,
-      rippleOutsideContainer,
-      testID,
-      nativeID,
-      accessible,
-      accessibilityHint,
-      accessibilityLabel,
-      ...props
-    } = this.props;
-
-    const touchableProps = {
-      delayLongPress,
-      delayPressIn,
-      delayPressOut,
-      disabled,
-      hitSlop,
-      pressRetentionOffset,
-      testID,
-      accessible,
-      accessibilityHint,
-      accessibilityLabel,
-      onLayout: this.onLayout,
-      onPress: this.onPress,
-      onLongPress: this.onLongPress,
-      onPressIn: this.onPressIn,
-      onPressOut: this.onPressOut,
-
-      ...("web" !== Platform.OS ? { nativeID } : null),
-    };
-
-    const containerStyle = {
-      borderRadius: rippleContainerBorderRadius,
-    };
-
-    return (
-      <TouchableWithoutFeedback {...touchableProps}>
-        <Animated.View {...props} collapsable={false} pointerEvents="box-only">
-          {children}
-          <View
-            style={[styles.container(rippleOutsideContainer), containerStyle]}
-          >
-            {ripples.map(this.renderRipple)}
-          </View>
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: rippleOutsideContainer => ({
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: "transparent",
-    overflow: rippleOutsideContainer ? "visible" : "hidden",
-  }),
-  ripple: {
-    width: radius * 2,
-    height: radius * 2,
-    borderRadius: radius,
-    overflow: "hidden",
-    position: "absolute",
-  },
-});

package/src/components/ScrollView.js

@@ -1,14 +0,0 @@
-import styled from "styled-components/native";
-import { flexbox, space, border, color, layout } from "styled-system";
-
-export const ScrollView = styled.ScrollView.attrs(() => ({
-  keyboardShouldPersistTaps: "handled",
-  showsVerticalScrollIndicator: false,
-  contentContainerStyle: { flexGrow: 1 },
-}))`
-  ${flexbox}
-  ${space}
-  ${border}
-  ${color}
-  ${layout}
-`;

package/src/components/SearchBar.jsx

@@ -1,207 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Dimensions, TouchableWithoutFeedback, StyleSheet } from "react-native";
-
-import { Search } from "@bigbinary/neeto-icons-rn";
-import PropTypes from "prop-types";
-import Animated, {
-  Easing,
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-import styled from "styled-components/native";
-import {
-  flexbox,
-  space,
-  border,
-  buttonStyle,
-  typography,
-  color,
-} from "styled-system";
-
-import { Container, Touchable, Typography } from "@components";
-import { useDebounce } from "@hooks";
-import { theme } from "@theme";
-
-const TextInput = styled.TextInput`
-  ${flexbox}
-  ${space}
-  ${border}
-  ${buttonStyle}
-  ${typography}
-  ${color}
-`;
-
-/**
- * SearchBars are used to search or filter items.
- *
- * <div class="screenshots">
- *   <img src="screenshots/searchbar/searchbar.png" />
- * </div>
- *
- *  ## 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>
- *  );
- * }
- * ```
- */
-
-const { width: screenWidth } = Dimensions.get("window");
-const buttonSize = moderateScale(screenWidth * 0.19);
-
-export const SearchBar = ({
-  placeholder = "Search",
-  onChangeText = () => {},
-  onCancel = () => {},
-  debounceDelay = 1000,
-  showCancelButton = true,
-  containerProps,
-  searchbarProps,
-}) => {
-  const inputRef = useRef();
-  const [searchText, setSearchText] = useState("");
-  const debouncedSearchTextValue = useDebounce(
-    searchText.trim(),
-    Number(debounceDelay)
-  );
-  const buttonWidth = useSharedValue(0);
-  const buttonOpacity = useSharedValue(0);
-
-  useEffect(() => {
-    onChangeText(debouncedSearchTextValue);
-  }, [debouncedSearchTextValue, onChangeText]);
-
-  const animateSearchInput = val => {
-    buttonWidth.value = withTiming(val, {
-      easing: Easing.linear,
-      duration: 200,
-    });
-
-    buttonOpacity.value = withTiming(val, {
-      easing: Easing.linear,
-      duration: 100,
-    });
-  };
-
-  const cancelButtonStyle = useAnimatedStyle(() => ({
-    width: interpolate(buttonWidth.value, [0, 1], [0, buttonSize]),
-    opacity: buttonOpacity.value,
-  }));
-
-  const onCancelHandle = () => {
-    animateSearchInput(0);
-    setSearchText("");
-    inputRef.current.blur();
-    onCancel();
-  };
-
-  return (
-    <Container alignItems="center" flexDirection="row">
-      <TouchableWithoutFeedback
-        onPress={() => {
-          if (!inputRef?.current?.isFocused()) {
-            inputRef?.current?.focus();
-          }
-        }}
-      >
-        <Container
-          alignItems="center"
-          borderColor={theme.colors.border.grey400}
-          borderRadius={moderateScale(8)}
-          borderWidth={moderateScale(1)}
-          flex={1}
-          flexDirection="row"
-          height={moderateScale(42)}
-          {...containerProps}
-        >
-          <Container px={moderateScale(8)}>
-            <Search
-              color={theme.colors.font.grey600}
-              size={moderateScale(22)}
-            />
-          </Container>
-          <TextInput
-            autoCapitalize="none"
-            color="font.primary"
-            flex={1}
-            fontSize={moderateScale(16)}
-            padding={0}
-            placeholder={placeholder}
-            placeholderTextColor={theme.colors.font.grey600}
-            ref={inputRef}
-            returnKeyType="search"
-            value={searchText}
-            onChangeText={setSearchText}
-            onBlur={() => {
-              if (!searchText) animateSearchInput(0);
-            }}
-            onFocus={() => {
-              animateSearchInput(1);
-            }}
-            {...searchbarProps}
-          />
-        </Container>
-      </TouchableWithoutFeedback>
-      {showCancelButton && (
-        <Animated.View style={[styles.cancelButtonWrapper, cancelButtonStyle]}>
-          <Touchable
-            flexGrow={1}
-            height={moderateScale(42)}
-            justifyContent="center"
-            px={moderateScale(8)}
-            onPress={onCancelHandle}
-          >
-            <Typography fontFamily={theme.fonts.sf500} numberOfLines={1}>
-              Cancel
-            </Typography>
-          </Touchable>
-        </Animated.View>
-      )}
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  cancelButtonWrapper: {
-    alignItems: "flex-end",
-    justifyContent: "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]),
-  /**
-   * Takes an object and accepts all the props accepted by TextInput component from React Native.
-   */
-  searchbarProps: PropTypes.object,
-  /**
-   * Method called when the cancel button is pressed.
-   */
-  onCancel: PropTypes.func,
-  /**
-   * option to hide the cancel button. Default is true
-   */
-  showCancelButton: PropTypes.bool,
-  containerProps: PropTypes.object,
-};

package/src/components/SegmentedTopBar/Indicator.jsx

@@ -1,77 +0,0 @@
-import React, { useEffect } from "react";
-import { StyleSheet } from "react-native";
-
-import PropTypes from "prop-types";
-import Animated, {
-  cancelAnimation,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-
-import { theme } from "@theme";
-
-const springConfig = {
-  mass: 1,
-  overshootClamping: true,
-  restSpeedThreshold: 0.5,
-  restDisplacementThreshold: 0.5,
-};
-
-const spacing = moderateScale(6);
-
-export const Indicator = ({ measure }) => {
-  const { x, width, height } = measure;
-
-  const translateX = useSharedValue(0);
-  const animatedWidth = useSharedValue(0);
-
-  useEffect(() => {
-    cancelAnimation(translateX);
-    cancelAnimation(animatedWidth);
-
-    translateX.value = withSpring(x + spacing / 2, springConfig);
-    animatedWidth.value = withSpring(width - spacing, springConfig);
-  }, [animatedWidth, translateX, width, x]);
-
-  const tabTranslateAnimatedStyles = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-    width: animatedWidth.value,
-  }));
-
-  return (
-    <Animated.View
-      style={[
-        styles.movingSegmentStyle,
-        { height: height - spacing },
-        tabTranslateAnimatedStyles,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  movingSegmentStyle: {
-    position: "absolute",
-    top: spacing / 2,
-    borderRadius: moderateScale(6),
-    backgroundColor: theme.colors.background.primary,
-    shadowColor: theme.colors.background.grey,
-    shadowOffset: {
-      width: 0,
-      height: 5,
-    },
-    shadowOpacity: 0.34,
-    shadowRadius: 6.27,
-    elevation: 10,
-  },
-});
-
-Indicator.propTypes = {
-  measure: PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-  }).isRequired,
-};

package/src/components/SegmentedTopBar/Tab.jsx

@@ -1,37 +0,0 @@
-import React, { forwardRef, useCallback } from "react";
-import { View } from "react-native";
-
-import PropTypes from "prop-types";
-
-import { Typography, Touchable } from "@components";
-
-export const Tab = forwardRef(({ label, value, navigation, flex }, ref) => {
-  const handleOnPress = useCallback(
-    () => navigation.navigate(value),
-    [navigation, value]
-  );
-
-  return (
-    <View ref={ref} style={{ flex }}>
-      <Touchable flex={1} justifyContent="center" onPress={handleOnPress}>
-        <Typography
-          fontFamily="sf500"
-          fontSize="xs"
-          numberOfLines={1}
-          textAlign="center"
-        >
-          {label}
-        </Typography>
-      </Touchable>
-    </View>
-  );
-});
-
-Tab.displayName = "Tab";
-
-Tab.propTypes = {
-  flex: PropTypes.number,
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  navigation: PropTypes.object,
-};