notea/components/icon-button.tsx at 8b121fdca1af0feb71f0ab72ef5994c81ec88190 · notea-org/notea · GitHub

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import classNames from 'classnames'
import { forwardRef, HTMLProps, useCallback } from 'react'
import {
  TrashIcon,
  MenuIcon,
  PlusIcon,
  DotsHorizontalIcon,
  ChevronRightIcon,
  ReplyIcon,
  ShareIcon,
  DuplicateIcon,
  DocumentIcon,
  DocumentTextIcon,
  SelectorIcon,
  LinkIcon,
  ArrowSmLeftIcon,
  ArrowSmRightIcon,
  ExternalLinkIcon,
  BookmarkAltIcon,
  PuzzleIcon,
  ChevronDoubleUpIcon,
  SaveIcon,
} from '@heroicons/react/outline'

export const ICONS = {
  Trash: TrashIcon,
  Menu: MenuIcon,
  Plus: PlusIcon,
  DotsHorizontal: DotsHorizontalIcon,
  ChevronRight: ChevronRightIcon,
  Reply: ReplyIcon,
  Share: ShareIcon,
  Duplicate: DuplicateIcon,
  Document: DocumentIcon,
  DocumentText: DocumentTextIcon,
  Selector: SelectorIcon,
  Link: LinkIcon,
  ArrowSmLeft: ArrowSmLeftIcon,
  ArrowSmRight: ArrowSmRightIcon,
  ExternalLink: ExternalLinkIcon,
  BookmarkAlt: BookmarkAltIcon,
  Puzzle: PuzzleIcon,
  ChevronDoubleUp: ChevronDoubleUpIcon,
  Save: SaveIcon,
}

const IconButton = forwardRef<
  HTMLSpanElement,
  HTMLProps<HTMLSpanElement> & {
    icon: keyof typeof ICONS
    iconClassName?: string
    rounded?: boolean
  }
>(
  (
    {
      children,
      rounded = true,
      className,
      iconClassName = '',
      icon,
      disabled,
      onClick,
      ...attrs
    },
    ref
  ) => {
    const Icon = ICONS[icon]

    const handleClick = useCallback(
      (event) => {
        if (!disabled && onClick) {
          onClick(event)
        }
      },
      [disabled, onClick]
    )

    return (
      <span
        ref={ref}
        onClick={handleClick}
        {...attrs}
        className={classNames(
          'block p-0.5 cursor-pointer w-7 h-7 md:w-6 md:h-6',
          {
            rounded,
            'cursor-not-allowed opacity-20': disabled,
          },
          !disabled && 'hover:bg-gray-400',
          className
        )}
      >
        <Icon className={classNames(iconClassName)}></Icon>
        {children}
      </span>
    )
  }
)

export default IconButton