Web: Components: added id and class name to toggle-button
This commit is contained in:
parent
32bdf007ae
commit
a926a470ac
@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
|
||||
import { Icons } from "../icons";
|
||||
import { Text } from "../text";
|
||||
|
||||
const ToggleContainer = styled.label`
|
||||
const ToggleButtonContainer = styled.label`
|
||||
position: absolute;
|
||||
-webkit-appearance: none;
|
||||
display: flex;
|
||||
@ -67,13 +67,13 @@ class ToggleButton extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isDisabled, label, onChange } = this.props;
|
||||
const { isDisabled, label, onChange, id, className } = this.props;
|
||||
const colorProps = isDisabled ? { color: "#A3A9AE" } : {};
|
||||
|
||||
//console.log("ToggleButton render");
|
||||
|
||||
return (
|
||||
<ToggleContainer isDisabled={isDisabled}>
|
||||
<ToggleButtonContainer id={id} className={className} isDisabled={isDisabled}>
|
||||
<HiddenInput
|
||||
type="checkbox"
|
||||
checked={this.state.checked}
|
||||
@ -86,7 +86,7 @@ class ToggleButton extends Component {
|
||||
{label}
|
||||
</Text.Body>
|
||||
)}
|
||||
</ToggleContainer>
|
||||
</ToggleButtonContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -95,7 +95,9 @@ ToggleButton.propTypes = {
|
||||
isChecked: PropTypes.bool.isRequired,
|
||||
isDisabled: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
label: PropTypes.string
|
||||
label: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
export default ToggleButton;
|
||||
|
Loading…
Reference in New Issue
Block a user