-
-
Notifications
You must be signed in to change notification settings - Fork 39
/
button.ts
79 lines (65 loc) 路 2 KB
/
button.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { h, strToHash } from '../core.ts'
import { boxShadow, rippleEffect, userSelect, zIndex } from './_config.ts'
import { addStylesToHead, lightenColor } from './_helpers.ts'
import { Icon } from './icon.ts'
export const Button = (props: {
outlined?: boolean
text?: boolean
style?: string
icon?: string
[key: string]: any
}) => {
const {
children,
outlined = false,
text = false,
background = '#6200ee',
color = '#ffffff',
style = '',
class: className = '',
icon,
...rest
} = props
const normal = !(outlined || text)
const bg = normal ? background : '#ffffff'
const clr = normal ? color : background
const hoverClr = normal ? lightenColor(bg, 10) : lightenColor(bg, -10)
const rippleClr = normal ? lightenColor(bg, 50) : lightenColor(background, 50)
const cssHash = strToHash(outlined.toString() + text.toString() + bg + clr + style)
const ripple = rippleEffect(rippleClr, hoverClr)
const styles = `
.nano_jsx_button-${cssHash} {
color: ${clr};
background: ${bg};
border-radius: 4px;
display: inline-flex;
font-size: 14px;
padding: 10px 16px;
margin: 0px 0px 1em 0px;
text-align: center;
cursor: pointer;
${userSelect}
z-index: ${zIndex.button}
${boxShadow}
border: none;
text-transform: uppercase;
box-shadow: 0 0 4px #999;
outline: none;
}
${ripple.styles}
`
addStylesToHead(styles, cssHash)
let customStyles = ''
if (outlined || text) {
customStyles += 'padding-top: 9px; padding-bottom: 9px; '
customStyles += '-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow none; '
if (outlined) customStyles += `border: 1px ${clr} solid; `
}
customStyles += style
return h(
'button',
{ class: `nano_jsx_button-${cssHash} ${ripple.class} ${className}`, style: customStyles, ...rest },
icon ? h(Icon, { style: 'margin-left: -4px; margin-right: 8px; width: 14px; height: 14px;' }, icon) : null,
children
)
}