@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -1,537 +0,0 @@
-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 === null || pressHandlers === void 0 || 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;