Skip to content

Commit 610df6a

Browse files
gorgeousvladgorgeousvlad
authored
feat: add not found block dummy and refactor (#435)
* feat: add not found block dummy and refactor
1 parent 5eea616 commit 610df6a

File tree

18 files changed

+146
-69
lines changed

18 files changed

+146
-69
lines changed

‎src/components/BlockBase/BlockBase.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
import React, {PropsWithChildren} from 'react';
22

3-
import {BlockDecoration} from '../../customization/BlockDecoration';
43
import {Col} from '../../grid';
5-
import {BlockBaseProps, BlockDecorationProps, ClassNameProps} from '../../models';
4+
import {BlockBaseProps, ClassNameProps} from '../../models';
65
import {block} from '../../utils';
76
import Anchor from '../Anchor/Anchor';
87

98
import './BlockBase.scss';
109

1110
const b = block('block-base');
1211

13-
export type BlockBaseFullProps = BlockBaseProps &
14-
BlockDecorationProps &
15-
ClassNameProps &
16-
PropsWithChildren;
12+
export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren;
1713

1814
const BlockBase = (props: BlockBaseFullProps) => {
19-
const {anchor, visible, children, className, resetPaddings, qa, type, index} = props;
15+
const {anchor, visible, children, className, resetPaddings, qa} = props;
2016

2117
return (
2218
<Col
@@ -25,10 +21,8 @@ const BlockBase = (props: BlockBaseFullProps) => {
2521
reset={true}
2622
dataQa={qa}
2723
>
28-
<BlockDecoration type={type} index={index}>
29-
{anchor && <Anchor id={anchor.url} className={b('anchor')} />}
30-
{children}
31-
</BlockDecoration>
24+
{anchor && <Anchor id={anchor.url} className={b('anchor')} />}
25+
{children}
3226
</Col>
3327
);
3428
};

‎src/components/BlockBase/__tests__/BlockBase.test.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@ import {render, screen} from '@testing-library/react';
55
import {testCustomClassName} from '../../../../test-utils/shared/common';
66
import {qaIdByDefault} from '../../../components/Anchor/Anchor';
77
import {GridColumnSize} from '../../../grid';
8-
import {BlockTypes, ClassNameProps, WithChildren} from '../../../models';
8+
import {ClassNameProps, WithChildren} from '../../../models';
99
import BlockBase, {BlockBaseFullProps} from '../BlockBase';
1010

1111
const qaId = 'block-base-component';
12-
const blockType = BlockTypes[0];
1312

1413
type ComponentProps = WithChildren<BlockBaseFullProps & ClassNameProps>;
1514

1615
describe('BlockBase', () => {
1716
test('render component by default', async () => {
18-
render(<BlockBase qa={qaId} type={blockType} />);
17+
render(<BlockBase qa={qaId} />);
1918
const component = screen.getByTestId(qaId);
2019

2120
expect(component).toBeInTheDocument();
@@ -26,12 +25,12 @@ describe('BlockBase', () => {
2625
test('add className', () => {
2726
testCustomClassName<ComponentProps>({
2827
component: BlockBase,
29-
props: {qa: qaId, type: blockType},
28+
props: {qa: qaId},
3029
});
3130
});
3231

3332
test('should reset paddings', () => {
34-
render(<BlockBase qa={qaId} resetPaddings={true} type={blockType} />);
33+
render(<BlockBase qa={qaId} resetPaddings={true} />);
3534
const component = screen.getByTestId(qaId);
3635

3736
expect(component).toHaveClass('pc-block-base_reset-paddings');
@@ -40,7 +39,7 @@ describe('BlockBase', () => {
4039
test.each(new Array<GridColumnSize>(...Object.values(GridColumnSize)))(
4140
'render with given "%s" size',
4241
(size) => {
43-
render(<BlockBase qa={qaId} visible={size} type={blockType} />);
42+
render(<BlockBase qa={qaId} visible={size} />);
4443
const component = screen.getByTestId(qaId);
4544

4645
expect(component).toHaveClass(`d-${size}-block`);
@@ -52,7 +51,7 @@ describe('BlockBase', () => {
5251
text: 'anchor',
5352
url: 'https://github.com/gravity-ui/',
5453
};
55-
render(<BlockBase anchor={anchor} type={blockType} />);
54+
render(<BlockBase anchor={anchor} />);
5655
const component = screen.getByTestId(qaIdByDefault);
5756

5857
expect(component).toBeInTheDocument();

‎src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import React from 'react';
1+
import React, {useMemo} from 'react';
22

3-
import BlockBase, {BlockBaseFullProps} from '../../../../components/BlockBase/BlockBase';
4-
import {Block, WithChildren} from '../../../../models';
3+
import _ from 'lodash';
4+
5+
import BlockBase from '../../../../components/BlockBase/BlockBase';
6+
import {BlockDecoration} from '../../../../customization/BlockDecoration';
7+
import {Block, BlockDecorationProps, WithChildren} from '../../../../models';
58
import {block} from '../../../../utils';
69

7-
interface ConstructorBlockProps extends Pick<BlockBaseFullProps, 'index'> {
10+
interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
811
data: Block;
912
}
1013

@@ -15,18 +18,17 @@ export const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>> = (
1518
data,
1619
children,
1720
}) => {
18-
const {anchor, visible, type} = data;
21+
const {type} = data;
22+
const blockBaseProps = useMemo(
23+
() => _.pick(data, ['anchor', 'visible', 'resetPaddings']),
24+
[data],
25+
);
1926

2027
return (
21-
<BlockBase
22-
type={type}
23-
index={index}
24-
className={b({type})}
25-
anchor={anchor}
26-
visible={visible}
27-
resetPaddings={data.resetPaddings}
28-
>
29-
{children}
30-
</BlockBase>
28+
<BlockDecoration type={type} index={index} {...blockBaseProps}>
29+
<BlockBase className={b({type})} {...blockBaseProps}>
30+
{children}
31+
</BlockBase>
32+
</BlockDecoration>
3133
);
3234
};

‎src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import React, {Fragment, ReactElement, useContext} from 'react';
33
import _ from 'lodash';
44

55
import {InnerContext} from '../../../../context/innerContext';
6-
import {Block, ConstructorItem as ConstructorItemType} from '../../../../models';
6+
import {BlockDecoration} from '../../../../customization/BlockDecoration';
7+
import {Block, BlockType, ConstructorItem as ConstructorItemType} from '../../../../models';
78
import {getBlockKey} from '../../../../utils';
89
import {ConstructorBlock} from '../ConstructorBlock/ConstructorBlock';
910
import {ConstructorItem} from '../ConstructorItem';
@@ -22,7 +23,11 @@ export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) =>
2223
index: number,
2324
): ReactElement | null => {
2425
if (!itemMap[item.type]) {
25-
return null;
26+
return parentId ? null : (
27+
<BlockDecoration type={item.type as BlockType} index={index}>
28+
{null}
29+
</BlockDecoration>
30+
);
2631
}
2732

2833
let itemElement;

‎src/customization/BlockDecoration.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ export const BlockDecoration = ({
77
children: blockChildren,
88
...rest
99
}: PropsWithChildren<BlockDecorationProps>) => {
10-
const block = <Fragment>{blockChildren}</Fragment>;
1110
const blockDecorators = useContext(InnerContext).customization?.decorators?.block;
1211

13-
if (!blockDecorators) {
14-
return block;
15-
}
12+
const content = blockDecorators
13+
? blockDecorators.reduce(
14+
(children, decorator) => decorator({children, ...rest}),
15+
blockChildren,
16+
)
17+
: blockChildren;
1618

17-
return blockDecorators.reduce(
18-
(children, decorator) => <Fragment>{decorator({children, ...rest})}</Fragment>,
19-
block,
20-
);
19+
return <Fragment>{content}</Fragment>;
2120
};

‎src/editor/components/EditBlock/EditBlock.scss‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,42 @@ $block: '.#{$ns}edit-block';
88
#{$block} {
99
$controlIconWidth: 48px;
1010
$controlIconHeight: 32px;
11-
$controlsIndent: $indentS;
11+
$blockIndent: $indentL;
1212
$controlColor: var(--yc-color-promo-base-neon);
13+
$zIndex: 10;
1314

1415
cursor: pointer;
1516
position: relative;
17+
z-index: $zIndex;
18+
19+
&_active {
20+
z-index: calc($zIndex + 1);
21+
22+
#{$block}__controls {
23+
border: 4px solid $controlColor;
24+
}
25+
}
1626

1727
&__controls {
1828
position: absolute;
19-
width: calc(100% + $controlsIndent * 2);
20-
height: calc(100% + $controlsIndent * 2);
21-
top: -#{$controlsIndent};
22-
left: -#{$controlsIndent};
29+
width: calc(100% + $blockIndent * 2);
30+
height: calc(100% + $blockIndent);
31+
top: -#{$blockIndent};
32+
left: -#{$blockIndent};
2333
border-radius: $borderRadius;
24-
z-index: $editorBlockControlZIndex;
34+
// controls should be above the block to prevent block's interactions on click in edinting mode
35+
z-index: $zIndex;
2536

2637
&_isHeader {
2738
width: 100%;
2839
height: 100%;
2940
top: 0;
3041
left: 0;
3142
}
32-
&_active {
33-
border: 4px solid $controlColor;
43+
44+
&_reset-paddings {
45+
top: 0;
46+
height: 100%;
3447
}
3548
}
3649

‎src/editor/components/EditBlock/EditBlock.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,14 @@ export type EditBlockActions = {
3434
[key in EditBlockControls]?: () => void;
3535
};
3636

37-
const EditBlock = ({actions, isActive, onSelect, isHeader, children}: EditBlockProps) => {
37+
const EditBlock = ({
38+
actions,
39+
isActive,
40+
onSelect,
41+
isHeader,
42+
children,
43+
resetPaddings,
44+
}: EditBlockProps) => {
3845
const ref = useRef<HTMLDivElement>(null);
3946

4047
useEffect(() => {
@@ -45,8 +52,14 @@ const EditBlock = ({actions, isActive, onSelect, isHeader, children}: EditBlockP
4552
}, [isActive]);
4653

4754
return (
48-
<div className={b()} onClick={onSelect} ref={ref}>
49-
<div className={b('controls', {active: isActive, isHeader})}>
55+
<div className={b({active: isActive})} onClick={onSelect} ref={ref}>
56+
<div
57+
className={b('controls', {
58+
active: isActive,
59+
isHeader,
60+
'reset-paddings': resetPaddings,
61+
})}
62+
>
5063
{isActive && (
5164
<div className={b('controls-content')} onClick={(e) => e.stopPropagation()}>
5265
{actionsOrder.map((action) => {

‎src/editor/components/NotFoundBlock/NotFoundBlock.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import '../../../../styles/variables.scss';
2+
@import '../../../../styles/mixins.scss';
3+
4+
$block: '.#{$ns}not-found-block';
5+
6+
#{$block} {
7+
@include text-size(display-1);
8+
@include shadow();
9+
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 200px;
14+
background-color: var(--yc-color-promo-highlight-silver);
15+
border-radius: $borderRadius;
16+
}

‎src/editor/components/NotFoundBlock/NotFoundBlock.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, {Fragment} from 'react';
2+
3+
import {BlockBase} from '../../../components';
4+
import {BlockDecorationProps} from '../../../models';
5+
import {block} from '../../../utils';
6+
7+
import i18n from './i18n';
8+
9+
import './NotFoundBlock.scss';
10+
11+
const b = block('not-found-block');
12+
13+
export const NotFoundBlock = ({type, children}: BlockDecorationProps) =>
14+
children ? (
15+
<Fragment>{children}</Fragment>
16+
) : (
17+
<BlockBase>
18+
<div className={b()}>{i18n('message', {type})}</div>
19+
</BlockBase>
20+
);

‎src/editor/components/NotFoundBlock/i18n/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"message": "{{type}} not found"
3+
}

0 commit comments

Comments
 (0)