export default function createFileRenameFormElement(tagName) {
let formClass = tagName;
let inputClass = formClass + '__input';
let buttonClass = formClass + '__button';
let applyButtonClass = buttonClass + '--apply';
registerCustomElement(tagName, (interactions, properties) => {
let model = createGroup({
value$: (initialValue$, apply$, input$) =>
apply$.withLatestFrom(
input$.merge(initialValue$),
(apply, input) => input
).merge(initialValue$)
});
model.inject({
initialValue$: properties.get('value').take(1),
apply$: interactions.get(`.${formClass}`, 'submit')
.tap((e) => e.preventDefault()),
input$: interactions.get(`.${inputClass}`, 'input')
.map(({ target }) => target.value)
}, model);
let vtree$ = Rx.Observable.combineLatest(
model.value$,
(value) =>
h('form', {
className: `${formClass}`
}, [
h('input', {
className: `${inputClass}`,
type: 'text',
value: value,
'focus-hook': new FocusHook()
}),
h('button', {
type: 'submit',
className: `${applyButtonClass}`
}, 'Apply')
]
)
);
return {
vtree$,
value$: model.value$.skip(1)
};
});
}
export default function confirm(tagName) {
let popupClass = tagName;
let contentContainerClass = tagName + '__content';
let buttonsContainerClass = tagName + '__nav';
let buttonClass = popupClass + '__button';
let confirmButtonClass = buttonClass + '--confirm';
let cancelButtonClass = buttonClass + '--cancel';
registerCustomElement(tagName, (interactions, properties) => ({
vtree$: Rx.Observable.combineLatest(
properties.get('children'),
properties.get('messages')
.map(({ confirm, cancel }) => ({
confirm: confirm || 'Yes',
cancel: cancel || 'No'
})),
(content, { confirm: confirmMessage, cancel: cancelMessage }) =>
h('form', {
className: `${popupClass}`
}, [
h('div', {
className: `${contentContainerClass}`
}, content),
h('nav', {
className: `${buttonsContainerClass}`
}, [
h('button', {
className: `${cancelButtonClass}`,
type: 'button'
}, cancelMessage),
h('button', {
type: 'submit',
className: `${confirmButtonClass}`
}, confirmMessage)
])
])
),
cancel$: interactions.get(`.${cancelButtonClass}`, 'click')
.tap((e) => e.preventDefault())
.map(() => true),
confirm$: interactions.get(`.${popupClass}`, 'submit')
.tap((e) => e.preventDefault())
})
);
}
function (firstName, lastName) {
return (
<div>
<div className="form-group">
<label htmlFor="first-name">First Name:</label>
<input type="text" className="form-control" id="first-name" placeholder="First Name"/>
</div>
<div className="form-group">
<label htmlFor="last-name">Last Name:</label>
<input type="text" className="form-control" id="last-name" placeholder="Last Name"/>
</div>
<hr/>
<h3>Hello {firstName} {lastName}</h3>
<app-footer key="1"/>
</div>
);
});
}
function Footer(interactions, props) {
return {
vtree$: Observable.return(
<div>=== footer ===</div>
)
};
}
Cycle.registerCustomElement("app-footer", Footer);
Cycle.applyToDOM("#main", interactions => View(Model(Intent(interactions))));
import Cycle from "cyclejs";
import Menu from "./menu";
let {Rx} = Cycle;
let Observable = Rx.Observable;
// APP =============================================================================================
let items = ["Home", "Services", "About", "Contact us"];
let active = "Services";
function Computer(interactions) {
let active$ = interactions.get(".menu", "active")
.map(event => event.detail);
return active$.startWith(active).map(active => {
return (
<div>
<app-menu items={items} active={active} key="1"/>
</div>
);
});
}
Cycle.registerCustomElement("app-menu", Menu);
Cycle.applyToDOM("#main", interactions => Computer(interactions));