Component/Segment

src/segment/Option.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { Text, StyleSheet, TouchableOpacity, Dimensions } from "react-native";
+import PropTypes from "prop-types";
+
+const { width: deviceWidth } = Dimensions.get("window");
+
+class Option extends React.Component {
+  static defaultProps = {
+    selected: false
+  };
+
+  onPress = () => {
+    if (this.props.onSelect) {
+      this.props.onSelect(!this.props.selected);
+    }
+  };
+
+  isValidString = value => {
+    if (value && value.length > 0) {
+      return true;
+    }
+    return false;
+  };
+
+  getComponentStyle = () => {
+    // const optionWidth = deviceWidth / this.props.optionsCount;
+    const optionWidth = deviceWidth / 5;
+    return {
+      width: optionWidth
+    };
+  };
+
+  renderTitle = style => {
+    const { title, titleStyle } = this.props;
+
+    const titleColor = this.props.selected
+      ? (this.props.indicatorStyle && this.props.indicatorStyle.color) ||
+        this.props.theme.COLORS.BLACK
+      : this.props.theme.COLORS.MUTED;
+
+    return (
+      <Text
+        key={1}
+        style={[
+          style,
+          {
+            color: titleColor,
+            fontSize: this.props.theme.SIZES.FONT,
+            lineHeight: this.props.theme.SIZES.BASE
+          },
+          titleStyle
+        ]}
+      >
+        {title}
+      </Text>
+    );
+  };
+
+  renderIcon = style => {
+    const iconElement = this.props.icon(style);
+
+    return React.cloneElement(iconElement, {
+      key: 2,
+      style: [style, iconElement.props.style]
+    });
+  };
+
+  renderChildren = style => {
+    const { title, icon } = this.props;
+
+    return [
+      icon && this.renderIcon(style.icon),
+      this.isValidString(title) && this.renderTitle(style.title)
+    ];
+  };
+
+  render() {
+    const { style, ...rest } = this.props;
+    const componentStyle = this.getComponentStyle();
+    const [iconElement, titleElement] = this.renderChildren({
+      icon: styles.icon,
+      title: styles.title
+    });
+
+    return (
+      <TouchableOpacity
+        activeOpacity={1.0}
+        {...rest}
+        style={[styles.container, componentStyle, style]}
+        onPress={this.onPress}
+      >
+        {iconElement}
+        {titleElement}
+      </TouchableOpacity>
+    );
+  }
+}
+
+Option.propTypes = {
+  style: PropTypes.any,
+  selected: PropTypes.bool,
+  onSelect: PropTypes.func,
+  optionsCount: PropTypes.number,
+  indicatorStyle: PropTypes.object,
+  theme: PropTypes.any,
+  rest: PropTypes.any
+};
+
+export default Option;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  icon: {
+    height: 24,
+    marginVertical: 2,
+    tintColor: "#8F9BB3",
+    width: 24
+  },
+  title: {
+    fontWeight: "bold",
+    marginVertical: 2
+  }
+});

src/segment/OptionBar.js

