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= integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-components@file:../../packages/asc-web-components": "asc-web-components@file:../../packages/asc-web-components":
version "1.0.309" version "1.0.334"
dependencies: dependencies:
email-addresses "^3.1.0" email-addresses "^3.1.0"
html-to-react "^1.4.2" html-to-react "^1.4.2"
@ -3811,6 +3811,7 @@ asap@~2.0.3:
react-tooltip "^3.11.2" react-tooltip "^3.11.2"
react-virtualized-auto-sizer "^1.0.2" react-virtualized-auto-sizer "^1.0.2"
react-window "^1.8.5" react-window "^1.8.5"
resize-image "^0.1.0"
asn1.js@^4.0.0: asn1.js@^4.0.0:
version "4.10.1" 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" resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE= 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: resize-observer-polyfill@^1.5.1:
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" 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 React from 'react';
import { mount, shallow } from 'enzyme'; import { mount } from 'enzyme';
import Button from '.'; import Button from '.';
const baseProps = { const baseProps = {
@ -17,7 +17,7 @@ describe('<Button />', () => {
expect(wrapper).toExist(); expect(wrapper).toExist();
}); });
it('not re-render test', () => { /* it('not re-render test', () => {
const onClick = () => alert('Button clicked'); const onClick = () => alert('Button clicked');
const wrapper = shallow(<Button {...baseProps} onClick={onClick} />).instance(); const wrapper = shallow(<Button {...baseProps} onClick={onClick} />).instance();
@ -38,7 +38,7 @@ describe('<Button />', () => {
}); });
expect(shouldUpdate).toBe(true); expect(shouldUpdate).toBe(true);
}); }); */
it('accepts id', () => { it('accepts id', () => {
const wrapper = mount( 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 // 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 = { ButtonWrapper.propTypes = {
label: PropTypes.string, label: PropTypes.string,
@ -199,28 +199,21 @@ Icon.defaultProps = {
icon: null icon: null
}; };
class Button extends React.Component { const Button = React.forwardRef((props, ref) => {
const { primary, size, isLoading, icon, label} = props;
shouldComponentUpdate(nextProps) { const iconProps = { primary, size, icon };
return !isEqual(this.props, nextProps); return (
} <StyledButton innerRef={ref} {...props} >
{(isLoading || icon)
render() { ? (isLoading
// console.log("Button render"); ? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
const { isLoading, label, primary, size, icon } = this.props; : <Icon {...iconProps} />)
return ( : ""
<StyledButton {...this.props}> }
{(isLoading || icon) {label}
? (isLoading </StyledButton>
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" /> );
: <Icon {...this.props} />) });
: ""
}
{label}
</StyledButton>
);
}
}
Button.propTypes = { Button.propTypes = {
label: PropTypes.string, label: PropTypes.string,
@ -239,7 +232,7 @@ Button.propTypes = {
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
isLoading: PropTypes.bool, isLoading: PropTypes.bool,
onClick: PropTypes.func, onClick: PropTypes.func
}; };
Button.defaultProps = { Button.defaultProps = {
@ -257,4 +250,6 @@ Button.defaultProps = {
isLoading: false isLoading: false
}; };
Button.displayName = "Button";
export default Button; export default Button;