git.iko.soy/bridge
on 5d8bc60 help sign in
bridge/src/indigo-react/components/Button.js
80 lines 2.0 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Grid from './Grid';
5import Flex from './Flex';
6import { HelpText } from './Typography';
8export default function Button({
9 as: As = 'span',
10 solid = false,
11 success = false,
12 disabled = false,
13 disabledDetail,
14 detail,
15 className,
16 detailClassName,
17 accessory = '→',
18 onClick,
19 background,
20 type,
21 children,
22 ...rest
23}) {
24 const handleKeyPress = e => {
25 if (e.key === 'Enter' && !disabled) {
26 onClick();
27 }
28 };
29 return (
30 <Grid
31 as={As}
32 gap={1}
33 tabIndex={!disabled ? 0 : undefined}
34 onKeyPress={handleKeyPress}
35 className={cn(
36 'rel pointer pv4 truncate flex-row justify-between us-none',
37 {
38 p4: solid,
39 },
40 {
41 'bg-green3': success && !disabled,
42 'bg-green1': success && disabled,
43 'bg-black': !success && solid && !disabled,
44 'bg-gray3': !success && solid && disabled,
45 'bg-transparent': !success && !solid,
46 },
47 {
48 white: solid,
49 black: !solid && !disabled,
50 gray4: !solid && disabled,
51 },
52 className
53 )}
54 style={{
55 ...(disabled && {
56 pointerEvents: 'none',
57 cursor: 'not-allowed',
58 }),
59 }}
60 onClick={!disabled && onClick ? onClick : undefined}
61 {...rest}>
62 {background}
63 <Grid.Item full as={Flex} justify="between" className="z2">
64 <span>{children}</span>
65 {type && <button type={type} style={{ display: 'none' }}></button>}
66 <div className={cn('pl4')}>{accessory}</div>
67 </Grid.Item>
68 {detail && (
69 <Grid.Item full as={HelpText} className={cn('z2', detailClassName)}>
70 {detail}
71 </Grid.Item>
72 )}
73 {disabled && disabledDetail && (
74 <Grid.Item full className="f6 black mt1 z2">
75 {disabledDetail}
76 </Grid.Item>
77 )}
78 </Grid>
79 );