fix: interfaces

atls · Nov 22, 2023 · bf5c3ac · bf5c3ac
1 parent c9b1626
commit bf5c3ac
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 116 deletions.
diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx
@@ -4,13 +4,11 @@ import { Layout }            from '@atls-ui-parts/layout'
 import React                 from 'react'
 import { useIntl }           from 'react-intl'
 
-import { CustomInputProps }  from '../interfaces'
 import { Field }             from '../interfaces'
 import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
 import { FieldsErrors }      from '../interfaces'
-import { CustomInput }       from '../interfaces'
 import { MemoizedInput }     from '../ui'
 import { translate }         from '../utils/translate.util'
 
@@ -20,29 +18,27 @@ export const useFieldsRenderer = (
   fieldsState: FieldState,
   handleChange: HandleChangeField,
   handleBlur: HandleBlurField,
-  inputGaps: number,
-  customInput?: CustomInput
+  inputGaps: number
 ) => {
   const intl = useIntl()
 
   return fields.map((field, index, currentFields) => {
     const translatePlaceholder = translate(intl, field.placeholder, field.placeholder)
     const translateError = translate(intl, errors[field.name], errors[field.name])
     const isNotLastField = index !== currentFields.length - 1
-    const inputProps: CustomInputProps = {
-      type: field.type ?? 'text',
-      name: field.name,
-      placeholder: translatePlaceholder,
-      required: field.required ?? false,
-      value: fieldsState[field.name],
-      errorText: translateError,
-      onChangeNative: handleChange,
-      onBlur: handleBlur,
-    }
 
     return (
       <React.Fragment key={field.name}>
-        {customInput ? customInput(inputProps) : <MemoizedInput {...inputProps} />}
+        <MemoizedInput
+          type={field.type ?? 'text'}
+          name={field.name}
+          placeholder={translatePlaceholder}
+          required={field.required ?? false}
+          value={fieldsState[field.name]}
+          errorText={translateError}
+          onChangeNative={handleChange}
+          onBlur={handleBlur}
+        />
         <Condition match={isNotLastField}>
           <Layout flexBasis={inputGaps} flexShrink={0} />
         </Condition>

diff --git a/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts b/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts
diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts
@@ -3,7 +3,6 @@ import { HTMLInputTypeAttribute } from 'react'
 
 import { AdditionalFieldsType }   from '../enums'
 import { RequiredFieldsType }     from '../enums'
-import { CustomInput }            from './custom-elements.interfaces'
 import { DirectionFields }        from './styles.interfaces'
 
 export type FieldsNames = RequiredFieldsType | AdditionalFieldsType
@@ -39,5 +38,4 @@ export interface FieldsProps {
   inputGaps?: number
   isGenerateReceipt?: boolean
   additionalFields?: AdditionalField[]
-  customInput?: CustomInput
 }
diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts
@@ -1,11 +1,11 @@
-export * from "./widget.interfaces";
-export * from "./fields.interfaces";
-export * from "./settings.interfaces";
-export * from "./receipt.interfaces";
-export * from "./styles.interfaces";
-export * from "./theme.interfaces";
-export * from "./button.interfaces";
-export * from "./input.interfaces";
-export * from "./theme.interfaces";
-export * from "./form.interfaces";
-export * from "./wrappers.interfaces";
+export * from './widget.interfaces'
+export * from './fields.interfaces'
+export * from './settings.interfaces'
+export * from './receipt.interfaces'
+export * from './styles.interfaces'
+export * from './theme.interfaces'
+export * from './button.interfaces'
+export * from './input.interfaces'
+export * from './theme.interfaces'
+export * from './form.interfaces'
+export * from './wrappers.interfaces'
diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts
@@ -1,15 +1,15 @@
-import React from "react";
+import React               from 'react'
 
-import { AdditionalField } from "./fields.interfaces";
-import { ReceiptSettings } from "./receipt.interfaces";
-import { Settings } from "./settings.interfaces";
-import { Styles } from "./styles.interfaces";
+import { AdditionalField } from './fields.interfaces'
+import { ReceiptSettings } from './receipt.interfaces'
+import { Settings }        from './settings.interfaces'
+import { Styles }          from './styles.interfaces'
 
 export interface WidgetProps {
-  settings: Settings;
-  amount?: number;
-  receipt?: ReceiptSettings;
-  styles?: Styles;
-  additionalFields?: AdditionalField[];
-  children: React.ReactNode;
+  settings: Settings
+  amount?: number
+  receipt?: ReceiptSettings
+  styles?: Styles
+  additionalFields?: AdditionalField[]
+  children: React.ReactNode
 }
diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx
@@ -24,7 +24,6 @@ export const Fields = ({
   isGenerateReceipt = false,
   direction = DirectionFields.Column,
   inputGaps = 16,
-  customInput,
 }: FieldsProps) => {
   const processedFields = isGenerateReceipt
     ? addReceiptFieldsUtil(additionalFields)
@@ -37,8 +36,7 @@ export const Fields = ({
     fieldsState as FieldState,
     handleChange,
     handleBlur,
-    inputGaps,
-    customInput
+    inputGaps
   )
   const Direction = direction === DirectionFields.Column ? Column : Row
 

diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form.component.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import { FC } from "react";
-import { FormEventHandler } from "react";
-import { FormattedMessage } from "react-intl";
-import { useMemo } from "react";
-import { createContext } from "react";
+import React                    from 'react'
+import { FC }                   from 'react'
+import { FormEventHandler }     from 'react'
+import { FormattedMessage }     from 'react-intl'
+import { useMemo }              from 'react'
+import { createContext }        from 'react'
 
-import { FormProps } from "../interfaces";
-import { Button } from "./button/button.component";
-import { Fields } from "./fields.component";
-import { Settings } from "./settings.component";
-import { useInit } from "../hooks";
-import { useValidate } from "../hooks";
-import { makePayment } from "../utils";
-import { makePaymentWithCheck } from "../utils";
+import { FormProps }            from '../interfaces'
+import { Button }               from './button/button.component'
+import { Fields }               from './fields.component'
+import { Settings }             from './settings.component'
+import { useInit }              from '../hooks'
+import { useValidate }          from '../hooks'
+import { makePayment }          from '../utils'
+import { makePaymentWithCheck } from '../utils'
 
-export const FormContext = createContext<any>(null);
+export const FormContext = createContext<any>(null)
 
 export const Form: FC<FormProps> = ({
   settings,
@@ -26,25 +26,21 @@ export const Form: FC<FormProps> = ({
   isGenerateReceipt,
   children,
 }) => {
-  const isLoaded = useInit();
-  const { errors, validateField, isValidate } = useValidate();
+  const isLoaded = useInit()
+  const { errors, validateField, isValidate } = useValidate()
   const payHandler: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    if (!isValidate) return;
+    event.preventDefault()
+    if (!isValidate) return
 
     if (receipt) {
-      makePaymentWithCheck(event, receipt);
+      makePaymentWithCheck(event, receipt)
     } else {
-      makePayment(event);
+      makePayment(event)
     }
-  };
-  const buttonProps: CustomButtonProps = {
-    type: "submit",
-    disabled: !isLoaded || !!disabled,
-  };
+  }
 
   return (
-    <form name="payform-tinkoff" onSubmit={payHandler}>
+    <form name='payform-tinkoff' onSubmit={payHandler}>
       <Settings {...settings} isGenerateReceipt={isGenerateReceipt} />
       <Fields
         errors={errors}
@@ -54,21 +50,17 @@ export const Form: FC<FormProps> = ({
         additionalFields={additionalFields}
         direction={styles?.direction}
         inputGaps={styles?.inputGaps}
-        customInput={customElements?.input}
       />
       <FormContext.Provider
-        value={useMemo(
-          () => ({ errors, validateField }),
-          [errors, validateField]
-        )}
+        value={useMemo(() => ({ errors, validateField }), [errors, validateField])}
       >
         {children}
       </FormContext.Provider>
       {!useCustomButton && (
-        <Button type="submit" disabled={!isLoaded} {...styles?.button}>
-          <FormattedMessage id="payment_widget.pay" defaultMessage="Оплатить" />
+        <Button type='submit' disabled={!isLoaded} {...styles?.button}>
+          <FormattedMessage id='payment_widget.pay' defaultMessage='Оплатить' />
         </Button>
       )}
     </form>
-  );
-};
+  )
+}
diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx
@@ -1,21 +1,21 @@
-import * as messagesRu from "../locales/ru.json";
-import * as messagesEn from "../locales/en.json";
+import * as messagesRu    from '../locales/ru.json'
+import * as messagesEn    from '../locales/en.json'
 
-import React from "react";
-import { Children } from "react";
-import { FC } from "react";
-import { IntlProvider } from "react-intl";
-import { isValidElement } from "react";
+import React              from 'react'
+import { Children }       from 'react'
+import { FC }             from 'react'
+import { IntlProvider }   from 'react-intl'
+import { isValidElement } from 'react'
 
-import { LanguagesType } from "../enums";
-import { WidgetProps } from "../interfaces";
-import { Form } from "./form.component";
-import { ThemeProvider } from "./theme/src";
+import { LanguagesType }  from '../enums'
+import { WidgetProps }    from '../interfaces'
+import { Form }           from './form.component'
+import { ThemeProvider }  from './theme/src'
 
 const messages = {
   [LanguagesType.RUSSIAN]: messagesRu,
   [LanguagesType.ENGLISH]: messagesEn,
-};
+}
 
 export const Widget: FC<WidgetProps> = ({
   amount,
@@ -25,23 +25,18 @@ export const Widget: FC<WidgetProps> = ({
   styles,
   children,
 }) => {
-  const locale = settings.language ?? LanguagesType.RUSSIAN;
-  const childrenArray = Children.toArray(children);
+  const locale = settings.language ?? LanguagesType.RUSSIAN
+  const childrenArray = Children.toArray(children)
   const customFields = childrenArray.filter((child) =>
     isValidElement(child) // @ts-ignore
-      ? child.type.name === "InputWrapper" &&
-        typeof child.props.children === "function"
-      : false
-  );
+      ? child.type.name === 'InputWrapper' && typeof child.props.children === 'function'
+      : false)
   const customButton = childrenArray.find((child) =>
     isValidElement(child) // @ts-ignore
-      ? child.type.name === "ButtonWrapper" &&
-        typeof child.props.children === "function"
-      : false
-  );
+      ? child.type.name === 'ButtonWrapper' && typeof child.props.children === 'function'
+      : false)
   // @ts-ignore
-  const isGenerateReceipt =
-    !!receipt && !customFields.find((field) => field.props.name === "email");
+  const isGenerateReceipt = !!receipt && !customFields.find((field) => field.props.name === 'email')
 
   return (
     <ThemeProvider useCustomTheme={!!customFields.length}>
@@ -64,5 +59,5 @@ export const Widget: FC<WidgetProps> = ({
         </Form>
       </IntlProvider>
     </ThemeProvider>
-  );
-};
+  )
+}