ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Rework Button component to pass its label via children content

Browse Source
This commit is contained in:
ErickSkrauch
2020-07-22 14:20:10 +03:00
parent 993d0cdedb
commit d84497ac28
17 changed files with 175 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/app/components/ui/form/Button.story.tsx
View File

@@ -6,38 +6,77 @@ import Button from './Button';
storiesOf('UI/Form', module).add('Button', () => (
<>
<div>
<Button label="Green Button" /> <Button label="Blue Button" color="blue" />{' '}
<Button label="DarkBlue Button" color="darkBlue" /> <Button label="Violet Button" color="violet" />{' '}
<Button label="LightViolet Button" color="lightViolet" /> <Button label="Orange Button" color="orange" />{' '}
<Button label="Red Button" color="red" /> <Button label="Black Button" color="black" />{' '}
<Button label="White Button" color="white" />
<Button>Green Button</Button> <Button color="blue">Blue Button</Button>{' '}
<Button color="darkBlue">DarkBlue Button</Button> <Button color="violet">Violet Button</Button>{' '}
<Button color="lightViolet">LightViolet Button</Button> <Button color="orange">Orange Button</Button>{' '}
<Button color="red">Red Button</Button> <Button color="black">Black Button</Button>{' '}
<Button color="white">White Button</Button>
</div>
<div>
<h2>Disabled buttons</h2>
<Button disabled label="Green Button" /> <Button disabled label="Blue Button" color="blue" />{' '}
<Button disabled label="DarkBlue Button" color="darkBlue" />{' '}
<Button disabled label="Violet Button" color="violet" />{' '}
<Button disabled label="LightViolet Button" color="lightViolet" />{' '}
<Button disabled label="Orange Button" color="orange" /> <Button disabled label="Red Button" color="red" />{' '}
<Button disabled label="Black Button" color="black" />{' '}
<Button disabled label="White Button" color="white" />
<Button disabled>Green Button</Button>
<Button disabled color="blue">
Blue Button
</Button>{' '}
<Button disabled color="darkBlue">
DarkBlue Button
</Button>{' '}
<Button disabled color="violet">
Violet Button
</Button>{' '}
<Button disabled color="lightViolet">
LightViolet Button
</Button>{' '}
<Button disabled color="orange">
Orange Button
</Button>{' '}
<Button disabled color="red">
Red Button
</Button>{' '}
<Button disabled color="black">
Black Button
</Button>{' '}
<Button disabled color="white">
White Button
</Button>
</div>
<div>
<h2>Button sizes</h2>
<Button label="Default button" /> <Button label="Small button" small /> <br />
<Button>Default button</Button> <Button small>Small button</Button> <br />
<br />
<Button label="Block button" block />
<Button block>Block button</Button>
<br />
<Button label="Small block button" small block />
<Button small block>
Small block button
</Button>
</div>
<div>
<h2>Loading button</h2>
<Button loading label="Green Button" /> <Button loading label="Blue Button" color="blue" />{' '}
<Button loading label="DarkBlue Button" color="darkBlue" />{' '}
<Button loading label="Violet Button" color="violet" />{' '}
<Button loading label="LightViolet Button" color="lightViolet" />{' '}
<Button loading label="Orange Button" color="orange" /> <Button loading label="Red Button" color="red" />{' '}
<Button loading label="Black Button" color="black" /> <Button loading label="White Button" color="white" />
<Button loading>Green Button</Button>{' '}
<Button loading color="blue">
Blue Button
</Button>{' '}
<Button loading color="darkBlue">
DarkBlue Button
</Button>{' '}
<Button loading color="violet">
Violet Button
</Button>{' '}
<Button loading color="lightViolet">
LightViolet Button
</Button>{' '}
<Button loading color="orange">
Orange Button
</Button>{' '}
<Button loading color="red">
Red Button
</Button>{' '}
<Button loading color="black">
Black Button
</Button>{' '}
<Button loading color="white">
White Button
</Button>
</div>
</>
));

86
packages/app/components/ui/form/Button.tsx
View File

@@ -1,55 +1,45 @@
import React from 'react';
import React, { ComponentType } from 'react';
import clsx from 'clsx';
import { COLOR_GREEN } from 'app/components/ui';
import { MessageDescriptor } from 'react-intl';
import { Color } from 'app/components/ui';
import buttons from '../buttons.scss';
import FormComponent from './FormComponent';
export default class Button extends FormComponent<
{
// TODO: drop MessageDescriptor support. It should be React.ReactNode only
label: string | MessageDescriptor | React.ReactElement;
block?: boolean;
small?: boolean;
loading?: boolean;
className?: string;
color?: Color;
disabled?: boolean;
component?: string | React.ComponentType<any>;
} & React.ButtonHTMLAttributes<HTMLButtonElement>
> {
render() {
const {
color = COLOR_GREEN,
block,
small,
disabled,
className,
loading,
label,
component: ComponentProp = 'button',
...restProps
} = this.props;
return (
<ComponentProp
className={clsx(
buttons[color],
{
[buttons.loading]: loading,
[buttons.block]: block,
[buttons.smallButton]: small,
[buttons.disabled]: disabled,
},
className,
)}
disabled={disabled}
{...restProps}
>
{typeof label === 'object' && React.isValidElement(label) ? label : this.formatMessage(label)}
</ComponentProp>
);
}
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
block?: boolean;
small?: boolean;
loading?: boolean;
className?: string;
color?: Color;
disabled?: boolean;
component?: string | React.ComponentType<any>;
}
const Button: ComponentType<Props> = ({
color = COLOR_GREEN,
block,
small,
disabled,
className,
loading,
component: ComponentProp = 'button',
...restProps
}) => (
<ComponentProp
className={clsx(
buttons[color],
{
[buttons.loading]: loading,
[buttons.block]: block,
[buttons.smallButton]: small,
[buttons.disabled]: disabled,
},
className,
)}
disabled={disabled}
{...restProps}
/>
);
export default Button;