Merge pull request #723 from shoutem/release/5.2.0

Release/5.2.0

Author: majaklajic

components/ActionSheet/ActionSheet.js

@@ -33,14 +33,6 @@ class ActionSheet extends PureComponent {
     return null;
   }
 
-  static propTypes = {
-    style: PropTypes.any,
-    confirmOptions: PropTypes.arrayOf(optionPropType),
-    cancelOptions: PropTypes.arrayOf(optionPropType),
-    active: PropTypes.bool,
-    onDismiss: PropTypes.func,
-  };
-
   constructor(props) {
     super(props);
 
@@ -187,4 +179,19 @@ class ActionSheet extends PureComponent {
   }
 }
 
+ActionSheet.propTypes = {
+  style: PropTypes.object.isRequired,
+  active: PropTypes.bool,
+  cancelOptions: PropTypes.arrayOf(optionPropType),
+  confirmOptions: PropTypes.arrayOf(optionPropType),
+  onDismiss: PropTypes.func,
+};
+
+ActionSheet.defaultProps = {
+  active: false,
+  cancelOptions: undefined,
+  confirmOptions: undefined,
+  onDismiss: undefined,
+};
+
 export default connectStyle('shoutem.ui.ActionSheet')(ActionSheet);

components/ActionSheet/ActionSheetOption.js

@@ -26,9 +26,14 @@ function ActionSheetOption({ style, option, cancelOption }) {
 }
 
 ActionSheetOption.propTypes = {
-  style: PropTypes.any,
-  option: optionPropType,
+  style: PropTypes.object.isRequired,
   cancelOption: PropTypes.bool,
+  option: optionPropType,
+};
+
+ActionSheetOption.defaultProps = {
+  option: undefined,
+  cancelOption: false,
 };
 
 export default connectStyle('shoutem.ui.ActionSheetOption')(ActionSheetOption);

components/Button.js

@@ -5,18 +5,14 @@ import { connectStyle } from '@shoutem/theme';
 
 class Button extends PureComponent {
   render() {
-    // The underlayColor is not a valid RN style
-    // property, so we have to unset it here.
-    const style = {
-      ...this.props.style,
-    };
-    delete style.underlayColor;
+    const { style, ...otherProps } = this.props;
+    const { underlayColor, ...otherStyle } = style;
 
     return (
       <TouchableOpacity
-        {...this.props}
-        style={style}
-        underlayColor={this.props.style.underlayColor}
+        {...otherProps}
+        style={otherStyle}
+        underlayColor={underlayColor}
       />
     );
   }

components/CategoryPicker/Category.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { Text } from '../Text';
+import { TouchableOpacity } from '../TouchableOpacity';
+import { categoryShape } from './shapes';
+
+function Category({ category, style, isSelected, onPress }) {
+  const textStyle = useMemo(
+    () => [style.category, !isSelected && style.selectedCategory],
+
+    [isSelected, style.category, style.selectedCategory],
+  );
+
+  function handlePress() {
+    if (isSelected) {
+      return;
+    }
+
+    if (onPress) {
+      onPress(category);
+    }
+  }
+
+  return (
+    <TouchableOpacity onPress={handlePress} style={style.container}>
+      <Text style={textStyle}>{category.name}</Text>
+    </TouchableOpacity>
+  );
+}
+
+Category.propTypes = {
+  category: categoryShape.isRequired,
+  isSelected: PropTypes.bool,
+  style: PropTypes.object,
+  onPress: PropTypes.func,
+};
+
+Category.defaultProps = {
+  style: {},
+  isSelected: false,
+  onPress: undefined,
+};
+
+export default React.memo(connectStyle('shoutem.ui.Category')(Category));

components/CategoryPicker/CategoryPicker.js

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { FlatList } from 'react-native';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { View } from '../View';
+import Category from './Category';
+import { categoryShape } from './shapes';
+
+export function CategoryPicker({
+  categories,
+  onCategorySelected,
+  style,
+  selectedCategory,
+}) {
+  const renderItem = useCallback(
+    ({ item: category }) => (
+      <Category
+        category={category}
+        key={category.id}
+        onPress={onCategorySelected}
+        isSelected={selectedCategory.id === category.id}
+      />
+    ),
+    [selectedCategory.id, onCategorySelected],
+  );
+
+  if (_.size(categories) < 2) {
+    return null;
+  }
+
+  return (
+    <View style={style.container}>
+      <FlatList
+        horizontal
+        scrollToOverflowEnabled
+        contentContainerStyle={style.listContainer}
+        showsHorizontalScrollIndicator={false}
+        data={categories}
+        renderItem={renderItem}
+      />
+    </View>
+  );
+}
+
+CategoryPicker.propTypes = {
+  categories: PropTypes.arrayOf(categoryShape),
+  selectedCategory: categoryShape,
+  style: PropTypes.object,
+  onCategorySelected: PropTypes.func,
+};
+
+CategoryPicker.defaultProps = {
+  categories: [],
+  style: {},
+  selectedCategory: undefined,
+  onCategorySelected: undefined,
+};
+
+export default React.memo(
+  connectStyle('shoutem.ui.CategoryPicker')(CategoryPicker),
+);

components/CategoryPicker/index.js

@@ -0,0 +1 @@
+export { default as CategoryPicker } from './CategoryPicker';

components/CategoryPicker/shapes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export const categoryShape = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string,
+});

