IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Changed drop-down icon on Icons component in GroupButton

Browse Source
This commit is contained in:
Ilya Oleshko 2019-06-07 16:12:57 +03:00
parent 754910d252
commit 54fa4d6073
1 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web/ASC.Web.Components/src/components/group-button/index.js
View File

@ -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>