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