filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-25 18:13:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: clean-up checkbox event handler

Browse Source
This commit is contained in:
Akuoko Daniel Jnr 2020-12-01 23:27:50 +00:00
parent 15e6987271
commit bc2c9635b6
No known key found for this signature in database
GPG Key ID: 1C95803CACD3E9DC
1 changed files with 40 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
components/core/DataView.js
View File

@ -198,10 +198,11 @@ export default class DataView extends React.Component {
viewLimit: 40, viewLimit: 40,
scrollDebounce: false, scrollDebounce: false,
imageSize: 100, imageSize: 100,
isShiftDown: false,
lastSelectedItemIndex: null,
}; };
isShiftDown = false;
lastSelectedItemIndex = null;
gridWrapperEl = React.createRef(); gridWrapperEl = React.createRef();
async componentDidMount() { async componentDidMount() {
@ -263,65 +264,34 @@ export default class DataView extends React.Component {
_handleCheckScroll = Window.debounce(this._handleScroll, 200); _handleCheckScroll = Window.debounce(this._handleScroll, 200);
_handleTableCheckBox = (e) => { /* NOTE(daniel): This disable text selection while pressing shift key */
let checked = this.state.checked;
let i = e.target.name;
if (this.state.isShiftDown && this.state.lastSelectedItemIndex !== i) {
return this._handleShiftClick({
currentSelectedItemIndex: i,
lastSelectedItemIndex: this.state.lastSelectedItemIndex,
checked,
});
}
if (e.target.value === false) {
delete checked[e.target.name];
this.setState({ checked, lastSelectedItemIndex: i });
return;
}
this.setState({
checked: { ...this.state.checked, [e.target.name]: true },
lastSelectedItemIndex: i,
});
if (checked[i]) {
delete checked[i];
} else {
checked[i] = true;
}
this.setState({ checked, lastSelectedItemIndex: i });
};
/* (NOTE):daniel This disable text selection while pressing shift key */
_handleSelectStart = (e) => { _handleSelectStart = (e) => {
if (this.state.isShiftDown) { if (this.isShiftDown) {
e.preventDefault(); e.preventDefault();
} }
}; };
_handleKeyUp = (e) => { _handleKeyUp = (e) => {
if (e.shiftKey && this.state.isShiftDown) { if (e.keyCode === 16 && this.isShiftDown) {
this.setState({ isShiftDown: false }); this.isShiftDown = false;
} }
}; };
_handleKeyDown = (e) => { _handleKeyDown = (e) => {
if (e.shiftKey && !this.state.isShiftDown) { if (e.keyCode === 16 && !this.isShiftDown) {
this.setState({ isShiftDown: true }); this.isShiftDown = true;
} }
}; };
_handleGridCheckBox = (e, i) => { _handleCheckBox = (e, i) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let checked = this.state.checked; let checked = this.state.checked;
if (this.state.isShiftDown && this.state.lastSelectedItemIndex !== i) { if (this.isShiftDown && this.lastSelectedItemIndex !== i) {
return this._handleShiftClick({ return this._handleShiftClick({
currentSelectedItemIndex: i, currentSelectedItemIndex: i,
lastSelectedItemIndex: this.state.lastSelectedItemIndex, lastSelectedItemIndex: this.lastSelectedItemIndex,
checked, checked,
}); });
} }
@ -331,7 +301,8 @@ export default class DataView extends React.Component {
} else { } else {
checked[i] = true; checked[i] = true;
} }
this.setState({ checked, lastSelectedItemIndex: i }); this.setState({ checked });
this.lastSelectedItemIndex = i;
}; };
_handleShiftClick = ({ currentSelectedItemIndex, lastSelectedItemIndex, checked }) => { _handleShiftClick = ({ currentSelectedItemIndex, lastSelectedItemIndex, checked }) => {
@ -349,7 +320,8 @@ export default class DataView extends React.Component {
} }
let newSelection = Object.assign({}, checked, rangeSelected); let newSelection = Object.assign({}, checked, rangeSelected);
this.setState({ checked: newSelection, lastSelectedItemIndex: currentSelectedItemIndex }); this.setState({ checked: newSelection });
this.lastSelectedItemIndex = currentSelectedItemIndex;
return; return;
}; };
@ -432,7 +404,8 @@ export default class DataView extends React.Component {
}; };
_handleUncheckAll = () => { _handleUncheckAll = () => {
this.setState({ checked: {}, lastSelectedItemIndex: null }); this.setState({ checked: {} });
this.lastSelectedItemIndex = null;
}; };
render() { render() {
@ -500,7 +473,10 @@ export default class DataView extends React.Component {
</ButtonWarning> </ButtonWarning>
<div <div
css={STYLES_ICON_BOX} css={STYLES_ICON_BOX}
onClick={() => this.setState({ checked: {}, lastSelectedItemIndex: null })} onClick={() => {
this.setState({ checked: {} });
this.lastSelectedItemIndex = null;
}}
> >
<SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} /> <SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
</div> </div>
@ -594,7 +570,7 @@ export default class DataView extends React.Component {
</Boundary> </Boundary>
) : null} ) : null}
</div> </div>
<div onClick={(e) => this._handleGridCheckBox(e, i)}> <div onClick={(e) => this._handleCheckBox(e, i)}>
<CheckBox <CheckBox
name={i} name={i}
value={!!this.state.checked[i]} value={!!this.state.checked[i]}
@ -645,7 +621,10 @@ export default class DataView extends React.Component {
name: numChecked ? ( name: numChecked ? (
<div <div
css={STYLES_CANCEL_BOX} css={STYLES_CANCEL_BOX}
onClick={() => this.setState({ checked: {}, lastSelectedItemIndex: null })} onClick={() => {
this.setState({ checked: {} });
this.lastSelectedItemIndex = null;
}}
> >
<SVG.Minus height="16px" style={{ color: Constants.system.white }} /> <SVG.Minus height="16px" style={{ color: Constants.system.white }} />
</div> </div>
@ -676,18 +655,19 @@ export default class DataView extends React.Component {
return { return {
...each, ...each,
checkbox: ( checkbox: (
<CheckBox <div onClick={(e) => this._handleCheckBox(e, index)}>
name={index} <CheckBox
value={!!this.state.checked[index]} name={index}
onChange={this._handleTableCheckBox} value={!!this.state.checked[index]}
boxStyle={{ height: 16, width: 16 }} boxStyle={{ height: 16, width: 16 }}
style={{ style={{
position: "relative", position: "relative",
right: 3, right: 3,
margin: "12px 0", margin: "12px 0",
opacity: numChecked > 0 || this.state.hover === index ? "100%" : "0%", opacity: numChecked > 0 || this.state.hover === index ? "100%" : "0%",
}} }}
/> />
</div>
), ),
name: ( name: (
<FilePreviewBubble url={cid} type={each.type}> <FilePreviewBubble url={cid} type={each.type}>