From a0bc64e741d5f9328d40076ce1cca87ab2ce285c Mon Sep 17 00:00:00 2001 From: Vitaly Baev Date: Wed, 23 Aug 2017 17:17:40 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=20=D1=81=D0=B2=D0=BE=D0=B9=D1=81=D1=82=D0=B2=D0=BE?= =?UTF-8?q?=20autoload?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/index.d.ts | 10 +++++++++- dist/index.js | 18 ++++++++++++------ license | 2 +- readme.md | 44 ++++++++++++++++++++++++++++++++++++++++++-- src/index.tsx | 25 +++++++++++++++++++------ 5 files changed, 83 insertions(+), 16 deletions(-) diff --git a/dist/index.d.ts b/dist/index.d.ts index 8f4af72..b54e5ec 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -16,6 +16,7 @@ export declare namespace ReactDadata { token: string; placeholder?: string; query?: string; + autoload?: boolean; onChange?: (suggestion: DadataSuggestion) => void; } interface State { @@ -28,9 +29,16 @@ export declare namespace ReactDadata { } } export declare class ReactDadata extends React.Component { + /** + * HTML-input + */ protected textInput: HTMLInputElement; + /** + * XMLHttpRequest instance + */ protected xhr: XMLHttpRequest; constructor(props: ReactDadata.Props); + componentDidMount(): void; onInputFocus: () => void; onInputBlur: () => void; onInputChange: (event: React.ChangeEvent) => void; @@ -38,7 +46,7 @@ export declare class ReactDadata extends React.Component void; onSuggestionClick: (index: number, event: React.MouseEvent) => void; selectSuggestion: (index: number) => void; - setCursorToEnd: (ele: any) => void; + setCursorToEnd: (element: any) => void; getHighlightWords: () => string[]; render(): JSX.Element; } diff --git a/dist/index.js b/dist/index.js index b17f9be..7c2b0e6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -100,13 +100,13 @@ var ReactDadata = (function (_super) { } } }; - _this.setCursorToEnd = function (ele) { - var valueLength = ele.value.length; - if (ele.selectionStart || ele.selectionStart == '0') { + _this.setCursorToEnd = function (element) { + var valueLength = element.value.length; + if (element.selectionStart || element.selectionStart == '0') { // Firefox/Chrome - ele.selectionStart = valueLength; - ele.selectionEnd = valueLength; - ele.focus(); + element.selectionStart = valueLength; + element.selectionEnd = valueLength; + element.focus(); } }; _this.getHighlightWords = function () { @@ -127,6 +127,12 @@ var ReactDadata = (function (_super) { }; return _this; } + ReactDadata.prototype.componentDidMount = function () { + if (this.props.autoload && this.state.query) { + this.fetchSuggestions(); + } + }; + ; ReactDadata.prototype.render = function () { var _this = this; return (React.createElement("div", { className: "react-dadata react-dadata__container" }, diff --git a/license b/license index bcf31fd..9e06a53 100644 --- a/license +++ b/license @@ -1,6 +1,6 @@ The MIT License -Copyright (c) 2016 Vitaly Baev. vitalybaev.ru +Copyright (c) 2016 Vitaly Baev , vitalybaev.ru Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/readme.md b/readme.md index 5774d46..410e297 100644 --- a/readme.md +++ b/readme.md @@ -1,11 +1,51 @@ # React Dadata React компонент для подсказок адресов с помощью сервиса DaData.ru -## Пример +### Пример ```javascript import ReactDadata from 'react-dadata'; // ... -``` \ No newline at end of file +``` + +### Свойства + +| Свойство | Обязательный | Тип | Описание | +| ------------- | ------------- | ------------- | ------------- | +| token | Да | string | Авторизационный токен DaData.ru | +| placeholder | Нет | string | Текст placeholder | +| query | Нет | string | Начальное значение поля ввода | +| autoload | Нет | boolean | Если `true`, то запрос на получение подсказок будет инициирован в фоне сразу, после монтирования компонента | +| onChange | Нет | function(suggestion: ReactDadata.DadataSuggestion) | Функция, вызываемая при выборе подсказки | + +### Лицензия + +``` +The MIT License + +Copyright (c) 2016 Vitaly Baev , vitalybaev.ru + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +``` + +### TODO +* Тесты +* Доработка функционала \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 00240cb..0c5ed93 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,7 @@ export namespace ReactDadata { token: string placeholder?: string query?: string + autoload?: boolean onChange?: (suggestion: DadataSuggestion) => void } @@ -34,8 +35,14 @@ export namespace ReactDadata { export class ReactDadata extends React.Component { + /** + * HTML-input + */ protected textInput: HTMLInputElement; + /** + * XMLHttpRequest instance + */ protected xhr: XMLHttpRequest; constructor(props: ReactDadata.Props) { @@ -51,6 +58,12 @@ export class ReactDadata extends React.Component { this.setState({inputFocused: true}); if (this.state.suggestions.length == 0) { @@ -142,13 +155,13 @@ export class ReactDadata extends React.Component { - const valueLength = ele.value.length; - if (ele.selectionStart || ele.selectionStart == '0') { + setCursorToEnd = (element) => { + const valueLength = element.value.length; + if (element.selectionStart || element.selectionStart == '0') { // Firefox/Chrome - ele.selectionStart = valueLength; - ele.selectionEnd = valueLength; - ele.focus(); + element.selectionStart = valueLength; + element.selectionEnd = valueLength; + element.focus(); } };