git.iko.soy/rowtype-yoga/psfp
on de44991 help sign in
rowtype-yoga/psfp/client/src/SVG/Icon.purs
122 lines 4.6 kB history raw
1module SVG.Icon where
3import Prelude
5import CSS.Safer (cssSafer)
6import Data.Monoid (guard)
7import Effect (Effect)
8import Prim.Row (class Union)
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 (CSSTheme)
14import Unsafe.Coerce (unsafeCoerce)
16type ImageProps = ( width ∷ Int, height ∷ Int, className ∷ String )
18type Raw r = ReactComponent { | r }
20foreign import alternativeIconRaw ∷ ∀ r. Raw r
21alternativeIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
22alternativeIcon = unsafeCoerce alternativeIconRaw
24foreign import apIconRaw ∷ ∀ r. Raw r
25apIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
26apIcon = unsafeCoerce apIconRaw
28foreign import appendIconRaw ∷ ∀ r. Raw r
29appendIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
30appendIcon = unsafeCoerce appendIconRaw
32foreign import applyIconRaw ∷ ∀ r. Raw r
33applyIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
34applyIcon = unsafeCoerce applyIconRaw
36foreign import applyflippedIconRaw ∷ ∀ r. Raw r
37applyflippedIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
38applyflippedIcon = unsafeCoerce applyflippedIconRaw
40foreign import bindIconRaw ∷ ∀ r. Raw r
41bindIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
42bindIcon = unsafeCoerce bindIconRaw
44foreign import composeIconRaw ∷ ∀ r. Raw r
45composeIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
46composeIcon = unsafeCoerce composeIconRaw
48foreign import forallIconRaw ∷ ∀ r. Raw r
49forallIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
50forallIcon = unsafeCoerce forallIconRaw
52foreign import kleisliIconRaw ∷ ∀ r. Raw r
53kleisliIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
54kleisliIcon = unsafeCoerce kleisliIconRaw
56foreign import mapIconRaw ∷ ∀ r. Raw r
57mapIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
58mapIcon = unsafeCoerce mapIconRaw
60foreign import mapflippedIconRaw ∷ ∀ r. Raw r
61mapflippedIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
62mapflippedIcon = unsafeCoerce mapflippedIconRaw
64foreign import pslogoIconRaw ∷ ∀ r. Raw r
65pslogoIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
66pslogoIcon = unsafeCoerce pslogoIconRaw
68foreign import trianglelogoIconRaw ∷ ∀ r. Raw r
69trianglelogoIcon ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
70trianglelogoIcon = unsafeCoerce trianglelogoIconRaw
73data ActiveArrowDirection
74 = ArrowPointsRight
75 | ArrowPointsLeft
77derive instance eqActiveArrowDirection ∷ Eq ActiveArrowDirection
79mkMenu ∷ Effect (ReactComponent { activeArrowDirection ∷ ActiveArrowDirection })
80mkMenu = do
81 useStyles <-
82 makeStyles \(theme ∷ CSSTheme) ->
83 { arrow: cssSafer
84 { fill: theme.textColour
85 , transition: "0.3s ease-out"
86 }
87 , arrowInactive: cssSafer
88 { fillOpacity: ".1"
89 }
90 , svg: cssSafer
91 { width: "100%"
92 , height: "100%"
93 , "&:hover":
94 { fill: theme.backgroundColour
95 }
96 }
97 }
98 component "MenuIcon" \{ activeArrowDirection } -> React.do
99 classes <- useStyles
100 pure
101 $ SVG.svg
102 { xmlns: "http://www.w3.org/2000/svg"
103 , viewBox: "0 0 100 100"
104 , fillRule: "nonzero"
105 , strokeLinejoin: "round"
106 , strokeMiterlimit: "2"
107 , className: classes.svg
108 , children:
109 [ SVG.path
110 { 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"
111 , className:
112 classes.arrow <> " "
113 <> guard (activeArrowDirection == ArrowPointsRight) classes.arrowInactive
114 }
115 , SVG.path
116 { 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"
117 , className:
118 classes.arrow <> " "
119 <> guard (activeArrowDirection == ArrowPointsLeft) classes.arrowInactive
120 }
121 ]
122 }