@evo/projects

При вызове компонента его стили добавляются на страницу в <head> в виде <style>...</style> с классами .evoProjects

Все иконки в формате свг, описаны в файле /src/images.jsx. ссылки на другие проекты хранятся как константы в файле /src/constants.js.

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

Dependencies

  "peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.6.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "classnames": "^2.2.6",
    "css-loader": "^3.1.0",
    "postcss": "^7.0.17",
    "postcss-clean": "^1.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^4.1.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "react-append-to-body": "2.0.24",
    "react-easy-swipe": "0.0.18",
    "react-onclickoutside": "^6.8.0",
    "react-overflow-scrolling": "^1.0.1",
    "react-transition-group": "^4.2.1"
  }

Usage

Компонент состоит из двух частей.

import { EvoProjects, EvoProjectsIcon } from '@evo/projects';

EvoProjects - собственно сам выпадающий компонент со ссылками. EvoProjectsIcon - иконка 9 точек.

В зависимости от параметра isPortable компонент отображает десктопную или мобильную версию.

Для десктопной версии нужно чтобы триггер и выпадающий блок были в одном блоке, в таком случае можно передавать компоненту children, который будет внутри <div></div>

import { EvoProjects, EvoProjectsIcon } from '@evo/projects';
...
<EvoProjects ...>
    <EvoProjectsIcon ... />
</EvoProjects>

В большинстве случаев как children стоит использовать EvoProjectsIcon. EvoProjectsIcon Может принимать такие параметры: fill, style, className, onClick

Для мобильной версии EvoProjectsIcon и EvoProjects не обязательно связывать, но желательно использовать в одном компоненте и рядом EvoProjects в любом случае будет добавляться в конец body

import { EvoProjects, EvoProjectsIcon } from '@evo/projects';
...
<span onClick={}>
    <EvoProjectsIcon ... />
    ...
</span>
<EvoProjects ... />

У компонента EvoProjects есть два обязательных параметра visible и onClose.

<EvoProjects
    visible={...}
    onClose={...}
/>

Cреди зависимостей компонента есть использование window, потому, для ssr, чтобы не не получать ошибку ReferenceError: window is not defined необходимо создавать компонент обертку и асинхронно вызывать компонент на клиенте.

По умолчанию рендерится desktop view компонента. Для portable нужно передать параметр isPortable

API

EvoProjects.propTypes = {
    visible: PropTypes.bool.isRequired,
    children: PropTypes.node,
    isPortable: PropTypes.bool,
    closeOnScroll: PropTypes.bool,
    scrollLength: PropTypes.number,
    className: PropTypes.string,
    duration: PropTypes.number,
    title: PropTypes.string,
    allLinkTitle: PropTypes.string,
    target: PropTypes.string,
    align: PropTypes.string,
    transition: PropTypes.string,
    width: PropTypes.number,
    overlayBackground: PropTypes.string,
    projects: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        list: PropTypes.arrayOf(PropTypes.oneOfType([
            PropTypes.shape({
                url: PropTypes.string,
                name: PropTypes.string,
                title: PropTypes.string,
                logo: PropTypes.func,
            }),
            PropTypes.string,
        ])),
    })),
    rel: PropTypes.shape({
        [PropTypes.string]: PropTypes.string,
    }),
    onClose: PropTypes.func.isRequired,
    onClickLink: PropTypes.func,
    onClickAllLink: PropTypes.func,
};

Default значения

EvoProjects.defaultProps = {
    visible: false,
    isPortable: false,
    closeOnScroll: false,
    scrollLength: 100,
    duration: 300,
    title: 'Другие сервисы',
    allLinkTitle: 'Все сервисы',
    allLinkUrl: '',
    target: '_blank',
    align: 'center',
    transition: 'left',
    width: 320,
    overlayBackground: 'rgba(0,0,0,0.5)',
    projects: [
        {
            title: '',
            list: ['shafa', 'crafta', 'prom', 'bigl', 'kabanchik', 'izi'],
        },
        {
            title: 'Для бизнеса',
            list: ['zakupki', 'auctions', 'vchasno'],
        }
    ],
    rel: {}
};

`visible` (bool) isRequired

Используется для управления видимостью блока.

<EvoProjects
    visible={this.state.projectsVisible}
    className={css.evoProjects}
    onClose={() => this.setState({ projectsVisible: false })}
>
    <EvoProjectsIcon onClick={() => this.setState({ projectsVisible: true })} />
</EvoProjects>

`isPortable` (bool)

По умолчанию стоит значение false. Используется для изменения view всплывающего окна для мобильной версии. Для проектов с адаптивной версткой можно использовать react-responsive и в зависимости от размера окна использовать компонент с параметром isPortable true или false

