Комментарии пользователя San Manjiro

Как предотвратить работу onBlur?

San Manjiro @sanManjiro Автор вопроса

inputElement.removeEventListener("keydown", ...);
inputElement.removeEventListener("blur", ...);

похоже и правда в нем, я сразу внимания не обратил, но если с помощью клавиатуры повыбирать значение, а потом убрать курсор, то можно увидеть как за один раз сработал onBlue раз 10

Написано 20 нояб.

Как предотвратить работу onBlur?

San Manjiro @sanManjiro Автор вопроса

San Manjiro, я заметил что при повторном вызове функции он начинает все больше раз вызывать getAddress:

Написано 20 нояб.

Как предотвратить работу onBlur?

San Manjiro @sanManjiro Автор вопроса

Функция вызывается в 2-х местах:

<div className={`${style["pass-details__form-address"]}`}>
        <FormInputText<IDataFormPassport>
          controller={{
            control: control,
            name: "legalAddress",
          }}
          customClassName="pass-details__form-address-input"
          value={dataFormPassport.legalAddress}
          inputId="legalAddress"
          placeholder=" Адрес регистрации (Область / Город/ Улица / Дом)"
          minLength={2}
          maxLength={100}
          pattern={/^[^A-Za-z]+$/gi}
          patternValid={/^[^A-Za-z]+$/gi}
          error={errors}
          onChange={(val) => handleLegalAddressChange(val)}
          onClick={() =>
            getAddress(
              dataFormPassport.legalAddress,
              (address) => updateDataForm({ legalAddress: address }),
              { slice: 10 },
              {
                idInput: "legalAddress",
                idUlList: "legalAddressList",
                classUl: style["pass-details__form-address-list"],
                classLi: style["pass-details__form-address-item"],
              }
            )
          }
        />
      </div>

,

const handleLegalAddressChange = (value: string) => {
    updateDataForm({ legalAddress: value });
    getAddress(
      value,
      (address) => updateDataForm({ legalAddress: address }),
      { slice: 10 },
      {
        idInput: "legalAddress",
        idUlList: "legalAddressList",
        classUl: style["pass-details__form-address-list"],
        classLi: style["pass-details__form-address-item"],
      }
    );
  };

Написано 20 нояб.

Почему данные не подгружаются в форму?

San Manjiro @sanManjiro Автор вопроса

Сергей Сунцев, если интересно, то у меня на сайте есть форма и каждое после это отдельное компонент с контроллером, куда я передаю параметры, позже скину код как использую его.

Написано 19 нояб.

React-hook-form как передать name в компонет?

San Manjiro @sanManjiro Автор вопроса

я нашел решение и твой прошлый ответ помог, в компоненте InputText, где я объявлял интерфейс, за место name: string, я передал name: keyof IDateForm и все заработало, завтра я это обкачу и если будет работать хорошо выложу ответ, но я до сих пор не уверен что это правильное решение .

Написано 19 нояб.

React-hook-form как передать name в компонет?

San Manjiro @sanManjiro Автор вопроса

historydev, поля в пропсах я пробовал передать на прямую, т.е. в компоненте, где у меня name: string, я на прямую писал "lastName" и все работало отлично, а вот если тот же текст передавать и использовать, то возникает ошибка. По поводу документации, туда в name просто передает строка, так обязывается контроллер, который будет с текущим ярлыком мониторить состояние твоего контроллера.

Написано 19 нояб.

React-hook-form как передать name в компонет?

San Manjiro @sanManjiro Автор вопроса

historydev, export interface IDataForm {
firstName: string;
lastName: string;
middleName: string;
dateOfBirth: string;
phoneNumber: number | null;
email: string;
amount: number | null;
term: number | null;
checkbox: boolean;
}

Написано 19 нояб.

Почему данные не подгружаются в форму?

San Manjiro @sanManjiro Автор вопроса

Сергей Сунцев, я нашел способ лучше, в useForm есть функция reset, я просто передаю в неё данные из localStorage и он сетит все в поля.

if (storedData) {
    setDataForm(storedData);
    reset(storageData)
  }

, этот вариант меня устраивает и ошибок нет и форма работает идеально, и useEffect всего один.

Написано 19 нояб.

Почему данные не подгружаются в форму?

San Manjiro @sanManjiro Автор вопроса

сократил useEffect:

useEffect(() => {
    if (dataForm) {
      Object.entries(dataForm).forEach(([key, value]) => {
        setValue(key, value);
        console.log(key, value);
      });
    }
    
  }, [dataForm, setValue]);

, главное чтобы поля контроллера совпадали с полями IDataForm

Написано 18 нояб.

Почему данные не подгружаются в форму?

San Manjiro @sanManjiro Автор вопроса

это безусловно работает, но если вызвать в последнем useEffect console.log(dataForm), то можно увидишь, что данные в dataForm не передались, также когда страница загружается он подставляет все мои данные из localstorage в поля, визуально они на странице есть, то браузер идексирует их как пустые

Написано 18 нояб.

Как сделать динамический отступ в margin через "clamp"?

San Manjiro @sanManjiro Автор вопроса