components/DateTimePicker.js

@@ -198,21 +198,24 @@ class DateTimePicker extends PureComponent {
 }
 
 DateTimePicker.propTypes = {
+  style: PropTypes.object.isRequired,
   cancelButtonText: PropTypes.string,
   confirmButtonText: PropTypes.string,
   is24Hour: PropTypes.bool,
   mode: PropTypes.oneOf(Object.values(DATEPICKER_MODES)),
-  onValueChanged: PropTypes.func,
   textValue: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  onValueChanged: PropTypes.func,
 };
 
 DateTimePicker.defaultProps = {
   cancelButtonText: 'Cancel',
   confirmButtonText: 'Confirm',
   is24Hour: false,
   mode: 'datetime',
+  textValue: undefined,
   value: new Date(),
+  onValueChanged: undefined,
 };
 
 const StyledDateTimePicker = connectStyle('shoutem.ui.DateTimePicker')(

components/DropDownMenu/DropDownMenu.js

@@ -10,31 +10,8 @@ import { View } from '../View';
 import { DropDownModal } from './DropDownModal';
 
 const modalSpecificProps = ['visible', 'onClose'];
-const dropDownMenuPropTypes = {
-  ..._.omit(DropDownModal.propTypes, modalSpecificProps),
-};
 
 class DropDownMenu extends PureComponent {
-  /**
-   * @see DropDownModal.propTypes
-   */
-  static propTypes = {
-    /**
-     * Icon displayed on dropdown menu button
-     */
-    iconName: PropTypes.string,
-    /**
-     * Whether the text should be displayed next to dropdown icon or not
-     */
-    showSelectedOption: PropTypes.bool,
-    ...dropDownMenuPropTypes,
-  };
-
-  static defaultProps = {
-    iconName: 'drop-down',
-    showSelectedOption: true,
-  };
-
   constructor(props) {
     super(props);
 
@@ -105,6 +82,26 @@ class DropDownMenu extends PureComponent {
   }
 }
 
+/**
+ * @see DropDownModal.propTypes
+ */
+DropDownMenu.propTypes = {
+  /**
+   * Icon displayed on dropdown menu button
+   */
+  iconName: PropTypes.string,
+  /**
+   * Whether the text should be displayed next to dropdown icon or not
+   */
+  showSelectedOption: PropTypes.bool,
+  ..._.omit(DropDownModal.propTypes, modalSpecificProps),
+};
+
+DropDownMenu.defaultProps = {
+  iconName: 'drop-down',
+  showSelectedOption: true,
+};
+
 const StyledDropDownMenu = connectStyle('shoutem.ui.DropDownMenu')(
   DropDownMenu,
 );