git.iko.soy/bridge
on b4af090 help sign in
bridge/src/indigo-react/components/Button.jsx
85 lines 2.1 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 center = false,
23 ...rest
24}) {
25 const handleKeyPress = e => {
26 if (e.key === 'Enter' && !disabled) {
27 onClick();
28 }
29 };
30 return (
31 <Grid
32 as={As}
33 gap={1}
34 tabIndex={!disabled ? 0 : undefined}
35 onKeyPress={handleKeyPress}
36 className={cn(
37 'rel pointer pv2 truncate flex-row justify-between us-none r4',
38 {
39 p2: solid,
40 },
41 {
42 'bg-green3': success && !disabled,
43 'bg-green1': success && disabled,
44 'bg-black': !success && solid && !disabled,
45 'bg-gray3': !success && solid && disabled,
46 'bg-transparent': !success && !solid,
47 },
48 {
49 white: solid,
50 black: !solid && !disabled,
51 gray4: !solid && disabled,
52 },
53 className
54 )}
55 style={{
56 ...(disabled && {
57 pointerEvents: 'none',
58 cursor: 'not-allowed',
59 }),
60 }}
61 onClick={!disabled && onClick ? onClick : undefined}
62 {...rest}>
63 {background}
64 <Grid.Item
65 full
66 as={Flex}
67 justify="between"
68 className={cn('z2', { 'flex-center': center })}>
69 <span>{children}</span>
70 {type && <button type={type} style={{ display: 'none' }}></button>}
71 {!center && <div className={cn('pl4')}>{accessory}</div>}
72 </Grid.Item>
73 {detail && (
74 <Grid.Item full as={HelpText} className={cn('z2', detailClassName)}>
75 {detail}
76 </Grid.Item>
77 )}
78 {disabled && disabledDetail && (
79 <Grid.Item full className="f6 black mt1 z2">
80 {disabledDetail}
81 </Grid.Item>
82 )}
83 </Grid>
84 );