Pull to refresh

React'ивные Panel'и

Reading time 6 min
Views 11K

Что такое панель? Это довольно простой компонент, разбивающий видимую область на 2-3 блока:


  • Шапка. В шапку обычно выводится заголовок и какие-то (обычно навигационные) элементы правления.
  • Тело. В тело панели выводится выводится произвольное содержимое. Часто этот блок делается скроллируемым, чтобы шапка не уходила из поля зрения.
  • Подвал. Опциональный блок. Сюда выводят обычно общую для содержимого панели информацию и элементы управления.

Не смотря на кажущуюся простоту, реализации обычно не такие уж и простые. Связано это с тем, что вариантов его использования великое множество.


В шапке может быть, а может не быть:


  • Заголовок. Дополнительно у него может быть подзаголовок.
  • Хлебные крошки. Они могут быть частью заголовка, а могут — подзаголовка.
  • Навигационные ссылки. Такие как "назад", "следующий" и тп.
  • Кнопки. Такие как "открыть фильтры", "переключить флаг", "закрыть окно" и другие.

Короче говоря, в шапке может быть почти что угодно. В теле же, определённо должна быть возможность выводить любое содержимое. В подвале содержимое так же может быть произвольным.


Получается, что у панели должно быть минимум 3 параметра, которые принимают "сложное содержимое", то есть такое, которое не является плоским текстом, а содержит иерархию вложенных блоков.


Далее идёт обзор тех готовых решений, которые можно найти в гугле. Для каждого указан размер реализации в строках кода (CLOS). Плюс бонус в конце, для тех, кто доберётся ;-)


ReactJS


wmira/react-panel — 180 CLOS



В шапку выводятся:


  • Опциональная иконка перед заголовком.
  • Собственно заголовок.
  • Опциональный набор кликабельных иконок в правой части шапки.

Размеры тела по умолчанию подстраиваются под содержимое. Полдвал не поддерживается.


Пример использования:


return (
    <Panel
        title={Привет, мир!}
        titleIcon="icon-idea"
        toolbox={[
            {
                className : "icon-close" ,
                onclick : this.onClose.bind( this )
            }
        ]}
        >
        <p>Ты прекрасен!</p>
    </Panel>
)

Резюме: решение для очень частного случая, в коде бардак, документации нет, только один сомнительный пример использования в духе jQuery.


react-bootstrap — 235 CLOS



Шапка и подвал раcсчитанны на вывод простого текста, но есть возможность вывести туда что угодно. Тело подстраивается под размеры содержимого и может быть схлопнуто до нулевой высоты через флаг.


Пример использования:


return (
    <Panel
        header={
            <div>
                <span class="my-title">Привет, мир!</span>
                <Button
                    bsStyle="danger"
                    onclick={ this.onClose.bind( this ) }
                    >
                    Закрыть
                </Button>
            </div>
        }
        footer={
            <Button
                bsStyle="success"
                onclick={ this.onSuccess.bind( this ) }
                >
                О, да!
            </Button>
        }
    >
        <p>Ты прекрасен!</p>
    </Panel>
)

Резюме: не смотря на костыли с оборачиванием списка компонент в div и запихиванием целого дерева в атрибут использовать можно почти для всего. Разве что "схлопываемость" зачастую будет просто лишним грузом, а когда потребуется что-то особенное, то этой куцей реализации скорее всего не хватит.


pivotal-cf/pivotal-ui — 173 CLOS



Шапка разделена на две секции: левую (header) и опциональную правую (actions), куда вы можете выводить любое содержимое. Подвал и тело имеют по одной секции. Для тела можно включить "скроллируемость", чтобы панель не вылезала за пределы области просмотра.


Пример использования:


return (
    <Panel
        className="bg-neutral-10"
        header={
            <h1>Привет, мир!</h1>
        }
        actions={
            <DangerButton onclick={ this.onClose.bind( this ) } >
                Закрыть
            </DangerButton>
        }
        footer={
            <PrimaryButton onclick={ this.onSuccess.bind( this ) }>
                О, да!
            </PrimaryButton>
        }
        >
        <p>Ты прекрасен!</p>
    </Panel>
)

Резюме: всё те же костыли, но реализация компактней, не содержит почти ничего лишнего и чуть удобней в использовании.


Велосипед — 44 CLOS


Как-то не удобно, что часть вёрстки задаётся в атрибутах, а часть в теле. Некоторые функции избыточны, а для реализации других приходится переписывать компонент. А раз всё равно рано или поздно переписывать, то давайте попробуем переписать так, чтобы и гибко получилось и без костылей.


function MyPanel({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-root ${ className || '' }` }
        />
    )
}

function MyPanelTitle({ className , ...props }) {
    return (
        <h1
            { ...props }
            className={ `my-panel-title ${ className || '' }` }
        />
    )
}

function MyPanelHead({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-head ${ className || '' }` }
        />
    )
}

