PaginateInput component renamed

src/common/PaginateInput/index.js

@@ -1,3 +0,0 @@
-const PaginateInput = require('./PaginateInput');
-
-module.exports = PaginateInput;

src/common/PaginationInput/PaginationInput.js

@@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const PaginateInput = ({ className, label, dataset, onSelect, ...props }) => {
+const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
     const prevNextButtonOnClick = React.useCallback((event) => {
         if (typeof onSelect === 'function') {
             onSelect({
@@ -18,7 +18,7 @@ const PaginateInput = ({ className, label, dataset, onSelect, ...props }) => {
         }
     }, [dataset, onSelect]);
     return (
-        <div {...props} className={classnames(className, styles['paginate-input-container'])} >
+        <div {...props} className={classnames(className, styles['pagination-input-container'])} >
             <Button className={styles['prev-button-container']} title={'Previous page'} data-value={'prev'} onClick={prevNextButtonOnClick}>
                 <Icon className={styles['icon']} icon={'ic_arrow_left'} />
             </Button>
@@ -32,10 +32,10 @@ const PaginateInput = ({ className, label, dataset, onSelect, ...props }) => {
     );
 };
 
-PaginateInput.propTypes = {
+PaginationInput.propTypes = {
     className: PropTypes.string,
     label: PropTypes.string,
     onSelect: PropTypes.func
 };
 
-module.exports = PaginateInput;
+module.exports = PaginationInput;

src/common/PaginationInput/index.js

@@ -0,0 +1,3 @@
+const PaginationInput = require('./PaginationInput');
+
+module.exports = PaginationInput;

src/common/PaginationInput/styles.less

@@ -1,4 +1,4 @@
-.paginate-input-container {
+.pagination-input-container {
     display: flex;
     flex-direction: row;
 

src/common/index.js

@@ -9,7 +9,7 @@ const MetaRow = require('./MetaRow');
 const ModalDialog = require('./ModalDialog');
 const Multiselect = require('./Multiselect');
 const NavBar = require('./NavBar');
-const PaginateInput = require('./PaginateInput');
+const PaginationInput = require('./PaginationInput');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
 const SharePrompt = require('./SharePrompt');
@@ -38,7 +38,7 @@ module.exports = {
     ModalDialog,
     Multiselect,
     NavBar,
-    PaginateInput,
+    PaginationInput,
     PlayIconCircleCentered,
     Popup,
     SharePrompt,

storybook/stories/PaginateInput/SimplePaginateInput/index.js

@@ -1 +0,0 @@
-require('./SimplePaginateInput');

storybook/stories/PaginateInput/SimplePaginateInput/styles.less

@@ -1,19 +0,0 @@
-:import('~stremio/common/PaginateInput/styles.less') {
-    paginate-prev-button-container: prev-button-container;
-    paginate-next-button-container: next-button-container;
-}
-
-.paginate-input {
-    flex: none;
-    align-self: flex-start;
-    display: flex;
-    min-width: 8rem;
-    max-width: 10rem;
-    margin: 1rem;
-    background-color: var(--color-backgroundlighter);
-
-    .paginate-prev-button-container, .paginate-next-button-container {
-        width: 3rem;
-        height: 3rem;
-    }
-}

storybook/stories/PaginateInput/index.js

@@ -1 +0,0 @@
-require('./SimplePaginateInput');

storybook/stories/PaginationInput/SimplePaginationInput/SimplePaginationInput.js

@@ -1,16 +1,16 @@
 const React = require('react');
 const { storiesOf } = require('@storybook/react');
 const { action } = require('@storybook/addon-actions');
-const { PaginateInput } = require('stremio/common');
+const { PaginationInput } = require('stremio/common');
 const styles = require('./styles');
 
-storiesOf('PaginateInput', module).add('SimplePaginateInput', () => {
+storiesOf('PaginationInput', module).add('SimplePaginationInput', () => {
     const domEventHandler = React.useCallback((event) => {
         action('domEventHandler')(event.currentTarget.dataset);
     }, []);
     return (
-        <PaginateInput
+        <PaginationInput
-            className={styles['paginate-input']}
+            className={styles['pagination-input']}
             label={'5'}
             dataset={{ 'dataset-prop': 'dataset-value' }}
             data-prop={'data-value'}

storybook/stories/PaginationInput/SimplePaginationInput/index.js

@@ -0,0 +1 @@
+require('./SimplePaginationInput');

storybook/stories/PaginationInput/SimplePaginationInput/styles.less

@@ -0,0 +1,19 @@
+:import('~stremio/common/PaginationInput/styles.less') {
+    pagination-prev-button-container: prev-button-container;
+    pagination-next-button-container: next-button-container;
+}
+
+.pagination-input {
+    flex: none;
+    align-self: flex-start;
+    display: flex;
+    min-width: 8rem;
+    max-width: 10rem;
+    margin: 1rem;
+    background-color: var(--color-backgroundlighter);
+
+    .pagination-prev-button-container, .pagination-next-button-container {
+        width: 3rem;
+        height: 3rem;
+    }
+}

storybook/stories/PaginationInput/index.js

@@ -0,0 +1 @@
+require('./SimplePaginationInput');

storybook/stories/index.js

@@ -6,7 +6,7 @@ require('./MetaItem');
 require('./ModalDialog');
 require('./Multiselect');
 require('./Notification');
-require('./PaginateInput');
+require('./PaginationInput');
 require('./Popup');
 require('./SeasonsBar');
 require('./SharePrompt');