mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Add UseInView
This commit is contained in:
parent
3f732682f6
commit
392806003b
22
.vscode/settings.json
vendored
22
.vscode/settings.json
vendored
@ -1,12 +1,12 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"workbench.colorTheme": "Irul Theme",
|
||||
"search.useGlobalIgnoreFiles": true,
|
||||
"files.watcherExclude": {
|
||||
"**/.spago/**": true,
|
||||
"**/output/**": true,
|
||||
"**/node_modules/**": true,
|
||||
"**/.storybook/**": true,
|
||||
"**/.github/**": true,
|
||||
}
|
||||
}
|
||||
"editor.formatOnSave": true,
|
||||
"workbench.colorTheme": "Kai Light Accent",
|
||||
"search.useGlobalIgnoreFiles": true,
|
||||
"files.watcherExclude": {
|
||||
"**/.spago/**": true,
|
||||
"**/output/**": true,
|
||||
"**/node_modules/**": true,
|
||||
"**/.storybook/**": true,
|
||||
"**/.github/**": true
|
||||
}
|
||||
}
|
||||
|
8396
package-lock.json
generated
8396
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -58,6 +58,7 @@
|
||||
"framer-motion": "^4.0.3",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-intersection-observer": "^8.32.0",
|
||||
"react-popper": "^2.2.4",
|
||||
"react-syntax-highlighter": "^15.3.1"
|
||||
}
|
||||
|
3
src/Yoga/Block/Hook/UseInView.js
Normal file
3
src/Yoga/Block/Hook/UseInView.js
Normal file
@ -0,0 +1,3 @@
|
||||
const reactIntersectionObserver = require("react-intersection-observer")
|
||||
|
||||
exports.useInViewImpl = reactIntersectionObserver.useInView
|
51
src/Yoga/Block/Hook/UseInView.purs
Normal file
51
src/Yoga/Block/Hook/UseInView.purs
Normal file
@ -0,0 +1,51 @@
|
||||
module Yoga.Block.Hook.UseInView where
|
||||
|
||||
import Prelude
|
||||
import Data.Maybe (Maybe)
|
||||
import Data.Nullable (Nullable)
|
||||
import Data.Nullable as Nullable
|
||||
import Data.Time.Duration (Milliseconds)
|
||||
import Effect.Uncurried (EffectFn1, runEffectFn1)
|
||||
import Prim.Row (class Union)
|
||||
import React.Basic.Hooks (Hook, unsafeHook)
|
||||
import Untagged.Union (UndefinedOr, uorToMaybe)
|
||||
import Web.DOM (Element)
|
||||
import Yoga.Block.Internal (NodeRef)
|
||||
|
||||
foreign import data IntersectionObserverEntry ∷ Type
|
||||
|
||||
foreign import data UseInView ∷ Type → Type
|
||||
|
||||
type IntersectionOptions
|
||||
= ( root :: Element
|
||||
, rootMargin :: String
|
||||
, threshold :: Number
|
||||
, triggerOnce :: Boolean
|
||||
, skip :: Boolean
|
||||
, initialInView :: Boolean
|
||||
, trackVisibility :: Boolean
|
||||
, delay :: Milliseconds
|
||||
)
|
||||
|
||||
type InViewResultImpl
|
||||
= { inView :: Boolean
|
||||
, ref :: NodeRef -- not true
|
||||
, entry :: UndefinedOr (Nullable IntersectionObserverEntry)
|
||||
}
|
||||
|
||||
type InViewResult
|
||||
= { inView :: Boolean
|
||||
, ref :: NodeRef -- not true
|
||||
, entry :: Maybe IntersectionObserverEntry
|
||||
}
|
||||
|
||||
foreign import useInViewImpl :: forall r. EffectFn1 { | r } InViewResultImpl
|
||||
|
||||
useInView ::
|
||||
∀ p p_.
|
||||
Union p p_ IntersectionOptions ⇒
|
||||
{ | p } -> Hook UseInView InViewResult
|
||||
useInView props =
|
||||
unsafeHook
|
||||
$ runEffectFn1 useInViewImpl props
|
||||
<#> \x -> x { entry = uorToMaybe x.entry >>= Nullable.toMaybe }
|
Loading…
Reference in New Issue
Block a user