@monolith-forensics/monolith-ui 1.0.12 → 1.1.1

package/src/components/DateInput/DateInput.js

@@ -1,583 +0,0 @@
-import moment from "moment";
-import { useFloating, flip, offset } from "@floating-ui/react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import styled from "styled-components";
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import Calendar from "../Calendar/Calendar.js";
-import {
-  ArrowButton,
-  ClearButton,
-  StyledContent,
-  StyledFloatContainer,
-} from "../SelectBox/SelectBox.js";
-
-const StyledInputContainer = styled.div`
-  position: relative;
-
-  caret-color: transparent;
-  user-select: none;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-
-  pointer-events: all;
-  outline: none;
-
-  border-radius: 5px;
-  transition: border 0.1s ease-in-out;
-  border: 1px solid
-    ${({ theme, variant }) => {
-      switch (variant) {
-        case "filled":
-          return "transparent";
-        case "outlined":
-          return theme.palette.input.border;
-        case "text":
-          return "transparent";
-        default:
-          return theme.palette.input.border;
-      }
-    }};
-  font-weight: 500;
-  color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) =>
-    size === "xs"
-      ? "11px"
-      : size === "sm"
-      ? "13px"
-      : size === "md"
-      ? "15px"
-      : size === "lg"
-      ? "17px"
-      : size === "xl"
-      ? "19px"
-      : "11px"};
-
-  width: 100%;
-  height: ${({ size }) =>
-    size === "xs"
-      ? "26px"
-      : size === "sm"
-      ? "30px"
-      : size === "md"
-      ? "36px"
-      : size === "lg"
-      ? "42px"
-      : size === "xl"
-      ? "50px"
-      : "26px"};
-
-  padding: ${({ size }) =>
-    size === "xs"
-      ? "0px 8px"
-      : size === "sm"
-      ? "0px 10px"
-      : size === "md"
-      ? "0px 12px"
-      : size === "lg"
-      ? "0px 14px"
-      : size === "xl"
-      ? "0px 16px"
-      : "0px 8px"};
-
-  &[data-button-right="true"] {
-    padding-right: 36px;
-  }
-
-  background-color: ${({ theme, variant }) => {
-    switch (variant) {
-      case "filled":
-        return theme.palette.input.background;
-      case "outlined":
-        return theme.palette.input.background;
-      case "text":
-        return "transparent";
-      default:
-        return theme.palette.input.background;
-    }
-  }};
-
-  &[readOnly] {
-    cursor: pointer;
-  }
-
-  & [data-has-space="true"] {
-    padding-left: 4px;
-  }
-
-  & [data-selected="true"] {
-    background-color: ${(props) => props.theme.palette.primary.main}50;
-  }
-
-  &[data-empty="true"] {
-    color: ${(props) => props.theme.palette.input.placeholder};
-    div {
-      color: ${(props) => props.theme.palette.input.placeholder};
-    }
-  }
-
-  & [data-default-btn="true"] {
-    color: ${(props) => props.theme.palette.text.secondary};
-    div {
-      color: ${(props) => props.theme.palette.text.secondary};
-    }
-  }
-
-  &:focus {
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-const InputSegment = styled.div`
-  user-select: none;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  pointer-events: all;
-  outline: none;
-  border: none;
-  padding: 0;
-
-  height: ${({ size }) =>
-    size === "xs"
-      ? "22px"
-      : size === "sm"
-      ? "26px"
-      : size === "md"
-      ? "32px"
-      : size === "lg"
-      ? "38px"
-      : size === "xl"
-      ? "46px"
-      : "22px"};
-
-  height: 100%;
-
-  background-color: transparent;
-  color: ${(props) => props.theme.palette.text.primary};
-
-  ::placeholder {
-    font-size: ${({ size }) =>
-      size === "xs"
-        ? "10px"
-        : size === "sm"
-        ? "12px"
-        : size === "md"
-        ? "14px"
-        : size === "lg"
-        ? "16px"
-        : size === "xl"
-        ? "18px"
-        : "10px"};
-  }
-`;
-
-function parseTimestamp(timestamp, format, utc = false) {
-  // Define patterns to identify datetime components and their placeholders
-  const patterns = [
-    { pattern: "YYYY", placeholder: "YYYY", type: "year", momentType: "year" },
-    { pattern: "MM", placeholder: "MM", type: "month", momentType: "month" },
-    { pattern: "DD", placeholder: "DD", type: "day", momentType: "date" },
-    { pattern: "HH", placeholder: "HH", type: "hour", momentType: "hour" },
-    { pattern: "h", placeholder: "h", type: "hour", momentType: "hour" },
-    { pattern: "mm", placeholder: "mm", type: "minute", momentType: "minute" },
-    { pattern: "ss", placeholder: "ss", type: "second", momentType: "second" },
-    {
-      pattern: "SSS",
-      placeholder: "SSS",
-      type: "millisecond",
-      moment: "millisecond",
-    },
-    {
-      pattern: "A",
-      placeholder: "AM/PM",
-      type: "meridiem",
-      momentType: "meridiem",
-    },
-    { pattern: "Z", placeholder: "Z", type: "timezone", moment: "timezone" },
-  ];
-
-  // Helper function to split format into datetime components and separators
-  function splitFormat(format) {
-    return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
-  }
-
-  // Helper function to match segments to their placeholders and types
-  function matchSegment(segment) {
-    const pattern = patterns.find((p) => p.pattern === segment);
-    return pattern
-      ? pattern
-      : { pattern: segment, placeholder: segment, type: "separator" };
-  }
-
-  const segments = splitFormat(format).map((segment, i) => {
-    const { pattern, placeholder, type, momentType } = matchSegment(segment);
-    const value = timestamp
-      ? utc === true
-        ? moment.utc(timestamp).format(pattern)
-        : moment(timestamp).format(pattern)
-      : placeholder;
-
-    return {
-      value,
-      text: value,
-      placeholder,
-      type,
-      momentType,
-      index: i,
-    };
-  });
-
-  return segments;
-}
-
-const DateInput = styled(
-  ({
-    className,
-    defaultValue,
-    format = "YYYY-MM-DD HH:mm:ss",
-    label = null,
-    description = null,
-    arrow = true,
-    size = "sm",
-    variant = "outlined",
-    clearable = false,
-    required = false,
-    onChange = () => {},
-    min = null,
-    max = null,
-    error = false,
-    width = null,
-    enableCalendar = false,
-    utc = false,
-    closeOnSelect = true,
-  }) => {
-    const [value, setValue] = useState(defaultValue);
-    const [selectedSegment, setSelectedSegment] = useState(null);
-    const [isOpen, setIsOpen] = useState(false);
-
-    // Check if format is date only and does not include time
-    const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
-
-    const mainRef = useRef(null);
-
-    const typedKeys = useRef("");
-
-    const { refs, floatingStyles } = useFloating({
-      open: isOpen,
-      onOpenChange: setIsOpen,
-      placement: "bottom-start",
-      strategy: "absolute",
-      // Handle collisions with the viewport
-      middleware: [flip(), offset(5)],
-    });
-
-    const segments = useMemo(
-      () =>
-        parseTimestamp(value ? moment(value).toISOString() : null, format, utc),
-      [value, format]
-    );
-
-    const checkValidRange = (value) => {
-      if (min && moment(value).isBefore(min)) return false;
-      if (max && moment(value).isAfter(max)) return false;
-      return true;
-    };
-
-    const toggleOpen = () => {
-      setIsOpen((prev) => {
-        return !prev;
-      });
-    };
-
-    const handleClear = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      setValue(null);
-      onChange?.(null);
-      setIsOpen(false);
-    };
-
-    const handleSegmentClick = (e, segment) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (segment.type === "separator") return;
-      mainRef.current.querySelector("div[data-type='input']").focus();
-      setSelectedSegment(segment);
-    };
-
-    const handleContainerClick = (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      mainRef.current.querySelector("div[data-type='input']").focus();
-      toggleOpen();
-      setIsOpen(true);
-      setSelectedSegment(segments[0]);
-    };
-
-    const nextSegment = () => {
-      setSelectedSegment((prev) => {
-        const next = segments[prev.index + 2];
-        return next || prev;
-      });
-    };
-
-    const prevSegment = () => {
-      setSelectedSegment((prev) => {
-        const next = segments[prev.index - 2];
-        return next || prev;
-      });
-    };
-
-    // prevent click and drag selection
-    const handleMouseDown = (e) => {
-      e.preventDefault();
-    };
-
-    const handleKeyDown = (e) => {
-      if (!selectedSegment) return;
-      // tab
-      if (e.key === "Tab") {
-        setSelectedSegment(null);
-        setIsOpen(false);
-        return;
-      }
-      // Right Arrow
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-
-        setSelectedSegment((prev) => {
-          const next = segments[prev.index + 2];
-          return next || prev;
-        });
-      }
-      // Left Arrow
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        setSelectedSegment((prev) => {
-          const next = segments[prev.index - 2];
-          return next || prev;
-        });
-      }
-
-      // Up Arrow
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-
-        setValue((prev) => {
-          let newValue = prev
-            ? moment(prev).add(1, selectedSegment.type).toISOString()
-            : moment().toISOString();
-          if (!checkValidRange(newValue)) return prev;
-          if (isDateOnly) {
-            newValue = moment(newValue).format("YYYY-MM-DD");
-          }
-          onChange?.(newValue);
-          return newValue;
-        });
-      }
-
-      // Down Arrow
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-
-        setValue((prev) => {
-          let newValue = prev
-            ? moment(prev).subtract(1, selectedSegment.type).toISOString()
-            : moment().toISOString();
-          if (!checkValidRange(newValue)) return prev;
-
-          if (isDateOnly) {
-            newValue = moment(newValue).format("YYYY-MM-DD");
-          }
-
-          onChange?.(newValue);
-          return newValue;
-        });
-      }
-
-      // only allow numbers
-      if (e.key.match(/[0-9]/)) {
-        e.preventDefault();
-        const segmentLength = selectedSegment.text.length;
-
-        typedKeys.current += e.key;
-        let tempValue = typedKeys.current;
-
-        if (
-          ["month", "day"].includes(selectedSegment.type) &&
-          Array.from(tempValue).every((c) => c === "0")
-        ) {
-          tempValue = "01";
-        }
-
-        setValue((prev) => {
-          const newValue = moment(prev)
-            .set(
-              selectedSegment.momentType,
-              parseInt(tempValue, 10) -
-                (selectedSegment.type === "month" ? 1 : 0)
-            )
-            .toISOString();
-          if (!checkValidRange(newValue)) return prev;
-          onChange?.(newValue);
-          return newValue;
-        });
-
-        if (typedKeys.current.length === segmentLength) {
-          nextSegment();
-          typedKeys.current = "";
-        }
-      }
-
-      e.preventDefault();
-    };
-
-    // Close on outside click
-    useEffect(() => {
-      const close = (e) => {
-        if (
-          refs.floating.current && // Check if the floating element exists
-          e.target !== refs.reference.current && // Check if the target is not the reference (input)
-          !refs.reference.current.contains(e.target) && // Check if the target is not inside the reference (input)
-          !refs.floating.current.contains(e.target) // Check if the target is not inside the floating element (content)
-        ) {
-          setIsOpen(false);
-        }
-        setSelectedSegment(null); // clear selected segment when clicked outside component
-      };
-      document.addEventListener("click", close);
-      return () => document.removeEventListener("click", close);
-    }, [refs.floating]);
-
-    // const contentWidth =
-    //   refs?.reference?.current?.getClientRects?.()?.[0]?.width || "100%";
-
-    return (
-      <div>
-        {label && (
-          <FieldLabel
-            error={error}
-            asterisk={required}
-            size={size}
-            description={description}
-          >
-            {label}
-          </FieldLabel>
-        )}
-        <StyledInputContainer
-          ref={(ref) => {
-            mainRef.current = ref;
-            refs.setReference(ref);
-          }}
-          onClick={handleContainerClick}
-          onMouseDown={handleMouseDown}
-          onKeyDown={handleKeyDown}
-          onFocus={(e) => {
-            e.preventDefault();
-            setSelectedSegment(segments[0]);
-          }}
-          data-empty={!value}
-          role="textbox"
-          size={size}
-          variant={variant}
-          width={width}
-          data-button-right={arrow || clearable}
-        >
-          {segments.map((segment, i) => {
-            if (segment.type === "separator") {
-              return (
-                <div
-                  className="separator"
-                  key={i}
-                  tabIndex={-1}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                  onFocus={(e) => e.preventDefault()}
-                  onPointerDown={(e) => e.preventDefault()}
-                  data-type="separator"
-                  data-identifier={segment.type}
-                  data-has-space={segment.text.includes(" ")}
-                  data-placeholder={segment.placeholder}
-                  data-value={segment.value}
-                >
-                  {segment.text}
-                </div>
-              );
-            }
-            return (
-              <InputSegment
-                className={"input"}
-                contentEditable
-                suppressContentEditableWarning
-                key={i}
-                tabIndex={i === 0 ? 0 : -1}
-                onClick={(e) => handleSegmentClick(e, segment)}
-                data-type="input"
-                size={size}
-                data-identifier={segment.type}
-                data-has-space={segment.text.includes(" ")}
-                data-placeholder={segment.placeholder}
-                data-value={segment.value}
-                data-selected={selectedSegment?.index === segment.index}
-              >
-                {value ? segment.text : segment.placeholder}
-              </InputSegment>
-            );
-          })}
-          {utc && <div style={{ marginLeft: 5 }}>UTC</div>}
-          {clearable && value ? (
-            <ClearButton onClick={handleClear} />
-          ) : arrow ? (
-            <ArrowButton />
-          ) : null}
-        </StyledInputContainer>
-        {enableCalendar && isOpen && (
-          <StyledFloatContainer ref={refs.setFloating} style={floatingStyles}>
-            <StyledContent maxDropdownHeight="fit-content">
-              <div>
-                <Calendar
-                  key={1}
-                  date={moment(value).toDate()}
-                  clearable={false}
-                  min={min}
-                  max={max}
-                  // hourFormat={hourFormat}
-                  onDateChanged={(date) => {
-                    setValue((prev) => {
-                      // make copy of prev variable
-                      const oldValue = moment(prev).toISOString();
-
-                      const result = `${moment(date).format(
-                        "YYYY-MM-DD"
-                      )}T${moment(prev || undefined).format("HH:mm:ss")}`;
-
-                      let isoResult = moment(result).toISOString();
-
-                      if (!checkValidRange(result)) return oldValue;
-
-                      if (isDateOnly) {
-                        isoResult = moment(result).format("YYYY-MM-DD");
-                      }
-                      onChange?.(isoResult);
-                      setIsOpen(closeOnSelect ? false : true);
-                      return isoResult;
-                    });
-                  }}
-                  includeTime={false}
-                />
-              </div>
-            </StyledContent>
-          </StyledFloatContainer>
-        )}
-      </div>
-    );
-  }
-)``;
-
-export default DateInput;