Web: Components: Added enableToggle for <ToggleContent />
This commit is contained in:
parent
e7dfa142d6
commit
d634d82050
@ -17,9 +17,10 @@ import ToggleContent from "@appserver/components/toggle-content";
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------- | :------------: | :------: | :----: | :----------: | ----------------------- |
|
||||
| -------------- | :------------: | :------: | :----: | :----------: | --------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isOpen` | `bool` | - | - | `false` | State of component |
|
||||
| `label` | `text` | ✅ | - | `Some label` | Define label for header |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `enableToggle` | `bool` | - | - | `true` | Show/hide toggle functional |
|
||||
|
@ -22,7 +22,11 @@ class ToggleContent extends React.Component {
|
||||
};
|
||||
}
|
||||
|
||||
toggleContent = () => this.setState({ isOpen: !this.state.isOpen });
|
||||
toggleContent = () => {
|
||||
if (!this.props.enableToggle) return;
|
||||
|
||||
this.setState({ isOpen: !this.state.isOpen });
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { isOpen } = this.props;
|
||||
@ -34,7 +38,7 @@ class ToggleContent extends React.Component {
|
||||
render() {
|
||||
// console.log("ToggleContent render");
|
||||
|
||||
const { children, className, id, label, style } = this.props;
|
||||
const { children, className, id, label, style, enableToggle } = this.props;
|
||||
|
||||
const { isOpen } = this.state;
|
||||
|
||||
@ -44,6 +48,7 @@ class ToggleContent extends React.Component {
|
||||
isOpen={isOpen}
|
||||
id={id}
|
||||
style={style}
|
||||
enableToggle={enableToggle}
|
||||
>
|
||||
<span className="span-toggle-content" onClick={this.toggleContent}>
|
||||
<StyledArrowContentIcon
|
||||
@ -78,10 +83,13 @@ ToggleContent.propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Enable/disable toggle */
|
||||
enableToggle: PropTypes.bool,
|
||||
};
|
||||
|
||||
ToggleContent.defaultProps = {
|
||||
isOpen: false,
|
||||
enableToggle: true,
|
||||
label: "",
|
||||
};
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import Base from "../themes/base";
|
||||
|
||||
@ -10,6 +10,12 @@ const StyledContainer = styled.div`
|
||||
user-select: none;
|
||||
|
||||
svg {
|
||||
${(props) =>
|
||||
!props.enableToggle &&
|
||||
css`
|
||||
display: none;
|
||||
`}
|
||||
|
||||
path {
|
||||
fill: ${(props) => props.theme.toggleContent.iconColor};
|
||||
}
|
||||
@ -29,9 +35,17 @@ const StyledContainer = styled.div`
|
||||
box-sizing: border-box;
|
||||
font-style: normal;
|
||||
|
||||
${(props) =>
|
||||
props.enableToggle
|
||||
? css`
|
||||
&:hover {
|
||||
border-bottom: ${(props) => props.theme.toggleContent.hoverBorderBottom};
|
||||
border-bottom: ${(props) =>
|
||||
props.theme.toggleContent.hoverBorderBottom};
|
||||
}
|
||||
`
|
||||
: css`
|
||||
cursor: default;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
StyledContainer.defaultProps = { theme: Base };
|
||||
|
Loading…
Reference in New Issue
Block a user