web: components: Any click optimization
This commit is contained in:
parent
f0799aff07
commit
d0f87a0d95
@ -4,6 +4,7 @@ import styled from 'styled-components';
|
||||
import InputBlock from '../input-block'
|
||||
import DropDownItem from '../drop-down-item'
|
||||
import DropDown from '../drop-down'
|
||||
import { handleAnyClick } from '../../utils/event';
|
||||
|
||||
const StyledComboBox = styled.div`
|
||||
& > div {
|
||||
@ -44,9 +45,12 @@ class ComboBox extends React.PureComponent {
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.comboBoxClick = this.comboBoxClick.bind(this);
|
||||
this.optionClick = this.optionClick.bind(this);
|
||||
|
||||
if(props.opened)
|
||||
handleAnyClick(true, this.handleClick);
|
||||
}
|
||||
|
||||
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
handleClick = (e) => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
stopAction = (e) => e.preventDefault();
|
||||
toggle = (isOpen) => this.setState({ isOpen: isOpen });
|
||||
comboBoxClick = () => {
|
||||
@ -63,24 +67,23 @@ class ComboBox extends React.PureComponent {
|
||||
this.props.onSelect && this.props.onSelect(option);
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick)
|
||||
handleAnyClick(false, this.handleClick);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
|
||||
if(this.state.isOpen !== prevState.isOpen) {
|
||||
handleAnyClick(this.state.isOpen, this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("ComboBox render");
|
||||
console.log("ComboBox render");
|
||||
return (
|
||||
<StyledComboBox ref={this.ref} {...this.props} data={this.state.boxLabel} onClick={this.comboBoxClick} onSelect={this.stopAction} >
|
||||
<InputBlock placeholder={this.state.boxLabel}
|
||||
|
@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
|
||||
import DropDownItem from '../drop-down-item'
|
||||
import DropDown from '../drop-down'
|
||||
import IconButton from '../icon-button'
|
||||
import { handleAnyClick } from '../../utils/event';
|
||||
|
||||
const StyledOuther = styled.div`
|
||||
display: inline-block;
|
||||
@ -27,28 +28,29 @@ class ContextMenuButton extends React.PureComponent {
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.onIconButtonClick = this.onIconButtonClick.bind(this);
|
||||
this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
|
||||
|
||||
if(props.opened)
|
||||
handleAnyClick(true, this.handleClick);
|
||||
}
|
||||
|
||||
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
handleClick = (e) => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
stopAction = (e) => e.preventDefault();
|
||||
toggle = (isOpen) => this.setState({ isOpen: isOpen });
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick)
|
||||
handleAnyClick(false, this.handleClick);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// Store prevId in state so we can compare when props change.
|
||||
// Clear out previously-loaded data (so we don't render stale stuff).
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
|
||||
if(this.state.isOpen !== prevState.isOpen) {
|
||||
handleAnyClick(this.state.isOpen, this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
onIconButtonClick = () => {
|
||||
|
@ -5,6 +5,7 @@ import { Icons } from "../icons";
|
||||
import DropDown from "../drop-down";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
import Checkbox from "../checkbox";
|
||||
import { handleAnyClick } from '../../utils/event';
|
||||
|
||||
const textColor = "#333333",
|
||||
disabledTextColor = "#A3A9AE";
|
||||
@ -108,10 +109,13 @@ class GroupButton extends React.PureComponent {
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.checkboxChange = this.checkboxChange.bind(this);
|
||||
this.dropDownItemClick = this.dropDownItemClick.bind(this);
|
||||
|
||||
if(props.opened)
|
||||
handleAnyClick(true, this.handleClick);
|
||||
}
|
||||
|
||||
handleClick = e =>
|
||||
!this.ref.current.contains(e.target) && this.toggle(false);
|
||||
this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
|
||||
stopAction = e => e.preventDefault();
|
||||
|
||||
@ -122,7 +126,7 @@ class GroupButton extends React.PureComponent {
|
||||
this.setState({ selected: this.props.selected });
|
||||
};
|
||||
|
||||
dropDownItemClick = child => {
|
||||
dropDownItemClick = child => {
|
||||
child.props.onClick && child.props.onClick();
|
||||
this.props.onSelect && this.props.onSelect(child);
|
||||
this.setState({ selected: child.props.label });
|
||||
@ -133,26 +137,24 @@ class GroupButton extends React.PureComponent {
|
||||
this.props.disabled ? this.stopAction(e) : this.toggle(!this.state.isOpen);
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick);
|
||||
handleAnyClick(false, this.handleClick);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// Store prevId in state so we can compare when props change.
|
||||
// Clear out previously-loaded data (so we don't render stale stuff).
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
|
||||
if(this.state.isOpen !== prevState.isOpen) {
|
||||
handleAnyClick(this.state.isOpen, this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("GroupButton render");
|
||||
console.log("GroupButton render");
|
||||
const { label, isDropdown, disabled, isSeparator, isSelect, isIndeterminate, children, checked } = this.props;
|
||||
const color = disabled ? disabledTextColor : textColor;
|
||||
const itemLabel = !isSelect ? label : this.state.selected;
|
||||
|
@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
|
||||
import Avatar from '../../avatar'
|
||||
import DropDown from '../../drop-down'
|
||||
import DropDownItem from '../../drop-down-item'
|
||||
import { handleAnyClick } from '../../../utils/event';
|
||||
|
||||
class ProfileActions extends React.PureComponent {
|
||||
|
||||
@ -22,30 +23,31 @@ class ProfileActions extends React.PureComponent {
|
||||
this.getUserRole = this.getUserRole.bind(this);
|
||||
this.onAvatarClick = this.onAvatarClick.bind(this);
|
||||
this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
|
||||
|
||||
if(props.opened)
|
||||
handleAnyClick(true, this.handleClick);
|
||||
};
|
||||
|
||||
handleClick = (e) => {
|
||||
!this.ref.current.contains(e.target) && this.toggle(false);
|
||||
this.state.opened && !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
}
|
||||
|
||||
toggle = (opened) => {
|
||||
this.setState({ opened: opened });
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick)
|
||||
handleAnyClick(false, this.handleClick);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
|
||||
if(this.state.opened !== prevState.opened) {
|
||||
handleAnyClick(this.state.opened, this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
getUserRole = (user) => {
|
||||
|
@ -3,6 +3,7 @@ import PropTypes from "prop-types";
|
||||
import styled, { css } from "styled-components";
|
||||
import DropDown from "../drop-down";
|
||||
import { Icons } from "../icons";
|
||||
import { handleAnyClick } from "../../utils/event";
|
||||
|
||||
const backgroundColor = "#ED7309",
|
||||
disableBackgroundColor = "#FFCCA6",
|
||||
@ -112,28 +113,29 @@ class MainButton extends React.PureComponent {
|
||||
this.state = {
|
||||
isOpen: props.opened
|
||||
};
|
||||
|
||||
if(props.opened)
|
||||
handleAnyClick(true, this.handleClick);
|
||||
}
|
||||
|
||||
handleClick = e => !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
handleClick = e => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
stopAction = e => e.preventDefault();
|
||||
toggle = isOpen => this.setState({ isOpen: isOpen });
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick);
|
||||
handleAnyClick(false, this.handleClick);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// Store prevId in state so we can compare when props change.
|
||||
// Clear out previously-loaded data (so we don't render stale stuff).
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
|
||||
if(this.state.isOpen !== prevState.isOpen) {
|
||||
handleAnyClick(this.state.isOpen, this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
onMainButtonClick = () => {
|
||||
|
8
web/ASC.Web.Components/src/utils/event.js
Normal file
8
web/ASC.Web.Components/src/utils/event.js
Normal file
@ -0,0 +1,8 @@
|
||||
export const handleAnyClick = (subscribe, handler) => {
|
||||
if(subscribe) {
|
||||
document.addEventListener("click", handler);
|
||||
}
|
||||
else {
|
||||
document.removeEventListener("click", handler);
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue
Block a user