31 |
37 | );
38 | };
39 | }
40 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/variants/party_belarus/party-belarus-types.ts:
--------------------------------------------------------------------------------
1 | import type { DaDataSuggestion, Nullable } from '../../core-types';
2 |
3 | /**
4 | * Типы для подсказок по организациям в Беларуси 🇧🇾
5 | */
6 |
7 | export type DaDataPartyBelarusType = 'LEGAL' | 'INDIVIDUAL';
8 |
9 | export type DaDataPartyBelarusStatus =
10 | | 'ACTIVE'
11 | | 'LIQUIDATING'
12 | | 'LIQUIDATED'
13 | | 'REORGANIZING'
14 | | 'BANKRUPT'
15 | | 'SUSPENDED';
16 |
17 | export interface DaDataPartyBelarus {
18 | unp: string;
19 | registration_date: string;
20 | removal_date: Nullable
49 |
55 | );
56 | };
57 | }
58 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/react-dadata.css:
--------------------------------------------------------------------------------
1 | .react-dadata__container {
2 | position: relative;
3 | }
4 |
5 | .react-dadata__input {
6 | display: block;
7 | box-sizing: border-box;
8 | height: 38px;
9 | border: 1px solid #ccc;
10 | border-radius: 4px;
11 | width: 100%;
12 | font-size: 16px;
13 | padding: 0 10px;
14 | outline: none;
15 | }
16 |
17 | .react-dadata__input:focus {
18 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 124, 214, 0.3);
19 | border-color: #007CD6;
20 | }
21 |
22 | .react-dadata__suggestions {
23 | position: absolute;
24 | list-style: none;
25 | padding: 0;
26 | margin: 0;
27 | z-index: 10;
28 | background-color: #fff;
29 | box-shadow: 0 1px 6px 3px rgba(0,0,0,.1);
30 | top: calc(100% + 8px);
31 | border-radius: 4px;
32 | overflow: hidden;
33 | left: 0;
34 | right: 0;
35 | text-align: left;
36 | }
37 |
38 | .react-dadata__suggestion-note {
39 | font-size: 14px;
40 | color: #828282;
41 | padding: 10px 10px 5px 10px;
42 | }
43 |
44 | .react-dadata__suggestion {
45 | font-size: 15px;
46 | padding: 7px 10px;
47 | cursor: pointer;
48 | box-sizing: border-box;
49 | width: 100%;
50 | display: block;
51 | background: none;
52 | border: none;
53 | text-align: left;
54 | }
55 |
56 | .react-dadata__suggestion--line-through {
57 | text-decoration: line-through;
58 | }
59 |
60 | .react-dadata__suggestion-subtitle {
61 | font-size: 14px;
62 | margin-top: 4px;
63 | color: #777777;
64 | }
65 |
66 | .react-dadata__suggestion-subtitle-item {
67 | display: inline-block;
68 | margin-right: 16px;
69 | margin-bottom: 4px;
70 | }
71 |
72 | .react-dadata__suggestion-subtitle-item:last-child {
73 | margin-right: 0;
74 | }
75 |
76 | .react-dadata__suggestion--current {
77 | background-color: rgba(0, 124, 214, 0.15);
78 | }
79 |
80 | .react-dadata__suggestion:hover {
81 | background-color: rgba(0, 124, 214, 0.1);
82 | }
83 |
84 | .react-dadata mark {
85 | background: none;
86 | }
87 |
88 | .react-dadata--highlighted {
89 | color: #0094FF;
90 | }
91 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/http-cache/default-cache.ts:
--------------------------------------------------------------------------------
1 | import { HttpCache } from './abstract';
2 | import type { HttpCacheEntry } from './types';
3 |
4 | const minute = 60000;
5 |
6 | export class DefaultHttpCache extends HttpCache {
7 | private static sharedInstance: DefaultHttpCache;
8 |
9 | private _map = new Map
61 |
80 | );
81 | };
82 | }
83 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/__tests__/default-http-cache.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import { DefaultHttpCache as Cache } from '../http-cache';
3 |
4 | describe('DefaultHttpCache', () => {
5 | const createCacheWithInfinityTtl = () => {
6 | const cache = new Cache();
7 | cache.ttl = Number.POSITIVE_INFINITY;
8 | return cache;
9 | };
10 |
11 | it('should return the same singleton instance on every call', () => {
12 | expect(Cache.shared).toBeInstanceOf(Cache);
13 | expect(Cache.shared).toBe(Cache.shared);
14 | expect(new Cache()).not.toBe(Cache.shared);
15 | });
16 |
17 | it('should serialize http payload to a string', () => {
18 | const cache = createCacheWithInfinityTtl();
19 | const payload = {
20 | method: 'GET',
21 | headers: { hello: 'world' },
22 | body: { hi: 'there' },
23 | url: 'https://example.com',
24 | };
25 | const key = cache.serializeCacheKey(payload);
26 | expect(typeof key).toBe('string');
27 | expect(cache.serializeCacheKey(payload)).toBe(key);
28 | expect(
29 | cache.serializeCacheKey({
30 | ...payload,
31 | url: 'https://example2.com',
32 | }),
33 | ).not.toBe(key);
34 | expect(cache.serializeCacheKey({ ...payload })).toBe(key);
35 | });
36 |
37 | it('should update ttl only if one is valid', () => {
38 | const cache = new Cache();
39 | cache.ttl = 0;
40 | expect(cache.ttl).toBe(0);
41 | cache.ttl = Number.POSITIVE_INFINITY;
42 | expect(cache.ttl).toBe(Number.POSITIVE_INFINITY);
43 | cache.ttl = 10;
44 | expect(cache.ttl).toBe(10);
45 | cache.ttl = -1;
46 | expect(cache.ttl).toBe(10);
47 | cache.ttl = true as unknown as number;
48 | expect(cache.ttl).toBe(10);
49 | });
50 |
51 | it('should insert new cache entries', () => {
52 | const cache = createCacheWithInfinityTtl();
53 | expect(cache.set('key', 1).get('key')).toBe(1);
54 | expect(cache.set('key2', { hello: 'world' }).get('key2')).toStrictEqual({ hello: 'world' });
55 | });
56 |
57 | it('should delete cache entries', () => {
58 | const cache = createCacheWithInfinityTtl();
59 | cache.set('key2', 2);
60 | expect(cache.set('key', 1).delete('key').get('key')).toBeNull();
61 | expect(cache.get('key2')).toBe(2);
62 | });
63 |
64 | it('should clear cache', () => {
65 | const cache = createCacheWithInfinityTtl();
66 | cache.set('key', 1).set('key2', 2);
67 | expect(cache.size).toBe(2);
68 | cache.reset();
69 | expect(cache.size).toBe(0);
70 | });
71 |
72 | it('should delete cache entries after their expiration', () =>
73 | new Promise
62 |
68 |
69 | {suggestion.data.address_ru && (
70 |
79 |
71 |
77 | )}
78 |
60 |
84 | );
85 | };
86 | }
87 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/variants/party_russia/party-russia-types.ts:
--------------------------------------------------------------------------------
1 | import type { DaDataSuggestion, Nullable } from '../../core-types';
2 | import type { DaDataAddress } from '../address/address-types';
3 |
4 | export type DaDataPartyType = 'LEGAL' | 'INDIVIDUAL';
5 |
6 | export type DaDataPartyStatus = 'ACTIVE' | 'LIQUIDATING' | 'LIQUIDATED' | 'REORGANIZING' | 'BANKRUPT';
7 |
8 | export type DaDataPartyBranchType = 'MAIN' | 'BRANCH';
9 |
10 | /**
11 | * @see https://dadata.ru/api/suggest/party/#response
12 | */
13 | interface DaDataPartyAddress
14 | extends Omit
65 |
71 |
72 | {suggestion.data.bic &&
83 | {suggestion.data.bic}
}
73 | {suggestion.data.address?.value && (
74 |
75 |
81 | )}
82 |
68 |
87 | );
88 | };
89 | }
90 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/variants/party_russia/party-russia-suggestions.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from 'react';
2 | import { type BaseProps, BaseSuggestions } from '../../base-suggestions';
3 | import { HighlightWords } from '../../highlight-words';
4 | import type { DaDataParty, DaDataPartyStatus, DaDataPartySuggestion, DaDataPartyType } from './party-russia-types';
5 |
6 | // biome-ignore lint/suspicious/noExplicitAny:
69 |
75 |
76 | {suggestion.data.address && (
77 |
86 |
78 |
84 | )}
85 |
68 |
92 | );
93 | };
94 | }
95 |
--------------------------------------------------------------------------------
/packages/example/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import './App.css';
3 | import 'react-dadata/src/react-dadata.css';
4 | import {
5 | AddressSuggestions,
6 | PartyBelarusSuggestions,
7 | PartyKazakhstanSuggestions,
8 | PartySuggestions,
9 | } from '../../react-dadata/src';
10 |
11 | const DADATA_TOKEN = '3c2e964517d7358776e07d7d699cc2b0626dac54';
12 |
13 | function App() {
14 | if (!DADATA_TOKEN) {
15 | return
73 |
79 |
80 | {suggestion.data.inn &&
91 | {suggestion.data.inn}
}
81 | {suggestion.data.address?.value && (
82 |
83 |
89 | )}
90 | Пожалуйста, установите ваш API токен для DaData в `example/src/App.tsx:5`
;
16 | }
17 |
18 | const [suggestionsType, setSuggestionsType] = useState<
19 | 'address' | 'party_russia' | 'party_belarus' | 'party_kazakhstan'
20 | >('address');
21 |
22 | return (
23 |
24 |
95 | );
96 | }
97 |
98 | export default App;
99 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/variants/address/address-types.ts:
--------------------------------------------------------------------------------
1 | import type { DaDataSuggestion, Nullable } from '../../core-types';
2 |
3 | export interface DaDataAddressMetro {
4 | name: string;
5 | line: string;
6 | distance: number;
7 | }
8 |
9 | export type DaDataAddressBeltwayHit = 'IN_MKAD' | 'OUT_MKAD' | 'IN_KAD' | 'OUT_KAD';
10 |
11 | export interface DaDataAddress {
12 | area: Nullable
25 |
70 | {suggestionsType === 'address' && (
71 |
26 | setSuggestionsType('address')}
33 | />
34 |
35 |
36 |
37 | setSuggestionsType('party_russia')}
44 | />
45 |
46 |
47 |
48 | setSuggestionsType('party_belarus')}
55 | />
56 |
57 |
58 |
59 | setSuggestionsType('party_kazakhstan')}
66 | />
67 |
68 |
69 |
389 |
438 | );
439 | }
440 | }
441 |
--------------------------------------------------------------------------------
/packages/react-dadata/src/__tests__/AddressSuggestions.test.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | cleanup,
3 | findAllByRole,
4 | fireEvent,
5 | getAllByRole,
6 | queryAllByRole,
7 | render,
8 | screen,
9 | waitFor,
10 | } from '@testing-library/react';
11 | import userEvent from '@testing-library/user-event';
12 | import { http, HttpResponse } from 'msw';
13 | import { type SetupServerApi, setupServer } from 'msw/node';
14 | import React, { createRef, forwardRef, type HTMLProps, type ReactNode } from 'react';
15 | import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
16 | // import { debug } from 'vitest-preview';
17 | import * as requestModule from '../request';
18 | import { AddressSuggestions } from '../variants/address/address-suggestions';
19 | import type { DaDataAddressSuggestion } from '../variants/address/address-types';
20 | import { addressMockKrasnodar, addressMocks, createAddressMock, mockedRequestCalls } from './mocks';
21 |
22 | type RequestLog = {
23 | method: string;
24 | endpoint: string;
25 | data: Record
390 | {
396 | this.textInput = input;
397 | }}
398 | onChange={this.handleInputChange}
399 | onKeyPress={this.handleInputKeyPress}
400 | onKeyDown={this.handleInputKeyDown}
401 | onFocus={this.handleInputFocus}
402 | onBlur={this.handleInputBlur}
403 | />
404 |
405 | {optionsExpanded && (
406 | -
410 | role="listbox"
411 | className={suggestionsClassName || 'react-dadata__suggestions'}
412 | >
413 | {typeof hintText !== 'undefined' && (
414 |
{hintText}
415 | )}
416 | {suggestions.map((suggestion, index) => {
417 | let suggestionClass = suggestionClassName || 'react-dadata__suggestion';
418 | if (index === suggestionIndex) {
419 | suggestionClass += ` ${currentSuggestionClassName || 'react-dadata__suggestion--current'}`;
420 | }
421 | return (
422 |
432 | );
433 | })}
434 | 
44 |
45 | ### Организации
46 |
47 | 
48 |
49 | ### Банки
50 |
51 | 
52 |
53 | ## Установка
54 |
55 | ### pnpm
56 |
57 | ```
58 | pnpm add react-dadata
59 | ```
60 |
61 | ### yarn
62 |
63 | ```
64 | yarn add react-dadata
65 | ```
66 |
67 | ### npm
68 |
69 | ```
70 | npm install react-dadata
71 | ```
72 |
73 | ## Пример использования
74 |
75 | ```jsx
76 | import { AddressSuggestions } from 'react-dadata';
77 | import 'react-dadata/dist/react-dadata.css';
78 |
79 | const [value, setValue] = useState();
80 |
81 |
44 |
45 | ### Организации
46 |
47 |
48 |
49 | ### Банки
50 |
51 |
52 |
53 | ## Установка
54 |
55 | ### pnpm
56 |
57 | ```
58 | pnpm add react-dadata
59 | ```
60 |
61 | ### yarn
62 |
63 | ```
64 | yarn add react-dadata
65 | ```
66 |
67 | ### npm
68 |
69 | ```
70 | npm install react-dadata
71 | ```
72 |
73 | ## Пример использования
74 |
75 | ```jsx
76 | import { AddressSuggestions } from 'react-dadata';
77 | import 'react-dadata/dist/react-dadata.css';
78 |
79 | const [value, setValue] = useState();
80 |
81 |