muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

optimized node layout rerenders

Browse source
This commit is contained in:
Fedor Katurov 2019-10-23 10:18:41 +07:00
parent 16af90fd50
commit 948817e8fc
7 changed files with 2954 additions and 2933 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/components/input/Button/index.tsx
View file

@ -1,5 +1,5 @@
import classnames from 'classnames';
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement } from 'react';
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement, memo } from 'react';
import * as styles from './styles.scss';
import { Icon } from '~/components/input/Icon';
import { IIcon } from '~/redux/types';
@ -22,46 +22,48 @@ type IButtonProps = DetailedHTMLProps<
iconOnly?: boolean;
};
const Button: FC<IButtonProps> = ({
className = '',
size = 'normal',
iconLeft,
iconRight,
children,
seamless = false,
transparent = false,
non_submitting = false,
red = false,
grey = false,
is_loading,
title,
stretchy,
disabled,
iconOnly,
...props
}) =>
createElement(
seamless || non_submitting ? 'div' : 'button',
{
className: classnames(styles.button, className, styles[size], {
red,
grey,
seamless,
transparent,
disabled,
is_loading,
stretchy,
icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
has_icon_left: !!iconLeft,
has_icon_right: !!iconRight,
}),
...props,
},
[
iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
title ? <span>{title}</span> : children || null,
iconRight && <Icon icon={iconRight} size={20} key={2} />,
]
);
const Button: FC<IButtonProps> = memo(
({
className = '',
size = 'normal',
iconLeft,
iconRight,
children,
seamless = false,
transparent = false,
non_submitting = false,
red = false,
grey = false,
is_loading,
title,
stretchy,
disabled,
iconOnly,
...props
}) =>
createElement(
seamless || non_submitting ? 'div' : 'button',
{
className: classnames(styles.button, className, styles[size], {
red,
grey,
seamless,
transparent,
disabled,
is_loading,
stretchy,
icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
has_icon_left: !!iconLeft,
has_icon_right: !!iconRight,
}),
...props,
},
[
iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
title ? <span>{title}</span> : children || null,
iconRight && <Icon icon={iconRight} size={20} key={2} />,
]
)
);
export { Button };