Skip to content

Add support for createRef API #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Aug 10, 2019
Merged

Add support for createRef API #172

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
73ebb39
Get refs compiling
elliotdavies Jul 1, 2019
a469d23
Tidy up
elliotdavies Jul 1, 2019
8b39bdc
Actually include Refs files, duh
elliotdavies Jul 1, 2019
59987d8
Bugfix Ref.js
elliotdavies Jul 25, 2019
5678e34
Add bower.json file
elliotdavies Jul 25, 2019
81d138d
HTMLElement -> NativeNode
elliotdavies Aug 6, 2019
b703b8f
Lift callback refs into an object
elliotdavies Aug 6, 2019
42c7274
Missed reference to HTMLElement
elliotdavies Aug 6, 2019
76316db
Remove unneeded import
elliotdavies Aug 6, 2019
15ad056
Comments
elliotdavies Aug 6, 2019
62106d3
DOM -> Node
elliotdavies Aug 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Get refs compiling
  • Loading branch information
@elliotdavies
elliotdavies committed Jul 1, 2019
commit 73ebb39afaf3346ff05f542380414831a367970c
10 changes: 3 additions & 7 deletions src/React.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ module React
, pureComponentWithDerivedState
, statelessComponent
, ReactClass
, ReactRef
, getProps
, getState
, setState
Expand Down Expand Up @@ -68,13 +67,14 @@ module React

import Prelude

import Data.Nullable (Nullable)
-- import Data.Nullable (Nullable)
import Effect (Effect)
import Effect.Exception (Error)
import Effect.Uncurried (EffectFn1)
import Prim.Row as Row
import Type.Row (type (+))
import Unsafe.Coerce (unsafeCoerce)
import React.Ref as Ref

-- | Name of a tag.
type TagName = String
Expand Down Expand Up @@ -252,10 +252,6 @@ foreign import data ReactClass :: Type -> Type

foreign import fragment :: ReactClass { children :: Children }

-- | Type for React refs. This type is opaque, but you can use `Data.Foreign`
-- | and `DOM` to validate the underlying representation.
foreign import data ReactRef :: Type

-- | Read the component props.
foreign import getProps :: forall props state.
ReactThis props state ->
Expand Down Expand Up @@ -340,7 +336,7 @@ class ReactPropFields (required :: # Type) (given :: # Type)

type ReservedReactPropFields r =
( key :: String
, ref :: SyntheticEventHandler (Nullable ReactRef)
, ref :: Ref.RefHandler Ref.ReactInstance
| r
)

Expand Down
9 changes: 5 additions & 4 deletions src/React/DOM/Props.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ module React.DOM.Props where

import Prelude

import Data.Nullable (Nullable)
import Web.HTML.HTMLElement (HTMLElement)
-- import Data.Nullable (Nullable)
import Effect (Effect)
import Effect.Uncurried (mkEffectFn1)
import React (ReactRef)
import React.Ref as Ref
import React.SyntheticEvent
( SyntheticEvent
, SyntheticAnimationEvent
Expand Down Expand Up @@ -894,8 +895,8 @@ onScrollCapture f = unsafeMkProps "onScrollCapture" (mkEffectFn1 f)
onWheelCapture :: (SyntheticWheelEvent -> Effect Unit) -> Props
onWheelCapture f = unsafeMkProps "onWheelCapture" (mkEffectFn1 f)

ref :: (Nullable ReactRef -> Effect Unit) -> Props
ref f = unsafeMkProps "ref" (mkEffectFn1 f)
ref :: Ref.RefHandler HTMLElement -> Props
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this always HTMLElement here? For example, on React Native, would this be something different?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I haven't used React Native myself, but I looked into this and as far as I can tell Native doesn't have refs - it seems to use something called Direct Manipulation instead. This does raise the question of why the React team put refs in the React library instead of ReactDOM; I'm not sure what the answer is.

ref = unsafeMkProps "ref"

suppressContentEditableWarning :: Boolean -> Props
suppressContentEditableWarning = unsafeMkProps "suppressContentEditableWarning"
Expand Down