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
import { Component } from '../component.ts'import { h, strToHash } from '../core.ts'import { boxShadow, userSelect, zIndex } from './_config.ts'import { addStylesToHead } from './_helpers.ts'
interface FabProps {  onClick?: (e: MouseEvent) => void  offsetY?: number  center?: boolean  left?: boolean  extended?: boolean  mini?: boolean  background?: string  color?: string}
export class Fab extends Component<FabProps> {  render() {    const {      background = '#6200EE',      color = 'white',      extended = false,      mini = false,      center = false,      left = false,      onClick = () => {}    } = this.props
    const height = mini ? 40 : extended ? 48 : 56    const cssHash = strToHash(extended.toString() + mini.toString() + center.toString() + left.toString())    const className = `fab-container-${cssHash}`
    const styles = `      .${className} {        ${mini ? 'width: 40px;' : extended ? 'padding: 0px 12px;' : 'width: 56px;'}        height: ${height}px;        position: fixed;        background: ${background};        border-radius: 36px;        display: flex;        align-items: center;        justify-content: center;        color: ${color};        cursor: pointer;
        z-index: ${zIndex.fab}        bottom: ${this.props.offsetY ? 16 + this.props.offsetY : 16}px;                ${left ? 'left: 16px;' : 'right: 16px;'}        ${center ? 'transform: translateX(50%); right: 50%;' : ''}        ${boxShadow}        ${userSelect}      }    `
    addStylesToHead(styles, cssHash)
    const { children } = this.props as any
    return h('div', { class: className, onClick: (e: MouseEvent) => onClick(e) }, children)  }}