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

Web: Components: drop-down: added prop to show disabled items

Browse Source
This commit is contained in:
Artem Tarasov 2020-12-09 12:38:58 +03:00
parent fb10d00272
commit 0bdd17ce6f
2 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/ASC.Web.Components/src/components/drop-down/README.md
View File

@ -34,3 +34,4 @@ When using component, it should be noted that parent must have CSS property _pos
| `open` | `bool` | - | - | `false` | Tells when the dropdown should be opened |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `withBackdrop` | `bool` | - | - | `true` | Used to display backdrop |
| `showDisabledItems` | `bool` | - | - | `false` | Display disabled items or not |

46
web/ASC.Web.Components/src/components/drop-down/index.js
View File

@ -145,16 +145,37 @@ class DropDown extends React.PureComponent {
return isTablet ? 36 : 32;
};
hideDisabledItems = () => {
const { children } = this.props;
const enabledChildren = React.Children.map(children, (child) => {
if (child && !child.props.disabled) return child;
});
const sizeEnabledChildren = enabledChildren.length;
const cleanChildren = React.Children.map(
enabledChildren,
(child, index) => {
if (!child.props.isSeparator) return child;
if (index !== sizeEnabledChildren - 1) return child;
}
);
return cleanChildren;
};
render() {
const {
maxHeight,
children,
withBackdrop,
open,
showDisabledItems,
style,
} = this.props;
const { directionX, directionY, width } = this.state;
let cleanChildren;
const rowHeights = React.Children.map(children, (child) =>
this.getItemHeight(child)
);
@ -170,9 +191,7 @@ class DropDown extends React.PureComponent {
const needBackdrop = withBackdrop || isTablet ? true : false;
const enabledChildren = React.Children.map(children, (child) => {
if (child && !child.props.disabled) return child;
});
if (!showDisabledItems) cleanChildren = this.hideDisabledItems();
return (
<Box style={style}>
@ -201,8 +220,10 @@ class DropDown extends React.PureComponent {
>
{Row}
</VariableSizeList>
) : cleanChildren ? (
cleanChildren
) : (
enabledChildren
children
)}
</StyledDropdown>
</Box>
@ -227,25 +248,14 @@ DropDown.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
withBackdrop: PropTypes.bool,
columnCount: PropTypes.number,
showDisabledItems: PropTypes.bool,
};
DropDown.defaultProps = {
directionX: "left",
directionY: "bottom",
withBackdrop: false,
showDisabledItems: false,
};
/*class DropDownContainer extends React.Component {
render() {
const isTablet = window.innerWidth < 1024; //TODO: Make some better
return <DropDown {...this.props} isTablet={isTablet} />;
}
}
DropDownContainer.propTypes = {
open: PropTypes.bool,
withBackdrop: PropTypes.bool,
};*/
export default DropDown;