@shoutem/ui 5.0.1-rc.0 → 5.2.0

package/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);

package/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);

package/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}
       />
     );
   }

package/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));

package/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),
+);

package/components/CategoryPicker/index.js

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

package/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,
+});

package/components/DateTimePicker.js

@@ -198,13 +198,14 @@ 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 = {
@@ -212,7 +213,9 @@ DateTimePicker.defaultProps = {
   confirmButtonText: 'Confirm',
   is24Hour: false,
   mode: 'datetime',
+  textValue: undefined,
   value: new Date(),
+  onValueChanged: undefined,
 };
 
 const StyledDateTimePicker = connectStyle('shoutem.ui.DateTimePicker')(

package/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,
 );

package/components/DropDownMenu/DropDownModal.js

@@ -15,57 +15,6 @@ import { View } from '../View';
 const window = Dimensions.get('window');
 
 class DropDownModal extends PureComponent {
-  static propTypes = {
-    /**
-     * Callback that is called when dropdown option is selected
-     */
-    onOptionSelected: PropTypes.func,
-    /**
-     * Collection of objects which will be shown as options in DropDownMenu
-     */
-    options: PropTypes.array.isRequired,
-    /**
-     * Selected option that will be shown.
-     */
-    selectedOption: PropTypes.any.isRequired,
-    /**
-     * Key name that represents option's string value,
-     * and it will be displayed to the user in the UI
-     */
-    titleProperty: PropTypes.string.isRequired,
-    /**
-     * Key name that represents option's value
-     */
-    valueProperty: PropTypes.string.isRequired,
-    /**
-     * Number of options shown without scroll.
-     * Can be set trough DropDown style.visibleOptions.
-     * Prop definition overrides style.
-     */
-    visibleOptions: PropTypes.number,
-    /**
-     * Optional render function, for every item in the list.
-     * Input parameter should be shaped as one of the items from the
-     * options object
-     */
-    renderOption: PropTypes.func,
-    /**
-     * Visibility flag, controling the modal visibility
-     */
-    visible: PropTypes.bool,
-    /**
-     * Callback that is called when modal should be closed
-     */
-    onClose: PropTypes.func,
-    style: PropTypes.object,
-  };
-
-  static defaultProps = {
-    renderOption: (option, titleProperty) => (
-      <Text>{option[titleProperty].toUpperCase()}</Text>
-    ),
-  };
-
   static DEFAULT_VISIBLE_OPTIONS = 8;
 
   constructor(props) {
@@ -111,14 +60,16 @@ class DropDownModal extends PureComponent {
   close() {
     const { onClose } = this.props;
 
-    if (onClose) {
+    if (_.isFunction(onClose)) {
       onClose();
     }
   }
 
   emitOnOptionSelectedEvent(option) {
-    if (this.props.onOptionSelected) {
-      this.props.onOptionSelected(option);
+    const { onOptionSelected } = this.props;
+
+    if (_.isFunction(onOptionSelected)) {
+      onOptionSelected(option);
     }
   }
 
@@ -299,6 +250,57 @@ class DropDownModal extends PureComponent {
   }
 }
 
+DropDownModal.propTypes = {
+  /**
+   * Collection of objects which will be shown as options in DropDownMenu
+   */
+  options: PropTypes.array.isRequired,
+  /**
+   * Selected option that will be shown.
+   */
+  selectedOption: PropTypes.any.isRequired,
+  style: PropTypes.object.isRequired,
+  /**
+   * Key name that represents option's string value,
+   * and it will be displayed to the user in the UI
+   */
+  titleProperty: PropTypes.string.isRequired,
+  /**
+   * Optional render function, for every item in the list.
+   * Input parameter should be shaped as one of the items from the
+   * options object
+   */
+  renderOption: PropTypes.func,
+  /**
+   * Visibility flag, controling the modal visibility
+   */
+  visible: PropTypes.bool,
+  /**
+   * Number of options shown without scroll.
+   * Can be set trough DropDown style.visibleOptions.
+   * Prop definition overrides style.
+   */
+  visibleOptions: PropTypes.number,
+  /**
+   * Callback that is called when modal should be closed
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback that is called when dropdown option is selected
+   */
+  onOptionSelected: PropTypes.func,
+};
+
+DropDownModal.defaultProps = {
+  renderOption: (option, titleProperty) => (
+    <Text>{option[titleProperty].toUpperCase()}</Text>
+  ),
+  visible: false,
+  visibleOptions: undefined,
+  onClose: undefined,
+  onOptionSelected: undefined,
+};
+
 const StyledModal = connectStyle('shoutem.ui.DropDownModal')(DropDownModal);
 
 export { StyledModal as DropDownModal };

package/components/EmptyStateView.js

@@ -8,11 +8,6 @@ import { Subtitle, Text } from './Text';
 import { View } from './View';
 
 class EmptyStateView extends PureComponent {
-  static defaultProps = {
-    retryButtonTitle: 'TRY AGAIN',
-    icon: 'error',
-  };
-
   constructor(props) {
     super(props);
 
@@ -20,13 +15,15 @@ class EmptyStateView extends PureComponent {
   }
 
   onRetry() {
-    this.props.onRetry();
+    const { onRetry } = this.props;
+
+    onRetry();
   }
 
   renderRetryButton() {
     const { retryButtonTitle } = this.props;
 
-    // Show retry button at the bottom only if there is an onRetry action passed.
+    // Show retry button at the bottom only if there is an onRetry action passed
     return (
       <View styleName="horizontal anchor-bottom">
         <Button styleName="full-width" onPress={this.onRetry}>
@@ -37,10 +34,10 @@ class EmptyStateView extends PureComponent {
   }
 
   render() {
-    const { icon, message, onRetry } = this.props;
+    const { icon, message, onRetry, ...otherProps } = this.props;
 
     return (
-      <View {...this.props} styleName="vertical flexible h-center v-center">
+      <View {...otherProps} styleName="vertical flexible h-center v-center">
         <View styleName="icon-placeholder">
           <Icon name={icon} />
         </View>
@@ -54,10 +51,17 @@ class EmptyStateView extends PureComponent {
 }
 
 EmptyStateView.propTypes = {
-  ...EmptyStateView.propTypes,
-  onRetry: PropTypes.func,
-  message: PropTypes.string,
   icon: PropTypes.string,
+  message: PropTypes.string,
+  retryButtonTitle: PropTypes.string,
+  onRetry: PropTypes.func,
+};
+
+EmptyStateView.defaultProps = {
+  icon: 'error',
+  message: undefined,
+  retryButtonTitle: 'TRY AGAIN',
+  onRetry: undefined,
 };
 
 const StyledView = connectStyle('shoutem.ui.EmptyStateView')(EmptyStateView);

package/components/FormGroup.js

@@ -5,7 +5,9 @@ import { View } from './View';
 
 class FormGroup extends PureComponent {
   render() {
-    return <View {...this.props}>{this.props.children}</View>;
+    const { children, ...otherProps } = this.props;
+
+    return <View {...otherProps}>{children}</View>;
   }
 }
 
@@ -13,6 +15,10 @@ FormGroup.propTypes = {
   ...View.propTypes,
 };
 
+FormGroup.defaultProps = {
+  ...View.defaultProps,
+};
+
 const AnimatedFormGroup = connectAnimation(FormGroup);
 const StyledFormGroup = connectStyle('shoutem.ui.FormGroup')(AnimatedFormGroup);
 

package/components/GridRow.js

@@ -35,8 +35,8 @@ class GridRow extends PureComponent {
 }
 
 GridRow.propTypes = {
-  columns: PropTypes.number.isRequired,
   ...ViewPropTypes,
+  columns: PropTypes.number.isRequired,
 };
 
 /* eslint-disable no-param-reassign */

package/components/HorizontalPager/HorizontalPager.js

@@ -19,61 +19,20 @@ import { Page } from './Page';
  *
  */
 class HorizontalPager extends PureComponent {
-  static propTypes = {
-    // Prop defining whether the Pager will bounce back
-    // when user tries to swipe beyond end of content (iOS only)
-    bounces: PropTypes.bool,
-    // Array containing objects (pages)
-    data: PropTypes.arrayOf(PropTypes.object).isRequired,
-    // Callback function called when user swipes between pages (images)
-    // Index of new (selected) page is passed to this callback
-    onIndexSelected: PropTypes.func,
-    // Page margin, margin visible between pages, during swipe gesture.
-    pageMargin: PropTypes.number,
-    // A function which renders a single page
-    // renderPage(pageData, pageIndex)
-    renderPage: PropTypes.func,
-    // Callback function that can be used to render overlay over pages
-    // For example page indicators using `PageIndicators` component
-    // renderOverlay(pageData, pageIndex, layout)
-    renderOverlay: PropTypes.func,
-    // Callback function that can be used to define placeholder
-    // that appears when content is loading
-    renderPlaceholder: PropTypes.func,
-    // Initially selected page in gallery
-    selectedIndex: PropTypes.number,
-    // Prop that forces enables or disables swiping
-    scrollEnabled: PropTypes.bool,
-    // Style prop used to override default (theme) styling
-    style: PropTypes.object,
-    // Prop that reduces page size by pageMargin, allowing 'sneak peak' of next page
-    showNextPage: PropTypes.bool,
-    // Always render only central (currently loaded) page plus `surroundingPagesToLoad`
-    // to the left and to the right. If currently rendered page is out of bounds,
-    // empty `View` (with set dimensions for proper scrolling) will be rendered
-    // Defaults to 2.
-    surroundingPagesToLoad: PropTypes.number,
-  };
-
-  static defaultProps = {
-    pageMargin: 0,
-    selectedIndex: 0,
-    showNextPage: false,
-    surroundingPagesToLoad: 2,
-  };
-
   constructor(props) {
     super(props);
 
     autoBindReact(this);
 
+    const { selectedIndex, pageMargin, showNextPage } = props;
+
     this.state = {
       width: 0,
       height: 0,
-      selectedIndex: this.props.selectedIndex,
-      initialSelectedIndex: this.props.selectedIndex,
-      pageMargin: this.props.pageMargin,
-      showNextPage: this.props.showNextPage,
+      selectedIndex,
+      initialSelectedIndex: selectedIndex,
+      pageMargin,
+      showNextPage,
       shouldRenderContent: false,
       scrolledToInitialIndex: false,
     };
@@ -98,16 +57,17 @@ class HorizontalPager extends PureComponent {
   }
 
   onLayoutContainer(event) {
-    const { width, height } = event.nativeEvent.layout;
-    const { scrolledToInitialIndex } = this.state;
+    const { width: newWidth, height: newHeight } = event.nativeEvent.layout;
+    const { scrolledToInitialIndex, width, height } = this.state;
 
-    if (this.state.width === width && this.state.height === height) {
+    if (width === newWidth && height === newHeight) {
       return;
     }
 
     this.setState({ width, height }, () => {
-      // By checking has the pager scrolled to initial index, we're avoiding weird issue
-      // where pager would scroll back to initial index after swiping to other index
+      // By checking has the pager scrolled to initial index, we're avoiding
+      // a weird issue where pager would scroll back to initial index after
+      // swiping to other index
       if (!scrolledToInitialIndex) {
         requestAnimationFrame(() => this.scrollToInitialPage());
       }
@@ -312,6 +272,55 @@ class HorizontalPager extends PureComponent {
   }
 }
 
+HorizontalPager.propTypes = {
+  // Array containing objects (pages)
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  // Style prop used to override default (theme) styling
+  style: PropTypes.object.isRequired,
+  // Prop defining whether the Pager will bounce back
+  // when user tries to swipe beyond end of content (iOS only)
+  bounces: PropTypes.bool,
+  // Page margin, margin visible between pages, during swipe gesture.
+  pageMargin: PropTypes.number,
+  // Callback function that can be used to render overlay over pages
+  // For example page indicators using `PageIndicators` component
+  // renderOverlay(pageData, pageIndex, layout)
+  renderOverlay: PropTypes.func,
+  // A function which renders a single page
+  // renderPage(pageData, pageIndex)
+  renderPage: PropTypes.func,
+  // Callback function that can be used to define placeholder
+  // that appears when content is loading
+  renderPlaceholder: PropTypes.func,
+  // Prop that forces enables or disables swiping
+  scrollEnabled: PropTypes.bool,
+  // Initially selected page in gallery
+  selectedIndex: PropTypes.number,
+  // Prop that reduces page size by pageMargin, allowing 'sneak peak' of next page
+  showNextPage: PropTypes.bool,
+  // Always render only central (currently loaded) page plus `surroundingPagesToLoad`
+  // to the left and to the right. If currently rendered page is out of bounds,
+  // empty `View` (with set dimensions for proper scrolling) will be rendered
+  // Defaults to 2.
+  surroundingPagesToLoad: PropTypes.number,
+  // Callback function called when user swipes between pages (images)
+  // Index of new (selected) page is passed to this callback
+  onIndexSelected: PropTypes.func,
+};
+
+HorizontalPager.defaultProps = {
+  bounces: false,
+  pageMargin: 0,
+  renderOverlay: undefined,
+  renderPage: undefined,
+  renderPlaceholder: undefined,
+  scrollEnabled: false,
+  selectedIndex: 0,
+  showNextPage: false,
+  surroundingPagesToLoad: 2,
+  onIndexSelected: undefined,
+};
+
 const StyledHorizontalPager = connectStyle('shoutem.ui.HorizontalPager')(
   HorizontalPager,
 );

package/components/HorizontalPager/Page.js

@@ -8,13 +8,6 @@ import { View } from '../View';
  * rendering of pages that are not currently visible.
  */
 export class Page extends Component {
-  static propTypes = {
-    isActive: PropTypes.bool.isRequired,
-    width: PropTypes.number.isRequired,
-    style: PropTypes.object,
-    children: PropTypes.node,
-  };
-
   shouldComponentUpdate(nextProps) {
     return nextProps.isActive;
   }
@@ -29,3 +22,15 @@ export class Page extends Component {
     );
   }
 }
+
+Page.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  width: PropTypes.number.isRequired,
+  children: PropTypes.node,
+  style: PropTypes.object,
+};
+
+Page.defaultProps = {
+  children: undefined,
+  style: {},
+};