Web: Components: Added enableToggle for <ToggleContent />

This commit is contained in:
Alexey Safronov 2022-02-16 21:30:52 +03:00
parent e7dfa142d6
commit d634d82050
3 changed files with 36 additions and 13 deletions

View File

@ -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 |

View File

@ -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: "",
}; };

View File

@ -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 };