Web:Components:SelectedItem: add support dark-theme
This commit is contained in:
parent
00865480dd
commit
6590ba1f94
@ -1,17 +1,16 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import Text from "../text";
|
||||
import IconButton from "../icon-button";
|
||||
import {
|
||||
StyledCloseButton,
|
||||
StyledSelectedTextBox,
|
||||
StyledSelectedItem,
|
||||
StyledText,
|
||||
} from "./styled-selected-item";
|
||||
|
||||
const SelectedItem = (props) => {
|
||||
const { isDisabled, text, onClose } = props;
|
||||
const colorProps = { color: isDisabled ? "#D0D5DA" : "#555F65" };
|
||||
|
||||
const onCloseClick = (e) => {
|
||||
!isDisabled && onClose && onClose(e);
|
||||
@ -21,13 +20,12 @@ const SelectedItem = (props) => {
|
||||
return (
|
||||
<StyledSelectedItem {...props}>
|
||||
<StyledSelectedTextBox>
|
||||
<Text as="span" truncate {...colorProps} fontWeight={600}>
|
||||
<StyledText as="span" truncate isDisabled={isDisabled} fontWeight={600}>
|
||||
{text}
|
||||
</Text>
|
||||
</StyledText>
|
||||
</StyledSelectedTextBox>
|
||||
<StyledCloseButton onClick={onCloseClick} isDisabled={isDisabled}>
|
||||
<IconButton
|
||||
color="#979797"
|
||||
size={10}
|
||||
iconName="/static/images/cross.react.svg"
|
||||
isFill={true}
|
||||
|
@ -1,4 +1,6 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
import Text from "../text";
|
||||
import Base from "../themes/base";
|
||||
|
||||
const StyledSelectedItem = styled.div`
|
||||
@ -28,6 +30,12 @@ const StyledCloseButton = styled.div`
|
||||
padding: ${(props) => props.theme.selectedItem.closeButton.padding};
|
||||
cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
|
||||
|
||||
path {
|
||||
${(props) =>
|
||||
!props.isDisabled &&
|
||||
`fill: ${props.theme.selectedItem.closeButton.color};`}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
${(props) =>
|
||||
@ -44,4 +52,17 @@ const StyledCloseButton = styled.div`
|
||||
`;
|
||||
StyledCloseButton.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledCloseButton, StyledSelectedTextBox, StyledSelectedItem };
|
||||
const StyledText = styled(Text)`
|
||||
color: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.selectedItem.text.disabledColor
|
||||
: props.theme.selectedItem.text.color};
|
||||
`;
|
||||
StyledText.defaultProps = { theme: Base };
|
||||
|
||||
export {
|
||||
StyledCloseButton,
|
||||
StyledSelectedTextBox,
|
||||
StyledSelectedItem,
|
||||
StyledText,
|
||||
};
|
||||
|
@ -357,9 +357,15 @@ const Base = {
|
||||
borderRight: `1px solid ${globalColors.grayLightMid}`,
|
||||
},
|
||||
|
||||
text: {
|
||||
color: "#555F65",
|
||||
disabledColor: "#D0D5DA",
|
||||
},
|
||||
|
||||
closeButton: {
|
||||
alignItems: "center",
|
||||
padding: "0 8px",
|
||||
color: "#979797",
|
||||
colorHover: cyanBlueDarkShade,
|
||||
backgroundColor: grayLightMid,
|
||||
},
|
||||
|
@ -343,22 +343,28 @@ const Dark = {
|
||||
},
|
||||
|
||||
selectedItem: {
|
||||
background: grayLight,
|
||||
border: `1px solid ${globalColors.grayLightMid}`,
|
||||
background: "#242424",
|
||||
border: `1px solid #242424`,
|
||||
borderRadius: "3px",
|
||||
|
||||
textBox: {
|
||||
padding: "0 8px",
|
||||
height: "32px",
|
||||
alignItems: "center",
|
||||
borderRight: `1px solid ${globalColors.grayLightMid}`,
|
||||
borderRight: `1px solid #242424`,
|
||||
},
|
||||
|
||||
text: {
|
||||
color: "#eeeeee",
|
||||
disabledColor: "#474747",
|
||||
},
|
||||
|
||||
closeButton: {
|
||||
alignItems: "center",
|
||||
padding: "0 8px",
|
||||
colorHover: cyanBlueDarkShade,
|
||||
backgroundColor: grayLightMid,
|
||||
color: "#eeeeee",
|
||||
colorHover: "#eeeeee",
|
||||
backgroundColor: "#242424",
|
||||
},
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user