rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/CityPicker/CityPicker.js

@@ -0,0 +1,404 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { colors } from '../../utils';
+import Button from '../Button/Button.js';
+import Icon from '../Icon/Icon.js';
+import { cities } from './cities.js';
+
+const _size = {
+  medium: css`
+    height: 40px;
+    font-size: 14px;
+    padding: 0px 38px 0px 12px;
+  `,
+  large: css`
+    height: 48px;
+    font-size: 16px;
+    padding: 0px 42px 0px 16px;
+  `
+};
+const CityPickerStyled = styled.div`
+  position: relative;
+  width: 100%;
+
+  & > div:first-of-type {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  & > input {
+    border-radius: 8px;
+    border: none;
+    outline: none;
+    appearance: none;
+    cursor: pointer;
+    background-color: ${colors.gray_100};
+    color: ${colors.gray_950};
+    width: 100%;
+    font-weight: 400;
+    line-height: 120%;
+
+    ${({ $intent }) => $intent === "danger" && css`
+        outline: 2px solid ${colors.danger_500};
+      `}
+
+    ${({ $size }) => $size && ["medium", "large"].includes($size) ? _size[$size] : _size.medium};
+
+    &:placeholder {
+      color: ${colors.gray_600};
+    }
+
+    ${({ $isOpen }) => $isOpen && css`
+        outline: 2px solid ${colors.accent_600};
+      `}
+
+    ${({ $disabled }) => $disabled && css`
+        background-color: ${colors.gray_30};
+        color: ${colors.gray_500};
+
+        &:placeholder {
+          color: ${colors.gray_500};
+        }
+      `}
+  }
+`;
+const CityPickerContentStyled = styled.div`
+  background-color: ${colors.white};
+  position: absolute;
+  z-index: 100;
+  margin-top: 16px;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  box-shadow: 0px 6px 20px 0px rgba(19, 20, 22, 0.2),
+    0px 2px 6px 0px rgba(19, 20, 22, 0.15);
+  border-radius: 16px;
+
+  & > div:nth-of-type(1) {
+    padding: 12px;
+    border-bottom: 1px solid ${colors.gray_150};
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    & > span {
+      color: ${colors.gray_800};
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    & > div {
+      position: relative;
+      width: 100%;
+
+      & > input {
+        width: 100%;
+        appearance: none;
+        outline: none;
+        border: none;
+        background-color: ${colors.gray_100};
+        border-radius: 8px;
+        padding-right: 10px;
+        padding-left: 40px;
+        height: 40px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 120%;
+        color: ${colors.gray_950};
+
+        &::placeholder {
+          color: ${colors.gray_600};
+        }
+      }
+
+      & > div {
+        position: absolute;
+        height: 100%;
+        left: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  & > div:nth-of-type(2) {
+    padding-right: 4px;
+
+    div {
+      padding: 12px 8px 12px 12px;
+      width: 100%;
+      overflow-y: scroll;
+      max-height: 276px;
+
+      &::-webkit-scrollbar-track-piece {
+        margin: 15px;
+      }
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${colors.gray_300};
+        border-radius: 999px;
+        width: 8px;
+      }
+
+      & > div {
+        height: 42px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 14px;
+        width: 100%;
+        font-weight: 400;
+        line-height: 120%;
+        color: ${colors.gray_950};
+        border-radius: 8px;
+
+        &:hover {
+          background-color: ${colors.info_100};
+        }
+
+        &[data-active="true"] {
+          background-color: ${colors.info_100};
+        }
+
+        & > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      & > .k3m8n9p4v2 {
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+      }
+    }
+  }
+
+  & > div:nth-child(3) {
+    padding: 12px;
+    display: flex;
+    justify-content: ${({ $isJudetPicked }) => $isJudetPicked ? "space-between" : "flex-end"};
+    align-items: center;
+    gap: 8px;
+    border-top: 1px solid ${colors.gray_150};
+  }
+`;
+const CityPicker = ({
+  id,
+  name,
+  placeholder = "Selecteaza",
+  value = { judet: "", localitate: "", clasificare: "" },
+  setValue,
+  size = "medium",
+  intent = "default",
+  disabled = false,
+  ...rest
+}) => {
+  const wrapper_reference = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchField, setSearchField] = useState("");
+  const [isJudetPicked, setIsJudetPicked] = useState(false);
+  const [judet, setJudet] = useState("");
+  const [localitate, setLocalitate] = useState("");
+  const [clasificare, setClasificare] = useState("");
+  const [labeled, setLabeled] = useState("");
+  const isDirty = useRef(false);
+  const localitatiData = useMemo(() => {
+    if (!judet || !isJudetPicked) return [];
+    return cities.find(
+      (judetItem) => judetItem.title.toLowerCase() === judet.toLowerCase()
+    )?.localitati ?? [];
+  }, [judet, isJudetPicked]);
+  const filteredItems = useMemo(() => {
+    const searchTerm = searchField.toLowerCase();
+    if (!searchTerm) return isJudetPicked ? localitatiData : cities;
+    return (isJudetPicked ? localitatiData : cities).filter(
+      (item) => item.title.toLowerCase().includes(searchTerm)
+    );
+  }, [searchField, isJudetPicked, localitatiData]);
+  const handleSearchItem = useCallback(
+    (e) => {
+      setSearchField(e.target.value);
+    },
+    []
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      isDirty.current = true;
+      if (!isJudetPicked) {
+        setJudet(item.title);
+        return;
+      }
+      setLocalitate(item.title);
+      setClasificare(item.clasificare ?? "");
+    },
+    [isJudetPicked]
+  );
+  const handleChangeJudet = useCallback(() => {
+    isDirty.current = true;
+    setIsJudetPicked(false);
+    setSearchField("");
+    setLocalitate("");
+    setClasificare("");
+  }, []);
+  const handleContinue = useCallback(() => {
+    isDirty.current = true;
+    if (!isJudetPicked && judet) {
+      setIsJudetPicked(true);
+      setSearchField("");
+      return;
+    }
+    if (!localitate) return;
+    const labeledValue = `${judet} - ${localitate}`;
+    setIsJudetPicked(true);
+    setIsOpen(false);
+    setLabeled(labeledValue);
+    setValue && setValue({ judet, localitate, clasificare });
+  }, [isJudetPicked, judet, localitate, clasificare, setValue]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapper_reference.current && !wrapper_reference.current.contains(event.target)) {
+        setIsOpen(false);
+        if (value?.judet) {
+          setJudet(value?.judet);
+          setIsJudetPicked(true);
+          if (value?.localitate) {
+            setLocalitate(value?.localitate);
+            setClasificare(value?.clasificare ?? "");
+          }
+          return;
+        }
+        setJudet("");
+        setLocalitate("");
+        setClasificare("");
+        setIsJudetPicked(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [wrapper_reference, isOpen]);
+  useEffect(() => {
+    if (isDirty.current) return;
+    let labeledValue = "";
+    if (value?.judet) {
+      setJudet(value?.judet);
+      labeledValue = `${value?.judet}`;
+      setIsJudetPicked(true);
+    }
+    if (value?.localitate) {
+      setLocalitate(value?.localitate);
+      if (value?.judet) {
+        labeledValue = `${value?.judet} - ${value?.localitate}`;
+      }
+    }
+    if (value?.clasificare) {
+      setClasificare(value?.clasificare);
+    }
+    setLabeled(labeledValue);
+  }, [value]);
+  return /* @__PURE__ */ jsxs(
+    CityPickerStyled,
+    {
+      ref: wrapper_reference,
+      $size: size,
+      $intent: intent,
+      $disabled: disabled,
+      $isOpen: isOpen,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            readOnly: true,
+            placeholder,
+            id,
+            type: "text",
+            name,
+            value: labeled,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            onChange: (e) => e.preventDefault()
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "city",
+            size: 20,
+            color: disabled ? colors.info_500_40 : colors.info_700
+          }
+        ) }),
+        isOpen && /* @__PURE__ */ jsxs(CityPickerContentStyled, { $isJudetPicked: isJudetPicked, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { children: !isJudetPicked ? "Alege judetul" : `Alege localitatea in ${judet}` }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Icon, { icon: "search", size: 20, color: colors.gray_500 }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  onChange: handleSearchItem,
+                  value: searchField,
+                  type: "text"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-active": !isJudetPicked ? judet === item.title : localitate === item.title,
+              onClick: () => handleSelect(item),
+              children: /* @__PURE__ */ jsx("span", { children: item.title })
+            },
+            index
+          )) : /* @__PURE__ */ jsx("div", { className: "k3m8n9p4v2", children: /* @__PURE__ */ jsx("span", { children: "Nu au fost gasite rezultate." }) }) }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            isJudetPicked && /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: "Schimba judetul",
+                intent: "accent",
+                variant: "secondaryOutlined",
+                size: "medium",
+                onClick: handleChangeJudet
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: "Continua",
+                intent: "accent",
+                variant: "primary",
+                size: "medium",
+                onClick: handleContinue
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { CityPicker as default };