@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,537 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
+import Platform from "react-native-web/dist/exports/Platform";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp, useScrollBlocking } from '../utils';
+import defaultDictionary from './dictionary';
+import { useViewport } from '../ViewportProvider';
+import Box from '../Box';
+import { Button, ButtonDropdown } from '../Button';
+import { CheckboxGroup } from '../Checkbox';
+import Divider from '../Divider';
+import FlexGrid from '../FlexGrid';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import { TextButton } from '../Link';
+import ModalOverlay from './ModalOverlay';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  Col,
+  Row
+} = FlexGrid;
+const selectHeaderTokens = _ref => {
+  let {
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref;
+  return {
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight,
+    flexGrow: 1
+  };
+};
+const selectControlsTokens = _ref2 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref2;
+  return {
+    marginBottom: contentMarginBottom,
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight
+  };
+};
+const selectContainerStyle = (windowHeight, windowWidth) => ({
+  height: windowHeight,
+  width: windowWidth
+});
+const TOTAL_COLUMNS = 12;
+const MAX_ITEMS_THRESHOLD = 12;
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    label,
+    subtitle,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    maxHeight = false,
+    initialValues,
+    maxValues,
+    onChange,
+    onConfirm = () => {},
+    onCancel = () => {},
+    onOpen = () => {},
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    dictionary = defaultDictionary,
+    ...rest
+  } = _ref3;
+  const viewport = useViewport();
+  const {
+    currentValues,
+    setValues
+  } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
+  const [maxWidth, setMaxWidth] = React.useState(false);
+  const {
+    headerFontColor,
+    headerFontSize,
+    buttonDirection,
+    headerFontWeight,
+    headerLineHeight,
+    subHeaderFontWeight,
+    subHeaderFontSize,
+    maxHeightSize,
+    maxWidthSize,
+    subHeaderLineHeight,
+    minHeight,
+    minWidth,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelColor,
+    labelLineHeight,
+    labelPaddingTop,
+    labelPaddingBottom,
+    labelPaddingLeft,
+    labelPaddingRight,
+    buttonBorderColor,
+    buttonIconSize,
+    buttonIconPadding,
+    subtitleColor,
+    dividerColor,
+    ...restTokens
+  } = useThemeTokens('MultiSelectFilter', tokens, {
+    ...variant,
+    maxHeight,
+    maxWidth
+  }, {
+    viewport
+  });
+  const dropdownTokens = {
+    borderColor: buttonBorderColor,
+    iconSize: buttonIconSize,
+    iconPadding: buttonIconPadding,
+    lineHeight: labelLineHeight,
+    fontName: labelFontName,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    color: labelColor,
+    paddingTop: labelPaddingTop,
+    paddingBottom: labelPaddingBottom,
+    paddingLeft: labelPaddingLeft,
+    paddingRight: labelPaddingRight
+  };
+  const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
+  const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(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;
+  React.useEffect(() => {
+    if (colSize === 1) return setMaxWidth(false);
+    return colSize === 2 && setMaxWidth(true);
+  }, [colSize]);
+  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  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: subtitleColor
+  });
+  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 = /*#__PURE__*/_jsxs(View, {
+    style: [selectHeaderTokens(restTokens), styles.container],
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            ...headerStyles,
+            lineHeight: headerLineHeight
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      })
+    }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            ...subeHeaderStyles,
+            lineHeight: subHeaderLineHeight
+          },
+          children: subtitle
+        })
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.options,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        onLayout: handleScrollViewLayout,
+        children: /*#__PURE__*/_jsx(Row, {
+          distribute: "between",
+          onLayout: handleRowLayout,
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
+            xs: TOTAL_COLUMNS / colSize,
+            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
+              items: items.slice(i * rowLength, (i + 1) * rowLength),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/_jsx(Spacer, {
+              size: 4
+            })]
+          }, i))
+        })
+      })
+    })]
+  });
+  const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
+      tokens: {
+        color: dividerColor
+      },
+      space: 4
+    }) : /*#__PURE__*/_jsx(Spacer, {
+      space: 4
+    }), /*#__PURE__*/_jsx(View, {
+      style: selectControlsTokens(restTokens),
+      children: /*#__PURE__*/_jsx(Row, {
+        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
+        children: /*#__PURE__*/_jsxs(StackView, {
+          direction: buttonDirection,
+          space: 3,
+          tokens: {
+            alignItems: 'center',
+            ...(viewport === 'xs' && {
+              flexGrow: 1
+            })
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              priority: 'high',
+              ...(viewport === 'xs' && {
+                width: 'full'
+              })
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(TextButton, {
+              onPress: onClear,
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: sourceRef,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsx(ModalOverlay, {
+      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: true,
+      children: /*#__PURE__*/_jsxs(SafeAreaView, {
+        style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
+        ref: ref,
+        children: [headerContent, /*#__PURE__*/_jsx(View, {
+          style: styles.controls,
+          children: controlsContent
+        })]
+      })
+    }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(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,
+      children: [headerContent, controlsContent]
+    })]
+  });
+});
+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.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * The text for the subtitle
+   */
+  subtitle: PropTypes.string,
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: PropTypes.string,
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: variantProp.propType,
+  /**
+   * Sets the tokens for MultiSelectFilter element.
+   */
+  tokens: getTokensPropType('MultiSelectFilter'),
+  /**
+   * The options a user may select.
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: PropTypes.string.isRequired,
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: PropTypes.string
+  })),
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * 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.
+   */
+  readOnly: PropTypes.string,
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: PropTypes.string,
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: PropTypes.number
+};
+export default MultiSelectFilter;