diff --git a/src/common/PaginateInput/PaginateInput.js b/src/common/PaginateInput/PaginateInput.js index e0f207a31..9795238a3 100644 --- a/src/common/PaginateInput/PaginateInput.js +++ b/src/common/PaginateInput/PaginateInput.js @@ -3,90 +3,29 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); const Button = require('stremio/common/Button'); -const Multiselect = require('stremio/common/Multiselect'); const styles = require('./styles'); -const PaginateInput = ({ className, options, selected, dataset, onSelect }) => { - const selectedLabelText = React.useMemo(() => { - if (Array.isArray(options)) { - const selectedOption = options.find(({ value }) => { - return selected === value; - }); - if (selectedOption && typeof selectedOption.label === 'string') { - return selectedOption.label; - } - } - - return selected; - }, [options, selected]); +const PaginateInput = ({ className, label, dataset, onSelect, ...props }) => { const prevNextButtonOnClick = React.useCallback((event) => { if (typeof onSelect === 'function') { - if (Array.isArray(options) && options.length > 0) { - const selectedValueIndex = options.findIndex(({ value }) => { - return selected === value; - }); - const nextSelectedIndex = event.currentTarget.dataset.button === 'next' ? - Math.min(selectedValueIndex + 1, options.length - 1) - : - Math.max(selectedValueIndex - 1, 0); - const nextSelectedValue = options[nextSelectedIndex].value; - onSelect({ - type: 'select', - value: nextSelectedValue, - dataset: dataset, - reactEvent: event, - nativeEvent: event.nativeEvent - }); - } else { - const nextSelectedValue = event.currentTarget.dataset.button === 'next' ? - selected + 1 - : - Math.max(selected - 1, 1); - onSelect({ - type: 'select', - value: nextSelectedValue, - dataset: dataset, - reactEvent: event, - nativeEvent: event.nativeEvent - }); - } - } - }, [options, selected, dataset, onSelect]); - const optionOnSelect = React.useCallback((event) => { - const page = parseInt(event.value); - if (!isNaN(page) && typeof onSelect === 'function') { onSelect({ - type: 'select', - value: page, + type: 'change-page', + value: event.currentTarget.dataset.value, dataset: dataset, - reactEvent: event.reactEvent, + reactEvent: event, nativeEvent: event.nativeEvent }); } }, [dataset, onSelect]); return ( -
- - ( -
{selectedLabelText}
- )} - options={ - Array.isArray(options) ? - options.map(({ value, label }) => ({ - value: String(value), - label - })) - : - null - } - disabled={!Array.isArray(options) || options.length === 0} - onSelect={optionOnSelect} - /> -
@@ -95,11 +34,7 @@ const PaginateInput = ({ className, options, selected, dataset, onSelect }) => { PaginateInput.propTypes = { className: PropTypes.string, - options: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.number.isRequired, - label: PropTypes.string - })), - selected: PropTypes.number.isRequired, + label: PropTypes.string, onSelect: PropTypes.func }; diff --git a/src/common/PaginateInput/styles.less b/src/common/PaginateInput/styles.less index e370414f8..aa2ea0c64 100644 --- a/src/common/PaginateInput/styles.less +++ b/src/common/PaginateInput/styles.less @@ -1,7 +1,6 @@ .paginate-input-container { display: flex; flex-direction: row; - overflow: visible; .prev-button-container, .next-button-container { flex: none; @@ -17,15 +16,18 @@ } } - .multiselect-label-container { + .label-container { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; - .multiselect-label { + .label { flex: none; + max-width: 3rem; + white-space: nowrap; + text-overflow: ellipsis; color: var(--color-surfacelighter); } } diff --git a/storybook/stories/PaginateInput/SimplePaginateInput/SimplePaginateInput.js b/storybook/stories/PaginateInput/SimplePaginateInput/SimplePaginateInput.js new file mode 100644 index 000000000..af22bfc28 --- /dev/null +++ b/storybook/stories/PaginateInput/SimplePaginateInput/SimplePaginateInput.js @@ -0,0 +1,21 @@ +const React = require('react'); +const { storiesOf } = require('@storybook/react'); +const { action } = require('@storybook/addon-actions'); +const { PaginateInput } = require('stremio/common'); +const styles = require('./styles'); + +storiesOf('PaginateInput', module).add('SimplePaginateInput', () => { + const domEventHandler = React.useCallback((event) => { + action('domEventHandler')(event.currentTarget.dataset); + }, []); + return ( + + ); +}); diff --git a/storybook/stories/PaginateInput/SimplePaginateInput/index.js b/storybook/stories/PaginateInput/SimplePaginateInput/index.js new file mode 100644 index 000000000..8fe14c08d --- /dev/null +++ b/storybook/stories/PaginateInput/SimplePaginateInput/index.js @@ -0,0 +1 @@ +require('./SimplePaginateInput'); diff --git a/storybook/stories/PaginateInput/SimplePaginateInput/styles.less b/storybook/stories/PaginateInput/SimplePaginateInput/styles.less new file mode 100644 index 000000000..8217acd32 --- /dev/null +++ b/storybook/stories/PaginateInput/SimplePaginateInput/styles.less @@ -0,0 +1,19 @@ +: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; + } +} \ No newline at end of file diff --git a/storybook/stories/PaginateInput/index.js b/storybook/stories/PaginateInput/index.js new file mode 100644 index 000000000..8fe14c08d --- /dev/null +++ b/storybook/stories/PaginateInput/index.js @@ -0,0 +1 @@ +require('./SimplePaginateInput'); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 8ee1de155..f9d84a2de 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -6,6 +6,7 @@ require('./MetaItem'); require('./ModalDialog'); require('./Multiselect'); require('./Notification'); +require('./PaginateInput'); require('./Popup'); require('./SeasonsBar'); require('./SharePrompt');