самая первая форму почти правильная, чтобы отстпу успел уменьшится до 700px приглось умножить на -0,2, как я понял поиграв этим значение можно добится нужного результата.

margin-top: clamp(30px, calc(9vw + (1000px - 100vw) * -0.2), 90px);

Написано 23 июл.

Как найти нужное значение в gap?

San Manjiro @sanManjiro Автор вопроса

да, это то объяснение, которое мне было нужно, спасибо )

Написано 23 июл.

Как найти нужное значение в gap?

San Manjiro @sanManjiro Автор вопроса

Антон Антон, не работает, второй столбец просто не уменьшается, я вопрос задаю в общем, потому что если брать уже не гриды, а допустим with, то там уже нет minmax(), там только clamp и вот как описаную мною ситуация разрулить в with? Раньше делал все через @media, но недавно наткнулся на такие функции как clamp(), min(), max(), в голове просто не укладывается как это работает и все, не воспринимается. Все понимаю, а этого элементарного понять не могу...

Написано 23 июл.

Как задать размер gap с помощью calc(), чтобы он увеличивался вместе с размером экрана?

San Manjiro @sanManjiro

а если значение граничащее возле max? из примера выше понятно что есть минимальное и максимальное, ap: clamp(10px, 5vw, 50px);, но как сделать так, чтобы блок изначально имел значение приближенное к 50px, а дальше просто уменьшался. У меня есть код

grid-template-columns: 355px clamp(290px, 22vw, 435px);

и нужно чтобы по дефолту размер второго столбца был 435px, а дальше только уменьнался до 290px, как подобрать середину?

Написано 23 июл.

Как сделать динамический текст над слайдером?

San Manjiro @sanManjiro Автор вопроса

И правда, в документации есть упоминание об этом с примерами, мне понадобилось для этого создать отдельный компонент TooltipSlider.tsx, немного его отредактировать и изменить немного вид отображения. Теперь мой код выглядит так:
TooltipSlider.tsx

import type { SliderProps } from "rc-slider";
import Slider from "rc-slider";
import type { TooltipRef } from "rc-tooltip";
import Tooltip from "rc-tooltip";
import "rc-tooltip/assets/bootstrap.css";
import raf from "rc-util/lib/raf";
import * as React from "react";

interface HandleTooltipProps {
  value: number;
  children: React.ReactElement;
  visible?: boolean;
  tipFormatter?: (value: number) => React.ReactNode;
}

const HandleTooltip: React.FC<HandleTooltipProps> = (props) => {
  const {
    value,
    children,
    visible = true,
    tipFormatter = (val) => `${val}`,
    ...restProps
  } = props;

  const tooltipRef = React.useRef<TooltipRef | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const [isClient, setIsClient] = React.useState(false);

  React.useEffect(() => {
    setIsClient(true);
  }, []);

  function cancelKeepAlign() {
    if (rafRef.current !== null) {
      raf.cancel(rafRef.current);
    }
  }

  function keepAlign() {
    rafRef.current = raf(() => {
      if (tooltipRef.current) {
        tooltipRef.current.forceAlign();
      }
    });
  }

  React.useEffect(() => {
    if (visible) {
      keepAlign();
    } else {
      cancelKeepAlign();
    }

    return cancelKeepAlign;
  }, [value, visible]);

  if (!isClient) {
    return children;
  }

  return (
    <Tooltip
      placement="top"
      overlay={tipFormatter(value)}
      overlayInnerStyle={{ minHeight: "auto" }}
      ref={tooltipRef}
      visible={visible}
      {...restProps}
    >
      {children}
    </Tooltip>
  );
};

export const handleRender: SliderProps["handleRender"] = (node, props) => (
  <HandleTooltip value={props.value}>{node}</HandleTooltip>
);

interface TooltipSliderProps extends SliderProps {
  tipFormatter?: (value: number) => React.ReactNode;
  tipProps?: any;
}

const TooltipSlider: React.FC<TooltipSliderProps> = ({
  tipFormatter,
  tipProps,
  ...props
}) => {
  const tipHandleRender: SliderProps["handleRender"] = (node, handleProps) => (
    <HandleTooltip
      value={handleProps.value}
      tipFormatter={tipFormatter}
      {...tipProps}
    >
      {node}
    </HandleTooltip>
  );

  return <Slider {...props} handleRender={tipHandleRender} />;
};

export default TooltipSlider;

Slider.tsx

// # CLIENT COMPONENT
"use client";

// # REACT
import React, { useState } from "react";

// # LIBRARY
import TooltipSlider, { handleRender } from "./TooltipSlider";

// # STYLE
import "rc-slider/assets/index.css";
import "rc-tooltip/assets/bootstrap.css";

// ^ COMPONENT VISION SLIDER
const CSlider: React.FC = () => {
  const [value, setValue] = useState<number | number[]>();

  return (
    <div style={{ width: 400, margin: 50 }}>
      <TooltipSlider
        min={1000}
        max={100000}
        step={1000}
        onChange={(e) => {
          setValue(e);
        }}
      />
    </div>
  );
};

export default CSlider;

Спасибо вам за вашу внимательность )

Написано 14 июл.