Skip to content
Permalink
Browse files

fix(ui): use horizontal scroll in active autopays

fix #1908
  • Loading branch information...
korhaliv committed Mar 28, 2019
1 parent f1ab7f4 commit bbc65b3b2573ea9a56db6c8791b5a4711fbfc006
Showing with 25 additions and 6 deletions.
  1. +1 −1 renderer/components/Autopay/Autopay.js
  2. +24 −5 renderer/components/Autopay/AutopayList.js
@@ -26,7 +26,7 @@ const Autopay = props => (
<AutopayHeader />
</Panel.Header>
<Panel.Body css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
<AutopayList mx={4} />
<AutopayList />
<Heading.h1 mt={4} mx={4}>
<FormattedMessage {...messages.merchant_list_title} />
</Heading.h1>
@@ -1,21 +1,40 @@
import React from 'react'
import React, { useRef } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Box } from 'rebass'
import styled from 'styled-components'
import { Box, Flex } from 'rebass'
import { Heading } from 'components/UI'
import AutopayGrid from './AutopayGrid'
import { useScrollDrag } from 'hooks'
import AutopayCardView from './AutopayCardView'
import messages from './messages'

const CardContainer = styled(Box)`
user-select: none;
`

const AutopayList = ({ merchants, openAutopayCreateModal, ...rest }) => {
const [scroller, wrappedOnClick] = useScrollDrag()
const savedOnClick = useRef()
savedOnClick.current = wrappedOnClick(openAutopayCreateModal)

if (!merchants || !merchants.length) {
return null
}

return (
<Box as="article" {...rest}>
<Heading.h1 mb={3} mt={4}>
<Heading.h1 mb={3} ml={4} mt={4}>
<FormattedMessage {...messages.active_list_title} />
</Heading.h1>
<AutopayGrid items={merchants} onClick={openAutopayCreateModal} />
<Flex ref={scroller} css={{ width: '100%', overflowX: 'hidden' }}>
{merchants.map((item, index) => {
return (
<CardContainer key={item.pubkey} p={2} pl={index ? 2 : 4}>
<AutopayCardView merchant={item} onClick={savedOnClick.current} />
</CardContainer>
)
})}
</Flex>
</Box>
)
}

0 comments on commit bbc65b3

Please sign in to comment.
You can’t perform that action at this time.