1.0.0 • Published 4 months ago

@uzum-tech/i18n v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
4 months ago

Package version License

Table of Contents

Installing

Package manager

Using npm:

npm i @uzum-tech/i18n

Using yarn:

yarn add @uzum-tech/i18n

Usage

Initialization

Default value source: 1

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div data-account-form data-source="-1" style="width: 530px"></div>
  </body>
</html>

Script

import '@uzum-tech/i18n/lib/style.css';
import AccountForm from '@uzum-tech/i18n';

new AccountForm('[data-account-form]');

Add/Remove listeners

import AccountForm, { AccountFormEvent, AccountApplication } from '@uzum-tech/i18n';

const accountForm = new AccountForm();

const handleAccountFormSubmit = (payload: AccountApplication) => console.log(payload);

// Add listener
accountForm.addListener(
  AccountFormEvent.SUBMIT,
  handleAccountFormSubmit
);

// Remove listener
accountForm.removeListener(
  AccountFormEvent.SUBMIT,
  handleAccountFormSubmit
);

// Remove all listener
accountForm.removeAllListeners(
  AccountFormEvent.SUBMIT,
  handleAccountFormSubmit
);

Events from AccountFormEvent:

ValuePayloadDescription
SUBMITAccountApplicationWill fire after successful validation, before sending the request
ERROR_RESPONSEAccountApplicationWill fire after an unsuccessful response
SUCCESS_RESPONSEAccountApplicationWill fire after a successful response
FINALLY_RESPONSEAccountApplicationIt will always work after the response
VALIDATEAccountApplicationFormValidationResultIt will work after the form is validated, before sending the request. Validation status is available in the event payload
BLURAccountApplicationFieldBlurResultWill fire after removing focus from any field inside the form
TOGGLE_TIN_OR_PINFLbooleanWill fire after toggle 'Не помню ИНН или ПИНФЛ' checkbox
TOGGLE_ACCEPT_CHECKBOXbooleanWill fire after toggle 'Я соглашаюсь на обработку персональных данных' checkbox

Fields visibility

import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

// Show/hide single field
accountForm.showFields('name');
accountForm.hideFields('name');

// Show/hide multiple fields
accountForm.showFields('name', 'phone');
accountForm.hideFields('name', 'phone');

Default values

import AccountForm, { AccountProduct } from '@uzum-tech/i18n';

const accountForm = new AccountForm();

accountForm.setDefaultFields({
  product: AccountProduct.ACCOUNT_IN_SOUMS
});

Custom request sending

  • If you return a non-empty string, it will be displayed as error text.
  • If nothing is returned, the response will be considered successful
import AccountForm, { AccountApplication } from '@uzum-tech/i18n';

const accountForm = new AccountForm();

accountForm.onRequest = (payload: AccountApplication) => {
  // Logic for sending the request
};

Toggle pinfl

  • updates the mask
  • updates localization
  • if necessary, trims the original field value
  • emits the event TOGGLE_ACCEPT_CHECKBOX
import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

// To support both INN and PINFL
accountForm.withPinfl();

// To leave only the INN
accountForm.withoutPinfl();

API Version

  • by default version is 2.0
  • version will send in header X-Api-Version
import { ApiVersion } from '@uzum-tech/i18n';

const accountForm = new AccountForm();

// Change version
accountForm.apiVersion = ApiVersion.v3; // Available keys - v1-v4

// Clear version in order to remove X-Api-Version header
accountForm.apiVersion = undefined;

Custom response callback

  • If you want to handle the response you can pass the function
import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

accountForm.onResponse = (response: ApiResponse<ELMAResponse>): void => {
  // Logic for handling the response
};

Update text for send button

  • If you want to update text of send button, you can use method setSendButtonLocale
  • The method accepts text as a text, that should be replaced
  • BE CAREFULL: After changing text, there will be no 'reactive' locale on button. That means that changing language will not force any changing in text.
import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

accountForm.setSendButtonLocale('Book a call');

Computed values

PropertyTypeReadonly
acceptCheckedbooleanYes
hideTINOrPINFLCheckedbooleanYes
langstringNo
productValueAccountProduct | nullNo
buttonLoadingbooleanNo

Status alerts

import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

// If you don't need to show alert then change the value to false
accountForm.autoShowAlert = false;

Manual submitting

import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

// If you need submit with validations and all other handlers
accountForm.submit();

// If you need request only without handlers
accountForm.requestOnly();

Reset

import AccountForm from '@uzum-tech/i18n';

const accountForm = new AccountForm();

// If you need disable auto reset after submit
accountForm.autoReset = false;

// If you need reset manually
accountForm.resetForm();

License

MIT license

1.0.0

4 months ago