@evo/projects

v1.0.7

Published

6 months ago

Evo Projects component

Downloads

1,076

0High
0Medium
0Low

При вызове компонента его стили добавляются на страницу в <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`

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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