Web: Components: Added theme support, added color support, moved styles iat another file.
This commit is contained in:
parent
af5fd0a0cb
commit
80d457234e
@ -37,3 +37,4 @@ import { Checkbox } from "@appserver/components";
|
||||
| `value` | `string` | - | - | - | Value of the input |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
||||
| `color` | `string` | - | - | `#FFFF` | Makes the checkbox a different color |
|
||||
|
@ -1,51 +1,9 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { Icons } from "../icons";
|
||||
import Text from "../text";
|
||||
|
||||
const disableColor = "#A3A9AE";
|
||||
const hoverColor = disableColor;
|
||||
|
||||
const Label = styled.label`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
.checkbox {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.isDisabled
|
||||
? css`
|
||||
cursor: not-allowed;
|
||||
`
|
||||
: css`
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
rect:first-child {
|
||||
stroke: ${hoverColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const HiddenInput = styled.input`
|
||||
opacity: 0.0001;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
`;
|
||||
import { StyledLabel, HiddenInput } from "./styled-checkbox";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const CheckboxIcon = ({ isChecked, isDisabled, isIndeterminate }) => {
|
||||
@ -60,16 +18,6 @@ const CheckboxIcon = ({ isChecked, isDisabled, isIndeterminate }) => {
|
||||
className: "checkbox",
|
||||
};
|
||||
|
||||
if (isDisabled) {
|
||||
newProps.isfill = true;
|
||||
newProps.color = "#F8F9F9";
|
||||
|
||||
if (isIndeterminate || isChecked) {
|
||||
newProps.isStroke = true;
|
||||
newProps.stroke = "#ECEEF1";
|
||||
}
|
||||
}
|
||||
|
||||
return <>{React.createElement(Icons[iconName], { ...newProps })}</>;
|
||||
};
|
||||
|
||||
@ -108,6 +56,7 @@ class Checkbox extends React.Component {
|
||||
//console.log("Checkbox render");
|
||||
const {
|
||||
isDisabled,
|
||||
isIndeterminate,
|
||||
id,
|
||||
className,
|
||||
label,
|
||||
@ -116,30 +65,36 @@ class Checkbox extends React.Component {
|
||||
title,
|
||||
truncate,
|
||||
} = this.props;
|
||||
const colorProps = isDisabled ? { color: disableColor } : {};
|
||||
|
||||
return (
|
||||
<Label
|
||||
<StyledLabel
|
||||
id={id}
|
||||
style={style}
|
||||
isDisabled={isDisabled}
|
||||
isIndeterminate={isIndeterminate}
|
||||
className={className}
|
||||
>
|
||||
<HiddenInput
|
||||
type="checkbox"
|
||||
checked={this.state.checked}
|
||||
disabled={isDisabled}
|
||||
isDisabled={isDisabled}
|
||||
ref={this.ref}
|
||||
value={value}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
<CheckboxIcon {...this.props} />
|
||||
{this.props.label && (
|
||||
<Text as="span" title={title} truncate={truncate} {...colorProps}>
|
||||
<Text
|
||||
as="span"
|
||||
title={title}
|
||||
isDisabled={isDisabled}
|
||||
truncate={truncate}
|
||||
className="checkbox-text"
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
</Label>
|
||||
</StyledLabel>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,166 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { Base } from "../../themes/index";
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
.checkbox {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/* ${(props) =>
|
||||
props.isDisabled
|
||||
? css`
|
||||
cursor: not-allowed;
|
||||
`
|
||||
: css`
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
rect:first-child {
|
||||
stroke: ${(props) => props.theme.text.hoverColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
`} */
|
||||
|
||||
svg {
|
||||
${(props) =>
|
||||
!props.isIndeterminate
|
||||
? css`
|
||||
rect {
|
||||
fill: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.fillColor
|
||||
: props.color};
|
||||
stroke: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.borderColor
|
||||
: props.color};
|
||||
}
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.color
|
||||
? props.color === "#FFFF"
|
||||
? props.theme.checkbox.arrowColor
|
||||
: "white"
|
||||
: props.theme.checkbox.arrowColor};
|
||||
}
|
||||
`
|
||||
: css`
|
||||
rect {
|
||||
fill: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.fillColor
|
||||
: props.color};
|
||||
stroke: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.borderColor
|
||||
: props.color};
|
||||
}
|
||||
}
|
||||
rect:last-child {
|
||||
fill: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.indeterminateColor
|
||||
: "white"};
|
||||
stroke: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.fillColor
|
||||
: "none"};
|
||||
}
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.isDisabled && !props.isIndeterminate
|
||||
? css`
|
||||
filter: ${(props) =>
|
||||
props.color !== "#FFFF" ? "opacity(30%)" : "opacity(100%)"};
|
||||
rect {
|
||||
fill: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.disableFillColor
|
||||
: props.color};
|
||||
stroke: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.disableBorderColor
|
||||
: props.color};
|
||||
}
|
||||
path {
|
||||
fill: ${(props) => props.theme.checkbox.disableArrowColor};
|
||||
}
|
||||
`
|
||||
: props.isDisabled &&
|
||||
css`
|
||||
filter: ${(props) =>
|
||||
props.color !== "#FFFF" ? "opacity(30%)" : "opacity(100%)"};
|
||||
rect:last-child {
|
||||
fill: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.disableIndeterminateColor
|
||||
: "rgba(255,255,255,0.7)"};
|
||||
}
|
||||
`}
|
||||
}
|
||||
&:hover {
|
||||
${(props) =>
|
||||
props.isDisabled
|
||||
? css`
|
||||
cursor: not-allowed;
|
||||
`
|
||||
: !props.indeterminate
|
||||
? css`
|
||||
cursor: pointer;
|
||||
|
||||
rect:nth-child(2) {
|
||||
stroke: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.hoverBorderColor
|
||||
: "rgba(0,0,0,0.2)"};
|
||||
}
|
||||
`
|
||||
: css`
|
||||
cursor: pointer;
|
||||
rect:nth-child(2) {
|
||||
stroke: ${(props) =>
|
||||
props.color === "#FFFF"
|
||||
? props.theme.checkbox.hoverBorderColor
|
||||
: "rgba(0,0,0,0.2)"};
|
||||
}
|
||||
rect:last-child {
|
||||
fill: ${(props) =>
|
||||
props.indeterminate && props.color === "#FFFF"
|
||||
? props.theme.checkbox.hoverIndeterminateColor
|
||||
: props.indeterminate
|
||||
? "white"
|
||||
: props.color};
|
||||
`}
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
color: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.text.disableColor
|
||||
: props.theme.text.color};
|
||||
}
|
||||
`;
|
||||
StyledLabel.defaultProps = { theme: Base };
|
||||
|
||||
const HiddenInput = styled.input`
|
||||
opacity: 0.0001;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
`;
|
||||
|
||||
export { StyledLabel, HiddenInput };
|
@ -345,20 +345,20 @@ const Base = {
|
||||
},
|
||||
},
|
||||
|
||||
// checkbox: {
|
||||
// fillColor: white,
|
||||
// borderColor: grayMid,
|
||||
// arrowColor: black,
|
||||
// indeterminateColor: black,
|
||||
checkbox: {
|
||||
fillColor: white,
|
||||
borderColor: grayMid,
|
||||
arrowColor: black,
|
||||
indeterminateColor: black,
|
||||
|
||||
// disableArrowColor: grayMid,
|
||||
// disableBorderColor: grayLightMid,
|
||||
// disableFillColor: grayLight,
|
||||
// disableIndeterminateColor: gray,
|
||||
disableArrowColor: grayMid,
|
||||
disableBorderColor: grayLightMid,
|
||||
disableFillColor: grayLight,
|
||||
disableIndeterminateColor: gray,
|
||||
|
||||
// hoverBorderColor: gray,
|
||||
// hoverIndeterminateColor: gray,
|
||||
// },
|
||||
hoverBorderColor: gray,
|
||||
hoverIndeterminateColor: gray,
|
||||
},
|
||||
|
||||
// slider: {
|
||||
// sliderBarColorProgress: blueMain,
|
||||
|
@ -327,20 +327,20 @@ const Dark = {
|
||||
},
|
||||
},
|
||||
|
||||
// checkbox: {
|
||||
// fillColor: white,
|
||||
// borderColor: grayMid,
|
||||
// arrowColor: black,
|
||||
// indeterminateColor: black,
|
||||
checkbox: {
|
||||
fillColor: white,
|
||||
borderColor: grayMid,
|
||||
arrowColor: black,
|
||||
indeterminateColor: black,
|
||||
|
||||
// disableArrowColor: grayMid,
|
||||
// disableBorderColor: grayLightMid,
|
||||
// disableFillColor: grayLight,
|
||||
// disableIndeterminateColor: gray,
|
||||
disableArrowColor: grayMid,
|
||||
disableBorderColor: grayLightMid,
|
||||
disableFillColor: grayLight,
|
||||
disableIndeterminateColor: gray,
|
||||
|
||||
// hoverBorderColor: gray,
|
||||
// hoverIndeterminateColor: black,
|
||||
// },
|
||||
hoverBorderColor: gray,
|
||||
hoverIndeterminateColor: black,
|
||||
},
|
||||
|
||||
// switchButton: {
|
||||
// fillColor: white,
|
||||
|
Loading…
Reference in New Issue
Block a user