@byndyusoft-ui/view 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.
- package/README.md +19 -9
- package/dist/createView.js +4 -4
- package/dist/types.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -108,16 +108,26 @@ import { ViewStylesInjector } from '@byndyusoft-ui/view';
|
|
|
108
108
|
|
|
109
109
|
## Props
|
|
110
110
|
|
|
111
|
-
| Проп | Тип
|
|
112
|
-
| --------------------------------------------------------------------------------------------------------------- |
|
|
113
|
-
| `as` | `keyof ReactHTML`
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
111
|
+
| Проп | Тип | Описание |
|
|
112
|
+
| --------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------- |
|
|
113
|
+
| `as` | `keyof ReactHTML` | Тег или компонент для рендера (по умолчанию `div`) |
|
|
114
|
+
| `ref` | `React.Ref<HTMLElement>` | Ref на фактически отрендеренный HTML-элемент |
|
|
115
|
+
| `className` | `string` | Дополнительный класс, мержится со сгенерированными |
|
|
116
|
+
| `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical` | токен сетки | Внешние отступы |
|
|
117
|
+
| `m`, `mt`, `mr`, `mb`, `ml`, `mh`, `mv` | токен сетки | Короткие aliases внешних отступов |
|
|
118
|
+
| `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical` | токен сетки | Внутренние отступы |
|
|
119
|
+
| `p`, `pt`, `pr`, `pb`, `pl`, `ph`, `pv` | токен сетки | Короткие aliases внутренних отступов |
|
|
119
120
|
|
|
120
121
|
Остальные нативные атрибуты (`id`, `data-*`, `aria-*`, обработчики) передаются в DOM как есть.
|
|
122
|
+
`ref` может быть object или callback ref и указывает на HTML-элемент, включая выбранный через `as`.
|
|
123
|
+
Его тип — общий `HTMLElement` и не сужается автоматически под конкретный тег.
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
import { useRef } from 'react';
|
|
127
|
+
|
|
128
|
+
const viewRef = useRef<HTMLElement>(null);
|
|
129
|
+
<View as="section" ref={viewRef} p="md" />;
|
|
130
|
+
```
|
|
121
131
|
|
|
122
132
|
## Утилиты и типы
|
|
123
133
|
|
|
@@ -134,4 +144,4 @@ import { ViewStylesInjector } from '@byndyusoft-ui/view';
|
|
|
134
144
|
|
|
135
145
|
Публичные типы: `IViewConfig`, `TSpacingValues`, `TValuesToken`, `ISpacingProps`,
|
|
136
146
|
`ICreatedViewProps` и `ICreatedView`. Созданный компонент имеет `displayName = 'View'`
|
|
137
|
-
и сохраняет исходную конфигурацию в `View.config`.
|
|
147
|
+
и сохраняет исходную конфигурацию в `View.config`.
|
package/dist/createView.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createElement } from 'react';
|
|
1
|
+
import { forwardRef, createElement } from 'react';
|
|
2
2
|
import { buildCss } from './utilities/buildCss.js';
|
|
3
3
|
import { buildSpacingClassNames } from './utilities/buildSpacingClassNames.js';
|
|
4
4
|
import { spacingPropsNames } from './constants.js';
|
|
@@ -11,7 +11,7 @@ function createView(config) {
|
|
|
11
11
|
validateViewConfig(config);
|
|
12
12
|
validateValuesKeys(config.values);
|
|
13
13
|
registerStyles(config, buildCss(config));
|
|
14
|
-
const CreatedView = ({ as = 'div', className, children, ...props }) => {
|
|
14
|
+
const CreatedView = forwardRef(({ as = 'div', className, children, ...props }, ref) => {
|
|
15
15
|
const domProps = { ...props };
|
|
16
16
|
const resolvedSpacingProps = resolveSpacingProps(props);
|
|
17
17
|
spacingPropsNames.forEach(name => {
|
|
@@ -21,8 +21,8 @@ function createView(config) {
|
|
|
21
21
|
if (className) {
|
|
22
22
|
classNames.push(className);
|
|
23
23
|
}
|
|
24
|
-
return createElement(as, { className: classNames.join(' ') || undefined, ...domProps }, children);
|
|
25
|
-
};
|
|
24
|
+
return createElement(as, { className: classNames.join(' ') || undefined, ...domProps, ref }, children);
|
|
25
|
+
});
|
|
26
26
|
CreatedView.displayName = 'View';
|
|
27
27
|
return Object.assign(CreatedView, { config });
|
|
28
28
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ForwardRefExoticComponent, HTMLAttributes, ReactHTML, RefAttributes } from 'react';
|
|
2
2
|
export type TSpacingValues = Record<string, number>;
|
|
3
3
|
export type TSpacingUnit = 'px' | 'rem';
|
|
4
4
|
export interface ISpacingStep {
|
|
@@ -47,7 +47,7 @@ export interface ICreatedViewProps<TGrid extends TSpacingValues> extends HTMLAtt
|
|
|
47
47
|
as?: keyof ReactHTML;
|
|
48
48
|
className?: string;
|
|
49
49
|
}
|
|
50
|
-
export interface ICreatedView<TGrid extends TSpacingValues> extends
|
|
50
|
+
export interface ICreatedView<TGrid extends TSpacingValues> extends ForwardRefExoticComponent<ICreatedViewProps<TGrid> & RefAttributes<HTMLElement>> {
|
|
51
51
|
readonly config: IViewConfig<TGrid>;
|
|
52
52
|
}
|
|
53
53
|
export interface IViewStyleEntry {
|