IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: Added enableToggle for <ToggleContent />

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/asc-web-components/toggle-content/README.md
View File

@ -16,10 +16,11 @@ 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 |
| 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 |

12
packages/asc-web-components/toggle-content/index.js
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) {
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: "",
};

22
packages/asc-web-components/toggle-content/styled-toggle-content.js
View File

@ -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;
&:hover {
border-bottom: ${(props) => props.theme.toggleContent.hoverBorderBottom};
}
${(props) =>
props.enableToggle
? css`
&:hover {
border-bottom: ${(props) =>
props.theme.toggleContent.hoverBorderBottom};
}
`
: css`
cursor: default;
`}
}
`;
StyledContainer.defaultProps = { theme: Base };