@evo/projects
v1.0.7
Published
Evo Projects component
Downloads
1,130
Maintainers
Keywords
Readme
При вызове компонента его стили добавляются на страницу в <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
Функция вызывается при нажатии на ссылку 'Все сервисы'. Можно использовать для аналитики.