From 760acfed662201cca5146053d2f81910f22f0cd5 Mon Sep 17 00:00:00 2001 From: ruvata Date: Thu, 4 Mar 2021 12:27:06 +0300 Subject: [PATCH 01/10] remove deprecated warn (postinstall script) --- package.json | 3 +-- postinstall.js | 31 ------------------------------- 2 files changed, 1 insertion(+), 33 deletions(-) delete mode 100644 postinstall.js diff --git a/package.json b/package.json index 3d65f85..3a5a995 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,7 @@ "scripts": { "start": "webpack-dev-server --hot --inline --mode development --open", "transpile": "NODE_ENV=production babel src -d dist --copy-files", - "prepublishOnly": "npm run transpile", - "postinstall": "node postinstall.js" + "prepublishOnly": "npm run transpile" }, "author": { "name": "orbita", diff --git a/postinstall.js b/postinstall.js deleted file mode 100644 index 0faabb2..0000000 --- a/postinstall.js +++ /dev/null @@ -1,31 +0,0 @@ -const colors = { - Reset: '\x1b[0m', - Red: '\x1b[31m', - Green: '\x1b[32m', - Yellow: '\x1b[33m' -}; - -const red = s => colors.Red + s + colors.Reset; -const green = s => colors.Green + s + colors.Reset; - -console.warn( - ` - ╭────────────────────────────────────────────────────────────────╮ - │ react-dadata-box@1.3.4 │ - │ *** DEPRECATION WARNING **** │ - │ at v1.3.5 will be deprecated variant to place customActions │ - │ as React.Element it must be placed only as function that │ - │ returns React.Element and take suggestions as argument │ - │ see more in project README.md │ - │ https://github.com/orbita-center/react-dadata-box │ - ╰────────────────────────────────────────────────────────────────╯ -` - .replace(/─/g, red('─')) - .replace(/╭/g, red('╭')) - .replace(/╰/g, red('╰')) - .replace(/╮/g, red('╮')) - .replace(/╯/g, red('╯')) - .replace(/react-dadata-box\@1\.3\.4/g, green('react-dadata-box@1.3.4')) - .replace(/v1\.3\.5/g, green('v1.3.5')) - .replace(/deprecated/g, green('deprecated')) -); From fe6f709cb3bffdf82ee0ff37a4e2ea461598c5e9 Mon Sep 17 00:00:00 2001 From: ruvata Date: Thu, 4 Mar 2021 12:42:06 +0300 Subject: [PATCH 02/10] closes #62: add 'country' fetch (documentation [rus/eng] + typings) --- README.md | 7 +++++-- README.ru.md | 7 +++++-- index.d.ts | 31 +++++++++++++++++++++++++++---- 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index bca153e..637979c 100644 --- a/README.md +++ b/README.md @@ -189,10 +189,12 @@ ___ #### type ![](https://img.shields.io/badge/optional-green) ![](https://img.shields.io/badge/default-"address"-lightgrey) fetched suggestions type (declarative in DaData service terms). -It may be 'address', 'bank', 'email', 'fio' (last/first/middle names + gender detection), 'fms_unit' (branch/unit that issued Russian pasport) +It may be 'address', 'country', 'bank', 'email', 'fio' (last/first/middle names + gender detection), 'fms_unit' (branch/unit that issued Russian pasport) ```typescript -type?: 'address' | 'party' | 'bank' | 'email' | 'fio' | 'fms_unit'; +type FetchType = AddressQueryMode | CountryQueryMode | PartyQueryMode | BankQueryMode | EmailQueryMode | FioQueryMode | FmsUnitQueryMode; +// => 'address' (default) | 'country' | 'party' | 'bank' | 'email' | 'fio' | 'fms_unit' +type?: FetchType; ``` ![](https://img.shields.io/badge/ATTENTION-red) [![](https://img.shields.io/badge/TypeScript-types-blue?logo=typescript)](https://www.typescriptlang.org/) For correct infer types results of fetching, you need to manually setup type string to component generic parameter: @@ -221,6 +223,7 @@ exported bulit-in types accordingly to type parameter | **type param** | **built-in type** | | ------------- | ------------- | | 'address' | AddressResponseType (default) | + | 'country' | CountryResponseType | | 'party' | PartyResponseType | | 'bank' | BankResponseType | | 'email' | EmailResponseType | diff --git a/README.ru.md b/README.ru.md index 0087f55..c538b1f 100644 --- a/README.ru.md +++ b/README.ru.md @@ -190,10 +190,12 @@ token: string; ``` ___ #### type ![](https://img.shields.io/badge/optional-green) ![](https://img.shields.io/badge/default-"address"-lightgrey) -тип запрашиваемых "подсказок" (в терминологии сервиса DaData): 'address' (адреса), 'bank' (банки), 'email' (электронная почта), 'fio' (ФИО + определение пола), 'fms_unit' (отделение выдавшее паспорт РФ) +тип запрашиваемых "подсказок" (в терминологии сервиса DaData): 'address' (адреса), 'country' (страны), 'bank' (банки), 'email' (электронная почта), 'fio' (ФИО + определение пола), 'fms_unit' (отделение выдавшее паспорт РФ) ```typescript -type?: 'address' | 'party' | 'bank' | 'email' | 'fio' | 'fms_unit'; +type FetchType = AddressQueryMode | CountryQueryMode | PartyQueryMode | BankQueryMode | EmailQueryMode | FioQueryMode | FmsUnitQueryMode; +// => 'address' (default) | 'country' | 'party' | 'bank' | 'email' | 'fio' | 'fms_unit' +type?: FetchType; ``` ![](https://img.shields.io/badge/ATTENTION-red) [![](https://img.shields.io/badge/TypeScript-types-blue?logo=typescript)](https://www.typescriptlang.org/) Для корректного вывода типов описывающих структуры которыми отвечает сервер DaData в соответствии с указанным типом сервиса (параметр **type**) - @@ -224,6 +226,7 @@ import { PartyResponseType } from 'react-dadata-box'; | **type param** | **built-in type** | | ------------- | ------------- | | 'address' | AddressResponseType (default) | + | 'country' | CountryResponseType | | 'party' | PartyResponseType | | 'bank' | BankResponseType | | 'email' | EmailResponseType | diff --git a/index.d.ts b/index.d.ts index 7bec1c9..84d0da8 100644 --- a/index.d.ts +++ b/index.d.ts @@ -246,6 +246,20 @@ export interface BankResponseType { }; } +// types formed by description's from: +// https://dadata.ru/api/suggest/country/ +export interface CountryResponseType { + data: { + alfa2: string | null; + alfa3: string | null; + code: string | null; + name: string | null; + name_short: string | null; + }; + unrestricted_value: string | null; + value: string | null; +} + // types formed by description's from: // https://dadata.ru/api/clean/email/ // https://dadata.ru/api/clean/email/#qc @@ -298,14 +312,18 @@ export interface FmsUnitResponseType { } /** - * @typedef { FetchType } FetchType + * @typedef { FetchType } FetchType - available query modes (service endpoint modes) */ -export type FetchType = AddressQueryMode | PartyQueryMode | BankQueryMode | EmailQueryMode | FioQueryMode | FmsUnitQueryMode; +export type FetchType = AddressQueryMode | CountryQueryMode | PartyQueryMode | BankQueryMode | EmailQueryMode | FioQueryMode | FmsUnitQueryMode; /** * @typedef { AddressQueryMode } - address's by abstract text query (as text address representation) */ export type AddressQueryMode = 'address'; +/** + * @typedef { CountryQueryMode } - country's by abstract text query (as country name) + */ +export type CountryQueryMode = 'country'; /** * @typedef { PartyQueryMode } - organization's info by abstract text query (as organization name) or as numbers sequence (as INN code) */ @@ -327,13 +345,18 @@ export type FioQueryMode = 'fio'; */ export type FmsUnitQueryMode = 'fms_unit'; -export type AbstractResponseType = PartyQueryMode | PartyResponseType | BankResponseType | EmailResponseType | FioResponseType | FmsUnitResponseType +/** + * @typedef { AbstractResponseType } - union of all available query modes + */ +export type AbstractResponseType = CountryResponseType | PartyResponseType | BankResponseType | EmailResponseType | FioResponseType | FmsUnitResponseType /** * @typedef { SpecificQueryModeResponse } - generic for detection response payload type by FetchType */ -type SpecificQueryModeResponse = T extends AddressQueryMode +export type SpecificQueryModeResponse = T extends AddressQueryMode ? AddressResponseType + : T extends CountryQueryMode + ? CountryResponseType : T extends PartyQueryMode ? PartyResponseType : T extends BankQueryMode From 641f1105ba9ae4e75a39c1f50bbc1c3253db7345 Mon Sep 17 00:00:00 2001 From: ruvata Date: Thu, 4 Mar 2021 13:18:56 +0300 Subject: [PATCH 03/10] closes #61: documentation update fro customAction & onChange with modern SpecificQueryModeResponse type --- README.md | 42 ++++++++++++++++++++++++++++++++++-------- README.ru.md | 52 ++++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 74 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 637979c..8b5a757 100644 --- a/README.md +++ b/README.md @@ -66,11 +66,19 @@ function that returns node (or nodes array) to place that as 'custom action' at v1.3.4 variant 'React.ReactNode' deprecated at types definition since v1.3.5 variant 'React.ReactNode' will be deprecated from functionality ```typescript -// {ResponseType} where 'T' is one of FetchType (value placed at 'type' prop): -// {AddressQueryMode} 'address' | {PartyQueryMode} 'party' | {BankQueryMode} | -// {EmailQueryMode} 'email' | {FioQueryMode} 'fio' | {FmsUnitQueryMode} 'fms_unit'; -// it determines DaData response object type -customActions?: ((suggestions: SpecificQueryModeResponse[]) => React.ReactNode); +import { SpecificQueryModeResponse, FetchType } from 'react-dadata-box'; + +// {SpecificQueryModeResponse} where 'T' is one of FetchType (value placed at 'type' prop): +// {AddressQueryMode} 'address' | {CountryQueryMode} 'country' | {PartyQueryMode} 'party' | +// {BankQueryMode} 'bank' | {EmailQueryMode} 'email' | {FioQueryMode} 'fio' | +// {FmsUnitQueryMode} 'fms_unit'; + +// SpecificQueryModeResponse is generic that returned one of corresponding AbstractResponseType +// AbstractResponseType and any of response types is built-in and may be impoted from library +type AbstractResponseType = CountryResponseType | PartyResponseType | BankResponseType | EmailResponseType | FioResponseType | FmsUnitResponseType + +// type of 'suggestions' wiil be infered automaticaliy from fetch type and it will be SpecificQueryModeResponse[] +customActions?: ((suggestions: SpecificQueryModeResponse[]) => React.ReactNode); ``` at versions < v1.3.4 ```typescript @@ -129,8 +137,22 @@ debounce?: number; ___ #### onChange ![](https://img.shields.io/badge/optional-green) change/select event handler, called when user select suggestion by mouse click or Enter key from keyboard. Handler gets suggestion object as argument + ```typescript -onChange?: (suggestion: DadataSuggestion) => void; +import { SpecificQueryModeResponse, FetchType } from 'react-dadata-box'; + +// {SpecificQueryModeResponse} where 'T' is one of FetchType (value placed at 'type' prop): +// {AddressQueryMode} 'address' | {CountryQueryMode} 'country' | {PartyQueryMode} 'party' | +// {BankQueryMode} 'bank' | {EmailQueryMode} 'email' | {FioQueryMode} 'fio' | +// {FmsUnitQueryMode} 'fms_unit'; + +// SpecificQueryModeResponse is generic that returned one of corresponding AbstractResponseType +// AbstractResponseType and any of response types is built-in and may be impoted from library + +type AbstractResponseType = CountryResponseType | PartyResponseType | BankResponseType | EmailResponseType | FioResponseType | FmsUnitResponseType + +// type of 'suggestion' wiil be infered automaticaliy from fetch type and it will be SpecificQueryModeResponse[] +onChange ? : (suggestion: SpecificQueryModeResponse) => void; ``` ___ #### onIdleOut ![](https://img.shields.io/badge/optional-green) @@ -199,16 +221,20 @@ type?: FetchType; ![](https://img.shields.io/badge/ATTENTION-red) [![](https://img.shields.io/badge/TypeScript-types-blue?logo=typescript)](https://www.typescriptlang.org/) For correct infer types results of fetching, you need to manually setup type string to component generic parameter: *'address'* is default typing it not need to be placed patently + +[![](https://img.shields.io/badge/CodeSandbox-playground-black?logo=codesandbox)](https://codesandbox.io/s/react-dadata-box-example-customactions-ox2li) ```typescript // for example if we need to fetch 'party' -import { PartyResponseType } from 'react-dadata-box'; +import { SpecificQueryModeResponse } from 'react-dadata-box'; ... // if you setup 'party' as generic param - handlers as 'onChange' will be typed accordingly // (suggestion: PartyResponseType) => void in this sample token={testToken} type='party' - onChange={(suggestion: PartyResponseType) => setSample2(suggestion)} + // 'suggestion' type will be automatically infered as : SpecificQueryModeResponse<'party'> + onChange={(suggestion) => setSample2(suggestion)} + // 'suggestion' type will be automatically infered as : SpecificQueryModeResponse<'party'> customActions={(suggestions) => !suggestions.length && ( diff --git a/README.ru.md b/README.ru.md index c538b1f..af63dc2 100644 --- a/README.ru.md +++ b/README.ru.md @@ -66,11 +66,21 @@ ___ в версии v1.3.4 вариант определения как 'React.ReactNode' упразднен в определении типов насиная с версии v1.3.5 вариант определения как 'React.ReactNode' будет упразднен технически ```typescript -// {ResponseType} где 'T' это один из FetchType (значение передаваемое в пропс 'type'): -// {AddressQueryMode} 'address' | {PartyQueryMode} 'party' | {BankQueryMode} | -// {EmailQueryMode} 'email' | {FioQueryMode} 'fio' | {FmsUnitQueryMode} 'fms_unit'; +import { SpecificQueryModeResponse, FetchType } from 'react-dadata-box'; + +// {SpecificQueryModeResponse} где 'T' это один из FetchType (значение передаваемое в пропс 'type'): +// {AddressQueryMode} 'address' | {CountryQueryMode} 'country' | {PartyQueryMode} 'party' | +// {BankQueryMode} | {EmailQueryMode} 'email' | {FioQueryMode} 'fio' | +// {FmsUnitQueryMode} 'fms_unit'; // это определяет типизацию структуры соотв. ответа от DaData по специфическому type -customActions?: ((suggestions: SpecificQueryModeResponse[]) => React.ReactNode); + +// SpecificQueryModeResponse дженерик который выводит один из AbstractResponseType +// AbstractResponseType и любой их отдельных типов этого Union являются встроенными типами и могут быть импортированы под нужды описания типов из библиотеки +type AbstractResponseType = CountryResponseType | PartyResponseType | BankResponseType | EmailResponseType | FioResponseType | FmsUnitResponseType + +// тип 'suggestions' будет выведен автоматически на основе установленного типа запроса (type property) +// и он будет являться SpecificQueryModeResponse[] где 'T' соотв. (type property: FetchType) +customActions?: ((suggestions: SpecificQueryModeResponse[]) => React.ReactNode); ``` at versions < v1.3.4 ```typescript @@ -131,7 +141,21 @@ ___ #### onChange ![](https://img.shields.io/badge/optional-green) обработчик события выбора подсказки пользователем (клик по элементу в списке или Enter для элемента который в данный момент выделен), принимает объект отражающий выбранную 'подсказку' в качестве аргумента ```typescript -onChange?: (suggestion: DadataSuggestion) => void; +import { SpecificQueryModeResponse, FetchType } from 'react-dadata-box'; + +// {SpecificQueryModeResponse} где 'T' это один из FetchType (значение передаваемое в пропс 'type'): +// {AddressQueryMode} 'address' | {CountryQueryMode} 'country' | {PartyQueryMode} 'party' | +// {BankQueryMode} | {EmailQueryMode} 'email' | {FioQueryMode} 'fio' | +// {FmsUnitQueryMode} 'fms_unit'; +// это определяет типизацию структуры соотв. ответа от DaData по специфическому type + +// SpecificQueryModeResponse дженерик который выводит один из AbstractResponseType +// AbstractResponseType и любой их отдельных типов этого Union являются встроенными типами и могут быть импортированы под нужды описания типов из библиотеки +type AbstractResponseType = CountryResponseType | PartyResponseType | BankResponseType | EmailResponseType | FioResponseType | FmsUnitResponseType + +// тип 'suggestion' будет выведен автоматически на основе установленного типа запроса (type property) +// и он будет являться SpecificQueryModeResponse[] где 'T' соотв. (type property: FetchType) +onChange?: (suggestion: SpecificQueryModeResponse) => void; ``` ___ #### onIdleOut ![](https://img.shields.io/badge/optional-green) @@ -202,22 +226,26 @@ type?: FetchType; необходимо передать этот тип (соотв. строку) как параметр дженерика. *'address'* является значение по умолчанию - и не требует явной установки + +[![](https://img.shields.io/badge/CodeSandbox-playground-black?logo=codesandbox)](https://codesandbox.io/s/react-dadata-box-example-customactions-ox2li) ```typescript // н/п если мы используем сервис 'party' -import { PartyResponseType } from 'react-dadata-box'; +import { SpecificQueryModeResponse } from 'react-dadata-box'; ... // после установки 'party' как дженерик параметра компонента - обработчики такие как 'onChange' начинают типизироваться соотв. // выводится тип (suggestion: PartyResponseType) => void в данном примере token={testToken} type='party' - onChange={(suggestion: PartyResponseType) => setSample2(suggestion)} + // тип 'suggestion' будет выведен автоматически как SpecificQueryModeResponse<'party'> + onChange={(suggestion) => setSample2(suggestion)} + // тип 'suggestion' будет выведен автоматически как SpecificQueryModeResponse<'party'> customActions={(suggestions) => - !suggestions.length && ( - - произвольное действие - - ) + !suggestions.length && ( + + произвольное действие + + ) } /> ``` From 1fc7d5a91ea5707faa6e88d6d35eb7dbb85808bf Mon Sep 17 00:00:00 2001 From: ruvata Date: Thu, 4 Mar 2021 15:06:33 +0300 Subject: [PATCH 04/10] relates to #63: declaring 'style' property to package.json (for tools that support this contract) see: https://jaketrent.com/post/package-json-style-attribute --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 3a5a995..edf8169 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.3.6", "description": "Компонент для работы с DaData", "main": "dist/index.js", + "style": "dist/index.css", "types": "index.d.ts", "scripts": { "start": "webpack-dev-server --hot --inline --mode development --open", From 50abf446786ed88c19e254473584bbddd3263100 Mon Sep 17 00:00:00 2001 From: ruvata Date: Thu, 4 Mar 2021 17:21:13 +0300 Subject: [PATCH 05/10] relates to #63: postpublish script ('next-js' dist tag special case) --- postpublish.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 postpublish.js diff --git a/postpublish.js b/postpublish.js new file mode 100644 index 0000000..0c08ce0 --- /dev/null +++ b/postpublish.js @@ -0,0 +1,19 @@ +const util = require('util'); +const exec = util.promisify(require('child_process').exec); + +function log({stdout, stderr}, action) { + console.log(`\t=> DO: ${action} ...`); + console.log('\t\tstdout: ', stdout || 'DONE'); + stderr && console.log('\t\tstderr:', stderr); +} + +async function postpublish() { + console.log('\n=> RUN: postpublish ...'); + log(await exec("sed -i \"\" -e 's/.*index.css.*/&&&/g' -e '/&&&[[:space:]]*$/d' ./src/index.js"), 'remove css import declaration') + log(await exec("sed -i \"\" -r 's/(\"version\":[[:space:]]\"[[:digit:]]\\.[[:digit:]].[[:digit:]])/\\1-next-js/g' ./package.json"), 'correction special case version of package') + log(await exec("npm run-script transpile"), "transpile 'next-js' special case") + log(await exec("npm publish --tag next-js"), "rollback changes") + log(await exec("git reset --hard"), "rollback changes") +} + +postpublish(); From 9f5747ddf7dbaac36b2b796956ae57c2940e5094 Mon Sep 17 00:00:00 2001 From: ruvata Date: Thu, 4 Mar 2021 18:10:05 +0300 Subject: [PATCH 06/10] closes #63: postpublish script init --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index edf8169..b68409f 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "types": "index.d.ts", "scripts": { "start": "webpack-dev-server --hot --inline --mode development --open", + "postpublish": "node postpublish.js", "transpile": "NODE_ENV=production babel src -d dist --copy-files", "prepublishOnly": "npm run transpile" }, From 96567b06266e264ab4e45d5cef2f1ac979c47fae Mon Sep 17 00:00:00 2001 From: ruvata34 Date: Sun, 28 Aug 2022 16:49:09 +0300 Subject: [PATCH 07/10] relates to #63: postpublish script (prevent recursive call) --- postpublish.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/postpublish.js b/postpublish.js index 0c08ce0..fedb4c7 100644 --- a/postpublish.js +++ b/postpublish.js @@ -1,4 +1,5 @@ const util = require('util'); +const fs = require('fs'); const exec = util.promisify(require('child_process').exec); function log({stdout, stderr}, action) { @@ -9,11 +10,22 @@ function log({stdout, stderr}, action) { async function postpublish() { console.log('\n=> RUN: postpublish ...'); - log(await exec("sed -i \"\" -e 's/.*index.css.*/&&&/g' -e '/&&&[[:space:]]*$/d' ./src/index.js"), 'remove css import declaration') - log(await exec("sed -i \"\" -r 's/(\"version\":[[:space:]]\"[[:digit:]]\\.[[:digit:]].[[:digit:]])/\\1-next-js/g' ./package.json"), 'correction special case version of package') - log(await exec("npm run-script transpile"), "transpile 'next-js' special case") - log(await exec("npm publish --tag next-js"), "rollback changes") - log(await exec("git reset --hard"), "rollback changes") + console.log('\t=> CHECK: postpublish.lock exists'); + // NPM could't be called with skip call postpublish script by current CLI interface of publish command + // workaround to prevent recursive calling of postpublish script (after publish 'next-js' version of lib) + if (fs.existsSync('postpublish.lock')) { + fs.unlinkSync('postpublish.lock'); + console.log('\t→ SIDE-EFFECT run (lock file EXIST) → ⚠️ SKIP executing postpublish script (lock file was removed)'); + return; + } else { + console.log('\t→ FIRST RUN (NOT EXIST) → ⚠️ WRITING postpublish.lock...'); + fs.writeFileSync('postpublish.lock', 'this file needed to prevent recursive call of post publish script, after publishing \'next-js\' version of lib') + log(await exec("sed -i \"\" -e 's/.*index.css.*/&&&/g' -e '/&&&[[:space:]]*$/d' ./src/index.js"), 'remove css import declaration') + log(await exec("sed -i \"\" -r 's/(\"version\":[[:space:]]\"[[:digit:]]\\.[[:digit:]].[[:digit:]])/\\1-next-js/g' ./package.json"), 'correction special case version of package') + log(await exec("npm run-script transpile"), "transpile 'next-js' special case") + log(await exec("npm publish --tag next-js"), "publishing 'next-js version of lib'") + log(await exec("git reset --hard"), "rollback changes") + } } postpublish(); From bb1a718a07574ba3e24e52e5aa7d43255ab7351e Mon Sep 17 00:00:00 2001 From: ruvata34 Date: Sun, 28 Aug 2022 18:27:03 +0300 Subject: [PATCH 08/10] closes #68: update lower limit of react & react-dom to ^17.0.2 --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index b68409f..f1841f8 100644 --- a/package.json +++ b/package.json @@ -21,16 +21,16 @@ "url": "git+https://github.com/orbita-center/react-dadata-box.git" }, "peerDependencies": { - "prop-types": "^15.6.2", - "react": "^16.4.2", - "react-dom": "^16.4.2" + "prop-types": "^15.8.1", + "react": "^17.0.2", + "react-dom": "^17.0.2" }, "dependencies": { "react-highlight-words": "^0.12.0" }, "devDependencies": { - "@types/react": "^16.9.34", - "@types/react-dom": "^16.9.7", + "@types/react": "^18.0.17", + "@types/react-dom": "^18.0.6", "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-plugin-transform-class-properties": "^6.24.1", @@ -39,8 +39,8 @@ "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "prettier": "^2.0.5", - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^17.0.2", + "react-dom": "^17.0.2" }, "prettier": { "tabWidth": 2, From 2bf5c35b8e3ecffc93f10cee1259bb3378963d55 Mon Sep 17 00:00:00 2001 From: ruvata34 Date: Sun, 28 Aug 2022 18:46:08 +0300 Subject: [PATCH 09/10] closes #67: move xhr initialization to componentDidMount for SSR compatibility --- dist/index.css | 0 dist/index.js | 488 ++++++++++++++++++------------------------------- src/index.js | 3 +- 3 files changed, 176 insertions(+), 315 deletions(-) mode change 100755 => 100644 dist/index.css diff --git a/dist/index.css b/dist/index.css old mode 100755 new mode 100644 diff --git a/dist/index.js b/dist/index.js index ce91129..666a346 100755 --- a/dist/index.js +++ b/dist/index.js @@ -1,51 +1,15 @@ 'use strict'; -Object.defineProperty(exports, '__esModule', { - value: true, +Object.defineProperty(exports, "__esModule", { + value: true }); exports.ReactDaDataBox = undefined; -var _createClass = (function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ('value' in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; -})(); - -var _extends = - Object.assign || - function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - return target; - }; +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _typeof = - typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' - ? function (obj) { - return typeof obj; - } - : function (obj) { - return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype - ? 'symbol' - : typeof obj; - }; +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _react = require('react'); @@ -61,87 +25,46 @@ var _reactHighlightWords2 = _interopRequireDefault(_reactHighlightWords); require('./index.css'); -function _interopRequireDefault(obj) { - return obj && obj.__esModule ? obj : { default: obj }; -} - -function _interopRequireWildcard(obj) { - if (obj && obj.__esModule) { - return obj; - } else { - var newObj = {}; - if (obj != null) { - for (var key in obj) { - if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; - } - } - newObj.default = obj; - return newObj; - } -} +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError('Cannot call a class as a function'); - } -} +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } -function _possibleConstructorReturn(self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - return call && (typeof call === 'object' || typeof call === 'function') ? call : self; -} +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _inherits(subClass, superClass) { - if (typeof superClass !== 'function' && superClass !== null) { - throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); - } - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { value: subClass, enumerable: false, writable: true, configurable: true }, - }); - if (superClass) - Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : (subClass.__proto__ = superClass); -} +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var wordsToPass = ['г', 'респ', 'ул', 'р-н', 'село', 'деревня', 'поселок', 'пр-д', 'пл', 'к', 'кв', 'обл', 'д']; var defaultSuggestion = { data: {}, unrestricted_value: '', - value: '', + value: '' }; var defaultEndpoint = { api: 'suggestions/api/4_1/rs/suggest', - host: 'https://suggestions.dadata.ru', + host: 'https://suggestions.dadata.ru' }; var defaultClasses = { 'react-dadata__custom-action': 'react-dadata__suggestion react-dadata__custom-action', 'react-dadata__suggestion': 'react-dadata__suggestion', 'react-dadata__suggestion-note': 'react-dadata__suggestion-note', - 'react-dadata__suggestions': 'react-dadata__suggestions', + 'react-dadata__suggestions': 'react-dadata__suggestions' }; var getStylingProps = function getStylingProps(baseClass) { var customStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var additionalClass = arguments[2]; - return customStyles[baseClass] && _typeof(customStyles[baseClass]) === 'object' - ? { - className: ((defaultClasses[baseClass] || baseClass) + ' ' + (additionalClass || '')).trim(), - style: customStyles[baseClass], - } - : { - className: ( - (defaultClasses[baseClass] || baseClass) + - ' ' + - (additionalClass || '') + - ' ' + - (customStyles[baseClass] || '') - ).trim(), - }; + return customStyles[baseClass] && _typeof(customStyles[baseClass]) === 'object' ? { + className: ((defaultClasses[baseClass] || baseClass) + ' ' + (additionalClass || '')).trim(), + style: customStyles[baseClass] + } : { + className: ((defaultClasses[baseClass] || baseClass) + ' ' + (additionalClass || '') + ' ' + (customStyles[baseClass] || '')).trim() + }; }; var backslashTailFix = function backslashTailFix(uriPart) { @@ -178,15 +101,15 @@ var fakeRandomKey = function fakeRandomKey() { var SuggestionInfo = function SuggestionInfo(_ref) { var _ref$data = _ref.data, - data = _ref$data === undefined ? {} : _ref$data, - type = _ref.type; + data = _ref$data === undefined ? {} : _ref$data, + type = _ref.type; return React.createElement( 'div', { className: 'react-dadata__suggestion-info' }, React.createElement( 'span', null, - [type === 'party' ? data.inn || null : data.bic || null, (data.address && data.address.value) || null].join(' ') + [type === 'party' ? data.inn || null : data.bic || null, data.address && data.address.value || null].join(' ') ) ); }; @@ -202,38 +125,38 @@ var Note = function Note(customStyles) { 'svg', { width: '34', height: '16', viewBox: '0 0 44 21', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, React.createElement('path', { - d: - 'M25.9 20.1H41.2C42.1 20.1 42.9 19.4 42.9 18.4V3.1C42.9 2.2 42.1 1.4 41.2 1.4H25.9C24.9 1.4 24.2 2.2 24.2 3.1V18.4C24.2 19.4 25 20.1 25.9 20.1Z', + d: 'M25.9 20.1H41.2C42.1 20.1 42.9 19.4 42.9 18.4V3.1C42.9 2.2 42.1 1.4 41.2 1.4H25.9C24.9 1.4 24.2 2.2 24.2 3.1V18.4C24.2 19.4 25 20.1 25.9 20.1Z', stroke: '#424242', strokeWidth: '1.122', - strokeMiterlimit: '10', + strokeMiterlimit: '10' }), React.createElement('path', { - d: - 'M33.4295 6.62049C33.4295 7.32049 33.4295 8.0205 33.4295 8.7205C33.4295 10.9205 33.4295 13.2205 33.4295 15.5205C33.4295 15.6205 33.4295 15.6205 33.4295 15.7205C33.4295 15.8205 33.5295 15.9205 33.6295 15.9205C33.7295 15.9205 33.8295 15.8205 33.8295 15.7205C33.8295 15.6205 33.8295 15.6205 33.8295 15.5205C33.8295 12.6205 33.8295 9.82049 33.8295 6.92049C33.8295 6.82049 33.8295 6.8205 33.8295 6.7205C33.9295 6.8205 33.9295 6.8205 34.0295 6.8205C34.4295 7.2205 34.9295 7.72049 35.3295 8.12049C35.4295 8.22049 35.5295 8.2205 35.6295 8.2205C35.7295 8.2205 35.8295 8.12049 35.8295 8.02049C35.8295 7.92049 35.8295 7.8205 35.7295 7.7205C35.4295 7.4205 35.1295 7.1205 34.8295 6.8205C34.5295 6.5205 34.2295 6.2205 33.8295 5.8205C33.6295 5.6205 33.5295 5.6205 33.4295 5.8205C32.8295 6.4205 32.2295 7.0205 31.5295 7.7205C31.3295 7.9205 31.4295 8.12049 31.6295 8.12049C31.7295 8.12049 31.8295 8.02049 31.9295 8.02049C32.3295 7.62049 32.8295 7.1205 33.2295 6.7205C33.2295 6.7205 33.3295 6.72049 33.4295 6.62049Z', + d: 'M33.4295 6.62049C33.4295 7.32049 33.4295 8.0205 33.4295 8.7205C33.4295 10.9205 33.4295 13.2205 33.4295 15.5205C33.4295 15.6205 33.4295 15.6205 33.4295 15.7205C33.4295 15.8205 33.5295 15.9205 33.6295 15.9205C33.7295 15.9205 33.8295 15.8205 33.8295 15.7205C33.8295 15.6205 33.8295 15.6205 33.8295 15.5205C33.8295 12.6205 33.8295 9.82049 33.8295 6.92049C33.8295 6.82049 33.8295 6.8205 33.8295 6.7205C33.9295 6.8205 33.9295 6.8205 34.0295 6.8205C34.4295 7.2205 34.9295 7.72049 35.3295 8.12049C35.4295 8.22049 35.5295 8.2205 35.6295 8.2205C35.7295 8.2205 35.8295 8.12049 35.8295 8.02049C35.8295 7.92049 35.8295 7.8205 35.7295 7.7205C35.4295 7.4205 35.1295 7.1205 34.8295 6.8205C34.5295 6.5205 34.2295 6.2205 33.8295 5.8205C33.6295 5.6205 33.5295 5.6205 33.4295 5.8205C32.8295 6.4205 32.2295 7.0205 31.5295 7.7205C31.3295 7.9205 31.4295 8.12049 31.6295 8.12049C31.7295 8.12049 31.8295 8.02049 31.9295 8.02049C32.3295 7.62049 32.8295 7.1205 33.2295 6.7205C33.2295 6.7205 33.3295 6.72049 33.4295 6.62049Z', fill: '#424242', stroke: '#424242', strokeWidth: '0.8', - strokeMiterlimit: '10', + strokeMiterlimit: '10' }), React.createElement('path', { - d: - 'M0.699997 3.1V18.4C0.699997 19.4 1.5 20.1 2.4 20.1H17.7C18.6 20.1 19.4 19.4 19.4 18.4V3.1C19.4 2.1 18.6 1.4 17.7 1.4H2.4C1.4 1.5 0.699997 2.2 0.699997 3.1Z', + d: 'M0.699997 3.1V18.4C0.699997 19.4 1.5 20.1 2.4 20.1H17.7C18.6 20.1 19.4 19.4 19.4 18.4V3.1C19.4 2.1 18.6 1.4 17.7 1.4H2.4C1.4 1.5 0.699997 2.2 0.699997 3.1Z', stroke: '#424242', strokeWidth: '1.122', - strokeMiterlimit: '10', + strokeMiterlimit: '10' }), React.createElement('path', { - d: - 'M10.3 15C10.3 14.3 10.3 13.6 10.3 12.9C10.3 10.7 10.3 8.4 10.3 6.1C10.3 6 10.3 6 10.3 5.9C10.3 5.8 10.2 5.7 10.1 5.7C9.99999 5.7 9.89999 5.8 9.89999 5.9C9.89999 6 9.89999 6 9.89999 6.1C9.89999 9 9.89999 11.8 9.89999 14.7C9.89999 14.8 9.89999 14.8 9.89999 14.9C9.79999 14.8 9.79999 14.8 9.69999 14.8C9.29999 14.4 8.79999 13.9 8.39999 13.5C8.29999 13.4 8.19999 13.4 8.09999 13.4C7.99999 13.4 7.89999 13.5 7.89999 13.6C7.89999 13.7 7.89999 13.8 7.99999 13.9C8.29999 14.2 8.59999 14.5 8.89999 14.8C9.19999 15.1 9.49999 15.4 9.89999 15.8C10.1 16 10.2 16 10.3 15.8C10.9 15.2 11.5 14.6 12.2 13.9C12.4 13.7 12.3 13.5 12.1 13.5C12 13.5 11.9 13.6 11.8 13.6C11.4 14 10.9 14.5 10.5 14.9C10.4 14.9 10.3 14.9 10.3 15Z', + d: 'M10.3 15C10.3 14.3 10.3 13.6 10.3 12.9C10.3 10.7 10.3 8.4 10.3 6.1C10.3 6 10.3 6 10.3 5.9C10.3 5.8 10.2 5.7 10.1 5.7C9.99999 5.7 9.89999 5.8 9.89999 5.9C9.89999 6 9.89999 6 9.89999 6.1C9.89999 9 9.89999 11.8 9.89999 14.7C9.89999 14.8 9.89999 14.8 9.89999 14.9C9.79999 14.8 9.79999 14.8 9.69999 14.8C9.29999 14.4 8.79999 13.9 8.39999 13.5C8.29999 13.4 8.19999 13.4 8.09999 13.4C7.99999 13.4 7.89999 13.5 7.89999 13.6C7.89999 13.7 7.89999 13.8 7.99999 13.9C8.29999 14.2 8.59999 14.5 8.89999 14.8C9.19999 15.1 9.49999 15.4 9.89999 15.8C10.1 16 10.2 16 10.3 15.8C10.9 15.2 11.5 14.6 12.2 13.9C12.4 13.7 12.3 13.5 12.1 13.5C12 13.5 11.9 13.6 11.8 13.6C11.4 14 10.9 14.5 10.5 14.9C10.4 14.9 10.3 14.9 10.3 15Z', fill: '#424242', stroke: '#424242', strokeWidth: '0.8', - strokeMiterlimit: '10', + strokeMiterlimit: '10' }) ) ), - React.createElement('span', null, '\u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F'), + React.createElement( + 'span', + null, + '\u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F' + ), React.createElement( 'span', { className: 'suggestion-note_arrow' }, @@ -241,30 +164,32 @@ var Note = function Note(customStyles) { 'svg', { width: '18', height: '16', viewBox: '0 0 21 21', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, React.createElement('path', { - d: - 'M2.9 20.1H18.2C19.1 20.1 19.9 19.4 19.9 18.4V3.09999C19.9 2.19999 19.1 1.39999 18.2 1.39999H2.9C1.9 1.39999 1.2 2.19999 1.2 3.09999V18.4C1.2 19.4 2 20.1 2.9 20.1Z', + d: 'M2.9 20.1H18.2C19.1 20.1 19.9 19.4 19.9 18.4V3.09999C19.9 2.19999 19.1 1.39999 18.2 1.39999H2.9C1.9 1.39999 1.2 2.19999 1.2 3.09999V18.4C1.2 19.4 2 20.1 2.9 20.1Z', stroke: '#424242', strokeWidth: '1.122', - strokeMiterlimit: '10', + strokeMiterlimit: '10' }), React.createElement('path', { - d: - 'M14.8 10.6C14.1 10.6 13.4 10.6 12.7 10.6C10.5 10.6 8.2 10.6 5.9 10.6C5.8 10.6 5.8 10.6 5.7 10.6C5.6 10.6 5.5 10.7 5.5 10.8C5.5 10.9 5.6 11 5.7 11C5.8 11 5.8 11 5.9 11C8.8 11 11.6 11 14.5 11C14.6 11 14.6 11 14.7 11C14.6 11.1 14.6 11.1 14.6 11.2C14.2 11.6 13.7 12.1 13.3 12.5C13.2 12.6 13.2 12.7 13.2 12.8C13.2 12.9 13.3 13 13.4 13C13.5 13 13.6 13 13.7 12.9C14 12.6 14.3 12.3 14.6 12C14.9 11.7 15.2 11.4 15.6 11C15.8 10.8 15.8 10.7 15.6 10.6C15 9.99999 14.4 9.39999 13.7 8.69999C13.5 8.49999 13.3 8.59999 13.3 8.79999C13.3 8.89999 13.4 8.99999 13.4 9.09999C13.8 9.49999 14.3 9.99999 14.7 10.4C14.7 10.4 14.7 10.5 14.8 10.6Z', + d: 'M14.8 10.6C14.1 10.6 13.4 10.6 12.7 10.6C10.5 10.6 8.2 10.6 5.9 10.6C5.8 10.6 5.8 10.6 5.7 10.6C5.6 10.6 5.5 10.7 5.5 10.8C5.5 10.9 5.6 11 5.7 11C5.8 11 5.8 11 5.9 11C8.8 11 11.6 11 14.5 11C14.6 11 14.6 11 14.7 11C14.6 11.1 14.6 11.1 14.6 11.2C14.2 11.6 13.7 12.1 13.3 12.5C13.2 12.6 13.2 12.7 13.2 12.8C13.2 12.9 13.3 13 13.4 13C13.5 13 13.6 13 13.7 12.9C14 12.6 14.3 12.3 14.6 12C14.9 11.7 15.2 11.4 15.6 11C15.8 10.8 15.8 10.7 15.6 10.6C15 9.99999 14.4 9.39999 13.7 8.69999C13.5 8.49999 13.3 8.59999 13.3 8.79999C13.3 8.89999 13.4 8.99999 13.4 9.09999C13.8 9.49999 14.3 9.99999 14.7 10.4C14.7 10.4 14.7 10.5 14.8 10.6Z', fill: '#424242', stroke: '#424242', strokeWidth: '0.8', - strokeMiterlimit: '10', + strokeMiterlimit: '10' }) ) ), - React.createElement('span', null, '\u043F\u043E\u0434\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430') + React.createElement( + 'span', + null, + '\u043F\u043E\u0434\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430' + ) ); }; var renderCustomActions = function renderCustomActions(_ref2, muteEventHandler, onBlur) { var customActions = _ref2.customActions, - customStyles = _ref2.customStyles, - suggestions = _ref2.suggestions; + customStyles = _ref2.customStyles, + suggestions = _ref2.suggestions; if (!customActions) return []; @@ -272,86 +197,65 @@ var renderCustomActions = function renderCustomActions(_ref2, muteEventHandler, // ToDo: @remove in >= 1.3.5 if (!(customActions instanceof Function)) { - console.warn( - '\x1b[31m' + - '\n \u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E\n \u2502 react-dadata-box@1.3.4 \u2502\n \u2502 *** DEPRECATION WARNING **** \u2502\n \u2502 at v1.3.5 will be deprecated variant to place customActions \u2502\n \u2502 as React.Element it must be placed only as function that \u2502\n \u2502 returns React.Element and take suggestions as argument \u2502\n \u2502 see more in project README.md \u2502\n \u2502 https://github.com/orbita-center/react-dadata-box \u2502\n \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F\n ' + - '\x1b[0m' - ); + console.warn('\x1b[31m' + '\n \u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E\n \u2502 react-dadata-box@1.3.4 \u2502\n \u2502 *** DEPRECATION WARNING **** \u2502\n \u2502 at v1.3.5 will be deprecated variant to place customActions \u2502\n \u2502 as React.Element it must be placed only as function that \u2502\n \u2502 returns React.Element and take suggestions as argument \u2502\n \u2502 see more in project README.md \u2502\n \u2502 https://github.com/orbita-center/react-dadata-box \u2502\n \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F\n ' + '\x1b[0m'); } actions = actions instanceof Array ? actions : actions ? [actions] : false; - return actions && actions.length - ? [React.createElement('hr', { key: 'custom-actions-line', className: 'actions-delimiter' })].concat( - actions.map(function (node) { - return React.createElement( - 'div', - _extends( - { - key: fakeRandomKey(), - onMouseDown: muteEventHandler, - onClick: onBlur, - }, - getStylingProps('react-dadata__custom-action', customStyles) - ), - node - ); - }) - ) - : false; + return actions && actions.length ? [React.createElement('hr', { key: 'custom-actions-line', className: 'actions-delimiter' })].concat(actions.map(function (node) { + return React.createElement( + 'div', + _extends({ + key: fakeRandomKey(), + onMouseDown: muteEventHandler, + onClick: onBlur + }, getStylingProps('react-dadata__custom-action', customStyles)), + node + ); + })) : false; }; var SuggestionsList = function SuggestionsList(_ref3) { var _ref3$actions = _ref3.actions, - actions = _ref3$actions === undefined ? [] : _ref3$actions, - customStyles = _ref3.customStyles, - onSuggestionClick = _ref3.onSuggestionClick, - query = _ref3.query, - _ref3$showNote = _ref3.showNote, - showNote = _ref3$showNote === undefined ? true : _ref3$showNote, - suggestionIndex = _ref3.suggestionIndex, - suggestions = _ref3.suggestions, - type = _ref3.type; - - return ( - !!(suggestions.length || actions.length) && - React.createElement( - 'div', - getStylingProps('react-dadata__suggestions', customStyles), - showNote && React.createElement(Note, null), - suggestions.map(function (_ref4, index) { - var value = _ref4.value, + actions = _ref3$actions === undefined ? [] : _ref3$actions, + customStyles = _ref3.customStyles, + onSuggestionClick = _ref3.onSuggestionClick, + query = _ref3.query, + _ref3$showNote = _ref3.showNote, + showNote = _ref3$showNote === undefined ? true : _ref3$showNote, + suggestionIndex = _ref3.suggestionIndex, + suggestions = _ref3.suggestions, + type = _ref3.type; + + return !!(suggestions.length || actions.length) && React.createElement( + 'div', + getStylingProps('react-dadata__suggestions', customStyles), + showNote && React.createElement(Note, null), + suggestions.map(function (_ref4, index) { + var value = _ref4.value, data = _ref4.data; - return React.createElement( - 'div', - _extends( - { - key: fakeRandomKey(), - onMouseDown: function onMouseDown() { - onSuggestionClick(index); - }, - }, - getStylingProps( - 'react-dadata__suggestion', - customStyles, - index === suggestionIndex && 'react-dadata__suggestion--current' - ) - ), - React.createElement(_reactHighlightWords2.default, { - highlightClassName: 'react-dadata--highlighted', - searchWords: getHighlightWords(query), - textToHighlight: value, - autoEscape: true, - }), - (type === 'party' || type === 'bank') && React.createElement(SuggestionInfo, { data: data, type: type }) - ); - }), - actions - ) + return React.createElement( + 'div', + _extends({ + key: fakeRandomKey(), + onMouseDown: function onMouseDown() { + onSuggestionClick(index); + } + }, getStylingProps('react-dadata__suggestion', customStyles, index === suggestionIndex && 'react-dadata__suggestion--current')), + React.createElement(_reactHighlightWords2.default, { + highlightClassName: 'react-dadata--highlighted', + searchWords: getHighlightWords(query), + textToHighlight: value, + autoEscape: true + }), + (type === 'party' || type === 'bank') && React.createElement(SuggestionInfo, { data: data, type: type }) + ); + }), + actions ); }; -var ReactDaDataBox = (function (_React$PureComponent) { +var ReactDaDataBox = function (_React$PureComponent) { _inherits(ReactDaDataBox, _React$PureComponent); function ReactDaDataBox() { @@ -365,43 +269,27 @@ var ReactDaDataBox = (function (_React$PureComponent) { args[_key] = arguments[_key]; } - return ( - (_ret = - ((_temp = - ((_this = _possibleConstructorReturn( - this, - (_ref5 = ReactDaDataBox.__proto__ || Object.getPrototypeOf(ReactDaDataBox)).call.apply( - _ref5, - [this].concat(args) - ) - )), - _this)), - _initialiseProps.call(_this), - _temp)), - _possibleConstructorReturn(_this, _ret) - ); + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref5 = ReactDaDataBox.__proto__ || Object.getPrototypeOf(ReactDaDataBox)).call.apply(_ref5, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), _possibleConstructorReturn(_this, _ret); } - _createClass(ReactDaDataBox, [ - { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - // Cancel all subscriptions and asynchronous tasks - clearTimeout(this.debounceTimer); - this.xhr.abort(); - }, - }, - { - key: 'render', - value: function render() { - var _state = this.state, + _createClass(ReactDaDataBox, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + // Cancel all subscriptions and asynchronous tasks + clearTimeout(this.debounceTimer); + this.xhr.abort(); + } + }, { + key: 'render', + value: function render() { + var _state = this.state, inputFocused = _state.inputFocused, query = _state.query, showSuggestions = _state.showSuggestions, suggestionIndex = _state.suggestionIndex, suggestions = _state.suggestions, type = _state.type; - var _props = this.props, + var _props = this.props, allowClear = _props.allowClear, autocomplete = _props.autocomplete, className = _props.className, @@ -413,57 +301,48 @@ var ReactDaDataBox = (function (_React$PureComponent) { showNote = _props.showNote, style = _props.style; - var showSuggestionsList = inputFocused && showSuggestions; - - var inputConfig = { - autoComplete: (autocomplete === 'on' && autocomplete) || 'off', - className: 'react-dadata__input' + (allowClear ? ' react-dadata__input-clearable' : ''), - onBlur: this.onInputBlur, - onChange: this.onInputChange, - onFocus: this.onInputFocus, - onKeyDown: this.onKeyPress, - placeholder: placeholder, - value: query, - }; - return React.createElement( - 'div', - { className: 'react-dadata react-dadata__container ' + className, style: style }, - customInput(inputConfig), - allowClear && - query && - React.createElement( - 'span', - { className: 'react-dadata__input-suffix', onClick: this.clear }, - React.createElement('i', { className: 'react-dadata__icon react-dadata__icon-clear' }) - ), - (showSuggestionsList || forceOpenList) && - React.createElement(SuggestionsList, { - actions: - customActions && - renderCustomActions( - { - customActions: customActions, - customStyles: customStyles, - suggestions: suggestions, - }, - this.muteEventHandler, - this.onInputBlur - ), - customStyles: customStyles, - suggestions: suggestions, - suggestionIndex: suggestionIndex, - query: query, - type: type, - showNote: showNote, - onSuggestionClick: this.onSuggestionClick, - }) - ); - }, - }, - ]); + + var showSuggestionsList = inputFocused && showSuggestions; + + var inputConfig = { + autoComplete: autocomplete === 'on' && autocomplete || 'off', + className: 'react-dadata__input' + (allowClear ? ' react-dadata__input-clearable' : ''), + onBlur: this.onInputBlur, + onChange: this.onInputChange, + onFocus: this.onInputFocus, + onKeyDown: this.onKeyPress, + placeholder: placeholder, + value: query + }; + return React.createElement( + 'div', + { className: 'react-dadata react-dadata__container ' + className, style: style }, + customInput(inputConfig), + allowClear && query && React.createElement( + 'span', + { className: 'react-dadata__input-suffix', onClick: this.clear }, + React.createElement('i', { className: 'react-dadata__icon react-dadata__icon-clear' }) + ), + (showSuggestionsList || forceOpenList) && React.createElement(SuggestionsList, { + actions: customActions && renderCustomActions({ + customActions: customActions, + customStyles: customStyles, + suggestions: suggestions + }, this.muteEventHandler, this.onInputBlur), + customStyles: customStyles, + suggestions: suggestions, + suggestionIndex: suggestionIndex, + query: query, + type: type, + showNote: showNote, + onSuggestionClick: this.onSuggestionClick + }) + ); + } + }]); return ReactDaDataBox; -})(React.PureComponent); +}(React.PureComponent); ReactDaDataBox.displayName = 'ReactDaDataBox'; @@ -477,20 +356,16 @@ var _initialiseProps = function _initialiseProps() { showSuggestions: true, suggestionIndex: 0, suggestions: [], - type: this.props.type || 'address', + type: this.props.type || 'address' }; - this.xhr = new XMLHttpRequest(); this.componentDidMount = function () { + _this2.xhr = new XMLHttpRequest(); if (_this2.props.query || _this2.props.silentQuery) { _this2.fetchSuggestions(null, function () { if (_this2.props.silentInit) { var forceSelect = _this2.props.silentInit(_this2.state.suggestions); - if ( - forceSelect !== undefined && - typeof forceSelect === 'number' && - forceSelect < _this2.state.suggestions.length - ) { + if (forceSelect !== undefined && typeof forceSelect === 'number' && forceSelect < _this2.state.suggestions.length) { _this2.selectSuggestion(forceSelect); } } @@ -536,6 +411,7 @@ var _initialiseProps = function _initialiseProps() { this.onInputChange = function (event) { var value = event.target.value; + _this2.setState({ query: value, showSuggestions: true }, function () { _this2.debounce(_this2.fetchSuggestions, _this2.props.debounce)({ inputFocused: true, showSuggestions: true }); }); @@ -545,8 +421,9 @@ var _initialiseProps = function _initialiseProps() { this.onKeyPress = function (event) { var _state2 = _this2.state, - suggestionIndex = _state2.suggestionIndex, - suggestions = _state2.suggestions; + suggestionIndex = _state2.suggestionIndex, + suggestions = _state2.suggestions; + if (event.which === 40 && suggestionIndex < suggestions.length - 1) { // Arrow down @@ -577,12 +454,13 @@ var _initialiseProps = function _initialiseProps() { var type = _this2.state.type; var _props2 = _this2.props, - city = _props2.city, - customEndpoint = _props2.customEndpoint; + city = _props2.city, + customEndpoint = _props2.customEndpoint; + var payload = { query: _this2.state.query || _this2.props.silentQuery, - count: _this2.props.count || 10, + count: _this2.props.count || 10 }; if (city && type === 'address') { @@ -592,12 +470,7 @@ var _initialiseProps = function _initialiseProps() { } if (_this2.props.payloadModifier) { - payload = - _this2.props.payloadModifier instanceof Function - ? _this2.props.payloadModifier(payload) - : _this2.props.payloadModifier instanceof Object - ? Object.assign(payload, _this2.props.payloadModifier) - : payload; + payload = _this2.props.payloadModifier instanceof Function ? _this2.props.payloadModifier(payload) : _this2.props.payloadModifier instanceof Object ? Object.assign(payload, _this2.props.payloadModifier) : payload; } _this2.xhr.open('POST', backslashTailFix(buildTargetURI(customEndpoint)) + '/' + type); @@ -613,22 +486,16 @@ var _initialiseProps = function _initialiseProps() { if (_this2.xhr.status === 200) { var _JSON$parse = JSON.parse(_this2.xhr.response), - suggestions = _JSON$parse.suggestions; + suggestions = _JSON$parse.suggestions; var stateAdditions = setStateAdditional || {}; if (suggestions && suggestions.length) { - _this2.setState( - _extends({}, stateAdditions, { - suggestions: suggestions, - suggestionIndex: 0, - showSuggestions: - _this2.state.inputFocused || stateAdditions.inputFocused - ? Boolean(stateAdditions.showSuggestions) - : false, - }), - callback - ); + _this2.setState(_extends({}, stateAdditions, { + suggestions: suggestions, + suggestionIndex: 0, + showSuggestions: _this2.state.inputFocused || stateAdditions.inputFocused ? Boolean(stateAdditions.showSuggestions) : false + }), callback); } else if (_this2.props.onIdleOut) { _this2.props.onIdleOut(_this2.state.query); } @@ -645,7 +512,7 @@ var _initialiseProps = function _initialiseProps() { this.clear = function () { _this2.setState({ query: '', - showSuggestions: false, + showSuggestions: false }); _this2.props.onChange && _this2.props.onChange(defaultSuggestion); }; @@ -655,9 +522,10 @@ var _initialiseProps = function _initialiseProps() { var suggestions = _this2.state.suggestions; var value = suggestions[index].value; + _this2.setState({ query: value, - showSuggestions: showSuggestions, + showSuggestions: showSuggestions }); if (_this2.props.onChange) { @@ -678,22 +546,14 @@ ReactDaDataBox.propTypes = { className: _propTypes2.default.string, count: _propTypes2.default.number, customActions: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]), - customEndpoint: _propTypes2.default.oneOfType([ - _propTypes2.default.object, - _propTypes2.default.shape, - _propTypes2.default.string, - ]), + customEndpoint: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.shape, _propTypes2.default.string]), customInput: _propTypes2.default.func, customStyles: _propTypes2.default.object, debounce: _propTypes2.default.number, forceOpenList: _propTypes2.default.bool, onChange: _propTypes2.default.func, onIdleOut: _propTypes2.default.func, - payloadModifier: _propTypes2.default.oneOfType([ - _propTypes2.default.object, - _propTypes2.default.shape, - _propTypes2.default.func, - ]), + payloadModifier: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.shape, _propTypes2.default.func]), placeholder: _propTypes2.default.string, query: _propTypes2.default.string, showNote: _propTypes2.default.bool, @@ -701,15 +561,15 @@ ReactDaDataBox.propTypes = { silentQuery: _propTypes2.default.string, style: _propTypes2.default.objectOf(_propTypes2.default.string), token: _propTypes2.default.string.isRequired, - type: _propTypes2.default.string, + type: _propTypes2.default.string }; ReactDaDataBox.defaultProps = { type: 'address', customInput: function customInput(params) { return React.createElement('input', params); - }, + } }; exports.ReactDaDataBox = ReactDaDataBox; -exports.default = ReactDaDataBox; +exports.default = ReactDaDataBox; \ No newline at end of file diff --git a/src/index.js b/src/index.js index ba23ff9..c1b99c5 100755 --- a/src/index.js +++ b/src/index.js @@ -220,10 +220,11 @@ class ReactDaDataBox extends React.PureComponent { static displayName = 'ReactDaDataBox'; - xhr = new XMLHttpRequest(); + xhr; debounceTimer; componentDidMount = () => { + this.xhr = new XMLHttpRequest(); if (this.props.query || this.props.silentQuery) { this.fetchSuggestions(null, () => { if (this.props.silentInit) { From da1e4c06e7115eb18254535c7d6e4a9db82517cc Mon Sep 17 00:00:00 2001 From: ruvata34 Date: Sun, 28 Aug 2022 22:26:31 +0300 Subject: [PATCH 10/10] v1.3.7 Release notes: - [x] closes #62: add 'country' fetch (documentation [rus/eng] + typings) - [x] closes #61: documentation update fro customAction & onChange with modern SpecificQueryModeResponse type - [x] closes #63: using with next.js; custom deploy on dist-tag _'next-js'_ (version with unbundled css & excluded css import) - [x] closes #68: update lower limit or react & react-dom to 17.0.2 (because node:alpine-lts is stabled to 17.x major) - [x] closes #67: move xhr initialization to componentDidMount (for SSR compatibility) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f1841f8..3aa7b76 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dadata-box", - "version": "1.3.6", + "version": "1.3.7", "description": "Компонент для работы с DaData", "main": "dist/index.js", "style": "dist/index.css",