@@ -0,0 +1,125 @@
+import React from "react";
+import { StyleSheet, View, ScrollView } from "react-native";
+import PropTypes from "prop-types";
+import OptionIndicator from "./OptionIndicator";
+
+class OptionsBar extends React.Component {
+  static defaultProps = {
+    selectedIndex: 0
+  };
+
+  optionIndicatorRef = React.createRef();
+
+  onOptionSelect = index => {
+    if (this.props.onSelect) {
+      this.props.onSelect(index);
+    }
+  };
+
+  scrollToIndex(params) {
+    const { current: optionIndicator } = this.optionIndicatorRef;
+    optionIndicator.scrollToIndex(params);
+  }
+
+  scrollToOffset(params) {
+    const { current: optionIndicator } = this.optionIndicatorRef;
+    optionIndicator.scrollToOffset(params);
+  }
+
+  isOptionSelected = index => {
+    return index === this.props.selectedIndex;
+  };
+
+  renderOption = (element, index) => {
+    return React.cloneElement(element, {
+      key: index,
+      style: [styles.item, element.props.style],
+      selected: this.isOptionSelected(index),
+      onSelect: () => this.onOptionSelect(index),
+      optionsCount: React.Children.count(this.props.children),
+      indicatorStyle: this.props.indicatorStyle,
+      theme: this.props.theme
+    });
+  };
+
+  renderOptions = source => {
+    return React.Children.map(source, this.renderOption);
+  };
+
+  render() {
+    const {
+      style,
+      indicatorStyle,
+      selectedIndex,
+      children,
+      theme,
+      ...rest
+    } = this.props;
+
+    const options = this.renderOptions(children);
+
+    return (
+      <View>
+        <ScrollView
+          showsHorizontalScrollIndicator={false}
+          horizontal
+          contentContainerStyle={{
+            flexGrow: 1
+          }}
+          {...rest}
+        >
+          <View
+            style={[
+              styles.optionsWrapper,
+              {
+                borderBottomColor: theme.COLORS.MUTED,
+                borderBottomWidth: StyleSheet.hairlineWidth
+              },
+              style
+            ]}
+          >
+            {options}
+          </View>
+          <OptionIndicator
+            ref={this.optionIndicatorRef}
+            style={[
+              styles.indicator,
+              { backgroundColor: theme.COLORS.BLACK },
+              indicatorStyle
+            ]}
+            selectedPosition={selectedIndex}
+            positions={options.length}
+          />
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+OptionsBar.propTypes = {
+  style: PropTypes.any,
+  indicatorStyle: PropTypes.any,
+  selectedIndex: PropTypes.number,
+  children: PropTypes.node,
+  onSelect: PropTypes.func,
+  theme: PropTypes.any,
+  rest: PropTypes.any
+};
+
+export default OptionsBar;
+
+const styles = StyleSheet.create({
+  optionsWrapper: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: "#FFFFFF",
+    paddingVertical: 4
+  },
+  item: {
+    flex: 1
+  },
+  indicator: {
+    borderRadius: 2,
+    height: 2
+  }
+});

src/segment/OptionIndicator.js

@@ -0,0 +1,117 @@
+import React from "react";
+import {
+  Animated,
+  Easing,
+  I18nManager,
+  Dimensions,
+  StyleSheet
+} from "react-native";
+import PropTypes from "prop-types";
+
+const { width: deviceWidth } = Dimensions.get("window");
+
+class TabIndicator extends React.Component {
+  static defaultProps = {
+    selectedPosition: 0,
+    animationDuration: 200
+  };
+
+  indicatorWidth;
+  contentOffset = new Animated.Value(0);
+
+  componentDidMount() {
+    this.contentOffset.addListener(this.onContentOffsetAnimationStateChanged);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.selectedPosition !== nextProps.selectedPosition;
+  }
+
+  componentDidUpdate() {
+    const { selectedPosition: index } = this.props;
+
+    this.scrollToIndex({ index, animated: true });
+  }
+
+  componentWillUnmount() {
+    this.contentOffset.removeAllListeners();
+  }
+
+  scrollToIndex(params) {
+    const { index, ...rest } = params;
+    const offset = this.indicatorWidth * index;
+
+    this.scrollToOffset({ offset, ...rest });
+  }
+
+  scrollToOffset(params) {
+    this.createOffsetAnimation(params).start(
+      this.onContentOffsetAnimationStateEnd
+    );
+  }
+
+  onContentOffsetAnimationStateChanged = state => {};
+
+  onContentOffsetAnimationStateEnd = result => {};
+
+  createOffsetAnimation = params => {
+    const animationDuration = params.animated
+      ? this.props.animationDuration
+      : 0;
+
+    return Animated.timing(this.contentOffset, {
+      toValue: I18nManager.isRTL ? -params.offset : params.offset,
+      duration: animationDuration,
+      easing: Easing.linear
+    });
+  };
+
+  onLayout = event => {
+    this.indicatorWidth = event.nativeEvent.layout.width;
+
+    this.scrollToOffset({
+      offset: this.indicatorWidth * this.props.selectedPosition,
+      animated: false
+    });
+  };
+
+  getComponentStyle = () => {
+    // const indicatorWidth = deviceWidth / this.props.positions;
+    const indicatorWidth = deviceWidth / 5;
+
+    return {
+      width: indicatorWidth,
+      transform: [{ translateX: this.contentOffset }]
+    };
+  };
+
+  render() {
+    const { style, ...rest } = this.props;
+    const componentStyle = this.getComponentStyle();
+
+    return (
+      <Animated.View
+        {...rest}
+        onLayout={this.onLayout}
+        style={[styles.container, style, componentStyle]}
+      />
+    );
+  }
+}
+
+TabIndicator.propTypes = {
+  style: PropTypes.any,
+  selectedPosition: PropTypes.number,
+  animationDuration: PropTypes.number,
+  rest: PropTypes.any
+};
+
+export default TabIndicator;
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 0,
+    left: 0
+  }
+});