web: Changed drop-down icon on Icons component in GroupButton
This commit is contained in:
parent
754910d252
commit
54fa4d6073
@ -1,6 +1,7 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react'
|
import React, { useState, useEffect, useRef } from 'react'
|
||||||
import styled, { css } from 'styled-components'
|
import styled, { css } from 'styled-components'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
import { Icons } from '../icons'
|
||||||
|
|
||||||
const backgroundColor = '#ebebeb',
|
const backgroundColor = '#ebebeb',
|
||||||
disabledBackgroundColor = '#f7f7f7',
|
disabledBackgroundColor = '#f7f7f7',
|
||||||
@ -148,23 +149,29 @@ const StyledDropdownItem = styled.button`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Caret = styled.span`
|
const Caret = styled(Icons.TreeExpanderDownIcon)`
|
||||||
display: inline-block;
|
width: 10px;
|
||||||
width: 0px;
|
|
||||||
height: 0px;
|
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
vertical-align: middle;
|
|
||||||
border-top: 4px dashed ${props => props.primary ? primaryTextColor : textColor};
|
|
||||||
border-right: 4px solid transparent;
|
|
||||||
border-left: 4px solid transparent;
|
|
||||||
|
|
||||||
${props => props.isCheckbox && css`
|
${props => props.isCheckbox && (props.splitted
|
||||||
margin-top: -4px;
|
? css`
|
||||||
`}
|
margin-top: -4px;
|
||||||
|
margin-left: 0;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-top: -6px;
|
||||||
|
`)
|
||||||
|
}
|
||||||
|
|
||||||
${props => props.splitted && css`
|
${props => !props.isCheckbox && (props.splitted
|
||||||
margin-left: 0;
|
? css`
|
||||||
`}
|
margin-top: -2px;
|
||||||
|
margin-left: 0;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-top: -3px;
|
||||||
|
`)
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const clickAction = (e) => {
|
const clickAction = (e) => {
|
||||||
@ -202,20 +209,30 @@ const GroupButton = (props) => {
|
|||||||
|
|
||||||
const splittedDropButton =
|
const splittedDropButton =
|
||||||
<>
|
<>
|
||||||
<StyledButton onClick={clickAction} {...props}>
|
<StyledButton {...props} onClick={clickAction}>
|
||||||
{text}
|
{text}
|
||||||
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
<StyledDropdownToggle onClick={() => { disabled ? false : toggle(!isOpen) }} {...props}>
|
<StyledDropdownToggle {...props} onClick={() => { disabled ? false : toggle(!isOpen) }}>
|
||||||
<Caret splitted={splitted} primary={primary} />
|
<Caret
|
||||||
|
splitted={splitted}
|
||||||
|
isCheckbox={isCheckbox}
|
||||||
|
size='small'
|
||||||
|
color={primary && primaryTextColor || (disabled ? disabledTextColor : textColor)}
|
||||||
|
/>
|
||||||
</StyledDropdownToggle>
|
</StyledDropdownToggle>
|
||||||
</>;
|
</>;
|
||||||
|
|
||||||
const singleDropButton =
|
const singleDropButton =
|
||||||
<StyledDropdownToggle onClick={() => { disabled ? false : toggle(!isOpen) }} {...props}>
|
<StyledDropdownToggle {...props} onClick={() => { disabled ? false : toggle(!isOpen) }}>
|
||||||
{text}
|
{text}
|
||||||
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
||||||
<Caret isCheckbox={isCheckbox} primary={primary} />
|
<Caret
|
||||||
|
splitted={splitted}
|
||||||
|
isCheckbox={isCheckbox}
|
||||||
|
size='small'
|
||||||
|
color={primary && primaryTextColor || (disabled ? disabledTextColor : textColor)}
|
||||||
|
/>
|
||||||
</StyledDropdownToggle>;
|
</StyledDropdownToggle>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -224,7 +241,7 @@ const GroupButton = (props) => {
|
|||||||
? (splitted
|
? (splitted
|
||||||
? { ...splittedDropButton }
|
? { ...splittedDropButton }
|
||||||
: { ...singleDropButton })
|
: { ...singleDropButton })
|
||||||
: <StyledDropdownToggle onClick={clickAction} {...props}>
|
: <StyledDropdownToggle {...props} onClick={clickAction}>
|
||||||
{text}
|
{text}
|
||||||
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
||||||
</StyledDropdownToggle>
|
</StyledDropdownToggle>
|
||||||
|
Loading…
Reference in New Issue
Block a user