@gravity-ui/page-constructor 1.7.0-alpha.3 → 1.7.0-alpha.5

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 (9) hide show
  1. package/build/cjs/components/navigation/components/Header/Header.d.ts +1 -1
  2. package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.css +1 -0
  3. package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +4 -18
  4. package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js +33 -44
  5. package/build/esm/components/navigation/components/Header/Header.d.ts +1 -1
  6. package/build/esm/components/navigation/components/NavigationItem/NavigationItem.css +1 -0
  7. package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +4 -18
  8. package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.js +32 -44
  9. package/package.json +1 -1
package/build/cjs/components/navigation/components/Header/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { HeaderData, NavigationLogo } from '../../../../models/navigation';
2
+ import { HeaderData, NavigationLogo } from '../../../../models';
3
3
  export interface HeaderProps {
4
4
  logo: NavigationLogo;
5
5
  data: HeaderData;
package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.css CHANGED
@@ -28,6 +28,7 @@ unpredictable css rules order in build */
28
28
  margin-left: 5px;
29
29
  }
30
30
  .navigation-item__icon {
31
+ display: flex;
31
32
  width: 20px;
32
33
  height: 20px;
33
34
  margin-right: 8px;
package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts CHANGED
@@ -1,24 +1,10 @@
1
- import React, { RefObject } from 'react';
2
- import { NavigationLinkItem } from '../../../../models/navigation';
1
+ import React from 'react';
2
+ import { NavigationLinkItem } from '../../../../models';
3
3
  export interface NavigationPopupProps {
4
4
  items: NavigationLinkItem[];
5
5
  onClose: () => void;
6
6
  left?: number;
7
7
  className?: string;
8
8
  }
9
- interface NavigationPopupState {
10
- calculatedLeft?: number;
11
- }
12
- export default class NavigationPopup extends React.Component<NavigationPopupProps, NavigationPopupState> {
13
- ref: RefObject<HTMLDivElement>;
14
- state: {
15
- calculatedLeft: number | undefined;
16
- };
17
- private calculateLeft;
18
- componentDidMount(): void;
19
- componentDidUpdate(prevProps: NavigationPopupProps): void;
20
- componentWillUnmount(): void;
21
- render(): JSX.Element | null;
22
- private renderDefaultPopup;
23
- }
24
- export {};
9
+ export declare const NavigationPopup: React.FC<NavigationPopupProps>;
10
+ export default NavigationPopup;
package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.NavigationPopup = void 0;
3
4
  const tslib_1 = require("tslib");
4
5
  const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
5
6
  const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
@@ -8,50 +9,38 @@ const uikit_1 = require("@gravity-ui/uikit");
8
9
  const index_1 = require("../../../index");
9
10
  const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
10
11
  const b = (0, bem_cn_lite_1.default)('navigation-popup');
11
- class NavigationPopup extends react_1.default.Component {
12
- constructor() {
13
- super(...arguments);
14
- this.ref = (0, react_1.createRef)();
15
- this.state = {
16
- calculatedLeft: this.props.left,
17
- };
18
- this.calculateLeft = lodash_1.default.debounce(() => {
19
- const { left } = this.props;
20
- if (this.ref && this.ref.current && left) {
21
- const right = left + this.ref.current.offsetWidth;
22
- const docWidth = document.body.clientWidth;
23
- const calculatedLeft = right > docWidth ? left - (right - docWidth) : left;
24
- this.setState({ calculatedLeft });
25
- }
26
- else {
27
- this.setState({ calculatedLeft: left });
28
- }
29
- }, 100);
30
- }
31
- componentDidMount() {
32
- this.calculateLeft();
33
- window.addEventListener('resize', this.calculateLeft);
34
- }
35
- componentDidUpdate(prevProps) {
36
- if (prevProps.left !== this.props.left) {
37
- this.calculateLeft();
12
+ const NavigationPopup = ({ items, left, onClose }) => {
13
+ const [calculatedLeft, setCalculatedLeft] = (0, react_1.useState)(left);
14
+ const popupRef = (0, react_1.useRef)(null);
15
+ const calculateLeft = (0, react_1.useCallback)(() => {
16
+ if (popupRef && popupRef.current && left) {
17
+ const right = left + popupRef.current.offsetWidth;
18
+ const docWidth = document.body.clientWidth;
19
+ const currentLeft = right > docWidth ? left - (right - docWidth) : left;
20
+ setCalculatedLeft(currentLeft);
38
21
  }
39
- }
40
- componentWillUnmount() {
41
- window.removeEventListener('resize', this.calculateLeft);
42
- }
43
- render() {
44
- if (!document || !document.body) {
45
- return null;
22
+ else {
23
+ setCalculatedLeft(left);
46
24
  }
47
- const { onClose } = this.props;
48
- const { calculatedLeft } = this.state;
49
- return (react_1.default.createElement(uikit_1.Portal, null,
50
- react_1.default.createElement("div", { ref: this.ref, className: b(), style: { left: calculatedLeft } },
51
- react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, this.renderDefaultPopup()))));
52
- }
53
- renderDefaultPopup() {
54
- return (react_1.default.createElement(react_1.Fragment, null, this.props.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
25
+ }, [left]);
26
+ (0, react_1.useEffect)(() => {
27
+ const debounceCalculateLeft = lodash_1.default.debounce(calculateLeft, 100);
28
+ calculateLeft();
29
+ window.addEventListener('resize', debounceCalculateLeft);
30
+ return () => {
31
+ window.removeEventListener('resize', debounceCalculateLeft);
32
+ };
33
+ }, [calculateLeft]);
34
+ (0, react_1.useEffect)(() => {
35
+ calculateLeft();
36
+ }, [calculateLeft, left]);
37
+ if (!document || !document.body) {
38
+ return null;
55
39
  }
56
- }
57
- exports.default = NavigationPopup;
40
+ const renderDefaultPopup = (react_1.default.createElement(react_1.Fragment, null, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
41
+ return (react_1.default.createElement(uikit_1.Portal, null,
42
+ react_1.default.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
43
+ react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
44
+ };
45
+ exports.NavigationPopup = NavigationPopup;
46
+ exports.default = exports.NavigationPopup;
package/build/esm/components/navigation/components/Header/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { HeaderData, NavigationLogo } from '../../../../models/navigation';
2
+ import { HeaderData, NavigationLogo } from '../../../../models';
3
3
  import './Header.css';
4
4
  export interface HeaderProps {
5
5
  logo: NavigationLogo;
package/build/esm/components/navigation/components/NavigationItem/NavigationItem.css CHANGED
@@ -28,6 +28,7 @@ unpredictable css rules order in build */
28
28
  margin-left: 5px;
29
29
  }
30
30
  .navigation-item__icon {
31
+ display: flex;
31
32
  width: 20px;
32
33
  height: 20px;
33
34
  margin-right: 8px;
package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React, { RefObject } from 'react';
2
- import { NavigationLinkItem } from '../../../../models/navigation';
1
+ import React from 'react';
2
+ import { NavigationLinkItem } from '../../../../models';
3
3
  import './NavigationPopup.css';
4
4
  export interface NavigationPopupProps {
5
5
  items: NavigationLinkItem[];
@@ -7,19 +7,5 @@ export interface NavigationPopupProps {
7
7
  left?: number;
8
8
  className?: string;
9
9
  }
10
- interface NavigationPopupState {
11
- calculatedLeft?: number;
12
- }
13
- export default class NavigationPopup extends React.Component<NavigationPopupProps, NavigationPopupState> {
14
- ref: RefObject<HTMLDivElement>;
15
- state: {
16
- calculatedLeft: number | undefined;
17
- };
18
- private calculateLeft;
19
- componentDidMount(): void;
20
- componentDidUpdate(prevProps: NavigationPopupProps): void;
21
- componentWillUnmount(): void;
22
- render(): JSX.Element | null;
23
- private renderDefaultPopup;
24
- }
25
- export {};
10
+ export declare const NavigationPopup: React.FC<NavigationPopupProps>;
11
+ export default NavigationPopup;
package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.js CHANGED
@@ -1,54 +1,42 @@
1
1
  import _ from 'lodash';
2
2
  import block from 'bem-cn-lite';
3
- import React, { Fragment, createRef } from 'react';
3
+ import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
4
4
  import { Portal } from '@gravity-ui/uikit';
5
5
  import { OutsideClick } from '../../../index';
6
6
  import NavigationItem from '../NavigationItem/NavigationItem';
7
7
  import './NavigationPopup.css';
8
8
  const b = block('navigation-popup');
9
- export default class NavigationPopup extends React.Component {
10
- constructor() {
11
- super(...arguments);
12
- this.ref = createRef();
13
- this.state = {
14
- calculatedLeft: this.props.left,
15
- };
16
- this.calculateLeft = _.debounce(() => {
17
- const { left } = this.props;
18
- if (this.ref && this.ref.current && left) {
19
- const right = left + this.ref.current.offsetWidth;
20
- const docWidth = document.body.clientWidth;
21
- const calculatedLeft = right > docWidth ? left - (right - docWidth) : left;
22
- this.setState({ calculatedLeft });
23
- }
24
- else {
25
- this.setState({ calculatedLeft: left });
26
- }
27
- }, 100);
28
- }
29
- componentDidMount() {
30
- this.calculateLeft();
31
- window.addEventListener('resize', this.calculateLeft);
32
- }
33
- componentDidUpdate(prevProps) {
34
- if (prevProps.left !== this.props.left) {
35
- this.calculateLeft();
9
+ export const NavigationPopup = ({ items, left, onClose }) => {
10
+ const [calculatedLeft, setCalculatedLeft] = useState(left);
11
+ const popupRef = useRef(null);
12
+ const calculateLeft = useCallback(() => {
13
+ if (popupRef && popupRef.current && left) {
14
+ const right = left + popupRef.current.offsetWidth;
15
+ const docWidth = document.body.clientWidth;
16
+ const currentLeft = right > docWidth ? left - (right - docWidth) : left;
17
+ setCalculatedLeft(currentLeft);
36
18
  }
37
- }
38
- componentWillUnmount() {
39
- window.removeEventListener('resize', this.calculateLeft);
40
- }
41
- render() {
42
- if (!document || !document.body) {
43
- return null;
19
+ else {
20
+ setCalculatedLeft(left);
44
21
  }
45
- const { onClose } = this.props;
46
- const { calculatedLeft } = this.state;
47
- return (React.createElement(Portal, null,
48
- React.createElement("div", { ref: this.ref, className: b(), style: { left: calculatedLeft } },
49
- React.createElement(OutsideClick, { onOutsideClick: onClose }, this.renderDefaultPopup()))));
50
- }
51
- renderDefaultPopup() {
52
- return (React.createElement(Fragment, null, this.props.items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
22
+ }, [left]);
23
+ useEffect(() => {
24
+ const debounceCalculateLeft = _.debounce(calculateLeft, 100);
25
+ calculateLeft();
26
+ window.addEventListener('resize', debounceCalculateLeft);
27
+ return () => {
28
+ window.removeEventListener('resize', debounceCalculateLeft);
29
+ };
30
+ }, [calculateLeft]);
31
+ useEffect(() => {
32
+ calculateLeft();
33
+ }, [calculateLeft, left]);
34
+ if (!document || !document.body) {
35
+ return null;
53
36
  }
54
- }
37
+ const renderDefaultPopup = (React.createElement(Fragment, null, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
38
+ return (React.createElement(Portal, null,
39
+ React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
40
+ React.createElement(OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
41
+ };
42
+ export default NavigationPopup;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "1.7.0-alpha.3",
3
+ "version": "1.7.0-alpha.5",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {