@telus-uds/components-base 2.0.0 → 2.0.2

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,18 +1,22 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
+import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
+import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   containUniqueFields,
   getTokensPropType,
   getPressHandlersWithArgs,
   selectTokens,
+  useOverlaidPosition,
   useCopy,
   useMultipleInputValues,
-  variantProp
+  useResponsiveProp,
+  variantProp,
+  useScrollBlocking
 } from '../utils'
-import dictionary from './dictionary'
-
+import defaultDictionary from './dictionary'
+import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
 import { Button, ButtonDropdown } from '../Button'
 import { CheckboxGroup } from '../Checkbox'
@@ -30,14 +34,48 @@ const selectSubTitleTokens = ({ subtitleColor }) => ({
   color: subtitleColor
 })
 
-const selectDividerToknes = ({ dividerColor, width, decorative = true, weight = 'thin' }) => ({
-  color: dividerColor,
-  width,
-  decorative,
-  weight
+const selectDividerTokens = ({ dividerColor }) => ({
+  color: dividerColor
+})
+
+const selectHeaderTokens = ({
+  contentMarginLeft,
+  contentMarginRight,
+  contentMarginTop,
+  contentPaddingLeft,
+  contentPaddingRight
+}) => ({
+  marginLeft: contentMarginLeft,
+  marginRight: contentMarginRight,
+  marginTop: contentMarginTop,
+  paddingLeft: contentPaddingLeft,
+  paddingRight: contentPaddingRight,
+  flexGrow: 1
+})
+
+const selectControlsTokens = ({
+  contentMarginBottom,
+  contentMarginLeft,
+  contentMarginRight,
+  contentPaddingLeft,
+  contentPaddingRight
+}) => ({
+  marginBottom: contentMarginBottom,
+  marginLeft: contentMarginLeft,
+  marginRight: contentMarginRight,
+  paddingLeft: contentPaddingLeft,
+  paddingRight: contentPaddingRight
 })
 
-const MultiSelectFilter = forwardRef(
+const selectContainerStyle = (windowHeight, windowWidth) => ({
+  height: windowHeight,
+  width: windowWidth
+})
+
+const TOTAL_COLUMNS = 12
+const MAX_ITEMS_THRESHOLD = 12
+
+const MultiSelectFilter = React.forwardRef(
   (
     {
       label,
@@ -47,17 +85,23 @@ const MultiSelectFilter = forwardRef(
       tokens,
       items = [],
       values,
+      maxHeight = false,
       initialValues,
       maxValues,
       onChange,
+      onConfirm = () => {},
+      onCancel = () => {},
+      onOpen = () => {},
       copy = 'en',
       readOnly = false,
       inactive = false,
       rowLimit = 12,
+      dictionary = defaultDictionary,
       ...rest
     },
     ref
   ) => {
+    const viewport = useViewport()
     const { currentValues, setValues } = useMultipleInputValues({
       initialValues,
       values,
@@ -65,40 +109,208 @@ const MultiSelectFilter = forwardRef(
       onChange,
       readOnly
     })
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [checkedIds, setCheckedIds] = React.useState(currentValues ?? [])
+    const [maxWidth, setMaxWidth] = React.useState(false)
 
     const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
     const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
     const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
     const getCopy = useCopy({ dictionary, copy })
+    const colSizeNotMobile = items.length > rowLimit ? 2 : 1
+    const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
+    const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
+    const isSelected = currentValues.length > 0
+    const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
 
-    const [isOpen, setIsOpen] = useState(false)
-    const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
+    React.useEffect(() => {
+      if (colSize === 1) return setMaxWidth(false)
+      return colSize === 2 && setMaxWidth(true)
+    }, [colSize])
 
-    const colSize = items.length > rowLimit ? 2 : 1
-    const isSelected = currentValues.length > 0
+    React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
+
+    const {
+      headerFontColor,
+      headerFontSize,
+      buttonDirection,
+      headerFontWeight,
+      headerLineHeight,
+      subHeaderFontWeight,
+      subHeaderFontSize,
+      maxHeightSize,
+      maxWidthSize,
+      subHeaderLineHeight,
+      minHeight,
+      minWidth,
+      ...restTokens
+    } = useThemeTokens(
+      'MultiSelectFilter',
+      tokens,
+      { ...variant, maxHeight, maxWidth },
+      { viewport }
+    )
 
     const uniqueFields = ['id', 'label']
     if (!containUniqueFields(items, uniqueFields)) {
       throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
     }
-
     // Pass an object of relevant component state as first argument for any passed-in press handlers
     const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
     const handleChange = (event) => {
       if (pressHandlers.onPress) pressHandlers?.onPress(event)
+      if (isOpen) onOpen()
       setIsOpen(!isOpen)
     }
 
     const onApply = (e) => {
       setValues(e)
       setIsOpen(false)
+      onConfirm(e)
     }
 
+    const onClear = () => {
+      setCheckedIds(() => [])
+      setValues([])
+      setIsOpen(false)
+      onCancel()
+    }
+
+    const onClose = () => {
+      setIsOpen(false)
+      onCancel()
+    }
+
+    const { align, offsets } = useResponsiveProp({
+      xs: { align: { top: 'top', left: 'left' } },
+      sm: {
+        align: { top: 'bottom', left: 'left' },
+        offsets: { vertical: 4 }
+      }
+    })
+
+    const headerStyles = applyTextStyles({
+      fontSize: headerFontSize,
+      fontWeight: headerFontWeight,
+      fontColor: headerFontColor
+    })
+
+    const subeHeaderStyles = applyTextStyles({
+      fontSize: subHeaderFontSize,
+      fontWeight: subHeaderFontWeight,
+      fontColor: selectSubTitleTokens(themeTokens)
+    })
+
+    const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
+      isShown: isOpen,
+      offsets,
+      align
+    })
+
+    const [isScrolling, setIsScrolling] = React.useState(false)
+    const [scrollViewHeight, setScrollViewHeight] = React.useState(0)
+    const [rowHeight, setRowHeight] = React.useState(0)
+    const modalRef = useScrollBlocking(isOpen)
+    const windowWidth = Dimensions.get('window').width
+    const windowHeight = Dimensions.get('window').height
+
+    React.useEffect(() => {
+      if (rowHeight > scrollViewHeight) {
+        setIsScrolling(true)
+      } else {
+        setIsScrolling(false)
+      }
+    }, [scrollViewHeight, rowHeight])
+
+    const handleScrollViewLayout = (event) => {
+      const { height } = event.nativeEvent.layout
+      setScrollViewHeight(height)
+    }
+
+    const handleRowLayout = (event) => {
+      const { height } = event.nativeEvent.layout
+      setRowHeight(height)
+    }
+
+    const headerContent = (
+      <View style={[selectHeaderTokens(restTokens), styles.container]}>
+        <Row>
+          <View>
+            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
+              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+            </Typography>
+          </View>
+        </Row>
+        {subtitle && (
+          <>
+            <Spacer space={4} />
+            <Row>
+              <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
+                {subtitle}
+              </Typography>
+            </Row>
+            <Spacer space={4} />
+          </>
+        )}
+        <View style={styles.options}>
+          <ScrollView onLayout={handleScrollViewLayout}>
+            <Row distribute="between" onLayout={handleRowLayout}>
+              {[...Array(colSize).keys()].map((i) => (
+                <Col xs={TOTAL_COLUMNS / colSize} key={i}>
+                  <CheckboxGroup
+                    items={items.slice(i * rowLength, (i + 1) * rowLength)}
+                    checkedIds={checkedIds}
+                    onChange={(e) => setCheckedIds(e, i)}
+                  />
+                  <Spacer size={4} />
+                </Col>
+              ))}
+            </Row>
+          </ScrollView>
+        </View>
+      </View>
+    )
+
+    const controlsContent = (
+      <>
+        {isScrolling ? (
+          <Divider tokens={selectDividerTokens(themeTokens)} space={4} />
+        ) : (
+          <Spacer space={4} />
+        )}
+        <View style={selectControlsTokens(restTokens)}>
+          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+            <StackView
+              direction={buttonDirection}
+              space={3}
+              tokens={{
+                alignItems: 'center',
+                ...(viewport === 'xs' && { flexGrow: 1 })
+              }}
+            >
+              <Button
+                onPress={() => onApply(checkedIds)}
+                variant={{
+                  priority: 'high',
+                  ...(viewport === 'xs' && { width: 'full' })
+                }}
+              >
+                {getCopy('applyButtonLabel')}
+              </Button>
+              <Box>
+                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
+              </Box>
+            </StackView>
+          </Row>
+        </View>
+      </>
+    )
+
     return (
       <>
         <ButtonDropdown
-          ref={ref}
+          ref={sourceRef}
           key={id}
           {...pressHandlers}
           value={isOpen}
@@ -108,65 +320,88 @@ const MultiSelectFilter = forwardRef(
           tokens={getButtonTokens}
           inactive={inactive}
         />
-        {isOpen && (
+        {isOpen && viewport === 'xs' && (
           <ModalOverlay
-            variant={{ width: colSize > 1 ? 'size576' : 's' }}
-            onClose={() => setIsOpen(false)}
+            overlaidPosition={{ top: 0, left: 0 }}
+            onClose={onClose}
+            maxHeight={true}
+            maxHeightSize={windowHeight}
+            maxWidthSize={windowWidth}
+            minHeight={windowHeight}
+            minWidth={windowWidth}
+            tokens={{
+              ...tokens,
+              maxWidth: true
+            }}
+            copy={copy}
+            isReady={isReady}
+            onLayout={onTargetLayout}
+            ref={modalRef}
+            enableFullscreen
           >
-            <Row>
-              <Typography variant={{ size: 'h4' }}>
-                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-              </Typography>
-            </Row>
-            {subtitle && (
-              <>
-                <Spacer space={5} />
-                <Row>
-                  <Typography variant={{ size: 'h5' }} tokens={selectSubTitleTokens(themeTokens)}>
-                    {subtitle}
-                  </Typography>
-                </Row>
-              </>
-            )}
-            <Spacer space={4} />
-            <Box scroll={true}>
-              <Row distribute="between">
-                {[...Array(colSize).keys()].map((i) => (
-                  <Col xs={12 / colSize} key={i}>
-                    <CheckboxGroup
-                      items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
-                      checkedIds={checkedIds}
-                      onChange={(e) => setCheckedIds(e, i)}
-                    />
-                    <Spacer size={4} />
-                  </Col>
-                ))}
-              </Row>
-            </Box>
-            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-            <Row>
-              <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
-                <Button
-                  onPress={() => onApply(checkedIds)}
-                  variant={{ size: 'small', priority: 'high' }}
-                >
-                  {getCopy('applyButtonLabel')}
-                </Button>
-                <Box>
-                  <TextButton onPress={() => setCheckedIds([])}>
-                    {getCopy('clearButtonLabel')}
-                  </TextButton>
-                </Box>
-              </StackView>
-            </Row>
+            <SafeAreaView
+              style={[selectContainerStyle(windowHeight, windowWidth), styles.content]}
+              ref={ref}
+            >
+              {headerContent}
+              <View style={styles.controls}>{controlsContent}</View>
+            </SafeAreaView>
+          </ModalOverlay>
+        )}
+        {isOpen && viewport !== 'xs' && (
+          <ModalOverlay
+            overlaidPosition={overlaidPosition}
+            onClose={onClose}
+            maxHeight={items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight}
+            maxHeightSize={maxHeightSize}
+            maxWidthSize={maxWidthSize}
+            minHeight={minHeight}
+            minWidth={minWidth}
+            tokens={{
+              ...tokens,
+              maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
+            }}
+            copy={copy}
+            isReady={isReady}
+            onLayout={onTargetLayout}
+            ref={ref}
+          >
+            {headerContent}
+            {controlsContent}
           </ModalOverlay>
         )}
       </>
     )
   }
 )
+
 MultiSelectFilter.displayName = 'MultiSelectFilter'
 
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  controls: Platform.select({
+    web: {},
+    default: {
+      flex: 0.35
+    }
+  }),
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent'
+  },
+  options: {
+    flex: 1
+  }
+})
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  filterByLabel: PropTypes.string.isRequired,
+  applyButtonLabel: PropTypes.string.isRequired,
+  clearButtonLabel: PropTypes.string.isRequired
+})
+
 MultiSelectFilter.propTypes = {
   /**
    * The text displayed to the user in a ButtonDropdown.
@@ -186,9 +421,9 @@ MultiSelectFilter.propTypes = {
    */
   variant: variantProp.propType,
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: getTokensPropType('ButtonDropdown'),
+  tokens: getTokensPropType('MultiSelectFilter'),
   /**
    * The options a user may select.
    */
@@ -222,15 +457,38 @@ MultiSelectFilter.propTypes = {
    * If provided, sets a maximum number of items a user may select at once.
    */
   maxValues: PropTypes.number,
+  /**
+   * If provided sets maxHeight to be active
+   */
+  maxHeight: PropTypes.bool,
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
   onChange: PropTypes.func,
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * If provided, this function is called when the modal with options is opened.
+   * */
+  onOpen: PropTypes.func,
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: PropTypes.func,
   /**
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */