Add itemTitle in pager

Author: AdityaKhatri

components/Action/Button/index.js

@@ -76,6 +76,10 @@ const propTypes = {
     transparent: PropTypes.bool,
 
     type: PropTypes.string,
+    onClickParams: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 
     changeDelay: PropTypes.number,
 };
@@ -88,6 +92,7 @@ const defaultProps = {
     pending: false,
     iconName: undefined,
     onClick: () => {}, // no-op
+    onClickParams: {},
     children: undefined,
     smallHorizontalPadding: false,
     smallVerticalPadding: false,

components/Action/ConditionalActionButton/index.js

@@ -6,9 +6,24 @@ import Button from '../Button';
 import styles from './styles.scss';
 
 const propTypes = {
+    className: PropTypes.string,
+    activeClassName: PropTypes.string,
+    condition: PropTypes.func,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array,
+        PropTypes.number,
+    ]),
+    onClick: PropTypes.func,
 };
 
 const defaultProps = {
+    className: '',
+    onClick: () => {},
+    value: {},
+    condition: () => false,
+    activeClassName: '',
 };
 
 class ConditionalActionButton extends React.PureComponent {
@@ -32,7 +47,6 @@ class ConditionalActionButton extends React.PureComponent {
             classNames.push(styles.active);
             classNames.push(activeClassName);
         }
-        console.warn(classNames);
         return classNames.join(' ');
     }
 
@@ -51,10 +65,11 @@ class ConditionalActionButton extends React.PureComponent {
 
     render() {
         const {
-            value,
-            className,
-            onClick,
-            condition,
+            value, // eslint-disable-line no-unused-vars
+            className, // eslint-disable-line no-unused-vars
+            activeClassName, // eslint-disable-line no-unused-vars
+            onClick, // eslint-disable-line no-unused-vars
+            condition, // eslint-disable-line no-unused-vars
             ...otherProps
         } = this.props;
 

components/Input/MultiSelectInput/index.js

@@ -44,7 +44,13 @@ export const propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     labelSelector: PropTypes.func,
     onChange: PropTypes.func.isRequired,
-    options: PropTypes.arrayOf(PropTypes.object),
+    options: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.object,
+            PropTypes.string,
+            PropTypes.number,
+        ]),
+    ),
     optionsClassName: PropTypes.string,
     placeholder: PropTypes.string,
     renderEmpty: PropTypes.func,

components/View/Pager/index.js

@@ -10,6 +10,7 @@ const propTypes = {
     activePage: PropTypes.number,
     className: PropTypes.string,
     itemsCount: PropTypes.number,
+    itemTitle: PropTypes.string,
     maxItemsPerPage: PropTypes.number,
     onPageClick: PropTypes.func.isRequired,
     totalCapacity: PropTypes.number,
@@ -25,6 +26,7 @@ const defaultProps = {
     className: '',
     itemsCount: 0,
     maxItemsPerPage: 10,
+    itemTitle: 'items',
     totalCapacity: 7,
     onItemsPerPageChange: () => {},
     options: [
@@ -212,6 +214,7 @@ export default class Pager extends React.PureComponent {
             className: classNameFromProps,
             itemsCount,
             maxItemsPerPage,
+            itemTitle,
             totalCapacity,
             showItemsPerPageChange,
             options,
@@ -276,6 +279,9 @@ export default class Pager extends React.PureComponent {
                         <div className={styles.currentItemsEnd}>
                             { currentItemsEnd }
                         </div>
+                        <div className={styles.itemTitle}>
+                            { itemTitle }
+                        </div>
                         <div className={styles.of}>
                             { ofTitle }
                         </div>

components/View/Pager/styles.scss

@@ -45,6 +45,10 @@ $width-item-per-page-input: 48px;
             padding: 0 $spacing-extra-small;
         }
 
+        .item-title {
+            padding-left: $spacing-small;
+        }
+
         .current-items-end {
             font-family: $font-family-monospace;
         }