`closeOnScroll` (bool)

По умолчанию стоит значение false. Указывает будет ли скрываться блок ссылок на десктопной версии, при прокрутке страницы, когда блок открыт.

`scrollLength` (number)

Расстояние необходимое проскролить вверх либо вниз, для закрытия блока ссылок при включеном параметре closeOnScroll

`className` (string)

По умолчанию компонент рендерит <div /> без класса. Данный параметр добавляет этому <div> class.

`children` (node)

Помимо <EvoProjectsIcon /> можно использовать любой кастомный node.

<EvoProjects>
    <span onClick={...}>Click me!<span>
</EvoProjects>

`duration` (number)

Появление и ищезание компонента происходит с легкой анимацией. Этим параметром задается длительность анимации. По умолчанию значение 300

`title` (string)

Заглавие в выпадающем блоке. Компонент не является мультиязычным. Текста в нем написаны на русcком языке, потому, если нужно сменить текст, или сделать текст мультиязычным, нужно передавать такие текста , как параметры. Значение по умолчанию - Другие сервисы

`allLinkTitle` (string)

Текст нижней ссылки в выпадающем блоке. Перевод аналогично параметру выше Значение по умолчанию - Все сервисы

`allLinkUrl` (string)

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

`target` (string) [_self|_blank]

Используется для указания как будут открываться ссылки - в новых вкладках или в текущей. По умолчанию указано значение _blank, и все ссылки открываются в новых вкладках.

`align` (string) [center|left|right]

Применимо для десктопного вида. Раскрывающийся блок может быть центрирован относительно элемента, в котором он вызывается, или смещен в одну из сторон. Значение по умолчанию - center

`transition` (string) [fade|left|right]

Применим для мобильного вида. Параметр изменяет анимацию появления компонента на странице Значение по умолчанию - left - выезжание с левой стороны за duration время. right - выезжание с правой стороны fade - появление поверх всех окон на странице

При значении 'left' или 'right' выезжающий блок можно закрыть свайпом в соответствующую сторону. При значении 'fade' блок закрывается только нажатием на крестик.

`width` (number)

Применим для мобильного вида, кроме случая, когда transition='fade'. Параметр определяет ширину блока. Если ширина указана больше чем размер экрана, блок будет ограничен размером экрана. Когда transition='fade', блок всегде появляется на весь экран.

`overlayBackground` (number)

Применим для мобильного вида, кроме случая, когда transition='fade'. Задает цвет для "затемнения" под выезжающим блоком. По умолчанию - 'rgba(0,0,0,0.5)'

`projects`

Используется для определения порядка ссылок и их группирования. Значение по умолчанию

projects: [
    {
        title: '',
        list: ['shafa', 'crafta', 'prom', 'bigl', 'kabanchik', 'izi'],
    },
    {
        title: 'Для бизнеса',
        list: ['zakupki', 'auctions', 'vchasno'],
    }
]

Ссылки можно делить на группы, у каждой группы может быть свой title и list В массиве list элементы могут быть заданы как строки, тогда будут проверяться и использоваться названия как ключи в уже заготовленном в компоненте объекте с готовыми значениями для логотипа, ссылки и названия. Список готовых ключей: bigl, crafta, izi, kabanchik, prom, rialto, shafa, vchasno, rozetka_travel, zakupki, auctions

если нам точечно нужно изменить стандартное значение, или добавить свою ссылку, можно использовать объект как элемент в массиве list с ключами name, title, url, logo. Например

