Merge branch 'release/4.3.0'

components/Icon/assets/index.js

@@ -13,6 +13,8 @@ import camSwitch from './cam-switch.svg';
 import cart from './cart.svg';
 import checkboxOff from './checkbox-off.svg';
 import checkboxOn from './checkbox-on.svg';
+import checkbocRectangleOff from './checkbox-rectangle-off';
+import checkbocRectangleOn from './checkbox-rectangle-on';
 import clearText from './clear-text.svg';
 import close from './close.svg';
 import comment from './comment.svg';
@@ -111,6 +113,8 @@ export const defaultConfig = [
   { name: 'cart', icon: cart },
   { name: 'checkbox-off', icon: checkboxOff },
   { name: 'checkbox-on', icon: checkboxOn },
+  { name: 'checkbox-rectangle-off', icon: checkbocRectangleOff },
+  { name: 'checkbox-rectangle-on', icon: checkbocRectangleOn },
   { name: 'clear-text', icon: clearText },
   { name: 'close', icon: close },
   { name: 'comment', icon: comment },

components/InlineDropDownMenu/InlineDropDownMenu.js

@@ -0,0 +1,130 @@
+import React, { PureComponent } from 'react';
+import autoBindReact from 'auto-bind/react';
+import { FlatList, Animated } from 'react-native';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
+import { Caption, Text } from '../Text';
+import { Icon } from '../Icon';
+import { InlineDropDownMenuItem } from './InlineDropDownMenuItem';
+
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
+
+const optionShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  key: PropTypes.string.isRequired,
+});
+
+class InlineDropDownMenu extends PureComponent {
+  static propTypes = {
+    heading: PropTypes.string,
+    selectedDescriptor: PropTypes.string,
+    options: PropTypes.arrayOf(optionShape).isRequired,
+    onOptionSelected: PropTypes.func,
+    selectedOption: optionShape,
+  };
+
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+
+    this.dropDownIconValue = new Animated.Value(0);
+
+    this.state = {
+      collapsed: false,
+    };
+  }
+
+  handleToggleMenuPress() {
+    const { collapsed } = this.state;
+
+    const toValue = collapsed ? 0 : 1;
+
+    this.setState(
+      { collapsed: !collapsed },
+      () => Animated.timing(
+        this.dropDownIconValue,
+        {
+          toValue,
+          useNativeDriver: true,
+          duration: 300,
+        }
+      ).start());
+  }
+
+  handleOptionPress(option) {
+    const { onOptionSelected } = this.props;
+
+    if (onOptionSelected) {
+      onOptionSelected(option);
+    }
+
+    this.handleToggleMenuPress();
+  }
+
+  renderOption({ item, index }) {
+    const { selectedOption, selectedDescriptor } = this.props;
+
+    const isSelected = selectedOption.key === item.key;
+
+    return (
+      <InlineDropDownMenuItem
+        item={item}
+        isSelected={isSelected}
+        index={index}
+        selectedDescriptor={selectedDescriptor}
+        onItemPressed={this.handleOptionPress}
+      />
+    )
+  }
+
+  render() {
+    const {
+      style,
+      heading,
+      selectedOption,
+      options,
+    } = this.props;
+    const { collapsed } = this.state;
+
+    return (
+      <View>
+        <TouchableOpacity style={style.container} onPress={this.handleToggleMenuPress}>
+          <Caption styleName="muted md-gutter-bottom">{heading}</Caption>
+          <View styleName="space-between horizontal v-center">
+            <Text>{selectedOption?.title}</Text>
+            <AnimatedIcon
+              name="drop-down"
+              styleName="md-gutter-left"
+              style={{
+                ...style.icon,
+                transform: [{
+                  rotate: this.dropDownIconValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0deg', '180deg']
+                  })
+                }]
+              }}
+            />
+          </View>
+        </TouchableOpacity>
+        {collapsed && (
+          <FlatList
+            data={options}
+            renderItem={this.renderOption}
+            contentContainerStyle={style.list}
+          />
+        )}
+      </View>
+    );
+  }
+}
+
+const StyledComponent = connectStyle('shoutem.ui.InlineDropDownMenu')(
+  InlineDropDownMenu,
+);
+
+export { StyledComponent as InlineDropDownMenu };

components/InlineDropDownMenu/InlineDropDownMenuItem.js

