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

web: components: Moved checkbox inside ContentRow and GroupButtonsMenu + added update checked state

Browse Source
This commit is contained in:
Alexey Safronov 2019-07-17 16:36:04 +03:00
parent 9f189c984b
commit 49aaf24b0c
2 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/ASC.Web.Components/src/components/content-row/index.js
View File

@ -71,6 +71,12 @@ const StyledOptionButton = styled.div`
`;
class ContentRow extends React.Component {
constructor(props){
super(props);
this.state = {
checked: this.props.checked
}
}
componentDidMount() {
document.addEventListener('contextmenu', this.handleContextMenu);
@ -84,14 +90,35 @@ class ContentRow extends React.Component {
}
componentDidUpdate(prevProps, prevState) {
if(this.props.checked !== prevProps.checked) {
console.log(`ContentRow componentDidUpdate
this.props.checked=${this.props.checked}
prevProps.checked=${prevProps.checked}
this.state.checked=${this.state.checked}
prevState.checked=${prevState.checked}`);
this.setState({checked: this.props.checked});
}
};
render () {
const { checked, onSelect, avatarRole, avatarSource, avatarName, contextOptions, data, children } = this.props;
const { onSelect, avatarRole, avatarSource, avatarName, contextOptions, data, children } = this.props;
return (
<StyledContentRow {...this.props}>
{checked !== undefined &&
{this.state.hasOwnProperty("checked") &&
<StyledCheckbox>
<Checkbox id={avatarName} value={avatarName} isChecked={checked} onChange={onSelect} />
<Checkbox isChecked={this.state.checked} onChange={(e) => {
let checked = e.target.checked;
console.log("ContentRow Checkbox onChange checked=", checked);
this.setState({checked: checked});
if(onSelect) {
onSelect(checked, data);
}
}} />
</StyledCheckbox>
}
{(avatarRole !== '' || avatarSource !== '' || avatarName !== '') &&

12
web/ASC.Web.Components/src/components/group-buttons-menu/index.js
View File

@ -3,6 +3,7 @@ import styled from 'styled-components'
import PropTypes from 'prop-types'
import GroupButton from '../group-button'
import DropDownItem from '../drop-down-item'
import Checkbox from '../checkbox'
const StyledGroupButtonsMenu = styled.div`
position: sticky;
@ -47,7 +48,7 @@ const CloseButton = styled.div`
}
`;
const CheckBox = styled.div`
const StyledCheckbox = styled.div`
display: inline-block;
margin-left: 16px;
vertical-align: middle;
@ -117,8 +118,13 @@ class GroupButtonsMenu extends React.Component {
return (
<StyledGroupButtonsMenu ref={this.groupMenuOuter} visible={this.state.visible} {...this.state}>
{this.checkBox &&
<CheckBox>{this.checkBox}</CheckBox>
{this.props.hasOwnProperty("checked") &&
<StyledCheckbox>
<Checkbox isChecked={this.props.checked} isIndeterminate={this.props.isIndeterminate} onChange={(e) => {
this.setState({checked: e.target.checked})
this.props.onChange && this.props.onChange(e.target.checked);
}} />
</StyledCheckbox>
}
<div ref="groupMenu" style={{display: 'inline-block'}}>
{priorityItems.map((item, i) =>