@byndyusoft-ui/flex 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +23 -10
  2. package/dist/createFlex.js +4 -4
  3. package/dist/types.d.ts +2 -2
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -65,15 +65,28 @@ const Flex = createFlex(View); // классы app-flex, app-flex--g-md и т.п
65
65
 
66
66
  ## Props
67
67
 
68
- | Проп | Тип | Описание |
69
- | ---------------------------- | ----------------------------------------------------------------------------------- | ------------------------- |
70
- | `direction` | `row \| row-reverse \| column \| column-reverse` | `flex-direction` |
71
- | `wrap` | `nowrap \| wrap \| wrap-reverse` | `flex-wrap` |
72
- | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | `justify-content` |
73
- | `alignContent` | варианты выше + `stretch` | `align-content` |
74
- | `alignItems` | `flex-start \| flex-end \| center \| baseline \| stretch` | `align-items` |
75
- | `gap`, `rowGap`, `columnGap` | токен `values` | Отступы между элементами |
76
- | spacing-пропсы View | токен `values` | Полные и короткие отступы |
68
+ | Проп | Тип | Описание |
69
+ | ---------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------- |
70
+ | `direction` | `row \| row-reverse \| column \| column-reverse` | `flex-direction` |
71
+ | `wrap` | `nowrap \| wrap \| wrap-reverse` | `flex-wrap` |
72
+ | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | `justify-content` |
73
+ | `alignContent` | варианты выше + `stretch` | `align-content` |
74
+ | `alignItems` | `flex-start \| flex-end \| center \| baseline \| stretch` | `align-items` |
75
+ | `gap`, `rowGap`, `columnGap` | токен `values` | Отступы между элементами |
76
+ | spacing-пропсы View | токен `values` | Полные и короткие отступы |
77
+ | `ref` | `React.Ref<HTMLElement>` | Ref на host element созданного View |
78
+
79
+ `ref` указывает на тот же HTMLElement, который рендерит созданный View, в том числе при
80
+ переопределении тега через `as`:
81
+
82
+ ```tsx
83
+ import { useRef } from 'react';
84
+
85
+ const flexRef = useRef<HTMLElement>(null);
86
+ <Flex as="section" ref={flexRef} gap="md">
87
+ ...
88
+ </Flex>;
89
+ ```
77
90
 
78
91
  Остальные пропсы (`as`, `className`, нативные атрибуты) проксируются в созданный View.
79
92
 
@@ -92,4 +105,4 @@ const Flex = createFlex(View); // классы app-flex, app-flex--g-md и т.п
92
105
 
93
106
  Публичные типы: `ICreatedFlex`, `ICreatedFlexProps`, `TFlexDirection`, `TFlexWrap`,
94
107
  `TAlignContent`, `TAlignItems` и `TJustifyContent`. Созданный компонент имеет
95
- `displayName = 'Flex'` и хранит конфигурацию View в `Flex.config`. Передача DOM-ref не поддерживается.
108
+ `displayName = 'Flex'` и хранит конфигурацию View в `Flex.config`.
package/dist/createFlex.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { forwardRef } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { registerStyles } from '@byndyusoft-ui/view';
4
4
  import { buildFlexModifiersCss, getFlexBlockClassName } from './constants.js';
@@ -13,10 +13,10 @@ import { getWrapModifier } from './utilities/getWrapModifier.js';
13
13
  function createFlex(view) {
14
14
  const classPrefix = view.config.prefix;
15
15
  registerStyles(view.config, buildFlexModifiersCss(classPrefix) + buildCss(view.config));
16
- const CreatedFlex = ({ className, children, direction, wrap, alignContent, alignItems, justifyContent, gap, rowGap, columnGap, ...props }) => {
16
+ const CreatedFlex = forwardRef(({ className, children, direction, wrap, alignContent, alignItems, justifyContent, gap, rowGap, columnGap, ...props }, ref) => {
17
17
  const flexClassName = cn(getFlexBlockClassName(classPrefix), className, getDirectionModifier(direction, classPrefix), getWrapModifier(wrap, classPrefix), getAlignContentModifier(alignContent, classPrefix), getAlignItemsModifier(alignItems, classPrefix), getJustifyContentModifier(justifyContent, classPrefix), ...getGapClassNames(gap, rowGap, columnGap, classPrefix));
18
- return React.createElement(view, { className: flexClassName, ...props }, children);
19
- };
18
+ return React.createElement(view, { className: flexClassName, ...props, ref }, children);
19
+ });
20
20
  CreatedFlex.displayName = 'Flex';
21
21
  return Object.assign(CreatedFlex, { config: view.config });
22
22
  }
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FC } from 'react';
1
+ import type { ForwardRefExoticComponent, RefAttributes } from 'react';
2
2
  import type { ICreatedViewProps, IViewConfig, TSpacingValues, TValuesToken } from '@byndyusoft-ui/view';
3
3
  import type { alignContentVariants, alignItemsVariants, directions, flexWraps, justifyContentVariants } from './constants';
4
4
  export type TFlexDirection = (typeof directions)[number];
@@ -16,6 +16,6 @@ export interface ICreatedFlexProps<TValues extends TSpacingValues> extends ICrea
16
16
  rowGap?: TValuesToken<TValues>;
17
17
  columnGap?: TValuesToken<TValues>;
18
18
  }
19
- export interface ICreatedFlex<TValues extends TSpacingValues> extends FC<ICreatedFlexProps<TValues>> {
19
+ export interface ICreatedFlex<TValues extends TSpacingValues> extends ForwardRefExoticComponent<ICreatedFlexProps<TValues> & RefAttributes<HTMLElement>> {
20
20
  readonly config: IViewConfig<TValues>;
21
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@byndyusoft-ui/flex",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Byndyusoft UI Flex React Component",
5
5
  "keywords": [
6
6
  "byndyusoft",
@@ -43,7 +43,7 @@
43
43
  "react": ">=17"
44
44
  },
45
45
  "dependencies": {
46
- "@byndyusoft-ui/view": "^1.0.0",
46
+ "@byndyusoft-ui/view": "^1.0.1",
47
47
  "classnames": "^2.3.1"
48
48
  }
49
49
  }