@licklist/design 0.58.6-dev.8 → 0.58.6

package/src/recurring-date-picker-input/DatePickerInput.tsx

@@ -1,93 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Frequency } from "rrule";
-import { useTranslation } from "react-i18next";
-import Button from "react-bootstrap/Button";
-import { DateTime } from "luxon";
-import { TIME_FULL_FORMAT } from "@licklist/core/dist/Config/Date";
-import { FormProvider, useForm } from "react-hook-form";
-import { Form } from "react-bootstrap";
-import { ConfirmModal } from "../modals";
-import { DeleteFieldButton } from "../product-set/elements";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
-import RecurrenceAndFrequencyInput from "./RecurrenceAndFrequencyInput";
-
-export interface RecurringDatePickerInputProps {
-  disabled?: boolean;
-  defaultValues?: Partial<RecurringDatePickerInputValues>;
-  onChange: (state: RecurringDatePickerInputValues) => void;
-  onDelete: () => void;
-  initialFrequency?: Frequency;
-  setInitialStartDateAfterSelect?: boolean;
-  minDate?: string;
-}
-
-export interface DatePickerInputValues {
-  startDate: string;
-  startTime: string;
-  endTime: string;
-}
-
-export function DatePickerInput({
-  disabled = false,
-  onChange,
-  onDelete,
-  defaultValues,
-  children,
-  minDate,
-}: PropsWithChildren<RecurringDatePickerInputProps>) {
-  const { t } = useTranslation(["Design"]);
-
-  const form = useForm<DatePickerInputValues>({
-    defaultValues: {
-      startDate: defaultValues?.startDate ?? "",
-      startTime: defaultValues?.startTime ?? "",
-      endTime: defaultValues?.endTime ?? "",
-    },
-    mode: "onChange",
-  });
-
-  const { handleSubmit } = form;
-
-  const onSubmit = (nextState: RecurringDatePickerInputValues) => {
-    const endTimeNextState = nextState?.endTime
-      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
-      : "";
-
-    onChange({
-      ...nextState,
-      endTime: endTimeNextState,
-    });
-  };
-
-  return (
-    <FormProvider {...form}>
-      <Form
-        noValidate
-        onSubmit={(event) => {
-          // prevents parent form submitting
-          event.preventDefault();
-          event.stopPropagation();
-          return handleSubmit(onSubmit)(event);
-        }}
-      >
-        <RecurrenceAndFrequencyInput disabled={disabled} minDate={minDate} />
-
-        {children}
-
-        <div className="d-inline-flex align-items-center w-100">
-          <Button type="submit">{t("Design:apply")}</Button>
-
-          {defaultValues && (
-            <div className="d-flex justify-content-end delete-btn">
-              <ConfirmModal>
-                {(confirm) => (
-                  <DeleteFieldButton onDelete={() => confirm(onDelete)} />
-                )}
-              </ConfirmModal>
-            </div>
-          )}
-        </div>
-      </Form>
-    </FormProvider>
-  );
-}

package/src/recurring-date-picker-input/RecurrenceAndFrequencyInput.tsx

@@ -1,136 +0,0 @@
-import React, { useEffect } from "react";
-import { DateTime } from "luxon";
-import { Col, Form, Row } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { RegisterOptions, useFormContext } from "react-hook-form";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
-
-interface RecurrenceIntervalAndFrequencyInputProps {
-  disabled?: boolean;
-  minDate?: string;
-  startDateLabel?: string;
-  startTimeLabel?: string;
-  endDateLabel?: string;
-  endTimeLabel?: string;
-  startTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-  endTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-}
-
-function RecurrenceAndFrequencyInput({
-  disabled = false,
-  minDate,
-  startDateLabel,
-  startTimeLabel,
-  endTimeLabel,
-  startTimeRules,
-  endTimeRules,
-}: RecurrenceIntervalAndFrequencyInputProps) {
-  const { t } = useTranslation(["Design", "Notification", "App"]);
-
-  const {
-    getValues,
-    formState: { errors },
-    register,
-    trigger,
-  } = useFormContext<RecurringDatePickerInputValues>();
-
-  const startDate = getValues("startDate");
-  const startTime = getValues("startTime");
-  const endTime = getValues("endTime");
-
-  useEffect(() => {
-    if (!startTime || !endTime) {
-      return;
-    }
-    trigger("endTime");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTime]);
-
-  return (
-    <>
-      <Row>
-        <Col xs={12} sm={6}>
-          <Form.Group>
-            <Form.Label>{startDateLabel ?? t("Design:date")}</Form.Label>
-            <Form.Control
-              type="date"
-              {...register("startDate", { required: true })}
-              defaultValue={startDate}
-              className={startDate && "date-input-with-value"}
-              disabled={disabled}
-              min={minDate}
-              isInvalid={Boolean(errors.startDate)}
-            />
-            <Form.Control.Feedback type="invalid">
-              {errors.startDate?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-      </Row>
-
-      <Row>
-        <Col xs={12} sm={6}>
-          <Form.Group>
-            <Form.Label>
-              {startTimeLabel ?? t("Design:availableFrom")}
-            </Form.Label>
-            <Form.Control
-              type="time"
-              {...register("startTime", { required: false, ...startTimeRules })}
-              placeholder="hh:mm"
-              defaultValue={startTime}
-              disabled={disabled}
-              isInvalid={Boolean(errors.startTime)}
-            />
-            <Form.Control.Feedback type="invalid">
-              {errors.startTime?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-
-        <Col xs={12} sm={6}>
-          <Form.Group>
-            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
-            <Form.Control
-              type="time"
-              {...register("endTime", {
-                required: false,
-                validate: (time) => {
-                  if (!startTime || !time) {
-                    return true;
-                  }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
-
-                  return currentEndTime?.diff(currentStartTime, ["minutes"])
-                    ?.minutes >= 0
-                    ? true
-                    : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endTimeSmall"),
-                        min: t("Design:startTimeSmall"),
-                      })}`;
-                },
-                ...endTimeRules,
-              })}
-              placeholder="hh:mm"
-              defaultValue={endTime}
-              disabled={disabled}
-              isInvalid={Boolean(errors.endTime)}
-            />
-            <Form.Control.Feedback type="invalid">
-              {errors.endTime?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-      </Row>
-    </>
-  );
-}
-
-export default RecurrenceAndFrequencyInput;