function MyPanelBody({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-body ${ className || '' }` }
        />
    )
}

function MyPanelFoot({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-foot ${ className || '' }` }
        />
    )
}

Панель состоит из 3 опциональных блоков: шапка, тело подвал. Бонусом: можно добавить несколько шапок/тел/подвалов. Для блоков можно использовать как стандартные компоненты от панели, так и собственные, а внутрь них помещать что угодно.


Правда использование чуть более многословно, но зато обошлись без тэгов в атрибутах:


return (
    <MyPanel className="my-panel-skin-pretty">

        <MyPanelHead>
            <MyPanelTitle>Привет, мир!</MyPanelTitle>
            <button onclick={ this.onClose.bind( this ) } >Закрыть</button>
        </MyPanelHead>

        <MyPanelBody>
            <p>Ты прекрасен!</p>
        </MyPanelBody>

        <MyPanelFoot>
            <button onclick={ this.onSuccess.bind( this ) }>О, да!</button>
        </MyPanelFoot>

    </MyPanel>
)

Резюме: относительно компактное и весьма гибкое решение, имеет простой, понятный, правда несколько многословный (что в принципе свойственно XML) интерфейс.


$mol_pager — 11 CLOS



Шапка по умолчанию выводит заголовок. Содержимое любого блока, как и сами блоки могут быть заменены чем угодно. Тело скроллируется, а позиция скролла восстанавливается при перезагрузке.


Реализация настолько компактная, что её не страшно привести прямо тут:


$mol_page $mol_view
    sub /
        <= Head $mol_view
            sub <= head /
                <= Title $mol_view
                    sub /
                        <= title
        <= Body $mol_scroll
            sub <= body /
        <= Foot $mol_view
            sub <= foot /

Пример использования:


$my_app $mol_page
    title \Привет, мир!
    head /
        <= title
        <= Close $mol_button_minor
            click?event <=> close?event null
            title \Закрыть
    body /
        \Ты прекрасен!
    foot /
        <= Success $mol_button_major
            click?event <=> success?event null
            title \О, да!

Резюме: на порядок компактнее реализация дающая тем не менее высокую степень гибкости, использование обходится без костылей, но применяется достаточно необычный синтаксис, требующий освоения. И, да, это не React, а $mol, где интерфейс тоже строится из компонент, которые агрегируют в себе другие компоненты, но компоненты не пересоздаются при каждом рендеринге, а кешируются. :-)


Выводы


В JSX можно сделать и так и сяк, но всё-равно будет что-то не то. Типичные проблемы:


  • Жёсткий некастомизируемый код, вынуждающий велосипедить каждый раз когда нужно добавить пару перламутровых пуговиц.
  • Лишние функции в общих компонентах. Следствие высокой жёсткости кода.
  • Развесистый, непоследовательный интерфейс использования. Обычно содержимое тела передаётся способом отличным от содержимого остальных блоков.
  • Все программисты на реакте программируют по разному. Кто как понял — тот так и фигачит. И скорее всего не так, как нужно вам.
  • JSX похож на XML и JavaScript, однако не является ни над-, ни помножеством ни того, ни другого. Так что за кажущейся простотой скрывается необходимость разбираться в особенностях уникального синтаксиса.
  • Даже простой компонент требует довольно много кода. И чем гибче вы его захотите сделать, тем запутанней получится код.
  • Структура компонента, ровным слоем размазывается по его логике. Мимикрия под XML в этом случае становится бесполезной.
  • Привлечение верстальщика возможно только после интенсивного курса по JS… после чего он увольняется и идёт работать программистом. :-)

С другой стороны, есть простой и последовательный синтаксис view.tree, оптимизированный для создания гибких компонент с минимумом исходного кода, и которому можно обучить любого верстальщика в считанные дни, после чего и его эффективность значительно повысится (ему не придётся копипастить огромные куски html или вручную накликивать нужные состояния компонентам) и эффективность программиста (ему не придётся "натягивать" вёрстку на логику каждый раз, когда верстальщик обновит макет).


Даже если вы разнорабочий full-stack программист, который умеет и в паттерны, и в семантику, и в стили — ваша эффективность всё-равно повысится за счёт уменьшения объёмов кода и лёгкого и непринуждённого создания компонент (чтобы создать простейшую компоненту достаточно создать файл с содержимым из одной короткой строки).


А как бы вы реализовали компонент "Панель" на вашем любимом фреймворке?


PS. Это не реклама $mol, это реклама языка view.tree. Если вы не готовы променять React на что-то другое, но заинтересовал синтаксис view.tree — можете реализовать его трансляцию в React. Идея view.tree — простая: полноценное управление компонентами не покидая крайне простого языка. А скрипты с логикой на JS/TS прикручиваются сбоку. В реализации $mol логика прикручивается посредством наследования и переопределения свойств, заданных во view.tree.

Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+7
Comments 31
Comments Comments 31

Articles