Skip to content

P
purescript-reactix-d3
Commit b0a20793 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[example] use rootSelectEl with react element ref

parent b703c5e9
Show whitespace changes
Inline Side-by-side
Showing with 52 additions and 25 deletions
example/index.js
View file @ b0a20793
......@@ -2593,6 +2593,7 @@ var PS = {};
"use strict";
$PS["Data.Maybe"] = $PS["Data.Maybe"] || {};
var exports = $PS["Data.Maybe"];
var Control_Category = $PS["Control.Category"];
var Data_Eq = $PS["Data.Eq"];
var Data_Function = $PS["Data.Function"];
var Data_Functor = $PS["Data.Functor"];
......@@ -2634,6 +2635,9 @@ var PS = {};
return Nothing.value;
};
});
var fromMaybe = function (a) {
return maybe(a)(Control_Category.identity(Control_Category.categoryFn));
};
var fromJust = function (dictPartial) {
return function (v) {
if (v instanceof Just) {
......@@ -2658,6 +2662,7 @@ var PS = {};
exports["Nothing"] = Nothing;
exports["Just"] = Just;
exports["maybe"] = maybe;
exports["fromMaybe"] = fromMaybe;
exports["isNothing"] = isNothing;
exports["fromJust"] = fromJust;
exports["functorMaybe"] = functorMaybe;
......@@ -4480,6 +4485,7 @@ var PS = {};
return dict["style''"];
};
var selectAll = Graphics_D3_Util.ffi([ "selector", "selection", "" ])("selection.selectAll(selector)");
var rootSelectEl = Graphics_D3_Util.ffi([ "node", "" ])("d3.select(node)");
var rootSelect = Graphics_D3_Util.ffiD3([ "selector", "" ])("d3.select(selector)");
var onClick = function (dict) {
return dict.onClick;
......@@ -4550,6 +4556,7 @@ var PS = {};
};
};
exports["rootSelect"] = rootSelect;
exports["rootSelectEl"] = rootSelectEl;
exports["selectAll"] = selectAll;
exports["bindData"] = bindData;
exports["enter"] = enter;
......@@ -4763,6 +4770,7 @@ var PS = {};
exports["createElement"] = createElement;
exports["createDOMElement"] = createDOMElement;
exports["hooksComponentWithModule"] = hooksComponentWithModule;
exports["readRef"] = readRef;
exports["readRefM"] = readRefM;
exports["setRef"] = setRef;
exports["functorHooks"] = functorHooks;
......@@ -5310,7 +5318,7 @@ var PS = {};
return Data_Semigroup.append(Data_Semigroup.semigroupArray)(d)([ newItem$prime.value0 ]);
})(d3Data)();
};
throw new Error("Failed pattern match at Example.React (line 77, column 9 - line 79, column 58): " + [ newItem$prime.constructor.name ]);
throw new Error("Failed pattern match at Example.React (line 86, column 9 - line 88, column 58): " + [ newItem$prime.constructor.name ]);
})();
return Toestand_Classes.write_(Toestand_Boxes.writeBox)(Data_Maybe.Nothing.value)(newItem)();
};
......@@ -5325,23 +5333,33 @@ var PS = {};
};
};
return Control_Bind.bind(Reactix_React.bindHooks)(Reactix_Hooks.useRef(Data_Nullable["null"]))(function (containerRef) {
return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useBox([ "first data" ]))(function (d3Data) {
return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useBox([ "hello" ]))(function (d3Data) {
return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useLive(Toestand_Boxes.readBox)(Toestand_Changes.unequal(Data_Eq.eqArray(Data_Eq.eqString)))(d3Data))(function (d3Data$prime) {
return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useBox(Data_Maybe.Nothing.value))(function (newItem) {
return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useLive(Toestand_Boxes.readBox)(Toestand_Changes.unequal(Data_Maybe.eqMaybe(Data_Eq.eqString)))(newItem))(function (newItem$prime) {
return Control_Bind.discard(Control_Bind.discardUnit)(Reactix_React.bindHooks)(Reactix_Hooks["useLayoutEffect'"](function __do() {
Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableEnter)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#react-svg"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(d3Data$prime)))(Graphics_D3_Selection.enter))("p"))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (_d) {
return Control_Bind.discard(Control_Bind.discardUnit)(Reactix_React.bindHooks)(Reactix_Hooks["useLayoutEffect'"](FFI_Simple_Functions.delay(FFI_Simple_Functions.delayMonad(Effect.monadEffect))(Data_Unit.unit)(function (v2) {
var mContainer = Data_Nullable.toMaybe(Reactix_React.readRef(containerRef));
if (mContainer instanceof Data_Maybe.Nothing) {
return Control_Applicative.pure(Effect.applicativeEffect)(Data_Unit.unit);
};
if (mContainer instanceof Data_Maybe.Just) {
return function __do() {
Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableEnter)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelectEl(mContainer.value0))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(d3Data$prime)))(Graphics_D3_Selection.enter))("p"))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (_d) {
return function (idx) {
var $8 = $$Math.remainder(idx)(2.0) === 0.0;
if ($8) {
var $10 = $$Math.remainder(idx)(2.0) === 0.0;
if ($10) {
return "green";
};
return "red";
};
})))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingSelection)(Data_Show.show(Data_Show.showString)))();
return Data_Unit.unit;
}))(function () {
};
};
throw new Error("Failed pattern match at Example.React (line 53, column 9 - line 63, column 22): " + [ mContainer.constructor.name ]);
})))(function () {
return Control_Applicative.pure(Reactix_React.applicativeHooks)(Reactix_DOM_HTML.div({})([ Reactix_DOM_HTML.div({})([ Reactix_DOM_HTML.form({})([ Reactix_DOM_HTML.label({})([ Reactix_DOM_HTML.text("Enter new item") ]), Reactix_DOM_HTML.input({
defaultValue: Data_Maybe.fromMaybe("")(newItem$prime),
on: {
change: onInputChange(newItem)
}
......
example/src/EReact.purs
View file @ b0a20793
module Example.React where
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..), fromMaybe)
import Data.Nullable (toMaybe, null)
import DOM.Simple as DOM
import DOM.Simple (Element)
......@@ -39,13 +39,21 @@ appCpt = R.hooksComponentWithModule "Example.React" "app" cpt where
cpt {} _ = do
containerRef <- R.useRef null
d3Data <- T.useBox [ "first data" ]
d3Data <- T.useBox [ "hello" ]
d3Data' <- T.useLive T.unequal d3Data
newItem <- T.useBox (Nothing :: Maybe String)
newItem' <- T.useLive T.unequal newItem
R.useLayoutEffect' $ do
_ <- Selection.rootSelect "#react-svg"
-- HACK: Initially, R.readRef containerRef returns null (in this
-- R.useLayoutEffect' call). Using `delay unit` is a hack to wait for the
-- ref to fill in with proper element.
delay unit $ \_ -> do
let mContainer = toMaybe $ R.readRef containerRef
case mContainer of
Nothing -> pure unit
Just cr -> do
_ <- Selection.rootSelectEl cr
>>= Selection.selectAll "p"
>>= Selection.bindData d3Data'
>>= Selection.enter
......@@ -58,7 +66,8 @@ appCpt = R.hooksComponentWithModule "Example.React" "app" cpt where
[ H.div {}
[ H.form {}
[ H.label {} [ H.text "Enter new item" ]
, H.input { on: { change: onInputChange newItem } }
, H.input { defaultValue: fromMaybe "" newItem'
, on: { change: onInputChange newItem } }
, H.button { on: { click: onSubmitClick d3Data newItem newItem' } } [ H.text "submit" ] ]
]
, H.div { id: "react-svg"
......
packages-additions.dhall
View file @ b0a20793
......@@ -2,7 +2,7 @@
d3 =
{ dependencies = (https://raw.githubusercontent.com/cgenie/purescript-d3/master/spago.dhall sha256:125d4268bf940f21bec0809cb8b70be1dfac7f7e52be4d50da9f391f205001a4).dependencies
, repo = "https://github.com/cgenie/purescript-d3"
, version = "master"
, version = "v0.9.1"
}
, dom-simple =
{ dependencies =
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment