git.iko.soy/rowtype-yoga/psfp
on 21e940e help sign in
rowtype-yoga/psfp/src/SVG/Icon.purs
123 lines 4.4 kB history raw
1module SVG.Icon where
3import Prelude
5import Data.Monoid (guard)
6import Effect (Effect)
7import Prim.Row (class Union)
8import React.Basic.DOM (css)
9import React.Basic.DOM.SVG as SVG
10import React.Basic.Hooks (ReactComponent, component)
11import React.Basic.Hooks as React
12import Theme.Styles (makeStyles)
13import Theme.Types (Theme)
14import Unsafe.Coerce (unsafeCoerce)
16type ImageProps = ( width ∷ Int, height ∷ Int )
18type Raw = ReactComponent { width ∷ Int, height ∷ Int, className ∷ String }
20foreign import alternativeIconRaw ∷ Raw
21alternativeIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
22alternativeIcon = unsafeCoerce alternativeIconRaw
24foreign import apIconRaw ∷ Raw
25apIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
26apIcon = unsafeCoerce apIconRaw
28foreign import appendIconRaw ∷ Raw
29appendIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
30appendIcon = unsafeCoerce appendIconRaw
32foreign import applyIconRaw ∷ Raw
33applyIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
34applyIcon = unsafeCoerce applyIconRaw
36foreign import applyflippedIconRaw ∷ Raw
37applyflippedIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
38applyflippedIcon = unsafeCoerce applyflippedIconRaw
40foreign import bindIconRaw ∷ Raw
41bindIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
42bindIcon = unsafeCoerce bindIconRaw
44foreign import composeIconRaw ∷ Raw
45composeIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
46composeIcon = unsafeCoerce composeIconRaw
48foreign import forallIconRaw ∷ Raw
49forallIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
50forallIcon = unsafeCoerce forallIconRaw
52foreign import kleisliIconRaw ∷ Raw
53kleisliIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
54kleisliIcon = unsafeCoerce kleisliIconRaw
56foreign import mapIconRaw ∷ Raw
57mapIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
58mapIcon = unsafeCoerce mapIconRaw
60foreign import mapflippedIconRaw ∷ Raw
61mapflippedIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
62mapflippedIcon = unsafeCoerce mapflippedIconRaw
64foreign import pslogoIconRaw ∷ Raw
65pslogoIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
66pslogoIcon = unsafeCoerce pslogoIconRaw
70data ActiveArrowDirection
71 = ArrowPointsRight
72 | ArrowPointsLeft
74derive instance eqActiveArrowDirection ∷ Eq ActiveArrowDirection
76mkMenu ∷ Effect (ReactComponent { activeArrowDirection ∷ ActiveArrowDirection })
77mkMenu = do
78 useStyles <-
79 makeStyles \(theme ∷ Theme) ->
80 { arrow:
81 css
82 { fill: theme.textColour
83 , transition: "0.3s ease-out"
84 }
85 , arrowInactive:
86 css
87 { fillOpacity: ".1"
88 }
89 , svg:
90 css
91 { width: "100%"
92 , height: "100%"
93 , "&:hover":
94 css
95 { fill: theme.backgroundColour
96 }
97 }
98 }
99 component "MenuIcon" \{ activeArrowDirection } -> React.do
100 classes <- useStyles
101 pure
102 $ SVG.svg
103 { xmlns: "http://www.w3.org/2000/svg"
104 , viewBox: "0 0 100 100"
105 , fillRule: "nonzero"
106 , strokeLinejoin: "round"
107 , strokeMiterlimit: "2"
108 , className: classes.svg
109 , children:
110 [ SVG.path
111 { d: "M28.72 46.524l8.94.26-7.843 7.388h40.97l-7.87 6.732H29.753l7.64 7.302-8.76.267-10.928-10.88 11.013-11.07zM17.493 57.806l.213-.213-.213.213z"
112 , className:
113 classes.arrow <> " "
114 <> guard (activeArrowDirection == ArrowPointsRight) classes.arrowInactive
115 }
116 , SVG.path
117 { d: "M71.3 53.472l-8.94-.26 7.843-7.388H29.4l7.723-6.732h33.163l-7.64-7.302 8.758-.267 10.93 10.88L71.3 53.472zM82.536 42.2l-.213.213.213-.213z"
118 , className:
119 classes.arrow <> " "
120 <> guard (activeArrowDirection == ArrowPointsLeft) classes.arrowInactive
121 }
122 ]
123 }