Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore

This commit is contained in:
Alexey Safronov 2019-09-12 10:54:36 +03:00
commit 92a1a34445
4 changed files with 37 additions and 46 deletions

1
.gitignore vendored
View File

@ -11,3 +11,4 @@
*.log *.log
/packages/asc-web-components /packages/asc-web-components
/products/ASC.People/Data/ /products/ASC.People/Data/
Data/

View File

@ -1,4 +1,4 @@
import { find, filter } from "lodash"; import { find, filter, cloneDeep } from "lodash";
import { EmployeeActivationStatus, EmployeeStatus } from "../../helpers/constants"; import { EmployeeActivationStatus, EmployeeStatus } from "../../helpers/constants";
export function getSelectedUser(selection, userId) { export function getSelectedUser(selection, userId) {
@ -141,5 +141,5 @@ export function toEmployeeWrapper(profile) {
contacts: [] contacts: []
}; };
return { ...emptyData, ...profile }; return cloneDeep({ ...emptyData, ...profile });
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "asc-web-components", "name": "asc-web-components",
"version": "1.0.65", "version": "1.0.66",
"description": "Ascensio System SIA component library", "description": "Ascensio System SIA component library",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"main": "dist/asc-web-components.js", "main": "dist/asc-web-components.js",

View File

@ -2,16 +2,17 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled from 'styled-components'; import styled from 'styled-components';
import { Icons } from '../icons'; import { Icons } from '../icons';
import isEqual from 'lodash/isEqual';
const StyledOuter = styled.div` const StyledOuter = styled.div`
width: ${props => props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"}; width: ${props => props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"};
cursor: ${props => props.isDisabled || !props.isClickable ? 'default' : 'pointer'}; cursor: ${props => props.isDisabled || !props.isClickable ? 'default' : 'pointer'};
line-height: 0; line-height: 0;
`; `;
class IconButton extends React.Component{ class IconButton extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
currentIconName: this.props.iconName, currentIconName: this.props.iconName,
currentIconColor: this.props.color currentIconColor: this.props.color
@ -24,9 +25,9 @@ class IconButton extends React.Component{
this.isNeedUpdate = false; this.isNeedUpdate = false;
} }
onMouseEnter(e){ onMouseEnter(e) {
if(!this.props.isDisabled){ if (!this.props.isDisabled) {
this.setState({ this.setState({
currentIconName: this.props.iconHoverName ? this.props.iconHoverName : this.props.iconName, currentIconName: this.props.iconHoverName ? this.props.iconHoverName : this.props.iconName,
currentIconColor: this.props.hoverColor ? this.props.hoverColor : this.props.color currentIconColor: this.props.hoverColor ? this.props.hoverColor : this.props.color
@ -34,8 +35,8 @@ class IconButton extends React.Component{
this.props.onMouseEnter && this.props.onMouseEnter(e); this.props.onMouseEnter && this.props.onMouseEnter(e);
} }
} }
onMouseLeave(e){ onMouseLeave(e) {
if(!this.props.isDisabled){ if (!this.props.isDisabled) {
this.setState({ this.setState({
currentIconName: this.props.iconName, currentIconName: this.props.iconName,
currentIconColor: this.props.color currentIconColor: this.props.color
@ -43,22 +44,22 @@ class IconButton extends React.Component{
this.props.onMouseDown && this.props.onMouseDown(e); this.props.onMouseDown && this.props.onMouseDown(e);
} }
} }
onMouseDown(e){ onMouseDown(e) {
if(!this.props.isDisabled){ if (!this.props.isDisabled) {
this.setState({ this.setState({
currentIconName: this.props.iconClickName ? this.props.iconClickName : this.props.iconName, currentIconName: this.props.iconClickName ? this.props.iconClickName : this.props.iconName,
currentIconColor: this.props.clickColor ? this.props.clickColor : this.props.color currentIconColor: this.props.clickColor ? this.props.clickColor : this.props.color
}); });
this.props.onMouseDown && this.props.onMouseDown(e); this.props.onMouseDown && this.props.onMouseDown(e);
} }
} }
onMouseUp(e){ onMouseUp(e) {
if(!this.props.isDisabled){ if (!this.props.isDisabled) {
switch (e.nativeEvent.which) { switch (e.nativeEvent.which) {
case 1: //Left click case 1: //Left click
this.setState({ this.setState({
currentIconName: this.props.iconHoverName ? this.props.iconHoverName : this.props.iconName, currentIconName: this.props.iconHoverName ? this.props.iconHoverName : this.props.iconName,
currentIconColor: this.props.iconHoverName ? this.props.iconHoverName : this.props.color currentIconColor: this.props.iconHoverName ? this.props.iconHoverName : this.props.color
}); });
this.props.onClick && this.props.onClick(e); this.props.onClick && this.props.onClick(e);
this.props.onMouseUp && this.props.onMouseUp(e); this.props.onMouseUp && this.props.onMouseUp(e);
@ -66,43 +67,32 @@ class IconButton extends React.Component{
case 3://Right click case 3://Right click
this.props.onMouseUp && this.props.onMouseUp(e); this.props.onMouseUp && this.props.onMouseUp(e);
break; break;
default: default:
break; break;
} }
} }
} }
shouldComponentUpdate(nextProps, nextState){ shouldComponentUpdate(nextProps, nextState) {
if(!this.isNeedUpdate){
for (let propsKey in this.props) { if (!isEqual(this.props, nextProps)) {
if(typeof this.props[propsKey] != "function" && typeof this.props[propsKey] != "object" && this.props[propsKey] != nextProps[propsKey]){ let newState = {
this.isNeedUpdate = true; currentIconName: this.state.currentIconName,
if(propsKey == "iconName"){ currentIconColor: this.state.currentIconColor
this.setState({
currentIconName: nextProps[propsKey]
});
break;
}
}
} }
for (let stateKey in this.state) { if (this.props.iconName !== nextProps.iconName) newState.currentIconName = nextProps.iconName;
if(typeof this.state[stateKey] != "function" && typeof this.state[stateKey] != "object" && this.state[stateKey] != nextState[stateKey]){ if (this.props.color !== nextProps.color) newState.currentIconColor = nextProps.color;
this.isNeedUpdate = true; this.setState(newState);
break; return true;
}
}
if(!this.isNeedUpdate) return false;
else return true;
} }
this.isNeedUpdate = false; return !isEqual(this.state, nextState);
return true;
} }
render(){ render() {
//console.log("IconButton render"); //console.log("IconButton render");
return ( return (
<StyledOuter <StyledOuter
size={this.props.size} size={this.props.size}
isDisabled={this.props.isDisabled} isDisabled={this.props.isDisabled}
onMouseEnter={this.onMouseEnter} onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave} onMouseLeave={this.onMouseLeave}
@ -111,7 +101,7 @@ class IconButton extends React.Component{
isClickable={typeof this.props.onClick === 'function'} isClickable={typeof this.props.onClick === 'function'}
> >
{React.createElement(Icons[this.state.currentIconName], {size: "scale", color: this.state.currentIconColor, isfill: this.props.isFill})} {React.createElement(Icons[this.state.currentIconName], { size: "scale", color: this.state.currentIconColor, isfill: this.props.isFill })}
</StyledOuter> </StyledOuter>
); );
} }
@ -127,7 +117,7 @@ IconButton.propTypes = {
iconName: PropTypes.string.isRequired, iconName: PropTypes.string.isRequired,
iconHoverName: PropTypes.string, iconHoverName: PropTypes.string,
iconClickName: PropTypes.string, iconClickName: PropTypes.string,
onClick:PropTypes.func onClick: PropTypes.func
}; };
IconButton.defaultProps = { IconButton.defaultProps = {