Skip to content

Commit

Permalink
Merge pull request #956 from gazprom-neft/feat/add-grid
Browse files Browse the repository at this point in the history 
feat(Grid): added component Grid
  • Loading branch information
@gizeasy
gizeasy committed Mar 11, 2021
2 parents 3a4a177 + ccace76 commit 0dd6f86
Show file tree
Hide file tree
Showing 42 changed files with 1,738 additions and 123 deletions.
6 changes: 6 additions & 0 deletions .stylelintrc.js
View file
Expand Up @@ -12,6 +12,12 @@ module.exports = {
'declaration-empty-line-before': ['never', { ignore: ['after-declaration'] }],
'string-quotes': 'single',
'order/order': ['custom-properties', 'declarations', 'rules'],
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['define-mixin', 'mixin'],
},
],
'order/properties-order': [
{
noEmptyLineBetween: true,
Expand Down
1 change: 1 addition & 0 deletions build.config.js
View file
Expand Up @@ -18,6 +18,7 @@ module.exports = {
postcssConfig: 'postcss.config.js',
distPath: './dist',
postcss: [
require('postcss-mixins')({}),
require('postcss-simple-vars')({ silent: true }),
require('postcss-color-function')({}),
require('autoprefixer')({}),
Expand Down
3 changes: 2 additions & 1 deletion build.tsconfig.json
View file
Expand Up @@ -21,7 +21,8 @@
"noImplicitThis": true,
"noUnusedLocals": true,
"pretty": true,
"removeComments": false
"removeComments": false,
"downlevelIteration": true
},
"include": ["./src/**/*"],
"exclude": [
Expand Down
28 changes: 0 additions & 28 deletions builder/build.config.js
View file

This file was deleted.

3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -14,7 +14,7 @@
"compute-scroll-into-view": "^1.0.14",
"react-textarea-autosize": "^7.1.2",
"react-transition-group": "^4.4.1",
"tslib": "^1.13.0"
"tslib": "^2.1.0"
},
"peerDependencies": {
"react": "^16.8.6",
Expand Down Expand Up @@ -143,6 +143,7 @@
"postcss-calc": "^7.0.1",
"postcss-color-function": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-mixins": "6.2.3",
"postcss-nested": "^4.1.2",
"postcss-simple-vars": "^5.0.2",
"prettier": "^1.18.2",
Expand Down
1 change: 1 addition & 0 deletions postcss.config.js
View file
@@ -1,5 +1,6 @@
module.exports = {
plugins: {
'postcss-mixins': {},
'autoprefixer': {},
'postcss-import': {},
'postcss-simple-vars': {},
Expand Down
59 changes: 29 additions & 30 deletions src/components/ContextMenu/__stories__/ContextMenu.mdx
View file
Expand Up @@ -3,7 +3,11 @@ import { ContextMenuExampleSubMenu } from './examples/ContextMenuExampleSubMenu/
import { ContextMenuExampleOutsideClick } from './examples/ContextMenuExampleOutsideClick/ContextMenuExampleOutsideClick';
import { ContextMenuExampleSide } from './examples/ContextMenuExampleSide/ContextMenuExampleSide';
import { ContextMenuExampleGroups } from './examples/ContextMenuExampleGroups/ContextMenuExampleGroups';
import { ContextMenuExampleSizeS, ContextMenuExampleSizeL, ContextMenuExampleSizeM } from './examples/ContextMenuExampleSize/ContextMenuExampleSize';
import {
ContextMenuExampleSizeS,
ContextMenuExampleSizeL,
ContextMenuExampleSizeM,
} from './examples/ContextMenuExampleSize/ContextMenuExampleSize';

# ContextMenu

Expand Down Expand Up @@ -154,7 +158,6 @@ export const ContextMenuExampleSide = () => {
<ContextMenuExampleSide />
### Группы пунктов
`getGroupId` делит пункты меню на группы (результат функции должен вернуть уникальный идентификатор группы).
Expand Down Expand Up @@ -229,15 +232,12 @@ export const ContextMenuExampleGroups = () => {
<ContextMenuExampleGroups />
## Размер меню
За размер компонента отвечает свойство `size`. Варианты: `'s'`, `'m'`, `'l'`.
За размер компонента отвечает свойство `size`. Варианты: `'s'`, `'m'`, `'l'`.
<ContextMenuExampleSizeS />
<ContextMenuExampleSizeM />
<ContextMenuExampleSizeL />
## Второй уровень меню
Expand Down Expand Up @@ -378,27 +378,26 @@ type Direction =
type SubMenuDirection = 'rightStartUp' | 'rightStartDown' | 'leftStartUp' | 'leftStartDown';
```
| Свойство | Тип | По умолчанию | Описание |
| ---------- | ----| -------------- | ---------- |
| [`items`](#пункты-меню) | `Item[]` | — | Элементы меню |
| `anchorRef` | `React.RefObject<HTMLElement>` | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `position` | `{ x: number; y: number }, undefined` | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `direction?` | [`Direction`](direction) | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `possibleDirections?` | [`Direction`](direction) | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `offset?` | `number` | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| [`subMenuDirection?`](#второй-уровень-меню) | [`SubMenuDirection`](submenudirection) | 'rightStartUp' | Позиция, в которую будет изначально разворачиваться меню второго уровня |
| [`size?`](#размер-меню) | `'m', 's', 'l'` | — | Размер контекстного меню |
| `getKey?` | `(item: ITEM) => string, number;` | — | Результат функции используется в качестве уникального ключа для пункта меню |
| [`getLabel`](#пункты-меню) | `(item: ITEM) => string, number;` | — | Результат функции используется в качестве названия пункта меню. Если не указано свойство `getKey`, то используется в качестве уникального ключа пункта меню |
| [`getGroupId?`](#групировка-пунктов-меню) | `(item: ITEM) => string, number, undefined;` | — | Результат функции используется в качестве ключа, по которому группируются пункты меню |
| [`getGroupLabel?`](#группы-пунктов) | `(id: string, number, undefined) => string, number, undefined;` | — | Результат функции используется как заголовок группы |
| [`sortGroup?`](#группы-пунктов) | `(a: string, number; b: string, number) => number;` | — | Функция сортировки групп |
| [`getSubItems?`](#второй-уровень-меню) | `(item: ITEM) => ITEM[], undefined;` | — | Результат функции используется как заголовок пункта меню второго уровня |
| `getAccent?` | `(item: ITEM) => 'alert', 'warning', 'success', undefined;` | — | Результат функции используется как акцентный цвет пункта меню |
| `getOnClick?` | `(item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>>` | — | Действие по клику на пункт меню |
| `getDisabled?` | `(item: ITEM) => boolean` | — | Функция, которая блокирует пункт меню. При значении `false` события пункта меню отключаются |
| [`getLeftSideBar?`](#добавить-дополнительные-элементы) | `(item: ITEM) => React.ReactNode, null` | — | Результат функции будет использоваться как рендер слева от названия пункта меню |
| [`getRightSideBar?`](#добавить-дополнительные-элементы) | `(item: ITEM) => React.ReactNode, null` | — | Результат функции будет использоваться как рендер справа от названия пункта меню |
| [`onClickOutside?`](#закрытие-контекстного-меню-по-клику-вне-меню) | `(event: MouseEvent) => void;` | — | Действие по клику вне меню или вне элемента, привязанного к `anchorRef` |
| `className?` | `string` | — | Дополнительный CSS-класс для каждого уровня меню |
| Свойство | Тип | По умолчанию | Описание |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`items`](#пункты-меню) | `Item[]` | — | Элементы меню |
| `anchorRef` | `React.RefObject<HTMLElement>` | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `position` | `{ x: number; y: number }, undefined` | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `direction?` | [`Direction`](direction) | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `possibleDirections?` | [`Direction`](direction) | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| `offset?` | `number` | — | см. [Popover](?path=/docs/components-popover--popover-positioned-by-coords-story) |
| [`subMenuDirection?`](#второй-уровень-меню) | [`SubMenuDirection`](submenudirection) | 'rightStartUp' | Позиция, в которую будет изначально разворачиваться меню второго уровня |
| [`size?`](#размер-меню) | `'m', 's', 'l'` | — | Размер контекстного меню |
| `getKey?` | `(item: ITEM) => string, number;` | — | Результат функции используется в качестве уникального ключа для пункта меню |
| [`getLabel`](#пункты-меню) | `(item: ITEM) => string, number;` | — | Результат функции используется в качестве названия пункта меню. Если не указано свойство `getKey`, то используется в качестве уникального ключа пункта меню |
| [`getGroupId?`](#групировка-пунктов-меню) | `(item: ITEM) => string, number, undefined;` | — | Результат функции используется в качестве ключа, по которому группируются пункты меню |
| [`getGroupLabel?`](#группы-пунктов) | `(id: string, number, undefined) => string, number, undefined;` | — | Результат функции используется как заголовок группы |
| [`sortGroup?`](#группы-пунктов) | `(a: string, number; b: string, number) => number;` | — | Функция сортировки групп |
| [`getSubItems?`](#второй-уровень-меню) | `(item: ITEM) => ITEM[], undefined;` | — | Результат функции используется как заголовок пункта меню второго уровня |
| `getAccent?` | `(item: ITEM) => 'alert', 'warning', 'success', undefined;` | — | Результат функции используется как акцентный цвет пункта меню |
| `getOnClick?` | `(item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>>` | — | Действие по клику на пункт меню |
| `getDisabled?` | `(item: ITEM) => boolean` | — | Функция, которая блокирует пункт меню. При значении `false` события пункта меню отключаются |
| [`getLeftSideBar?`](#добавить-дополнительные-элементы) | `(item: ITEM) => React.ReactNode, null` | — | Результат функции будет использоваться как рендер слева от названия пункта меню |
| [`getRightSideBar?`](#добавить-дополнительные-элементы) | `(item: ITEM) => React.ReactNode, null` | — | Результат функции будет использоваться как рендер справа от названия пункта меню |
| [`onClickOutside?`](#закрытие-контекстного-меню-по-клику-вне-меню) | `(event: MouseEvent) => void;` | — | Действие по клику вне меню или вне элемента, привязанного к `anchorRef` |
| `className?` | `string` | — | Дополнительный CSS-класс для каждого уровня меню |

0 comments on commit 0dd6f86

Please sign in to comment.