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

web: Components: Added ref support to the Button component;

Browse Source
This commit is contained in:
Alexey Safronov 2020-02-02 14:01:43 +03:00
parent dde3cdd895
commit a94adb0a96
3 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/ASC.Web.Common/yarn.lock
View File

@ -3793,7 +3793,7 @@ asap@~2.0.3:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.309"
version "1.0.334"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"
@ -3811,6 +3811,7 @@ asap@~2.0.3:
react-tooltip "^3.11.2"
react-virtualized-auto-sizer "^1.0.2"
react-window "^1.8.5"
resize-image "^0.1.0"
asn1.js@^4.0.0:
version "4.10.1"
@ -12177,6 +12178,11 @@ reserved-words@^0.1.2:
resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
resize-image@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/resize-image/-/resize-image-0.1.0.tgz#033d5f499cb7095def7827d48b8046f7e1c5776c"
integrity sha512-78cWCEX/IupMCwKi5Gg5gxjOZKoN6UXinL2eVOB4xzyG2QNjq64z6pJBnyBKg5/BsjEosLz1co5e3DHr99TgFg==
resize-observer-polyfill@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"

6
web/ASC.Web.Components/src/components/button/button.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount, shallow } from 'enzyme';
import { mount } from 'enzyme';
import Button from '.';
const baseProps = {
@ -17,7 +17,7 @@ describe('<Button />', () => {
expect(wrapper).toExist();
});
it('not re-render test', () => {
/* it('not re-render test', () => {
const onClick = () => alert('Button clicked');
const wrapper = shallow(<Button {...baseProps} onClick={onClick} />).instance();
@ -38,7 +38,7 @@ describe('<Button />', () => {
});
expect(shouldUpdate).toBe(true);
});
}); */
it('accepts id', () => {
const wrapper = mount(

43
web/ASC.Web.Components/src/components/button/index.js
View File

@ -30,7 +30,7 @@ const hoverCss = css`
`;
// eslint-disable-next-line no-unused-vars
const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled, isLoading, label, ...props}) => <button type="button" {...props}></button>;
const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled, isLoading, label, innerRef, ...props}) => <button ref={innerRef} type="button" {...props}></button>;
ButtonWrapper.propTypes = {
label: PropTypes.string,
@ -199,28 +199,21 @@ Icon.defaultProps = {
icon: null
};
class Button extends React.Component {
shouldComponentUpdate(nextProps) {
return !isEqual(this.props, nextProps);
}
render() {
// console.log("Button render");
const { isLoading, label, primary, size, icon } = this.props;
return (
<StyledButton {...this.props}>
{(isLoading || icon)
? (isLoading
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
: <Icon {...this.props} />)
: ""
}
{label}
</StyledButton>
);
}
}
const Button = React.forwardRef((props, ref) => {
const { primary, size, isLoading, icon, label} = props;
const iconProps = { primary, size, icon };
return (
<StyledButton innerRef={ref} {...props} >
{(isLoading || icon)
? (isLoading
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
: <Icon {...iconProps} />)
: ""
}
{label}
</StyledButton>
);
});
Button.propTypes = {
label: PropTypes.string,
@ -239,7 +232,7 @@ Button.propTypes = {
isDisabled: PropTypes.bool,
isLoading: PropTypes.bool,
onClick: PropTypes.func,
onClick: PropTypes.func
};
Button.defaultProps = {
@ -257,4 +250,6 @@ Button.defaultProps = {
isLoading: false
};
Button.displayName = "Button";
export default Button;