[experiment] PanelHeader render slots with observable props #6910
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
Набросал логику рендера
PanelHeader
, который внутриSplitCol
, вPanelHeader
из<SplitLayout header={...} />
.В
react/observable
реализован миниmobx-react-lite
.Вкратце логика такая:
SplitLayout
создаём контекст, который создаёт "двусвязный" списокcols
(обзервбл объект) иheaders
.SplitCol
регистрируем вcols
и создаём под id этогоSplitCol
обзервбл объект (ex,headers[splitCold] = useObservableProps({})
).PanelHeader
, который внутриSplitCol
работает как прокси дляPanelHeader
в<SplitLayout header={...} />
.PanelHeader
в<SplitLayout header={...} />
рендерит все доступныеheaders
.Не учтено
PanelHeader
изSplitCol
должен прятаться.PanelHeader
нет такого же отступа как междуSplitCol
.SplitCol
– нужно выставитьtop
на значениеoffsetTop
, чтобы учитывалась высота шапки.Демо
Видео
2024-05-14.14.19.37.mov
Примечание
Можно было бы создать компоненты, например,
PanelHeaderSlots
,PanelHeaderSlots.Start
иPanelHeaderSlots.End
, чтобы вынести логику и нормально типизровать пропсы, но стоит ещё поресёчить тему рефактораSplitLayout
+SplitCol
+PanelHeader
, а то сейчас выглядит всё сложно.С
position: sticky
дляPanelHeader
есть вот такой багБаг
2024-05-14.14.28.42.mov
чтобы его поправить, нужно сделать применять паттерн Holy Grail для макета и сделать главный контент скроллируемым.