1 | import * as React from 'react';
|
2 |
|
3 | import Button from './Button.styled';
|
4 | import { LDLoading, Colors, Icons } from '../index';
|
5 |
|
6 | export interface IProps {
|
7 | isType?: string;
|
8 | children: React.ReactNode;
|
9 | onClick?: () => any;
|
10 | css?: string;
|
11 | small?: boolean;
|
12 | loading?: boolean;
|
13 | response?: string | null;
|
14 | disabled?: boolean;
|
15 | type: 'button' | 'submit' | 'reset';
|
16 | role?: string;
|
17 | last?: boolean;
|
18 | }
|
19 |
|
20 | const renderButtonAndHover = (isType?: string, children?: React.ReactNode|React.ReactChild|string, response?: string|null) => {
|
21 |
|
22 | const mapElements = new Map();
|
23 | mapElements
|
24 | .set('forward', (
|
25 | <React.Fragment>
|
26 | {children}
|
27 | <Icons.SecondaryArrow color={Colors.white} width={30} height={20} />
|
28 | </React.Fragment>
|
29 | ))
|
30 | .set('disabled-forward', (
|
31 | <React.Fragment>
|
32 | {children}
|
33 | <Icons.SecondaryArrow color={Colors.white} width={30} height={20} />
|
34 | </React.Fragment>
|
35 | ))
|
36 | .set('backward', (
|
37 | <React.Fragment>
|
38 | <Icons.SecondaryArrow color={Colors.white} degree={180} width={30} height={20} />
|
39 | {children}
|
40 | </React.Fragment>
|
41 | ))
|
42 | .set('readmore', (
|
43 | <React.Fragment>
|
44 | {children}
|
45 | <svg className='svg down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20.4'>
|
46 | <polyline className='switch-arrow-elements one' points='0.8,19.7 10.4,10.2 0.8,0.7 ' />
|
47 | <polyline className='switch-arrow-elements two' points='0.8,19.7 10.4,10.2 0.8,0.7 ' />
|
48 | </svg>
|
49 | </React.Fragment>
|
50 | ))
|
51 | .set('confirm', children)
|
52 | .set('outline', children)
|
53 | .set('click', children)
|
54 | .set('link', children)
|
55 | .set('disabled', children);
|
56 |
|
57 | if (!response) {
|
58 | return mapElements.get(isType) || children;
|
59 | }
|
60 |
|
61 | return response === 'success' ? <Icons.Success /> : 'Tente de novo';
|
62 | };
|
63 |
|
64 | export default ({ children, isType, loading, response, disabled, ...props }: IProps) => (
|
65 | <Button isType={isType} response={response} loading={loading} {...props}>
|
66 | {!loading ? renderButtonAndHover(isType, children, response) : (
|
67 | <React.Fragment>
|
68 | <LDLoading />
|
69 | </React.Fragment>
|
70 | )}
|
71 | </Button>
|
72 | );
|