From 498cd7fae700245ae1fa21b92e29ef4d59f5aeaa Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Thu, 30 Jan 2020 14:25:35 +0200 Subject: [PATCH 01/25] typo fixed --- src/routes/Addons/useSelectableInputs.js | 4 ++-- src/routes/Discover/useSelectableInputs.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js index 4db24b058..4f8736591 100644 --- a/src/routes/Addons/useSelectableInputs.js +++ b/src/routes/Addons/useSelectableInputs.js @@ -7,7 +7,7 @@ const navigateWithLoadRequest = (load_request) => { window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`); }; -const equalWithouExtra = (request1, request2) => { +const equalWithoutExtra = (request1, request2) => { return request1.base === request2.base && request1.path.resource === request2.path.resource && request1.path.type_name === request2.path.type_name && @@ -42,7 +42,7 @@ const mapSelectableInputs = (addons) => { selected: addons.selectable.types .filter(({ load_request }) => { return addons.catalog_resource !== null && - equalWithouExtra(addons.catalog_resource.request, load_request); + equalWithoutExtra(addons.catalog_resource.request, load_request); }) .map(({ load_request }) => JSON.stringify(load_request)), onSelect: (event) => { diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js index 9493ad9d9..3132b8905 100644 --- a/src/routes/Discover/useSelectableInputs.js +++ b/src/routes/Discover/useSelectableInputs.js @@ -52,7 +52,7 @@ const getNextExtra = (prevExtra, extraProp, extraValue) => { }, []); }; -const equalWithouExtra = (request1, request2) => { +const equalWithoutExtra = (request1, request2) => { return request1.base === request2.base && request1.path.resource === request2.path.resource && request1.path.type_name === request2.path.type_name && @@ -107,7 +107,7 @@ const mapSelectableInputs = (discover) => { })), selected: discover.selectable.catalogs .filter(({ load_request }) => { - return equalWithouExtra(load_request, selectedCatalogRequest); + return equalWithoutExtra(load_request, selectedCatalogRequest); }) .map(({ load_request }) => JSON.stringify(load_request)), onSelect: (event) => { From fe3bcf258693a8922b5cd6506051b27867581ec2 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Tue, 4 Feb 2020 12:43:50 +0200 Subject: [PATCH 02/25] scoped menu container styles in SectionsList --- src/routes/Settings/SectionsList/styles.less | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/routes/Settings/SectionsList/styles.less b/src/routes/Settings/SectionsList/styles.less index 85e687d99..403257d22 100644 --- a/src/routes/Settings/SectionsList/styles.less +++ b/src/routes/Settings/SectionsList/styles.less @@ -5,9 +5,11 @@ menu-container: menu-container; } -.menu-container { - max-height: 30rem; - overflow-y: auto; +.dropdown { + .menu-container { + max-height: 30rem; + overflow-y: auto; + } } .section { From 92b4b8bca3036ae038f592caa48b5355a69e4fec Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Tue, 4 Feb 2020 18:20:57 +0200 Subject: [PATCH 03/25] ModalDialog used in Multiselect for no dropdown case --- src/common/Multiselect/Multiselect.js | 128 +++++++++++++++----------- 1 file changed, 76 insertions(+), 52 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index ff7b11eda..ad9f705bd 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -4,10 +4,11 @@ const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); const Button = require('stremio/common/Button'); const Popup = require('stremio/common/Popup'); +const ModalDialog = require('stremio/common/ModalDialog'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const Multiselect = ({ className, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { +const Multiselect = ({ className, direction, title, disabled, dataset, modalSelects, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); const options = React.useMemo(() => { return Array.isArray(props.options) ? @@ -77,59 +78,81 @@ const Multiselect = ({ className, direction, title, disabled, dataset, renderLab mountedRef.current = true; }, [menuOpen]); - return ( - ( - - )} - renderMenu={() => ( -
- { - options.length > 0 ? - options.map(({ label, value }) => ( - - )) - : -
-
No options available
+ return labels; + }, []).join(', ') + : + title + } +
+ + + } + {children} + + )); + return ( + + { + !modalSelects ? + { + return renderLabel({ + ...labelProps, + ...props, + className: classnames(className, labelProps.className) + }); + }} + renderMenu={() => ( +
+ { + options.length > 0 ? + options.map(({ label, value }) => ( + + )) + : +
+
No options available
+
+ }
- } -
- )} - /> + )} + /> + : + + {renderLabel({ + ...props, + className + })} + { + menuOpen ? : null + } + + } + ); }; @@ -144,6 +167,7 @@ Multiselect.propTypes = { selected: PropTypes.arrayOf(PropTypes.string), disabled: PropTypes.bool, dataset: PropTypes.objectOf(PropTypes.string), + modalSelects: PropTypes.bool, renderLabelContent: PropTypes.func, renderLabelText: PropTypes.func, onOpen: PropTypes.func, From bd1a4f2768283df26a6d15779537af586267c5f4 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Tue, 4 Feb 2020 18:23:14 +0200 Subject: [PATCH 04/25] ModalDialog with Multiselect used for filter button in Discover --- src/routes/Discover/Discover.js | 13 ++++++++++++- src/routes/Discover/styles.less | 26 ++++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index e2c1f7426..20a232afe 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -52,6 +52,7 @@ const Discover = ({ urlParams, queryParams }) => { ))} @@ -128,7 +129,17 @@ const Discover = ({ urlParams, queryParams }) => { { inputsModalOpen ? - + closeInputsModal()}> + { + selectInputs.map((selectInput, index) => ( + + )) + } + : null } diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index b2ddb748d..b1bbef1d4 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -1,6 +1,9 @@ @import (reference) '~stremio/common/screen-sizes.less'; :import('~stremio/common/Multiselect/styles.less') { + label-container: label-container; + label-container-label: label; + label-container-icon: icon; multiselect-menu-container: menu-container; } @@ -139,6 +142,29 @@ } } +.selectable-inputs-modal-container { + .label-container { + width: 15rem; + height: 3rem; + + &:not(:last-child) { + margin-bottom: 1rem; + } + + &:hover { + background-color: var(--color-surfacelight); + + .label-container-label { + color: var(--color-backgrounddarker); + } + + .label-container-icon { + fill: var(--color-backgrounddarker); + } + } + } +} + @media only screen and (min-width: @xxlarge) { .discover-container { .discover-content { From 4f37b43a054e3b761a04f2f1d45a3aa3837db03e Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Feb 2020 16:08:25 +0200 Subject: [PATCH 05/25] ModalDialog with selectInput options implemented --- src/common/Multiselect/Multiselect.js | 21 ++++- src/common/Multiselect/styles.less | 110 +++++++++++++++----------- src/routes/Discover/Discover.js | 16 ++-- 3 files changed, 89 insertions(+), 58 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index ad9f705bd..860ab8c67 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -148,7 +148,26 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele className })} { - menuOpen ? : null + menuOpen ? + closeMenu()}> +
+ { + options.length > 0 ? + options.map(({ label, value }) => ( + + )) + : +
+
No options available
+
+ } +
+ + : + null } } diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index 090d39bb1..3312b9fed 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -37,60 +37,74 @@ .popup-menu-container { width: 100%; + } +} - .menu-container { - .option-container { - display: flex; - flex-direction: row; - align-items: center; - padding: 1rem; - background-color: var(--color-backgroundlighter); +.menu-container { + &:global(.modal) { + .option-container { + width: 15rem; - &:global(.selected) { - background-color: var(--color-surfacedarker); - - .icon { - display: block; - } - } - - &:hover, &:focus { - background-color: var(--color-surfacedark); - } - - .label { - flex: 1; - max-height: 4.8em; - color: var(--color-surfacelighter); - } - - .icon { - flex: none; - display: none; - width: 1rem; - height: 1rem; - margin-left: 1rem; - fill: var(--color-surfacelighter); - } + &:not(:last-child) { + margin-bottom: 1rem; } + } - .no-options-container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 1rem; - background-color: var(--color-backgroundlighter); + .no-options-container { + width: 15rem; + } + } - .label { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - font-size: 1.2rem; - text-align: center; - color: var(--color-surfacelighter); - } + .option-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 1rem; + background-color: var(--color-backgroundlighter); + + &:global(.selected) { + background-color: var(--color-surfacedarker); + + .icon { + display: block; } } + + &:hover, &:focus { + background-color: var(--color-surfacedark); + } + + .label { + flex: 1; + max-height: 4.8em; + color: var(--color-surfacelighter); + } + + .icon { + flex: none; + display: none; + width: 1rem; + height: 1rem; + margin-left: 1rem; + fill: var(--color-surfacelighter); + } + } + + .no-options-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 1rem; + background-color: var(--color-backgroundlighter); + + .label { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + font-size: 1.2rem; + text-align: center; + color: var(--color-surfacelighter); + } } } \ No newline at end of file diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 20a232afe..b545a4450 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -130,15 +130,13 @@ const Discover = ({ urlParams, queryParams }) => { { inputsModalOpen ? closeInputsModal()}> - { - selectInputs.map((selectInput, index) => ( - - )) - } + {selectInputs.map((selectInput, index) => ( + + ))} : null From 7462aae84c1bcab2b3f827ffccf0e6961dee8a50 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Feb 2020 16:30:39 +0200 Subject: [PATCH 06/25] conflict resolved --- src/common/Multiselect/Multiselect.js | 2 +- src/routes/Addons/useSelectableInputs.js | 30 ++++++++++++------------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 860ab8c67..d9fe90a8c 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -185,7 +185,7 @@ Multiselect.propTypes = { })), selected: PropTypes.arrayOf(PropTypes.string), disabled: PropTypes.bool, - dataset: PropTypes.objectOf(PropTypes.string), + dataset: PropTypes.object, modalSelects: PropTypes.bool, renderLabelContent: PropTypes.func, renderLabelText: PropTypes.func, diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js index 4f8736591..86102d932 100644 --- a/src/routes/Addons/useSelectableInputs.js +++ b/src/routes/Addons/useSelectableInputs.js @@ -1,9 +1,9 @@ const React = require('react'); -const navigateWithLoadRequest = (load_request) => { - const transportUrl = encodeURIComponent(load_request.base); - const catalogId = encodeURIComponent(load_request.path.id); - const type = encodeURIComponent(load_request.path.type_name); +const navigateWithRequest = (request) => { + const transportUrl = encodeURIComponent(request.base); + const catalogId = encodeURIComponent(request.path.id); + const type = encodeURIComponent(request.path.type_name); window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`); }; @@ -18,35 +18,35 @@ const mapSelectableInputs = (addons) => { const catalogSelect = { title: 'Select catalog', options: addons.selectable.catalogs - .map(({ name, load_request }) => ({ - value: JSON.stringify(load_request), + .map(({ name, request }) => ({ + value: JSON.stringify(request), label: name })), selected: addons.selectable.catalogs - .filter(({ load_request: { path: { id } } }) => { + .filter(({ request: { path: { id } } }) => { return addons.catalog_resource !== null && addons.catalog_resource.request.path.id === id; }) - .map(({ load_request }) => JSON.stringify(load_request)), + .map(({ request }) => JSON.stringify(request)), onSelect: (event) => { - navigateWithLoadRequest(JSON.parse(event.value)); + navigateWithRequest(JSON.parse(event.value)); } }; const typeSelect = { title: 'Select type', options: addons.selectable.types - .map(({ name, load_request }) => ({ - value: JSON.stringify(load_request), + .map(({ name, request }) => ({ + value: JSON.stringify(request), label: name })), selected: addons.selectable.types - .filter(({ load_request }) => { + .filter(({ request }) => { return addons.catalog_resource !== null && - equalWithoutExtra(addons.catalog_resource.request, load_request); + equalWithouExtra(addons.catalog_resource.request, request); }) - .map(({ load_request }) => JSON.stringify(load_request)), + .map(({ request }) => JSON.stringify(request)), onSelect: (event) => { - navigateWithLoadRequest(JSON.parse(event.value)); + navigateWithRequest(JSON.parse(event.value)); } }; return [catalogSelect, typeSelect]; From 6fc018e551d5457b3a02194e7cb9e8fadf1e1667 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Feb 2020 16:32:28 +0200 Subject: [PATCH 07/25] typo fixed --- src/routes/Addons/useSelectableInputs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js index 86102d932..e7b5a7b2f 100644 --- a/src/routes/Addons/useSelectableInputs.js +++ b/src/routes/Addons/useSelectableInputs.js @@ -42,7 +42,7 @@ const mapSelectableInputs = (addons) => { selected: addons.selectable.types .filter(({ request }) => { return addons.catalog_resource !== null && - equalWithouExtra(addons.catalog_resource.request, request); + equalWithoutExtra(addons.catalog_resource.request, request); }) .map(({ request }) => JSON.stringify(request)), onSelect: (event) => { From db14f79ba5dbbea6006d76fef70881c323de9aed Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Feb 2020 17:55:10 +0200 Subject: [PATCH 08/25] label-container renamed to multiselect-label-container --- src/routes/Discover/styles.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 7042188c1..47d1710a9 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -1,7 +1,7 @@ @import (reference) '~stremio/common/screen-sizes.less'; :import('~stremio/common/Multiselect/styles.less') { - label-container: label-container; + multiselect-label-container: label-container; label-container-label: label; label-container-icon: icon; multiselect-menu-container: menu-container; @@ -176,7 +176,7 @@ } .selectable-inputs-modal-container { - .label-container { + .multiselect-label-container { width: 15rem; height: 3rem; From a3efef45286440e9f3e2723db11746f96908134c Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Feb 2020 18:29:18 +0200 Subject: [PATCH 09/25] renderOptions func created to avoid duplicate code --- src/common/Multiselect/Multiselect.js | 43 +++++++++++---------------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index d9fe90a8c..3f953c6c6 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -108,6 +108,21 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele {children} )); + const renderOptions = React.useCallback((options) => { + return ( + options.length > 0 ? + options.map(({ label, value }) => ( + + )) + : +
+
No options available
+
+ ); + }, [options]); return ( { @@ -125,19 +140,7 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele }} renderMenu={() => (
- { - options.length > 0 ? - options.map(({ label, value }) => ( - - )) - : -
-
No options available
-
- } + {renderOptions(options)}
)} /> @@ -151,19 +154,7 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele menuOpen ? closeMenu()}>
- { - options.length > 0 ? - options.map(({ label, value }) => ( - - )) - : -
-
No options available
-
- } + {renderOptions(options)}
: From 961eb8681aa5c9b205e229fb4401d5e18eaa7613 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Feb 2020 18:30:24 +0200 Subject: [PATCH 10/25] function call fixed --- src/routes/Discover/Discover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 8ca4145e5..f4b9196db 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -144,7 +144,7 @@ const Discover = ({ urlParams, queryParams }) => { { inputsModalOpen ? - closeInputsModal()}> + {selectInputs.map((selectInput, index) => ( Date: Wed, 5 Feb 2020 18:34:21 +0200 Subject: [PATCH 11/25] modalSelects renamed to modalOptions --- src/common/Multiselect/Multiselect.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 3f953c6c6..508442e22 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -8,7 +8,7 @@ const ModalDialog = require('stremio/common/ModalDialog'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const Multiselect = ({ className, direction, title, disabled, dataset, modalSelects, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { +const Multiselect = ({ className, direction, title, disabled, dataset, modalOptions, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); const options = React.useMemo(() => { return Array.isArray(props.options) ? @@ -126,7 +126,7 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele return ( { - !modalSelects ? + !modalOptions ? closeMenu()}> -
+
{renderOptions(options)}
@@ -177,7 +177,7 @@ Multiselect.propTypes = { selected: PropTypes.arrayOf(PropTypes.string), disabled: PropTypes.bool, dataset: PropTypes.object, - modalSelects: PropTypes.bool, + modalOptions: PropTypes.bool, renderLabelContent: PropTypes.func, renderLabelText: PropTypes.func, onOpen: PropTypes.func, From 54590e4649824b25e064dcc9a6f09b3827cf42ba Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Thu, 6 Feb 2020 18:30:46 +0200 Subject: [PATCH 12/25] function call fixed --- src/common/Multiselect/Multiselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 508442e22..4ba163702 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -152,7 +152,7 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalOpti })} { menuOpen ? - closeMenu()}> +
{renderOptions(options)}
From fd8a6ecc727ed2eb0adcf5de6c59d454d822f33d Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Thu, 13 Feb 2020 17:57:37 +0200 Subject: [PATCH 13/25] export isRequired for selectable inputs --- src/routes/Discover/useSelectableInputs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js index 576109fde..bcb6e6aac 100644 --- a/src/routes/Discover/useSelectableInputs.js +++ b/src/routes/Discover/useSelectableInputs.js @@ -110,6 +110,7 @@ const mapSelectableInputs = (discover) => { }; const extraSelects = discover.selectable.extra.map((extra) => { const title = `Select ${extra.name}`; + const isRequired = extra.isRequired; const options = (extra.isRequired ? [] : [NONE_EXTRA_VALUE]) .concat(extra.options) .map((option) => ({ @@ -141,7 +142,7 @@ const mapSelectableInputs = (discover) => { } }); }; - return { title, options, selected, renderLabelText, onSelect }; + return { title, isRequired, options, selected, renderLabelText, onSelect }; }); const paginationInput = discover.selectable.has_prev_page || discover.selectable.has_next_page ? { From 547065b927a8a605b9c9ca2cc1cc0a8394f42110 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Thu, 13 Feb 2020 18:13:11 +0200 Subject: [PATCH 14/25] extended inputs layout implemented in discover --- src/common/Multiselect/Multiselect.js | 133 +++++++++++++++----------- src/common/Multiselect/styles.less | 92 +++++++++--------- src/routes/Discover/Discover.js | 16 +++- src/routes/Discover/styles.less | 35 +++++++ 4 files changed, 174 insertions(+), 102 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 0ac42c2d1..25b9c95fb 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -4,10 +4,11 @@ const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); const Button = require('stremio/common/Button'); const Popup = require('stremio/common/Popup'); +const ModalDialog = require('stremio/common/ModalDialog'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const Multiselect = ({ className, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { +const Multiselect = ({ className, mode, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); const options = React.useMemo(() => { return Array.isArray(props.options) ? @@ -25,19 +26,19 @@ const Multiselect = ({ className, direction, title, disabled, dataset, renderLab : []; }, [props.selected]); - const popupLabelOnClick = React.useCallback((event) => { + const labelOnClick = React.useCallback((event) => { if (typeof props.onClick === 'function') { props.onClick(event); } - if (!event.nativeEvent.togglePopupPrevented) { + if (!event.nativeEvent.toggleMenuPrevented) { toggleMenu(); } }, [props.onClick, toggleMenu]); - const popupMenuOnClick = React.useCallback((event) => { - event.nativeEvent.togglePopupPrevented = true; + const menuOnClick = React.useCallback((event) => { + event.nativeEvent.toggleMenuPrevented = true; }, []); - const popupMenuOnKeyDown = React.useCallback((event) => { + const menuOnKeyDown = React.useCallback((event) => { event.nativeEvent.buttonClickPrevented = true; }, []); const optionOnClick = React.useCallback((event) => { @@ -77,64 +78,84 @@ const Multiselect = ({ className, direction, title, disabled, dataset, renderLab mountedRef.current = true; }, [menuOpen]); - return ( + const renderLabel = React.useMemo(() => ({ children, className, ...props }) => ( + + ), [menuOpen, title, disabled, options, selected, labelOnClick, renderLabelContent, renderLabelText]); + const renderMenu = React.useMemo(() => () => ( +
+ { + options.length > 0 ? + options.map(({ label, value }) => ( + + )) + : +
+
No options available
+
+ } +
+ ), [options, selected, menuOnKeyDown, menuOnClick, optionOnClick]); + const renderPopupLabel = React.useMemo(() => (labelProps) => { + return renderLabel({ + ...labelProps, + ...props, + className: classnames(className, labelProps.className) + }); + }, [props, className, renderLabel]); + return mode === 'modal' ? + renderLabel({ + ...props, + className, + children: menuOpen ? + + {renderMenu()} + + : + null + }) + : ( - - )} - renderMenu={() => ( -
- { - options.length > 0 ? - options.map(({ label, value }) => ( - - )) - : -
-
No options available
-
- } -
- )} - /> - ); + renderLabel={renderPopupLabel} + renderMenu={renderMenu} + />; }; Multiselect.propTypes = { className: PropTypes.string, + mode: PropTypes.oneOf(['popup', 'modal']), direction: PropTypes.any, title: PropTypes.string, options: PropTypes.arrayOf(PropTypes.shape({ diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index 090d39bb1..bb1589483 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -37,59 +37,61 @@ .popup-menu-container { width: 100%; + } +} - .menu-container { - .option-container { - display: flex; - flex-direction: row; - align-items: center; - padding: 1rem; - background-color: var(--color-backgroundlighter); +.modal-container, .popup-menu-container { + .menu-container { + .option-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 1rem; + background-color: var(--color-backgroundlighter); - &:global(.selected) { - background-color: var(--color-surfacedarker); - - .icon { - display: block; - } - } - - &:hover, &:focus { - background-color: var(--color-surfacedark); - } - - .label { - flex: 1; - max-height: 4.8em; - color: var(--color-surfacelighter); - } + &:global(.selected) { + background-color: var(--color-surfacedarker); .icon { - flex: none; - display: none; - width: 1rem; - height: 1rem; - margin-left: 1rem; - fill: var(--color-surfacelighter); + display: block; } } - .no-options-container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 1rem; - background-color: var(--color-backgroundlighter); + &:hover, &:focus { + background-color: var(--color-surfacedark); + } - .label { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - font-size: 1.2rem; - text-align: center; - color: var(--color-surfacelighter); - } + .label { + flex: 1; + max-height: 4.8em; + color: var(--color-surfacelighter); + } + + .icon { + flex: none; + display: none; + width: 1rem; + height: 1rem; + margin-left: 1rem; + fill: var(--color-surfacelighter); + } + } + + .no-options-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 1rem; + background-color: var(--color-backgroundlighter); + + .label { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + font-size: 1.2rem; + text-align: center; + color: var(--color-surfacelighter); } } } diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 78116cd7e..3c7f32f8f 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -143,7 +143,21 @@ const Discover = ({ urlParams, queryParams }) => {
{ inputsModalOpen ? - + + {selectInputs.slice(2).map((selectInput, index) => ( +
+
+ {selectInput.title} + {selectInput.isRequired ? '*' : null} +
+ +
+ ))} + : null } diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 8e20dd3c9..a1b16bf87 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -2,6 +2,7 @@ :import('~stremio/common/Multiselect/styles.less') { multiselect-menu-container: menu-container; + multiselect-modal-container: modal-container; } :import('~stremio/common/PaginationInput/styles.less') { @@ -172,6 +173,40 @@ } } +.selectable-inputs-modal-container { + .selectable-inputs-container { + display: flex; + flex-direction: row; + align-items: center; + + &:not(:last-child) { + margin-bottom: 1rem; + } + + .select-input-label-container { + flex: none; + width: 10rem; + max-height: 2.4em; + padding-right: 0.5rem; + color: var(--color-backgrounddarker); + } + + .select-input-container { + flex: none; + width: 15rem; + height: 3rem; + } + } +} + +.multiselect-modal-container { + .multiselect-menu-container { + width: 15rem; + max-height: calc(3.2rem * 7); + overflow-y: auto; + } +} + @media only screen and (min-width: @xxlarge) { .discover-container { .discover-content { From 11b69be4208f26311efd1adab5df739da6059f3d Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Thu, 13 Feb 2020 18:21:03 +0200 Subject: [PATCH 15/25] prevent spreading unnesesary props on multiselects in discover --- src/routes/Discover/Discover.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 3c7f32f8f..b3602b72c 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -52,11 +52,15 @@ const Discover = ({ urlParams, queryParams }) => {
- {selectInputs.map((selectInput, index) => ( + {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( ))}