@@ -60,237 +60,246 @@ popover = do
6060 ]
6161 ]
6262 where
63− mkAutosuggest ∷ Effect (ReactComponent {})
64− mkAutosuggest = do
65− motionStack <- Motion.custom Stack.component
66− motionPopover <- Motion.custom Popover.component
67− reactComponent "PopoverExample" \props -> React.do
68− referenceElement /\ setReferenceElement <- React.useState' nullRef
69− text /\ setText <- React.useState' ""
70− visible /\ setVisible <- React.useState' false
71− let
72− matchingAuthors =
73− authors
74− # Array.filter (\a -> String.contains (String.Pattern (String.toLower text)) (String.toLower a))
75− let
76− inputWrapper =
77− R.div'
78− </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
79− }
80− input =
81− Input.component
82− </> { id: "author"
83− , type: HTMLInput.Text
84− , label: nes (SProxy ∷ _ "Author")
85− , placeholder: "e.g. William Shakespeare"
86− , value: text
87− , style: css { width: "280px" }
88− , onChange: handler targetValue $ traverse_ setText
89− , onBlur: handler_ (setVisible false)
90− , onFocus: handler_ (setVisible true)
91− , trailing: R.text "▼"
92− , autoComplete: "off"
93− }
94− pop children =
95− elementKeyed motionPopover
96− $ Motion.motion
97− { initial: Motion.initial $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
98− , exit: Motion.exit $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
99− , animate: Motion.animate $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }
100− , transition:
101− Motion.transition
102− $ { type: "spring"
103− , stiffness: 200.0
104− , damping: 20.0
105− , mass: 0.7
106− , delay: 0.3
107− }
63+ mkAutosuggest ∷ Effect (ReactComponent {})
64+ mkAutosuggest = do
65+ motionStack <- Motion.custom Stack.component
66+ motionPopover <- Motion.custom Popover.component
67+ reactComponent "PopoverExample" \props -> React.do
68+ referenceElement /\ setReferenceElement <- React.useState' nullRef
69+ text /\ setText <- React.useState' ""
70+ visible /\ setVisible <- React.useState' false
71+ let
72+ matchingAuthors =
73+ authors
74+ # Array.filter
75+ ( \a ->
76+ String.contains (String.Pattern (String.toLower text))
77+ (String.toLower a)
78+ )
79+ let
80+ inputWrapper =
81+ R.div'
82+ </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
83+ }
84+ input =
85+ Input.component
86+ </> { id: "author"
87+ , type: HTMLInput.Text
88+ , label: nes (SProxy ∷ _ "Author")
89+ , placeholder: "e.g. William Shakespeare"
90+ , value: text
91+ , style: css { width: "280px" }
92+ , onChange: handler targetValue $ traverse_ setText
93+ , onBlur: handler_ (setVisible false)
94+ , onFocus: handler_ (setVisible true)
95+ , trailing: R.text "▼"
96+ , autoComplete: "off"
10897 }
109− { placement: Placement Placement.Bottom (Just Placement.Start)
110− , referenceElement
111− , style:
98+ pop children =
99+ elementKeyed motionPopover
100+ $ Motion.motion
101+ { initial:
102+ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
103+ , exit:
104+ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }
105+ , animate:
106+ css
107+ { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
108+ }
109+ , transition:
110+ Motion.transition
111+ $ { type: "spring"
112+ , stiffness: 200.0
113+ , damping: 20.0
114+ , mass: 0.7
115+ , delay: 0.3
116+ }
117+ }
118+ { placement: Placement Placement.Bottom (Just Placement.Start)
119+ , referenceElement
120+ , style:
121+ css
122+ { boxShadow: "0px 9px 12px rgba(40,40,40,0.5)"
123+ , background: "rgba(50,50,70, 0.7)"
124+ , borderRadius: "9px"
125+ , borderTop: "solid 1px rgba(80,80,100,1.0)"
126+ , overflowY: "scroll"
127+ , maxHeight: "400px"
128+ , width: "300px"
129+ }
130+ , key: "popover"
131+ , children
132+ }
133+ box =
134+ Box.component
135+ </ { style:
112136 css
113− { boxShadow: "0px 9px 12px rgba(40,40,40,0.5)"
114− , background: "rgba(50,50,70, 0.7)"
115− , borderRadius: "9px"
116− , borderTop: "solid 1px rgba(80,80,100,1.0)"
117− , overflowY: "scroll"
118− , maxHeight: "400px"
119− , width: "300px"
120− }
121− , key: "popover"
122− , children
137+ {}
123138 }
124− box =
125− Box.component
126− </ { style:
127− css
139+ stack =
140+ motionStack
141+ </ Motion.motion {}
142+ -- { variants: Motion.variants containerVariants
143+ -- , animate: Motion.animate (if visible then containerVariant.visible else containerVariant.hidden)
144+ -- , layout: Motion.layout true
145+ -- }
128146 {}
129− }
130− stack =
131− motionStack
132− </ Motion.motion {}
133− -- { variants: Motion.variants containerVariants
134− -- , animate: Motion.animate (if visible then containerVariant.visible else containerVariant.hidden)
147+ entry a =
148+ Motion.div
149+ </ { key: a
135150 -- , layout: Motion.layout true
136− -- }
137− {}
138− entry a =
139− Motion.div
140− </ { key: a
141− -- , layout: Motion.layout true
142− -- , variants: Motion.variants itemVariants
143− }
144− /> [ R.text a ]
145− pure
146− $ fragment
147− [ inputWrapper [ input ]
148− , animatePresence
149− </ {}
150− /> [ guard visible
151− $ pop
152− [ box
153− [ stack (entry <$> matchingAuthors)
154− ]
155− ]
156− ]
157− ]
158− where
159− itemVariants ∷
160− { hidden ∷ CSS
161− , visible ∷ CSS
162− }
163− itemVariants =
164− { visible:
165− css
166− { left: 0
151+ -- , variants: Motion.variants itemVariants
152+ }
153+ /> [ R.text a ]
154+ pure
155+ $ fragment
156+ [ inputWrapper [ input ]
157+ , animatePresence
158+ </ {}
159+ /> [ guard visible
160+ $ pop
161+ [ box
162+ [ stack (entry <$> matchingAuthors)
163+ ]
164+ ]
165+ ]
166+ ]
167+ where
168+ itemVariants ∷
169+ { hidden ∷ CSS
170+ , visible ∷ CSS
167171 }
168− , hidden:
169− css
170− { left: -20
172+ itemVariants =
173+ { visible:
174+ css
175+ { left: 0
176+ }
177+ , hidden:
178+ css
179+ { left: -20
180+ }
171181 }
172− }
173182
174− containerVariants ∷
175− { hidden ∷ CSS
176− , visible ∷ CSS
177− }
178− containerVariants =
179− { visible:
180− css
181− { transition: { when: "beforeChildren" }
182− , staggerChildren: 0.3
183− , opacity: 1
183+ containerVariants ∷
184+ { hidden ∷ CSS
185+ , visible ∷ CSS
184186 }
185− , hidden:
186− css
187− { transition: { when: "afterChildren" }
188− , opacity: 0
187+ containerVariants =
188+ { visible:
189+ css
190+ { transition: { when: "beforeChildren" }
191+ , staggerChildren: 0.3
192+ , opacity: 1
193+ }
194+ , hidden:
195+ css
196+ { transition: { when: "afterChildren" }
197+ , opacity: 0
198+ }
189199 }
190− }
191200
192− containerVariant ∷
193− { hidden ∷ Motion.VariantLabel
194− , visible ∷ Motion.VariantLabel
195− }
196− containerVariant = Motion.makeVariantLabels containerVariants
201+ containerVariant ∷
202+ { hidden ∷ Motion.VariantLabel
203+ , visible ∷ Motion.VariantLabel
204+ }
205+ containerVariant = Motion.makeVariantLabels containerVariants
197206
198− authors =
199− [ "William Shakespeare"
200− , "Agatha Christie"
201− , "Barbara Cartland"
202− , "Danielle Steel"
203− , "Harold Robbins"
204− , "Georges Simenon"
205− , "Enid Blyton"
206− , "Sidney Sheldon"
207− , "J. K. Rowling"
208− , "Gilbert Patten"
209− , "Dr. Seuss"
210− , "Eiichiro Oda"
211− , "Leo Tolstoy"
212− , "Corín Tellado"
213− , "Jackie Collins"
214− , "Horatio Alger"
215− , "R. L. Stine"
216− , "Dean Koontz"
217− , "Nora Roberts"
218− , "Alexander Pushkin"
219− , "Stephen King"
220− , "Paulo Coelho"
221− , "Jeffrey Archer"
222− , "Louis L'Amour"
223− , "Jirō Akagawa"
224− , "René Goscinny"
225− , "Erle Stanley Gardner"
226− , "Edgar Wallace"
227− , "Jin Yong"
228− , "Janet Dailey"
229− , "Robert Ludlum"
230− , "Akira Toriyama"
231− , "Osamu Tezuka"
232− , "James Patterson"
233− , "Frédéric Dard"
234− , "Stan and Jan Berenstain"
235− , "Roald Dahl"
236− , "John Grisham"
237− , "Zane Grey"
238− , "Irving Wallace"
239− , "J. R. R. Tolkien"
240− , "Masashi Kishimoto"
241− , "Karl May"
242− , "Carter Brown"
243− , "Mickey Spillane"
244− , "C. S. Lewis"
245− , "Kyotaro Nishimura"
246− , "Mitsuru Adachi"
247− , "Rumiko Takahashi"
248− , "Gosho Aoyama"
249− , "Dan Brown"
250− , "Ann M. Martin"
251− , "Ryōtarō Shiba"
252− , "Arthur Hailey"
253− , "Gérard de Villiers"
254− , "Beatrix Potter"
255− , "Michael Crichton"
256− , "Richard Scarry"
257− , "Clive Cussler"
258− , "Alistair MacLean"
259− , "Ken Follett"
260− , "Astrid Lindgren"
261− , "Debbie Macomber"
262− , "EL James"
263− , "Tite Kubo"
264− , "Eiji Yoshikawa"
265− , "Catherine Cookson"
266− , "Stephenie Meyer"
267− , "Norman Bridwell"
268− , "David Baldacci"
269− , "Nicholas Sparks"
270− , "Hirohiko Araki"
271− , "Evan Hunter"
272− , "Andrew Neiderman"
273− , "Roger Hargreaves"
274− , "Anne Rice"
275− , "Robin Cook"
276− , "Wilbur Smith"
277− , "Erskine Caldwell"
278− , "Judith Krantz"
279− , "Eleanor Hibbert"
280− , "Lewis Carroll"
281− , "Denise Robins"
282− , "Cao Xueqin"
283− , "Ian Fleming"
284− , "Hermann Hesse"
285− , "Rex Stout"
286− , "Anne Golon"
287− , "Frank G. Slaughter"
288− , "Edgar Rice Burroughs"
289− , "John Creasey"
290− , "James A. Michener"
291− , "Yasuo Uchida"
292− , "Seiichi Morimura"
293− , "Mary Higgins Clark"
294− , "Penny Jordan"
295− , "Patricia Cornwell"
296− ]
207+ authors =
208+ [ "William Shakespeare"
209+ , "Agatha Christie"
210+ , "Barbara Cartland"
211+ , "Danielle Steel"
212+ , "Harold Robbins"
213+ , "Georges Simenon"
214+ , "Enid Blyton"
215+ , "Sidney Sheldon"
216+ , "J. K. Rowling"
217+ , "Gilbert Patten"
218+ , "Dr. Seuss"
219+ , "Eiichiro Oda"
220+ , "Leo Tolstoy"
221+ , "Corín Tellado"
222+ , "Jackie Collins"
223+ , "Horatio Alger"
224+ , "R. L. Stine"
225+ , "Dean Koontz"
226+ , "Nora Roberts"
227+ , "Alexander Pushkin"
228+ , "Stephen King"
229+ , "Paulo Coelho"
230+ , "Jeffrey Archer"
231+ , "Louis L'Amour"
232+ , "Jirō Akagawa"
233+ , "René Goscinny"
234+ , "Erle Stanley Gardner"
235+ , "Edgar Wallace"
236+ , "Jin Yong"
237+ , "Janet Dailey"
238+ , "Robert Ludlum"
239+ , "Akira Toriyama"
240+ , "Osamu Tezuka"
241+ , "James Patterson"
242+ , "Frédéric Dard"
243+ , "Stan and Jan Berenstain"
244+ , "Roald Dahl"
245+ , "John Grisham"
246+ , "Zane Grey"
247+ , "Irving Wallace"
248+ , "J. R. R. Tolkien"
249+ , "Masashi Kishimoto"
250+ , "Karl May"
251+ , "Carter Brown"
252+ , "Mickey Spillane"
253+ , "C. S. Lewis"
254+ , "Kyotaro Nishimura"
255+ , "Mitsuru Adachi"
256+ , "Rumiko Takahashi"
257+ , "Gosho Aoyama"
258+ , "Dan Brown"
259+ , "Ann M. Martin"
260+ , "Ryōtarō Shiba"
261+ , "Arthur Hailey"
262+ , "Gérard de Villiers"
263+ , "Beatrix Potter"
264+ , "Michael Crichton"
265+ , "Richard Scarry"
266+ , "Clive Cussler"
267+ , "Alistair MacLean"
268+ , "Ken Follett"
269+ , "Astrid Lindgren"
270+ , "Debbie Macomber"
271+ , "EL James"
272+ , "Tite Kubo"
273+ , "Eiji Yoshikawa"
274+ , "Catherine Cookson"
275+ , "Stephenie Meyer"
276+ , "Norman Bridwell"
277+ , "David Baldacci"
278+ , "Nicholas Sparks"
279+ , "Hirohiko Araki"
280+ , "Evan Hunter"
281+ , "Andrew Neiderman"
282+ , "Roger Hargreaves"
283+ , "Anne Rice"
284+ , "Robin Cook"
285+ , "Wilbur Smith"
286+ , "Erskine Caldwell"
287+ , "Judith Krantz"
288+ , "Eleanor Hibbert"
289+ , "Lewis Carroll"
290+ , "Denise Robins"
291+ , "Cao Xueqin"
292+ , "Ian Fleming"
293+ , "Hermann Hesse"
294+ , "Rex Stout"
295+ , "Anne Golon"
296+ , "Frank G. Slaughter"
297+ , "Edgar Rice Burroughs"
298+ , "John Creasey"
299+ , "James A. Michener"
300+ , "Yasuo Uchida"
301+ , "Seiichi Morimura"
302+ , "Mary Higgins Clark"
303+ , "Penny Jordan"
304+ , "Patricia Cornwell"
305+ ]