@@ -0,0 +1,85 @@
+import React, { PureComponent } from 'react';
+import autoBindReact from 'auto-bind/react';
+import { Animated, Dimensions } from 'react-native';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { TouchableOpacity } from '../TouchableOpacity';
+import { Text } from '../Text';
+
+const window = Dimensions.get('window');
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+class InlineDropDownMenuItem extends PureComponent {
+  static propTypes = {
+    item: PropTypes.object,
+    index: PropTypes.number,
+    selectedDescriptor: PropTypes.string,
+    onItemPressed: PropTypes.func,
+    isSelected: PropTypes.bool,
+  };
+
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+
+    this.animatedValue = new Animated.Value(0);
+  }
+
+  componentDidMount() {
+    const { index } = this.props;
+
+    Animated.timing(
+      this.animatedValue,
+      {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300 + index * 15,
+      }
+    ).start();
+  }
+
+  handlePress() {
+    const { onItemPressed, item } = this.props;
+
+    if (onItemPressed) {
+      onItemPressed(item);
+    }
+  }
+
+  render() {
+    const { isSelected, selectedDescriptor, item, style } = this.props;
+
+    const resolvedText = isSelected ? `${item.title} (${selectedDescriptor})` : item.title;
+    const textStyle = isSelected ? 'muted' : '';
+
+    return (
+      <AnimatedTouchable
+        style={[
+          style.container,
+          {
+            transform: [
+              {
+                translateX: this.animatedValue.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [window.width, 0],
+                })
+              }
+            ],
+          }
+        ]}
+        disabled={isSelected}
+        onPress={this.handlePress}
+      >
+        <Text styleName={textStyle}>{resolvedText}</Text>
+      </AnimatedTouchable>
+    );
+  }
+}
+
+const StyledComponent = connectStyle('shoutem.ui.InlineDropDownMenuItem')(
+  InlineDropDownMenuItem,
+);
+
+export { StyledComponent as InlineDropDownMenuItem };

components/InlineDropDownMenu/index.js

@@ -0,0 +1,2 @@
+export { InlineDropDownMenu } from './InlineDropDownMenu';
+export { InlineDropDownMenuItem } from './InlineDropDownMenuItem';

components/TabMenu/TabMenu.js

@@ -0,0 +1,64 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import { ScrollView, LayoutAnimation } from 'react-native';
+import { connectStyle } from '@shoutem/theme';
+import { optionShape } from './const';
+import { TabMenuItem } from './TabMenuItem';
+
+class TabMenu extends PureComponent {
+  static propTypes = {
+    options: PropTypes.arrayOf(optionShape).isRequired,
+    onOptionSelected: PropTypes.func,
+    selectedOption: optionShape,
+    style: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+  }
+
+  handleOptionSelected(option) {
+    const { onOptionSelected } = this.props;
+
+    LayoutAnimation.easeInEaseOut();
+    onOptionSelected(option);
+  }
+
+  renderOption(option) {
+    const { selectedOption } = this.props;
+
+    const isSelected = selectedOption && option.title === selectedOption.title;
+
+    return (
+      <TabMenuItem
+        key={option.title}
+        isSelected={isSelected}
+        item={option}
+        onItemPressed={this.handleOptionSelected}
+      />
+    );
+  }
+
+  render() {
+    const { style, options } = this.props;
+
+    return (
+      <ScrollView
+        horizontal
+        contentContainerStyle={style.container}
+        showsHorizontalScrollIndicator={false}
+        style={style.list}
+      >
+        {_.map(options, this.renderOption)}
+      </ScrollView>
+    );
+  }
+}
+
+const StyledTabMenu = connectStyle('shoutem.ui.TabMenu')(TabMenu);
+
+export { StyledTabMenu as TabMenu };

components/TabMenu/TabMenuItem.js

@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react';
+import { LayoutAnimation } from 'react-native';
+import PropTypes from 'prop-types';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import { connectStyle } from '@shoutem/theme';
+import { Text } from '../Text';
+import { View } from '../View';
+import { TouchableOpacity } from '../TouchableOpacity';
+import { optionShape } from './const';
+
+class TabMenuItem extends PureComponent {
+  static propTypes = {
+    item: optionShape,
+    onItemPressed: PropTypes.any,
+    isSelected: PropTypes.bool,
+    style: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+
+    this.state = {
+      baseWidth: 0,
+    };
+  }
+
+  handleItemPressed() {
+    const { onItemPressed, item } = this.props;
+
+    onItemPressed(item);
+  }
+
+  handleLayout({ nativeEvent: { layout: { width } } }) {
+
+    LayoutAnimation.easeInEaseOut();
+    this.setState({ baseWidth: width });
+  }
+
+  render() {
+    const { style, isSelected, item } = this.props;
+    const { baseWidth } = this.state;
+
+    return (
+      <TouchableOpacity
+        onPress={this.handleItemPressed}
+        styleName="vertical h-center"
+      >
+        <Text
+          style={[style.text, isSelected && style.selectedText]}
+          onLayout={this.handleLayout}
+        >
+          {item.title}
+        </Text>
+        {isSelected && <View style={[style.tabulator, { width: baseWidth }]} />}
+      </TouchableOpacity>
+    );
+  }
+}
+
+const StyledTabMenuItem = connectStyle('shoutem.ui.TabMenuItem')(TabMenuItem);
+
+export { StyledTabMenuItem as TabMenuItem };

components/TabMenu/const.js

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const optionShape = PropTypes.shape({
+  title: PropTypes.string,
+  value: PropTypes.any,
+});

components/TabMenu/index.js

@@ -0,0 +1 @@
+export { TabMenu } from './TabMenu';