@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.7

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable max-lines, max-lines-per-function */
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
 import type {
   CreditCalculatorParamsViewSettings,
@@ -22,72 +22,58 @@ export interface CreditCalculatorProp extends CreditCalculatorProps {
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-    const [isAnnuity, toggleIsAnnuity] = useState(false);
-    const [isSalaryClient, toggleIsSalaryClient] = useState(false);
-    const handleIsSalaryClient = useCallback((_: boolean) => toggleIsSalaryClient(_), []);
-    const [isStateEmployee, toggleIsStateEmployee] = useState(false);
-    const handleIsStateEmployee = useCallback((_: boolean) => toggleIsStateEmployee(_), []);
-    const [isPensionClient, toggleIsPensionClient] = useState(false);
-    const handleIsPensionClient = useCallback((_: boolean) => toggleIsPensionClient(_), []);
-    const [isInsurance, toggleIsInsurance] = useState(true);
-    const handleIsInsurance = useCallback((_: boolean) => toggleIsInsurance(_), []);
-    const [moneyValue, setMoneyValue] = useState(CREDIT_DEFAULT_SUM);
-    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
-    const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
-    const userInputParams = {
-      isAnnuity,
-      isInsurance,
-      isSalaryClient,
-      isPensionClient,
-      isStateEmployee,
-      moneyValue,
-      monthsValue,
-    };
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const [userInputParams, { field }] = useForm({
+      isAnnuity: false,
+      isInsurance: true,
+      isSalaryClient: false,
+      isPensionClient: false,
+      isStateEmployee: false,
+      moneyValue: CREDIT_DEFAULT_SUM,
+      monthsValue: DEFAULT_MONTHS,
+    });
+
     const calculatorParams = useCreditCalculatorParams(
       userInputParams,
       sourceBookDir,
       paramsViewSettings,
     );
 
-    useEffect(() => {
-      setMoneyValue(clamp(moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
-      setMonthsValue(clamp(monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
-    }, [calculatorParams]);
-
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
-          {renderWantedSumInput(
-            'Сумма кредита, ₽',
-            { ...calculatorParams, step: 500 },
-            handleMoneyValue,
-          )}
-          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue)}
+          {renderWantedSumInput({
+            title: 'Сумма кредита, ₽',
+            step: 500,
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок кредита, месяцев',
+            min: calculatorParams.minMonths,
+            max: calculatorParams.maxMonths,
+            ...field('monthsValue'),
+            value: calculatorParams.monthsValue,
+          })}
           <div className="mt-7">
-            {renderCreditParamsForm({
-              ...calculatorParams,
-              ...paramsViewSettings,
-              handleIsSalaryClient,
-              handleIsStateEmployee,
-              handleIsPensionClient,
-              handleIsInsurance,
-            })}
+            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
-        {renderRate(calculatorParams.rate)}
+        <Rate
+          title="Ставка"
+          rate={calculatorParams.rate}
+          rateBlockClassName="tracking-[-25px]"
+          unit="%"
+        />
         <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentType({
-            isAnnuity,
-            orientation: 'vertical',
-            callback: toggleIsAnnuity,
-          })}
+          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
@@ -96,61 +82,40 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
   },
 );
 
-const renderRate = (rate: number) => (
-  <Rate title="Ставка" rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-);
-
-interface CreditParamsFormProps extends CreditCalculatorParams, CreditCalculatorParamsViewSettings {
-  handleIsSalaryClient?: (value: boolean) => void;
-  handleIsStateEmployee?: (value: boolean) => void;
-  handleIsPensionClient?: (value: boolean) => void;
-  handleIsInsurance?: (value: boolean) => void;
-}
-
-const renderCreditParamsForm = ({
-  isSalaryClient,
-  isStateEmployee,
-  isPensionClient,
-  isInsurance,
-  isShowSalaryClient,
-  isShowStateEmployee,
-  isShowPensionClient,
-  isShowInsurance,
-  handleIsSalaryClient,
-  handleIsStateEmployee,
-  handleIsPensionClient,
-  handleIsInsurance,
-}: CreditParamsFormProps) => (
+const renderCreditParamsForm = (
+  params: CreditCalculatorParams & CreditCalculatorParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
   <div>
-    {isShowSalaryClient ? (
+    {params.isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"
-        value={isSalaryClient}
-        onChange={handleIsSalaryClient}
+        {...field('isSalaryClient')}
+        value={params.isSalaryClient}
       />
     ) : null}
-    {isShowStateEmployee ? (
+    {params.isShowStateEmployee ? (
       <Checkbox
         className="mt-3"
         text="Работаю в бюджетной организации"
-        value={isStateEmployee}
-        onChange={handleIsStateEmployee}
+        {...field('isStateEmployee')}
+        value={params.isStateEmployee}
       />
     ) : null}
-    {isShowPensionClient ? (
+    {params.isShowPensionClient ? (
       <Checkbox
         className="mt-3"
         text="Получаю пенсию на карту Россельхозбанка"
-        value={isPensionClient}
-        onChange={handleIsPensionClient}
+        {...field('isPensionClient')}
+        value={params.isPensionClient}
       />
     ) : null}
-    {isShowInsurance ? (
+    {params.isShowInsurance ? (
       <Checkbox
         className="mt-3"
         text="Комплексная страховая защита"
-        value={isInsurance}
-        onChange={handleIsInsurance}
+        {...field('isInsurance')}
+        value={params.isInsurance}
       />
     ) : null}
   </div>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,7 +1,6 @@
-// TEMP
-
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
 import { DepositCalculatorParamsViewSettings, DepositCalculatorProps } from './CalculatorContent';
@@ -20,27 +19,13 @@ export interface DepositCalculatorProp extends DepositCalculatorProps {
 }
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-    const [moneyValue, setMoneyValue] = useState(DEPOSIT_DEFAULT_SUM);
-    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
-    const [monthsValue, setMonthsValue] = useState(0);
-    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-    const handleIsMonthlyInterestPayment = useCallback(
-      (_: boolean) => toggleIsMonthlyInterestPayment(_),
-      [],
-    );
-    const [isRemoteRegistration, toggleIsRemoteRegistration] = useState(false);
-    const handleIsRemoteRegistration = useCallback(
-      (_: boolean) => toggleIsRemoteRegistration(_),
-      [],
-    );
-    const userInputParams = {
-      moneyValue,
-      monthsValue,
-      isMonthlyInterestPayment,
-      isRemoteRegistration,
-    };
-    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const [userInputParams, { field }] = useForm({
+      moneyValue: DEPOSIT_DEFAULT_SUM,
+      monthsValue: 0,
+      isMonthlyInterestPayment: false,
+      isRemoteRegistration: false,
+    });
 
     const calculatorParams = useDepositCalculatorParams(
       userInputParams,
@@ -48,34 +33,32 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       paramsViewSettings,
     );
     const { defaultMonth, income, finalSum, rate } = calculatorParams;
+
+    const { onChange: setMonthsValue } = field('monthsValue');
     useEffect(() => {
-      setMonthsValue(defaultMonth);
+      setMonthsValue && setMonthsValue(defaultMonth);
     }, [defaultMonth]);
 
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
-          {renderWantedSumInput(
-            'Сумма вклада, ₽',
-            {
-              ...calculatorParams,
-            },
-            handleMoneyValue,
-          )}
-          {renderMonthsInput(
-            'Срок вклада, месяцев',
-            {
-              ...calculatorParams,
-            },
-            handleMonthsValue,
-          )}
+          {renderWantedSumInput({
+            title: 'Сумма вклада, ₽',
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок вклада, месяцев',
+            min: calculatorParams.minMonths,
+            max: calculatorParams.maxMonths,
+            availableMonths: calculatorParams.availableMonths,
+            ...field('monthsValue'),
+            value: calculatorParams.monthsValue,
+          })}
           <div className="mt-7">
-            {renderDepositParamsForm({
-              ...calculatorParams,
-              ...paramsViewSettings,
-              handleIsMonthlyInterestPayment,
-              handleIsRemoteRegistration,
-            })}
+            {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
         <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
@@ -90,34 +73,23 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   },
 );
 
-interface DepositParamsFormProps
-  extends DepositCalculatorParams,
-    DepositCalculatorParamsViewSettings {
-  handleIsMonthlyInterestPayment?: (value: boolean) => void;
-  handleIsRemoteRegistration?: (value: boolean) => void;
-}
-
-const renderDepositParamsForm = ({
-  isMonthlyInterestPayment,
-  isRemoteRegistration,
-  isShowMonthlyInterestPayment,
-  isShowRemoteRegistration,
-  handleIsMonthlyInterestPayment,
-  handleIsRemoteRegistration,
-}: DepositParamsFormProps) => (
+const renderDepositParamsForm = (
+  params: DepositCalculatorParams & DepositCalculatorParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
   <div className="flex flex-col gap-y-7">
-    {isShowMonthlyInterestPayment
+    {params.isShowMonthlyInterestPayment
       ? renderInterestPayment({
-          isMonthlyInterestPayment,
-          callback: handleIsMonthlyInterestPayment,
           title: 'Выплата процентов',
+          ...field('isMonthlyInterestPayment'),
+          value: params.isMonthlyInterestPayment,
         })
       : null}
-    {isShowRemoteRegistration
+    {params.isShowRemoteRegistration
       ? renderRegistrationType({
-          isRemoteRegistration,
-          callback: handleIsRemoteRegistration,
           title: 'Оформление',
+          ...field('isRemoteRegistration'),
+          value: params.isRemoteRegistration,
         })
       : null}
   </div>

package/src/components/Calculator/Rate.tsx

@@ -9,29 +9,29 @@ export interface RateProps {
   depositeName?: string;
   isShowDepositeName?: boolean;
   rateBlockClassName?: string;
+  fractionDigits?: number;
 }
 
 export const Rate = JSX<RateProps>(
-  ({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (
+  ({
+    rate,
+    title = 'Ставка',
+    unit,
+    depositeName,
+    isShowDepositeName,
+    rateBlockClassName,
+    fractionDigits = 2,
+  }) => (
     <div>
       <Text size="text-l-light" color="text-secondary-text">
         {title}
       </Text>
       <div className="relative">
-        <div className="flex justify-start">
-          <span
-            className={style(
-              'block gradient-color-text font-mohave text-title-huge pr-6 -mt-4',
-              rateBlockClassName,
-            )}
-          >
-            {String(rate.toFixed(2)).replace('.', ',')}
+        <div className="flex justify-start gradient-color-text">
+          <span className={style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName)}>
+            {String(rate.toFixed(fractionDigits)).replace('.', ',')}
           </span>
-          {unit ? (
-            <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span>
-          ) : (
-            ''
-          )}
+          {unit ? <span className="text-7xl">{unit}</span> : null}
         </div>
         {depositeName && isShowDepositeName ? (
           <div className="absolute bottom-7 w-full text-center whitespace-nowrap">

package/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -0,0 +1,35 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup, RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface BinaryRadioButtonGroupProps {
+  items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
+  title?: string;
+  orientation?: ListOrientation;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+}
+
+export const renderBinaryRadioButtonGroup = ({
+  items,
+  title,
+  orientation = 'horizontal',
+  value,
+  onChange,
+}: BinaryRadioButtonGroupProps) => (
+  <div>
+    {title ? (
+      <div className="mb-3">
+        <Text color="text-secondary-text" font="font-light">
+          {title}
+        </Text>
+      </div>
+    ) : null}
+    <RadioButtonGroup
+      orientation={orientation}
+      items={items}
+      checkedItem={items[value ? 0 : 1].id}
+      onChange={(_) => onChange && onChange(_ === items[0].id)}
+    />
+  </div>
+);

package/src/components/Calculator/renderDaysInput.tsx

@@ -1,36 +1,15 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { clamp } from '../../utils/clamp';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 
 const STEP_DAYS = 1;
 
-interface RenderDaysInputParams {
-  minDays: number;
-  maxDays: number;
-  daysValue: number;
-}
+export const renderDaysInput = (props: InputRangeProps) => (
+  <InputRange
+    className="mt-7"
+    items={[`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`]}
+    step={STEP_DAYS}
+    {...props}
+  />
+);
 
-export function renderDaysInput(
-  title: string,
-  params: RenderDaysInputParams,
-  callback?: (value: number) => void,
-) {
-  const { minDays, maxDays, daysValue } = params;
-  const daysText = (days: number) => {
-    const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
-
-    return `${days} ${text}`;
-  };
-
-  return (
-    <InputRange
-      className="mt-7"
-      title={title}
-      items={[`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`]}
-      min={minDays}
-      max={maxDays}
-      step={STEP_DAYS}
-      value={clamp(daysValue, minDays, maxDays)}
-      onChange={callback}
-    />
-  );
-}
+const daysText = (days: number) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;

package/src/components/Calculator/renderInterestPayment.tsx

@@ -1,52 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const EVERY_MONTH = 'everyMonth';
-const AT_END_TERM = 'atEndTerm';
-
-const depositTypeItems = [
-  {
-    id: EVERY_MONTH,
-    text: 'Ежемесячно',
-  },
-  {
-    id: AT_END_TERM,
-    text: 'В конце срока',
-  },
-];
-
-interface InterestPaymentProps {
-  isMonthlyInterestPayment: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderInterestPayment({
-  isMonthlyInterestPayment,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: InterestPaymentProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={depositTypeItems}
-          checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
-          onChange={(text: string) => callback && callback(text === EVERY_MONTH)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderInterestPayment = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'everyMonth', text: 'Ежемесячно' },
+      { id: 'atEndTerm', text: 'В конце срока' },
+    ],
+  });

package/src/components/Calculator/renderMonthsInput.tsx

@@ -1,47 +1,25 @@
-import { InputListRange } from '../../ui-kit/InputListRange/InputListRange';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { clamp } from '../../utils/clamp';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 
 const STEP_MONTHS = 1;
 
-interface RenderMonthsInputParams {
-  minMonths: number;
-  maxMonths: number;
-  monthsValue: number;
+interface MonthsInputParams extends InputRangeProps {
   availableMonths?: Array<number>;
 }
 
-export function renderMonthsInput(
-  title: string,
-  params: RenderMonthsInputParams,
-  callback?: (value: number) => void,
-) {
-  const { minMonths, maxMonths, monthsValue, availableMonths } = params;
-  const monthText = (month: number) => {
-    const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+export const renderMonthsInput = ({
+  min = 0,
+  max = 0,
+  availableMonths,
+  ...rest
+}: MonthsInputParams) => (
+  <InputRange
+    className="mt-7"
+    items={[`От ${monthText(min)}`, `До ${monthText(max)}`]}
+    step={STEP_MONTHS}
+    {...(availableMonths?.length ? { list: availableMonths } : { min, max })}
+    {...rest}
+  />
+);
 
-    return `${month} ${text}`;
-  };
-
-  return availableMonths?.length ? (
-    <InputListRange
-      className="mt-7"
-      title={title}
-      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
-      list={availableMonths}
-      value={clamp(monthsValue, minMonths, maxMonths)}
-      onChange={callback}
-    />
-  ) : (
-    <InputRange
-      className="mt-7"
-      title={title}
-      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
-      min={minMonths}
-      max={maxMonths}
-      step={STEP_MONTHS}
-      value={clamp(monthsValue, minMonths, maxMonths)}
-      onChange={callback}
-    />
-  );
-}
+const monthText = (month: number) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;

package/src/components/Calculator/renderPaymentType.tsx

@@ -1,49 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-export const ANNUITY = 'annuity';
-export const DIFFERENTIAL = 'differential';
-
-const paymentTypeItems = [
-  {
-    id: ANNUITY,
-    text: 'Аннуитетный',
-  },
-  {
-    id: DIFFERENTIAL,
-    text: 'Дифференцированный',
-  },
-];
-
-interface PaymentTypeProps {
-  isAnnuity: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderPaymentType({
-  isAnnuity,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: PaymentTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <RadioButtonGroup
-        orientation={orientation}
-        items={paymentTypeItems}
-        checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
-        onChange={(text: string) => callback && callback(text === ANNUITY)}
-      />
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'annuity', text: 'Аннуитетный' },
+      { id: 'differential', text: 'Дифференцированный' },
+    ],
+  });