@lets-events/react 12.10.17 → 12.11.0

package/src/components/MultiSelect/index.tsx

@@ -1,305 +1,417 @@
-import React, { useCallback, useRef, useState } from "react";
-import { DropdownMenu, Theme } from "@radix-ui/themes";
-import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
-import { Text } from "../Text";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faChevronDown,
-  faChevronUp,
-  faSquareXmark,
-} from "@fortawesome/free-solid-svg-icons";
-import { colors } from "@lets-events/tokens";
-import { ComponentProps, useMemo } from "react";
-import { Flex } from "../Flex";
-import { Button } from "../Button";
-import { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
-
-export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
-  placeholder?: string;
-  value?: string[];
-  onValueChange?: (v: string[]) => void;
-  options: Array<{
-    label: string;
-    value: string;
-  }>;
-  width?: string;
-  zIndex?: string;
-  showSelectedValues?: boolean;
-  singleSelect?: boolean;
-  selectedOrientation?: "row" | "column";
-  disabled?: boolean;
-  maxHeight?: string;
-  selectedAllOptions?: boolean;
-  selectedAllText?: string;
-  selectedScroll?: boolean;
-  showMoreButton?: boolean;
-  showMoreButtonLabel?: string;
-  showMoreButtonOnClick?: () => void;
-};
-
-export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
-  (
-    {
-      placeholder,
-      value: selectedValues = [],
-      onValueChange,
-      options,
-      color,
-      width = "100%",
-      zIndex = "auto",
-      showSelectedValues = true,
-      singleSelect = false,
-      selectedOrientation = "column",
-      disabled = false,
-      maxHeight,
-      selectedAllOptions = false,
-      selectedAllText,
-      selectedScroll = false,
-      showMoreButton = false,
-      showMoreButtonLabel = "Carregar mais",
-      showMoreButtonOnClick
-    },
-    fowardedRef
-  ) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const [allOptionsSelected, setAllOptionsSelected] = useState(false)
-    const labelByValue = useMemo(() => {
-      return options.reduce<{ [key: string]: string }>((prev, curr) => {
-        return {
-          ...prev,
-          [curr.value]: curr.label,
-        };
-      }, {});
-    }, [options]);
-
-    const handleRemove = useCallback(
-      (value: string) => {
-        const newValue = selectedValues.filter((v) => v !== value);
-        onValueChange?.(newValue);
-      },
-      [selectedValues, onValueChange]
-    );
-
-    const handleSelectAll = useCallback(
-      (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const allSelected = selectedValues.length === options.length;
-        if (allSelected) {
-          onValueChange?.([]);
-          setAllOptionsSelected(false)
-        } else {
-          onValueChange?.(options.map((o) => o.value));
-          setAllOptionsSelected(true)
-        }
-      },
-      [selectedValues, options, onValueChange]
-    );
-
-    const text = useMemo(() => {
-      if (selectedValues.length > 0 && singleSelect) {
-        const value = selectedValues[0];
-        return labelByValue[value];
-      }
-      return placeholder ?? "Selecione";
-    }, [selectedValues, placeholder, singleSelect]);
-
-    const handleItemClick = (v: string) => {
-      onValueChange?.([v]);
-      setIsOpen(false);
-    };
-
-    const handleToggle = useCallback(
-      (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled) return;
-        setIsOpen((prev) => !prev);
-      },
-      [disabled]
-    );
-
-    return (
-      <Theme style={width !== "100%" ? { width } : undefined}>
-        <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
-          <DropdownMenu.Trigger>
-            <StyledTrigger
-              ref={(r) => {
-                if (!r) return;
-                triggerRef.current = r;
-                if (fowardedRef) {
-                  if (typeof fowardedRef === "function") fowardedRef(r);
-                  else fowardedRef.current = r;
-                }
-              }}
-              color={color}
-              disabled={disabled}
-              style={width !== "100%" ? { width } : undefined}
-              onClick={handleToggle}
-            >
-              <StyledText
-                typography={"labelMedium"}
-                color={disabled ? "dark400" : undefined}
-              >
-                {text}
-              </StyledText>
-              <FontAwesomeIcon
-                icon={isOpen ? faChevronUp : faChevronDown}
-                size="sm"
-                color={disabled ? colors.dark400 : colors.dark600}
-              />
-            </StyledTrigger>
-          </DropdownMenu.Trigger>
-          <StyledContent
-            css={{
-              width: "100%",
-              zIndex: zIndex === "auto" ? 999999 : zIndex,
-            }}
-          >
-            {!singleSelect ? (
-              <CheckboxGroup
-                value={selectedValues}
-                onValueChange={(v) => {
-                  onValueChange?.(v);
-                  setAllOptionsSelected((v || []).length === options.length);
-                }}
-              >
-                <StyledFlexWithMaxHeight
-                  direction={"column"}
-                  gap={8}
-                  hasMaxHeight={!!maxHeight}
-                  style={maxHeight ? { maxHeight } : undefined}
-                >
-                  {selectedAllOptions && (
-                    <ButtonSelectAllStyled
-                      css={itemStyle}
-                      onClick={(e) => { handleSelectAll(e), setIsOpen(false) }}
-                      type="button"
-                    >
-                      <div className={allOptionsSelected ? "checked" : ""}></div>
-                      <Text typography="labelSmall">
-                        {selectedAllText ? selectedAllText : "Selecionar Todos"}
-                      </Text>
-                    </ButtonSelectAllStyled>
-                  )}
-
-                  {options.map(({ value, label }, i) => (
-                    <CheckboxItem value={value} css={itemStyle} key={i}>
-                      <Text typography={"labelSmall"}>{label}</Text>
-                    </CheckboxItem>
-                  ))}
-                  {showMoreButton && showMoreButtonOnClick && (
-                    <Button
-                      variant="menuDropdownItem"
-                      color="brand"
-                      onClick={showMoreButtonOnClick}
-                      fontWeight="semibold"
-                      type="button"
-                      css={{
-                        justifyContent: "flex-start",
-                        color: "var(--colors-brand500)!important",
-                      }}
-                    >
-                      {showMoreButtonLabel}
-                    </Button>
-                  )}
-                </StyledFlexWithMaxHeight>
-              </CheckboxGroup>
-            ) : (
-              <StyledFlexWithMaxHeight
-                direction={"column"}
-                gap={8}
-                hasMaxHeight={!!maxHeight}
-                style={maxHeight ? { maxHeight } : undefined}
-              >
-                {options.map(({ value, label }, i) => (
-                  <StyledItem key={i} onClick={() => handleItemClick(value)}>
-                    <Text typography={"labelSmall"}>{label}</Text>
-                  </StyledItem>
-                ))}
-                {showMoreButton && showMoreButtonOnClick && (
-                  <Button
-                    variant="menuDropdownItem"
-                    color="brand"
-                    onClick={showMoreButtonOnClick}
-                    fontWeight="semibold"
-                    type="button"
-                    css={{
-                      justifyContent: "flex-start",
-                      color: "var(--colors-brand500)!important",
-                    }}
-                  >
-                    {showMoreButtonLabel}
-                  </Button>
-                )}
-              </StyledFlexWithMaxHeight>
-            )}
-          </StyledContent>
-        </DropdownMenu.Root>
-        {selectedValues.length > 0 && showSelectedValues && (
-          <StyledFlexSelectedItems
-            direction={selectedOrientation}
-            gap={8}
-            align={selectedOrientation === "column" ? "start" : "center"}
-            justify={"start"}
-            css={{ ...(selectedScroll && { maxHeight: maxHeight || "400px" }) }}
-          >
-            {allOptionsSelected ? (
-              <Flex
-                key="all-selected"
-                gap={4}
-                align={"center"}
-                css={{ flexWrap: "wrap" }}
-              >
-                <CloseBtnStyled
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onValueChange?.([]);
-                    setAllOptionsSelected(false);
-                  }}
-                  type="button"
-                >
-                  <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                </CloseBtnStyled>
-                <Text
-                  typography={"captionMedium"}
-                  fontWeight={"regular"}
-                  color="dark600"
-                >
-                  {"Todos selecionados"}
-                </Text>
-              </Flex>
-            ) : (
-              selectedValues.map((value) => (
-                <Flex
-                  key={value}
-                  gap={4}
-                  align={"center"}
-                  css={{ flexWrap: "wrap" }}
-                >
-                  <CloseBtnStyled
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleRemove(value);
-                    }}
-                    type="button"
-                  >
-                    <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                  </CloseBtnStyled>
-                  <Text
-                    typography={"captionMedium"}
-                    fontWeight={"regular"}
-                    color="dark600"
-                  >
-                    {labelByValue[value]}
-                  </Text>
-                </Flex>
-              ))
-            )}
-          </StyledFlexSelectedItems>
-        )}
-      </Theme>
-    );
-  }
-);
+import React, { useCallback, useRef, useState } from "react";
+import { DropdownMenu, Theme } from "@radix-ui/themes";
+import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
+import { Text } from "../Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronDown,
+  faChevronUp,
+  faSquareXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import { colors } from "@lets-events/tokens";
+import { ComponentProps, useMemo } from "react";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import {
+  CloseBtnStyled,
+  ButtonSelectAllStyled,
+  itemStyle,
+  StyledContent,
+  StyledFlexSelectedItems,
+  StyledFlexWithMaxHeight,
+  StyledItem,
+  StyledModalOptionsWrapper,
+  StyledSectionDivider,
+  StyledSectionTitle,
+  StyledText,
+  StyledTrigger,
+} from "./styledComponents";
+
+const MOBILE_MODAL_MAX_HEIGHT = "90vh";
+const MOBILE_MODAL_HEADER_OFFSET = "65px";
+
+const MOBILE_BREAKPOINT = "(max-width: 840px)";
+
+export type MultiSelectOption = {
+  label: string;
+  value: string;
+};
+
+export type MultiSelectSection = {
+  name: string;
+  options: MultiSelectOption[];
+};
+
+export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
+  placeholder?: string;
+  value?: string[];
+  onValueChange?: (v: string[]) => void;
+  options?: MultiSelectOption[];
+  optionsBySection?: MultiSelectSection[];
+  width?: string;
+  zIndex?: string;
+  showSelectedValues?: boolean;
+  singleSelect?: boolean;
+  selectedOrientation?: "row" | "column";
+  disabled?: boolean;
+  maxHeight?: string;
+  selectedAllOptions?: boolean;
+  selectedAllText?: string;
+  selectedScroll?: boolean;
+  showMoreButton?: boolean;
+  showMoreButtonLabel?: string;
+  showMoreButtonOnClick?: () => void;
+  helperTextAfterField?: string;
+};
+
+export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    {
+      placeholder,
+      value: selectedValues = [],
+      onValueChange,
+      options = [],
+      optionsBySection,
+      color,
+      width = "100%",
+      zIndex = "auto",
+      showSelectedValues = true,
+      singleSelect = false,
+      selectedOrientation = "column",
+      disabled = false,
+      maxHeight,
+      selectedAllOptions = false,
+      selectedAllText,
+      selectedScroll = false,
+      showMoreButton = false,
+      showMoreButtonLabel = "Carregar mais",
+      showMoreButtonOnClick,
+      helperTextAfterField = "",
+    },
+    fowardedRef
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const [allOptionsSelected, setAllOptionsSelected] = useState(false);
+    const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+    const hasSections = !!optionsBySection?.length;
+
+    const resolvedOptions = useMemo((): MultiSelectOption[] => {
+      if (hasSections) {
+        return optionsBySection!.reduce<MultiSelectOption[]>(
+          (acc, section) => acc.concat(section.options),
+          []
+        );
+      }
+      return options;
+    }, [hasSections, options, optionsBySection]);
+
+    const labelByValue = useMemo(() => {
+      return resolvedOptions.reduce<{ [key: string]: string }>((prev, curr) => {
+        return {
+          ...prev,
+          [curr.value]: curr.label,
+        };
+      }, {});
+    }, [resolvedOptions]);
+
+    const handleRemove = useCallback(
+      (value: string) => {
+        const newValue = selectedValues.filter((v) => v !== value);
+        onValueChange?.(newValue);
+      },
+      [selectedValues, onValueChange]
+    );
+
+    const handleSelectAll = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const allSelected = selectedValues.length === resolvedOptions.length;
+        if (allSelected) {
+          onValueChange?.([]);
+          setAllOptionsSelected(false)
+        } else {
+          onValueChange?.(resolvedOptions.map((o) => o.value));
+          setAllOptionsSelected(true)
+        }
+      },
+      [selectedValues, resolvedOptions, onValueChange]
+    );
+
+    const text = useMemo(() => {
+      if (selectedValues.length > 0 && singleSelect) {
+        const value = selectedValues[0];
+        return labelByValue[value];
+      }
+      return placeholder ?? "Selecione";
+    }, [selectedValues, placeholder, singleSelect, labelByValue]);
+
+    const handleItemClick = (v: string) => {
+      onValueChange?.([v]);
+      setIsOpen(false);
+    };
+
+    const handleToggle = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        setIsOpen((prev) => !prev);
+      },
+      [disabled]
+    );
+
+    const triggerElement = (
+      <StyledTrigger
+        ref={(r) => {
+          if (!r) return;
+          triggerRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else fowardedRef.current = r;
+          }
+        }}
+        color={color}
+        disabled={disabled}
+        style={width !== "100%" ? { width } : undefined}
+        onClick={!isMobile ? handleToggle : undefined}
+      >
+        <StyledText
+          typography={"labelMedium"}
+          color={disabled ? "dark400" : undefined}
+        >
+          {text}
+        </StyledText>
+        <FontAwesomeIcon
+          icon={isOpen ? faChevronUp : faChevronDown}
+          size="sm"
+          color={disabled ? colors.dark400 : colors.dark600}
+        />
+      </StyledTrigger>
+    );
+
+    const selectAllBlock = selectedAllOptions && (
+      <>
+        <ButtonSelectAllStyled
+          css={itemStyle}
+          onClick={(e) => {
+            handleSelectAll(e);
+            setIsOpen(false);
+          }}
+          type="button"
+        >
+          <div className={allOptionsSelected ? "checked" : ""}></div>
+          <Text typography="labelSmall">
+            {selectedAllText ? selectedAllText : "Selecionar Todos"}
+          </Text>
+        </ButtonSelectAllStyled>
+        <StyledSectionDivider />
+      </>
+    );
+
+    const showMoreButtonBlock = showMoreButton && showMoreButtonOnClick && (
+      <Button
+        variant="menuDropdownItem"
+        color="brand"
+        onClick={showMoreButtonOnClick}
+        fontWeight="semibold"
+        type="button"
+        css={{
+          justifyContent: "flex-start",
+          color: "var(--colors-brand500)!important",
+        }}
+      >
+        {showMoreButtonLabel}
+      </Button>
+    );
+
+    const renderCheckboxOptions = () => {
+      if (hasSections) {
+        return optionsBySection!.map((section, sectionIndex) => (
+          <React.Fragment key={section.name}>
+            {sectionIndex > 0 && <StyledSectionDivider />}
+            <StyledSectionTitle typography="labelSmall" fontWeight="semibold" color="dark600">
+              {section.name}
+            </StyledSectionTitle>
+            {section.options.map(({ value, label }, i) => (
+              <CheckboxItem value={value} css={itemStyle} key={`${section.name}-${i}`}>
+                <Text typography={"labelSmall"}>{label}</Text>
+              </CheckboxItem>
+            ))}
+          </React.Fragment>
+        ));
+      }
+
+      return resolvedOptions.map(({ value, label }, i) => (
+        <CheckboxItem value={value} css={itemStyle} key={i}>
+          <Text typography={"labelSmall"}>{label}</Text>
+        </CheckboxItem>
+      ));
+    };
+
+    const renderSingleSelectOptions = () => {
+      if (hasSections) {
+        return optionsBySection!.map((section, sectionIndex) => (
+          <React.Fragment key={section.name}>
+            {sectionIndex > 0 && <StyledSectionDivider />}
+            <StyledSectionTitle typography="labelSmall" fontWeight="semibold" color="dark600">
+              {section.name}
+            </StyledSectionTitle>
+            {section.options.map(({ value, label }, i) => (
+              <StyledItem key={`${section.name}-${i}`} onClick={() => handleItemClick(value)}>
+                <Text typography={"labelSmall"}>{label}</Text>
+              </StyledItem>
+            ))}
+          </React.Fragment>
+        ));
+      }
+
+      return resolvedOptions.map(({ value, label }, i) => (
+        <StyledItem key={i} onClick={() => handleItemClick(value)}>
+          <Text typography={"labelSmall"}>{label}</Text>
+        </StyledItem>
+      ));
+    };
+
+    const optionsContent = !singleSelect ? (
+      <CheckboxGroup
+        value={selectedValues}
+        onValueChange={(v) => {
+          onValueChange?.(v);
+          setAllOptionsSelected((v || []).length === resolvedOptions.length);
+        }}
+      >
+        <StyledFlexWithMaxHeight
+          direction={"column"}
+          gap={8}
+          hasMaxHeight={!!maxHeight && !isMobile}
+          style={maxHeight && !isMobile ? { maxHeight } : undefined}
+        >
+          {selectAllBlock}
+          {renderCheckboxOptions()}
+          {showMoreButtonBlock}
+        </StyledFlexWithMaxHeight>
+      </CheckboxGroup>
+    ) : (
+      <StyledFlexWithMaxHeight
+        direction={"column"}
+        gap={8}
+        hasMaxHeight={!!maxHeight && !isMobile}
+        style={maxHeight && !isMobile ? { maxHeight } : undefined}
+      >
+        {renderSingleSelectOptions()}
+        {showMoreButtonBlock}
+      </StyledFlexWithMaxHeight>
+    );
+
+    const modalZIndex =
+      zIndex === "auto" ? undefined : Number(zIndex);
+
+    return (
+      <Theme style={width !== "100%" ? { width } : undefined}>
+        {isMobile ? (
+          <Modal
+            open={disabled ? false : isOpen}
+            onOpenChange={(open) => !disabled && setIsOpen(open)}
+            trigger={triggerElement}
+            title={placeholder ?? "Selecione"}
+            maxHeight={MOBILE_MODAL_MAX_HEIGHT}
+            zIndex={modalZIndex}
+            preventAutoFocus
+            fitContent
+          >
+            <StyledModalOptionsWrapper
+              css={{ maxHeight: `calc(${MOBILE_MODAL_MAX_HEIGHT} - ${MOBILE_MODAL_HEADER_OFFSET})` }}
+            >
+              {optionsContent}
+            </StyledModalOptionsWrapper>
+          </Modal>
+        ) : (
+          <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+            <DropdownMenu.Trigger>{triggerElement}</DropdownMenu.Trigger>
+            <StyledContent
+              css={{
+                width: "100%",
+                zIndex: zIndex === "auto" ? 999999 : zIndex,
+              }}
+            >
+              {optionsContent}
+            </StyledContent>
+          </DropdownMenu.Root>
+        )}
+        <div style={{ padding: '4px 8px 0 0' }}>
+          {helperTextAfterField && (
+            <Text typography="captionMedium" fontWeight="regular" color="dark600">
+              {helperTextAfterField}
+            </Text>
+          )}
+          {selectedValues.length > 0 && showSelectedValues && (
+            <StyledFlexSelectedItems
+              direction={selectedOrientation}
+              gap={8}
+              align={selectedOrientation === "column" ? "start" : "center"}
+              justify={"start"}
+              css={{ ...(selectedScroll && { maxHeight: maxHeight || "400px" }) }}
+            >
+              {allOptionsSelected ? (
+                <Flex
+                  key="all-selected"
+                  gap={4}
+                  align={"center"}
+                  css={{ flexWrap: "wrap" }}
+                >
+                  <CloseBtnStyled
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onValueChange?.([]);
+                      setAllOptionsSelected(false);
+                    }}
+                    type="button"
+                  >
+                    <FontAwesomeIcon icon={faSquareXmark} size="sm" />
+                  </CloseBtnStyled>
+                  <Text
+                    typography={"captionMedium"}
+                    fontWeight={"regular"}
+                    color="dark600"
+                  >
+                    {"Todos selecionados"}
+                  </Text>
+                </Flex>
+              ) : (
+                selectedValues.map((value) => (
+                  <Flex
+                    key={value}
+                    gap={4}
+                    align={"center"}
+                    css={{ flexWrap: "wrap" }}
+                  >
+                    <CloseBtnStyled
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(value);
+                      }}
+                      type="button"
+                    >
+                      <FontAwesomeIcon icon={faSquareXmark} size="sm" />
+                    </CloseBtnStyled>
+                    <Text
+                      typography={"captionMedium"}
+                      fontWeight={"regular"}
+                      color="dark600"
+                    >
+                      {labelByValue[value]}
+                    </Text>
+                  </Flex>
+                ))
+              )}
+            </StyledFlexSelectedItems>
+          )}
+        </div>
+      </Theme>
+    );
+  }
+);