Skip to content

Commit 6935dac

Browse files
SevereCloudSevereCloud
committed
docs(Placeholder): use FC and add ButtonGroup
1 parent 762bc55 commit 6935dac

File tree

1 file changed

+77
-90
lines changed

1 file changed

+77
-90
lines changed

‎src/components/Placeholder/Readme.md‎

Lines changed: 77 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,99 +6,86 @@
66
Если плейсхолдер используется со свойством `stretched` (показывается во всю высоту панели), то на экране не должно быть ничего другого.
77

88
```jsx
9-
class PlaceholderExample extends React.Component {
10-
constructor(props) {
11-
super(props);
9+
const [activePanel, setActivePanel] = React.useState("example-1");
1210

13-
this.state = {
14-
activePanel: "example-1",
15-
};
11+
const onNavClick = (e) => {
12+
const activePanel = e.currentTarget.dataset.to;
13+
setActivePanel(activePanel);
14+
};
1615

17-
this.onNavClick = this.onNavClick.bind(this);
18-
}
16+
<View activePanel={activePanel}>
17+
<Panel id="example-1">
18+
<PanelHeader>Плейсхолдеры</PanelHeader>
19+
<Group>
20+
<Placeholder
21+
icon={<Icon56UsersOutline />}
22+
header="Уведомления от сообществ"
23+
action={<Button size="m">Подключить сообщества</Button>}
24+
>
25+
Подключите сообщества, от которых Вы хотите получать уведомления
26+
</Placeholder>
27+
<Separator />
28+
<Placeholder icon={<Icon56MentionOutline />}>
29+
Введите адрес страницы в поле поиска
30+
</Placeholder>
31+
</Group>
32+
<Group>
33+
<CellButton onClick={onNavClick} data-to="example-2">
34+
Ещё примеры
35+
</CellButton>
36+
</Group>
37+
</Panel>
1938

20-
onNavClick(e) {
21-
const activePanel = e.currentTarget.dataset.to;
22-
this.setState({ activePanel });
23-
}
39+
<Panel id="example-2">
40+
<PanelHeader
41+
before={<PanelHeaderBack onClick={onNavClick} data-to="example-1" />}
42+
>
43+
Плейсхолдеры
44+
</PanelHeader>
45+
<Group>
46+
<Placeholder>Доступ запрещён</Placeholder>
47+
<Separator />
48+
<Placeholder
49+
header="Находите друзей"
50+
action={
51+
<ButtonGroup mode="vertical" align="center">
52+
<Button size="m">Найти друзей</Button>
53+
<Button size="m" mode="tertiary">
54+
Подробнее
55+
</Button>
56+
</ButtonGroup>
57+
}
58+
>
59+
Здесь будут отображаться люди, которых вы добавите в друзья
60+
</Placeholder>
61+
</Group>
62+
<Group>
63+
<CellButton onClick={onNavClick} data-to="example-3">
64+
Полноэкранный плейсхолдер
65+
</CellButton>
66+
</Group>
67+
</Panel>
2468

25-
render() {
26-
return (
27-
<View activePanel={this.state.activePanel}>
28-
<Panel id="example-1">
29-
<PanelHeader>Плейсхолдеры</PanelHeader>
30-
<Group>
31-
<Placeholder
32-
icon={<Icon56UsersOutline />}
33-
header="Уведомления от сообществ"
34-
action={<Button size="m">Подключить сообщества</Button>}
35-
>
36-
Подключите сообщества, от которых Вы хотите получать уведомления
37-
</Placeholder>
38-
<Separator />
39-
<Placeholder icon={<Icon56MentionOutline />}>
40-
Введите адрес страницы в поле поиска
41-
</Placeholder>
42-
</Group>
43-
<Group>
44-
<CellButton onClick={this.onNavClick} data-to="example-2">
45-
Ещё примеры
46-
</CellButton>
47-
</Group>
48-
</Panel>
69+
<Panel id="example-3">
70+
<PanelHeader
71+
before={<PanelHeaderBack onClick={onNavClick} data-to="example-1" />}
72+
>
73+
Плейсхолдеры
74+
</PanelHeader>
4975

50-
<Panel id="example-2">
51-
<PanelHeader
52-
before={
53-
<PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
54-
}
55-
>
56-
Плейсхолдеры
57-
</PanelHeader>
58-
<Group>
59-
<Placeholder>Доступ запрещён</Placeholder>
60-
<Separator />
61-
<Placeholder
62-
header="Находите друзей"
63-
action={<Button size="m">Найти друзей</Button>}
64-
>
65-
Здесь будут отображаться люди, которых вы добавите в друзья
66-
</Placeholder>
67-
</Group>
68-
<Group>
69-
<CellButton onClick={this.onNavClick} data-to="example-3">
70-
Полноэкранный плейсхолдер
71-
</CellButton>
72-
</Group>
73-
</Panel>
74-
75-
<Panel id="example-3">
76-
<PanelHeader
77-
before={
78-
<PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
79-
}
80-
>
81-
Плейсхолдеры
82-
</PanelHeader>
83-
84-
<Placeholder
85-
icon={<Icon56MessageReadOutline />}
86-
action={
87-
<Button size="m" mode="tertiary">
88-
Показать все сообщения
89-
</Button>
90-
}
91-
stretched
92-
>
93-
Нет непрочитанных
94-
<br />
95-
сообщений
96-
</Placeholder>
97-
</Panel>
98-
</View>
99-
);
100-
}
101-
}
102-
103-
<PlaceholderExample />;
76+
<Placeholder
77+
icon={<Icon56MessageReadOutline />}
78+
action={
79+
<Button size="m" mode="tertiary">
80+
Показать все сообщения
81+
</Button>
82+
}
83+
stretched
84+
>
85+
Нет непрочитанных
86+
<br />
87+
сообщений
88+
</Placeholder>
89+
</Panel>
90+
</View>;
10491
```

0 commit comments

Comments
 (0)