Skip to content

Instantly share code, notes, and snippets.

@Frikki

Frikki/dialogue.js

Last active Oct 3, 2017
Embed
What would you like to do?
Simple Cycle.js (Nested) Dialogue with MVI Example
/** @jsx hJSX */
import {hJSX} from '@cycle/dom';
const DIALOGUE_NAME = `dialogue`;
let idSuffix = 0;
function makeCycleId() {
return `${DIALOGUE_NAME}-${idSuffix++}`;
}
function intent({DOM, cycleId}) {
return {
isClicked$: DOM.select(`.${cycleId}`).events(`click`)
.map(() => true)
.startWith(false),
};
}
function model({props$, actions}) {
return props$.combineLatest(
actions.isClicked$,
(props, isClicked) => {
return {
data: isClicked ?
<span style={{whiteSpace: `nowrap`}}>I was clicked</span> :
`Click me!`,
text: props.text,
};
});
}
function view({state$, cycleId}) {
return state$.map(
(state) => ( // eslint-disable-line
<div className={`${cycleId} ${DIALOGUE_NAME}`}>
{state.text} {state.data}
</div>
)
);
}
function dialogue({DOM, props$, optCycleId = makeCycleId()}) {
const cycleId = optCycleId.trim();
const actions = intent(DOM, cycleId);
const state$ = model(actions);
return {
DOM: view({props$, state$}, cycleId),
cycleId,
state$,
};
}
export default dialogue;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Simple Cycle.js (Nested) Dialogue with MVI Example</title>
</head>
<body>
<section class="app-container"></section>
<script src="main.js"></script>
</body>
</html>
/** @jsx hJSX */
import {run} from '@cycle/core';
import {hJSX, makeDOMDriver} from '@cycle/dom';
import dialogue from './dialogue.js';
function main({DOM}) {
const dialogueInstance = dialogue(
{DOM, props$: Rx.Observable.just({
text: `Unicorns cycle on rainbows!`,
})}
);
return {
DOM: Rx.Observable.combineLatest(
dialogueInstance.DOM,
dialogueInstance.state$,
(dialogueVTree, dialogueState) => (
<div>
{dialogueVTree}
<p>
The dialogue state data is: {dialogueState.data}
The dialogue state text is: {dialogueState.text}
</p>
</div>
)
),
};
}
run(main, {
DOM: makeDOMDriver(`.app-container`),
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment