@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 SKB Kontur
+
+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.

package/README.md

@@ -2,24 +2,17 @@
 
 [![Build Status](https://tc.skbkontur.ru/app/rest/builds/buildType:FrontendInfrastructure_Packages_RunAll/statusIcon)](https://tc.skbkontur.ru/project.html?projectId=FrontendInfrastructure_Packages_ReactUI&tab=projectOverview)
 
-- [Варианты использования](#Варианты-использования)
-  - [Квик-старт](#Квик-старт) **@skbkontur/react-ui** собранная версия библиотеки
-  - [Слоу-старт](#Слоу-старт) **retail-ui** исходники для самостоятельной сборки, для переопределения `.less`-переменных
-- [FAQ](#FAQ)
+- [Как использовать](#как-использовать)
+- [FAQ](#faq)
 
-## <a name="Варианты-использования"></a>Варианты использования
-
-### <a name="Квик-старт"></a>Квик-старт
+### Как использовать
 
 ```bash
 yarn add @skbkontur/react-ui
 ```
 
-И используем компонентики у себя в проекте:
-
-```jsx static
-import Button from '@skbkontur/react-ui/Button';
-import Toast from '@skbkontur/react-ui/Toast';
+```jsx harmony static
+import { Button, Toast } from '@skbkontur/react-ui';
 
 const MyApp = () => (
   <div>
@@ -28,66 +21,9 @@ const MyApp = () => (
 );
 ```
 
-Если ругается, что `regeneratorRuntime` не определен, то необходимо подключить `regenerator-runtime` или `@babel/polyfill`, например в `index.html`
-
-Квик-старт подойдёт, если Вебпак настроен на сборку. Например, вы используете `create-react-app`. В противном случае добавьте в конфиг Вебпака `style-`, `css-` и `file-loader`
-
-### <a name="Слоу-старт"></a>Слоу-старт
-
-```bash
-yarn add retail-ui
-```
-
-Необходимо установить как зависимости и добавить в [конфиг Вебпака](https://webpack.js.org/configuration/) следующие лоадеры:
-
-```js static
-module: {
-  rules: [
-    {
-      test: /\.jsx?$/,
-      use: [
-        {
-          loader: 'babel-loader',
-          options: {
-            presets: ['env', 'react'],
-            plugins: ['proposal-object-rest-spread', 'proposal-class-properties'],
-          },
-        },
-      ],
-      include: /retail-ui/,
-    },
-    {
-      test: /\.less$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: { modules: 'global' },
-        },
-        'less-loader',
-      ],
-    },
-    {
-      test: /\.(png|woff|woff2|eot)$/,
-      use: ['file-loader'],
-    },
-  ];
-}
-```
-
 ### Хотим другой цвет кнопки!
 
-Тут придется юзать слоу-старт. В конфиге нужно указать:
-
-```js static
-resolve: {
-  alias: {
-    'react-ui-theme': path.join(__dirname, 'path-to-my-theme-variables.less')
-  }
-}
-```
-
-Список переменных можно глянуть в `components/variables.less`
+Нужно использовать [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext). Список переменных можно глянуть в [ThemeShowcase](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeShowcase)
 
 ### Глобальные css-стили приложения портят внешний вид контролов
 
@@ -95,39 +31,36 @@ resolve: {
 
 Если нет возможности разобрать легаси, то можно увеличить специфичность селекторов в библиотеке, тогда стили контролов будут приоритетнее стилей из легаси проекта
 
-Специфичность достигается за счет n-кратного повторения css-класса `react-ui` в селекторе стилей. Количество повторений задается через переменную `@specificity-level`, значение по умолчанию равно нулю, то есть по умолчанию css-класс `react-ui` никак ни на что не будет влиять
+Специфичность достигается за счет n-кратного повторения css-класса `react-ui` в селекторе стилей. Количество повторений задается через переменную `specificityLevel`, значение по умолчанию равно нулю, то есть по умолчанию css-класс `react-ui` никак ни на что не будет влиять
 
 Чтобы специфичность заработала в легаси проекте, react-блок, в котором используются компоненты из библиотеки, должен быть обернут в тег с css-классом `react-ui`
 
-Пример настройки специфичности
+Пример настройки специфичности:
 
-```less
-/* ... */
-@specificity-level: 5;
-/* ... */
-```
-
-## <a name="FAQ"></a>FAQ
+```js static
+import { Upgrade } from '@skbkontur/react-ui/lib/Upgrades';
 
-### Сломались стили при использовании css-loader 2.x
+Upgrade.setSpecificityLevel(1);
+```
 
-Во [2-й версии](https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.0), `css-loader` отключили использование `css-modules` по умолчанию.
-**Решение**: В опциях к `css-loader` явно задать `modules: 'global'`.
+Специфичность должна устанавливаться в коде раньше импорта любых компонентов из библиотеки.
 
-### Как использовать retail-ui с storybook 5.x?
+## FAQ
 
-В 5-й версии изменилось [API сторибука для кастомизации настроек webpack](https://github.com/storybooks/storybook/blob/v5.0.0/MIGRATION.md#webpack-config-simplifcation).
-Кроме того был изменен дефолтный webpack конфиг. Это порождает проблемы вида [storybooks/storybook#4891](https://github.com/storybooks/storybook/issues/4891).
-**Решение**: Заменить лоадеры для `css/less`. Например [так](https://github.com/storybooks/storybook/issues/6319#issuecomment-477852640) на свои
+### Отключение анимаций во время тестирования
 
-### Возникает ошибка `Error: Can't resolve 'mask-char-font/font.eot'`
+Анимации в компонентах отключаются любой из следующих переменных окружения:
 
-Ошибка проявляется при использовании `css-loader@1.x` с выставленой опцией `modules`.
-**Решение**: Обновить `css-loader` до 2-й версии или дополнительно указать опцию `url: false`
+```static
+process.env.NODE_ENV === 'test'
+process.env.REACT_UI_TEST
+process.env.REACT_APP_REACT_UI_TEST
+process.env.STORYBOOK_REACT_UI_TEST
+```
 
-### Не могу прокинуть css-класс компонентам. Как кастомизировать?
+### Прокидывание className и style компонентам
 
-Никак.
+Начиная с версии 2.14.0, стало возможным передавать в компоненты свои css-классы для дополнительной стилизации. Однако, не стоит пользоваться этой возможностью для вмешательства во внутренние стили компонентов. Верстка компонентов может быть изменена в любой момент без предупреждения, что приведет к поломке ваших переопределенных стилей.
 
 ### Помощь в развитии
 

package/cjs/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputProps } from '../Input';
+import { Nullable, Override } from '../../typings/utility-types';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+declare function renderItem(item: any): any;
+export interface AutocompleteProps extends CommonProps, Override<InputProps, {
+    /** Функция отрисовки элемента меню */
+    renderItem: (item: string) => React.ReactNode;
+    /** Промис, резолвящий элементы меню */
+    source?: string[] | ((patter: string) => Promise<string[]>);
+    /** Отключает использование портала */
+    disablePortal: boolean;
+    /** Отрисовка тени у выпадающего меню */
+    hasShadow: boolean;
+    /** Выравнивание выпадающего меню */
+    menuAlign: 'left' | 'right';
+    /** Максимальная высота меню */
+    menuMaxHeight: number | string;
+    /** Ширина меню */
+    menuWidth?: number | string;
+    /** Отключить скролл окна, когда меню открыто */
+    preventWindowScroll: boolean;
+    /** Вызывается при изменении `value` */
+    onValueChange: (value: string) => void;
+    /** onBlur */
+    onBlur?: () => void;
+    /** Размер инпута */
+    size: InputProps['size'];
+    /** value */
+    value: string;
+    /**
+     * Текст заголовка выпадающего меню в мобильной версии
+     */
+    mobileMenuHeaderText?: string;
+}> {
+}
+export interface AutocompleteState {
+    items: Nullable<string[]>;
+    selected: number;
+    focused: boolean;
+    isMobileOpened: boolean;
+}
+/**
+ * Стандартный инпут с подсказками.
+ *
+ * Все свойства передаются во внутренний *Input*.
+ */
+export declare class Autocomplete extends React.Component<AutocompleteProps, AutocompleteState> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        /**
+         * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
+         * — *item*.
+         */
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Если передан массив, то совпадения ищутся по этому массиву.
+         *
+         * Если передается функция, то она должна возвращать thenable, который
+         * резолвится уже отфильтрованным массивом. Возвращенный thenable может
+         * иметь метод cancel, который будет вызван при отмене поиска (пользователь
+         * изменил строку поиска, автокомплит потерял фокус).
+         * ```
+         * function(pattern) {
+         *   return service.findAll(pattern);
+         * }
+         * ```
+         */
+        source: PropTypes.Requireable<any[] | ((...args: any[]) => any)>;
+    };
+    static defaultProps: {
+        renderItem: typeof renderItem;
+        size: string;
+        disablePortal: boolean;
+        hasShadow: boolean;
+        menuMaxHeight: number;
+        menuAlign: string;
+        preventWindowScroll: boolean;
+    };
+    state: AutocompleteState;
+    private theme;
+    private isMobileLayout;
+    private opened;
+    private input;
+    private menu;
+    private rootSpan;
+    private mobilePopup;
+    private requestId;
+    private getProps;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    componentDidUpdate(prevProps: AutocompleteProps): void;
+    render(): JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<AutocompleteProps>) => JSX.Element;
+    private renderMenu;
+    private renderMobileMenu;
+    private getItems;
+    private getInputWidth;
+    private handleValueChange;
+    private handleCloseMobile;
+    private handleKeyPressMobile;
+    private handleFocus;
+    private handleBlur;
+    private handleClickOutside;
+    private handleKeyDown;
+    private handleMenuItemClick;
+    private getAnchor;
+    private handleItemClick;
+    private choose;
+    private updateItems;
+    private fireChange;
+    private refInput;
+    private refMenu;
+    private refRootSpan;
+    private refMobilePopup;
+}
+export {};