@@ -1,14 +1,11 @@
11module Yoga.Block.Atom.Input.View where
22
33import Yoga.Prelude.View
4−import Data.Array as Array
5−import Data.Interpolate (i)
64import Data.String.NonEmpty (NonEmptyString)
75import Foreign.Object (Object)
86import Foreign.Object as Object
97import Framer.Motion as M
10−import Partial.Unsafe (unsafeCrashWith)
11−import React.Basic.DOM (CSS, css)
8+import React.Basic.DOM (css)
129import React.Basic.DOM as R
1310import React.Basic.Hooks as React
1411import Web.HTML.HTMLInputElement as InputElement
@@ -49,73 +46,6 @@ mkLeftIcon icon =
4946 }
5047 ]
5148
52−containerVariants ∷
53− { blurred ∷ CSS
54− , focussed ∷ CSS
55− }
56−containerVariants =
57− { focussed:
58− css
59− { clipPath
60− , transition: { duration: 0.6 }
61− }
62− , blurred:
63− css
64− { clipPath:
65− drawPathUntil (Array.length path + 1) path
66− }
67− }
68− where
69− clipPath = 6 Array... (Array.length path) <#> \ln -> drawPathUntil ln path
70−
71−type Point =
72− { x ∷ Int, y ∷ Int }
73−
74−drawPathUntil ∷ Int -> Array Point -> String
75−drawPathUntil idx thePath = do
76− let fn { x, y } = i x "%" " " y "%"
77− let firstFew = Array.take idx thePath
78− let lastFew = Array.drop idx thePath $> (Array.last firstFew # fromMaybe' \_ -> unsafeCrashWith "ogod")
79− let rendered = intercalate "," $ fn <$> (firstFew <> lastFew)
80− i "polygon(" rendered ")"
81−
82−path ∷ Array Point
83−path = mkPath 4 8
84−
85−mkPath ∷ Int -> Int -> Array Point
86−mkPath borderX borderY = do
87− let
88− inside =
89− [ {- ⌜ -} p borderX borderY
90− , {- ⌞ -} p borderX (100 - borderY)
91− , {- ⌟ -} p (100 - borderX) (100 - borderY)
92− , {- ⌝ -} p (100 - borderX) borderY
93− , {- ⌜ -} p borderX borderY
94− ]
95− outside =
96− [ {-⌜ -} p 0 0
97− , {-⌞ -} p 0 100
98− , {- . -} p 25 100
99− , {- . -} p 50 100
100− , {- . -} p 75 100
101− , {- ⌟-} p 100 100
102− , {- ⌝-} p 100 0
103− , {- ^ -} p 75 0
104− , {- ^ -} p 50 0
105− , {- ^ -} p 25 0
106− , {-⌜ -} p 0 0
107− ]
108− inside <> outside <> (Array.reverse inside)
109− where
110− p ∷ Int -> Int -> Point
111− p x y = { x, y }
112−
113−containerVariantLabels ∷
114− { blurred ∷ M.VariantLabel
115− , focussed ∷ M.VariantLabel
116− }
117−containerVariantLabels = M.makeVariantLabels containerVariants
118−
11949rawInput ∷ ∀ p. ReactComponent { | p }
12050rawInput =
12151 mkForwardRefComponent "Input" do
@@ -206,8 +136,7 @@ rawComponent =
206136 )
207137 inputContainer =
208138 rawContainer
209− </ { label: (mkLabel <$> props.label) ?|| mempty
210− , hasFocus: hasFocus
139+ </ { hasFocus: hasFocus
211140 , isInvalid: aria # Object.lookup "invalid" <#> (_ == "true") # maybeToOp
212141 , css: props.css
213142 }