{
    name: 'bigl',
    title: 'Bigl',
    url: 'https://bigl.ua/',
    logo: (
        <svg className={className} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.39 26.02'>
            <path fill='#f55832' d='M23.94,17.77,22,15.89a13.26,13.26,0,0,1-1.18-1.32c-.33-.51-.66-1-1-1.54a5,5,0,0,0-9.16-.22c-.37.6-.86,1.39-1.11,1.76a19,19,0,0,1-1.68,1.81L6.51,17.77a4.77,4.77,0,0,0-.1,6.74l.1.09A5,5,0,0,0,10.85,26a2.58,2.58,0,0,0,.42-.07,14.6,14.6,0,0,1,4-1,14.6,14.6,0,0,1,4,1,1.68,1.68,0,0,0,.3.05,5,5,0,0,0,4.43-1.33A4.77,4.77,0,0,0,24,17.86l-.09-.09m4.93-9.38-3.69,3.13.9,1a1.34,1.34,0,0,1,.34,1,1.26,1.26,0,0,1-.49.86,1.35,1.35,0,0,1-.81.28,1.33,1.33,0,0,1-1-.47l-1.77-2a1.32,1.32,0,0,1,.17-2l4.58-3.86A1.43,1.43,0,0,1,28,6a1.34,1.34,0,0,1,1,.48,1.27,1.27,0,0,1-.17,1.91M23.59,2.76a1.1,1.1,0,0,1-1,.74.84.84,0,0,1-.35-.07A1.09,1.09,0,0,1,21.76,3a1.81,1.81,0,0,0-1-.7,1.28,1.28,0,0,0-.47-.1c-.66,0-1.31.58-1.71,1.51s-.48,2.11.51,2.51a1.47,1.47,0,0,0,.52.11,1,1,0,0,0,.86-.54L20,5.58a1,1,0,0,1-.53-1.43,1.09,1.09,0,0,1,1.4-.62l1.53.63c.51.21,1,.68.58,1.75a3.78,3.78,0,0,1-3.36,2.64,3.45,3.45,0,0,1-1.31-.27c-2-.81-2.71-3.08-1.73-5.41A4.29,4.29,0,0,1,20.35,0a3.52,3.52,0,0,1,1.31.26c1.57.64,2.23,1.8,1.93,2.5M13.21,7.53a1.32,1.32,0,0,1-.74.71,1.54,1.54,0,0,1-.55.11,1.33,1.33,0,0,1-1.23-.85L8.36,2A1.31,1.31,0,0,1,8.33,1a1.31,1.31,0,0,1,.74-.7A1.38,1.38,0,0,1,9.63.16,1.32,1.32,0,0,1,10.85,1l2.33,5.45a1.31,1.31,0,0,1,0,1.06m-6.9,3.52-.67.7-.91-.84.58-.6c.36-.39.72-.48,1-.22a.63.63,0,0,1,0,1M3.84,8.77a.59.59,0,0,1-.19.41l-.37.4-.79-.73.37-.39a.51.51,0,0,1,.76-.08.59.59,0,0,1,.22.39m4-.24a2.21,2.21,0,0,0-2.28-.41,1.84,1.84,0,0,0-.68-1.47,2.24,2.24,0,0,0-3.15.15L.33,8.26A1,1,0,0,0,0,9.05a1.06,1.06,0,0,0,.37.74l4.45,4.08a1.07,1.07,0,0,0,.76.31,1.14,1.14,0,0,0,.82-.37l1.49-1.56a2.41,2.41,0,0,0-.06-3.72' />
        </svg>
    )
}

`rel`

Объект в котором ключами служат названия проектов. Используется для указания ссылкам параметра rel По умолчанию всем ссылкам дается rel='nofollow'. Чтобы его изменить нужно указать rel={{ bigl: 'noopener noreferrer', izi: '' }}

`onClose` isRequired

Функция вызывается при закрытии. Можно использовать для аналитики.

`onClickLink`

Функция вызывается при нажатии на одну из ссылок. Можно использовать для аналитики.

`onClickAllLink`

Функция вызывается при нажатии на ссылку 'Все сервисы'. Можно использовать для аналитики.

@evo/projects

Dependencies

Usage

API

`visible` (bool) isRequired

`isPortable` (bool)

`closeOnScroll` (bool)

`scrollLength` (number)

`className` (string)

`children` (node)

`duration` (number)

`title` (string)

`allLinkTitle` (string)

`allLinkUrl` (string)

`target` (string) [_self|_blank]

`align` (string) [center|left|right]

`transition` (string) [fade|left|right]

`width` (number)

`overlayBackground` (number)

`projects`

`rel`

`onClose` isRequired

`onClickLink`

`onClickAllLink`

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@evo/projects

Dependencies

Usage

API

visible (bool) isRequired

isPortable (bool)

closeOnScroll (bool)

scrollLength (number)

className (string)

children (node)

duration (number)

title (string)

allLinkTitle (string)

allLinkUrl (string)

target (string) [_self|_blank]

align (string) [center|left|right]

transition (string) [fade|left|right]

width (number)

overlayBackground (number)

projects

rel

onClose isRequired

onClickLink

onClickAllLink

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`visible` (bool) isRequired

`isPortable` (bool)

`closeOnScroll` (bool)

`scrollLength` (number)

`className` (string)

`children` (node)

`duration` (number)

`title` (string)

`allLinkTitle` (string)

`allLinkUrl` (string)

`target` (string) [_self|_blank]

`align` (string) [center|left|right]

`transition` (string) [fade|left|right]

`width` (number)

`overlayBackground` (number)

`projects`

`rel`

`onClose` isRequired

`onClickLink`

`onClickAllLink`

Weekly Downloads