@@ -1,10 +1,6 @@
11module Yoga.Block.Motion.Story where
22
33import Prelude
4−import Yoga.Block.Layout.Centre as Centre
5−import Yoga.Block.Container.Style as Styles
6−import Yoga.Block.Layout.Sidebar as Sidebar
7−import Yoga.Block.Layout.Stack as Stack
84import Data.Monoid (guard)
95import Data.Tuple (Tuple(..))
106import Data.Tuple.Nested ((/\))
@@ -18,12 +14,16 @@ import React.Basic.DOM as R
1814import React.Basic.Emotion (center, flex)
1915import React.Basic.Emotion as E
2016import React.Basic.Events (handler_)
21−import React.Basic.Hooks (useState)
17+import React.Basic.Hooks (reactComponent, useState)
2218import React.Basic.Hooks as React
2319import Untagged.Coercible (coerce)
24−import Yoga (el, reactComponent, styled)
20+import Yoga (el, styled)
21+import Yoga.Block.Container.Style as Styles
2522import Yoga.Block.Internal (_0)
2623import Yoga.Block.Internal.CSS (_100percent)
24+import Yoga.Block.Layout.Centre as Centre
25+import Yoga.Block.Layout.Sidebar as Sidebar
26+import Yoga.Block.Layout.Stack as Stack
2727
2828default ∷
2929 { decorators ∷ Array (Effect JSX -> JSX)
@@ -47,29 +47,27 @@ motion = do
4747 where
4848 mkMc = do
4949 motionCentre <- M.custom Centre.component
50− pure
51− $ reactComponent "MotionTest" \{} -> React.do
52− Tuple isOpen setIsOpen <- React.useState false
53− pure
54− $ fragment
55− [ E.element R.div'
56− { className: "bg"
57− , css: backgroundStyle
58− , children:
59− [ E.element motionCentre
60− ( { className: "parent"
61− , css: parentStyle <> if isOpen then parentStyleOpen else mempty
62− , onClick: handler_ (setIsOpen not)
63− , style: css { y: if isOpen then -70 else 0, skew: if isOpen then 30 else 0 }
50+ reactComponent "MotionTest" \{} -> React.do
51+ Tuple isOpen setIsOpen <- React.useState false
52+ pure
53+ $ fragment
54+ [ E.element R.div'
55+ { className: "bg"
56+ , css: backgroundStyle
57+ , children:
58+ [ E.element motionCentre
59+ ( { className: "parent"
60+ , css: parentStyle <> if isOpen then parentStyleOpen else mempty
61+ , onClick: handler_ (setIsOpen not)
62+ }
63+ `withMotion`
64+ { layout: true
65+ , initial: css { borderRadius: 50, y: 0 }
6466 }
65− `withMotion`
66− { layout: true
67− , initial: css { borderRadius: 50 }
68− }
69− )
70− ]
71− }
72− ]
67+ )
68+ ]
69+ }
70+ ]
7371
7472 backgroundStyle ∷ E.Style
7573 backgroundStyle =
@@ -121,120 +119,118 @@ layoutTrans = do
121119 mc <- mkMc
122120 pure $ element mc {}
123121 where
124− mkMc = do
125− pure
126− $ reactComponent "MotionTest" \{} -> React.do
127− sidebarOpen /\ setSidebarOpen <- useState true
128− let
129− ava1 =
130− el M.div
131− { layout: coerce true
132− , layoutId: coerce "ava"
133− , key: "ava"
134− , onClick: handler_ (setSidebarOpen not)
135− , transition: M.transition { delay: 0.2, type: "spring", damping: 30, stiffness: 200 }
136− , style:
137− css
138− { height: "200px"
139− , width: "200px"
140− , borderRadius: "50%"
141− , border: "4px solid darkslateblue"
142− , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"
143− , backgroundSize: "cover"
144− }
122+ mkMc =
123+ reactComponent "MotionTest" \{} -> React.do
124+ sidebarOpen /\ setSidebarOpen <- useState true
125+ let
126+ ava1 =
127+ el M.div
128+ { layout: coerce true
129+ , layoutId: coerce "ava"
130+ , key: "ava"
131+ , onClick: handler_ (setSidebarOpen not)
132+ , transition: M.transition { delay: 0.2, type: "spring", damping: 30, stiffness: 200 }
133+ , style:
134+ css
135+ { height: "200px"
136+ , width: "200px"
137+ , borderRadius: "50%"
138+ , border: "4px solid darkslateblue"
139+ , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"
140+ , backgroundSize: "cover"
145141 }
146− []
147− ava2 =
148− el M.div
149− { layout: coerce true
150− , layoutId: coerce "ava"
151− , key: "ava"
152− , onClick: handler_ (setSidebarOpen not)
153− , style:
154− css
155− { height: "100px"
156− , width: "100px"
157− , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"
158− , backgroundSize: "cover"
159− , borderRadius: "50%"
160− , border: "2px solid darkslateblue"
161− }
142+ }
143+ []
144+ ava2 =
145+ el M.div
146+ { layout: coerce true
147+ , layoutId: coerce "ava"
148+ , key: "ava"
149+ , onClick: handler_ (setSidebarOpen not)
150+ , style:
151+ css
152+ { height: "100px"
153+ , width: "100px"
154+ , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"
155+ , backgroundSize: "cover"
156+ , borderRadius: "50%"
157+ , border: "2px solid darkslateblue"
162158 }
163− []
164− ava3 =
165− el M.div
166− { onClick: handler_ (setSidebarOpen not)
167− , exit: M.exit (css { scale: 1.4, opacity: 0 })
168− , transition: M.transition { duration: 0.19 }
169− , style:
170− css
171− { height: "100px"
172− , width: "100px"
173− , background: "oldlace"
174− , borderRadius: "50%"
175− , border: "4px solid darkslateblue"
176− }
159+ }
160+ []
161+ ava3 =
162+ el M.div
163+ { onClick: handler_ (setSidebarOpen not)
164+ , exit: M.exit (css { scale: 1.4, opacity: 0 })
165+ , transition: M.transition { duration: 0.19 }
166+ , style:
167+ css
168+ { height: "100px"
169+ , width: "100px"
170+ , background: "oldlace"
171+ , borderRadius: "50%"
172+ , border: "4px solid darkslateblue"
177173 }
178− []
179− pure
180− $ el animateSharedLayout {}
181− [ el M.animatePresence {}
182− [ if sidebarOpen then
183− ava1
184− else
185− el Stack.component {} [ ava2, ava3 ]
186− ]
174+ }
175+ []
176+ pure
177+ $ el animateSharedLayout {}
178+ [ el M.animatePresence {}
179+ [ if sidebarOpen then
180+ ava1
181+ else
182+ el Stack.component {} [ ava2, ava3 ]
187183 ]
184+ ]
188185
189186animatedSidebar ∷ Effect JSX
190187animatedSidebar = do
191188 mc <- mkMc
192189 pure $ element mc {}
193190 where
194− mkMc = do
195− pure
196− $ reactComponent "MotionTest" \{} -> React.do
197− sidebarOpen /\ setSidebarOpen <- useState true
198− let
199− sb =
200− styled M.div
201− { className: "sidebar"
202− , css: if sidebarOpen then sidebarStyleOpen else sidebarStyleHidden
203− , onClick: handler_ (setSidebarOpen not)
204− , initial: M.initial $ css { opacity: 0 }
205− , animate: M.animate $ css { opacity: 1, width: "200px" }
206− , exit: M.exit $ css { opacity: 0 }
207− , key: "sidebar"
208− }
209− [ R.text $ if sidebarOpen then "Sidebar" else "|||" ]
210− pure
211− $ styled R.div'
212− { className: "bg"
213− , css: backgroundStyle
191+ mkMc =
192+ reactComponent "MotionTest" \{} -> React.do
193+ sidebarOpen /\ setSidebarOpen <- useState true
194+ let
195+ sb =
196+ styled M.div
197+ { className: "sidebar"
198+ , css: if sidebarOpen then sidebarStyleOpen else sidebarStyleHidden
199+ , onClick: handler_ (setSidebarOpen not)
200+ , initial: M.initial $ css { opacity: 0 }
201+ , animate: M.animate $ css { opacity: 1, width: "200px" }
202+ , exit: M.exit $ css { opacity: 0 }
203+ , key: "sidebar"
204+ }
205+ [ R.text $ if sidebarOpen then "Sidebar" else "|||" ]
206+ pure
207+ $ styled R.div'
208+ { className: "bg"
209+ , css: backgroundStyle
210+ }
211+ [ el Sidebar.component
212+ { className: "parent"
213+ , css: sidebarContainerStyle
214214 }
215− [ el Sidebar.component
216− { className: "parent"
217− , css: sidebarContainerStyle
215+ [ styled R.div'
216+ { css: sidebarStyle
217+ , className: "sidebarContainer"
218218 }
219− [ styled R.div'
220− { css: sidebarStyle
221− , className: "sidebarContainer"
219+ [ element M.animatePresence
220+ { children: [ guard sidebarOpen sb ]
222221 }
223− [ element M.animatePresence
224− { children: [ guard sidebarOpen sb ]
222+ , R.div_
223+ [ el M.h1
224+ { initial: M.initial (css { x: -10, opacity: 0 })
225+ , animate: M.animate $ css { x: [ -10, -3, 0 ], opacity: [ 0.1, 0.2, 1.0 ] }
226+ , transition: M.transition { duration: 0.6, times: [ 0.1, 0.4, 1.0 ] }
227+ , key: "non-sidebar-heading"
225228 }
226− , R.div_
227− [ el M.h1
228− { initial: M.initial (css { x: -10, opacity: 0 })
229− , animate: M.animate $ css { x: [ -10, -3, 0 ], opacity: [ 0.1, 0.2, 1.0 ] }
230− , transition: M.transition { duration: 0.6, times: [ 0.1, 0.4, 1.0 ] }
231− , key: "non-sidebar-heading"
232− }
233− [ R.text "Non-sidebar" ]
234− ]
229+ [ R.text "Non-sidebar" ]
235230 ]
236231 ]
237232 ]
233+ ]
238234
239235 variantLabels = makeVariantLabels variants
240236