I'm facing an issue with a styled react component that has a custom dropdown menu featuring a caret icon. Whenever I test the responsiveness of the dropdown, the caret icon ends up outside the intended area. To resolve this, I've wrapped the dropdown inside a larger component to ensure everything is on the same line. Additionally, I included the icon within the styled select component. It's puzzling because I've used a similar approach in another application and didn't encounter any problems with icon placement. Any suggestions or help would be greatly appreciated.
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { FaCaretDown } from 'react-icons/fa'
import Table from '../core/Table'
import SubHeader from '../elements/SubHeader'
import EligibleOffer from './EligibleOffer'
import { tableDataProps, tableColumnProps } from '../../propTypes'
const BUNDLE_KEY = 'bundle'
const rowKey = 'id'
class OfferBundlesTable extends Component {
static propTypes = {
bundles: PropTypes.arrayOf(tableDataProps),
columns: tableColumnProps,
viewedOfferIds: PropTypes.arrayOf(PropTypes.string),
onBundleSelect: PropTypes.func
}
static defaultProps = {
viewedOfferIds: []
}
renderCell = (cell = {}) => (
<div>
{cell.title && <SubHeader>{cell.title}</SubHeader>}
<p>{cell.details}</p>
</div>
)
renderBundle = bundle => (
<StyledOffer
offer={bundle}
onOfferSelect={this.props.onBundleSelect}
viewed={this.props.viewedOfferIds.includes(bundle.OfferId)}
/>
)
getColumns = columns =>
Object.entries(columns).reduce(
(cols, [key, value]) => ({
...cols,
[key]: {
...value,
renderCell: key === BUNDLE_KEY ? this.renderBundle : this.renderCell
}
}),
{}
)
render() {
const { bundles = [], columns = [] } = this.props
return (
<div>
<DropdownRow>
<StyledSelect>
<StyledStrong>SORT BY: </StyledStrong>
<select>
<option>Default</option>
<option>Promo Price (High to Low)</option>
<option>Promo Price (Low to High)</option>
<option>Alphabetically (A-Z)</option>
<option>Alphabetically (Z-A)</option>
<option>Internet Tier (High to Low)</option>
<option>Internet Tier (Low to High)</option>
</select>
<StyledSelectIcon size="1.5rem" />
</StyledSelect>
<StyledSelect>
<StyledStrong>CONTRACT TERMS (MONTHS):</StyledStrong>
<select>
<option>36</option>
<option>24</option>
<option>12</option>
</select>
<StyledSelectIcon size="1.5rem" />
</StyledSelect>
</DropdownRow>
<StyledTable
rowKey={rowKey}
rows={bundles}
columns={this.getColumns(columns)}
/>
</div>
)
}
}
const StyledTable = styled(Table)`
th:first-child {
width: 25%;
}
`
const StyledOffer = styled(EligibleOffer)`
margin-bottom: 15px;
`
const DropdownRow = styled.div`
th:first-child {
width: 25%;
}
flex: 1;
display: flex;
align-items: stretch;
padding: 20px 30px 20px 10px;
width: 60%;
margin-left: 42%;
`
const StyledSelectIcon = styled(FaCaretDown)`
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
color: black;
pointer-events: none;
`
const StyledSelect = styled.div`
position: relative;
margin-left: auto;
select {
padding: 5px 45px 5px 10px;
font-size: 1.2rem;
line-height: 1.4rem;
font-weight: 500;
color: black;
border: 2px solid black;
height: 36px;
appearance: none;
background: transparent;
border-radius: 0;
}
`
const StyledStrong = styled.strong`
padding-right: 5px;
`
export default OfferBundlesTable