How to use the @cycle/dom/lib/index.div function in @cycle/dom
To help you get started, we’ve selected a few @cycle/dom examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
brucou / cycle-state-machine-demo / src / processApplication / renderTeamsScreen.js View on Github 
} = model;
const projectDate = date;
const projectName = name;
// disabled true <=> hasJoinedAtLeastOneTeam
const disabledSelector = none(teamKey => {
return teams[teamKey].hasBeenJoined
}, keys(teams)) ? '.disabled' : '';
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
h4(".ui.dividing.header", [`Select a team`]),
div(`${USER_APPLICATION_TEAMLIST_SELECTOR}.ui.list`,
mapIndexed((teamKey, index) => {
const { description, name, question, hasBeenJoined, answer } = teams[teamKey];
return void 0,
div(".item", [
div(".right.floated.content", [
div(".ui.button", [hasBeenJoined ? `O` : 'X'])
]),
img(".ui.avatar.image", {
"attrs": {progress: { step, hasApplied, latestTeamIndex }
},
project: { name, date, location },
validationMessages,
errorMessage
} = model;
const projectDate = date;
const projectName = name;
// disabled true <=> hasJoinedAtLeastOneTeam
const disabledSelector = none(teamKey => {
return teams[teamKey].hasBeenJoined
}, keys(teams)) ? '.disabled' : '';
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
h4(".ui.dividing.header", [`Select a team`]),
div(`${USER_APPLICATION_TEAMLIST_SELECTOR}.ui.list`,
mapIndexed((teamKey, index) => {
const { description, name, question, hasBeenJoined, answer } = teams[teamKey];
return void 0,
div(".item", [? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
form(".ui.form", [
h4(".ui.dividing.header", [`Organizer's question`]),
div(".ui.icon.message", [
i(".inbox.icon"), // TODO find more suitable icon
div(".content", [
div(".header", [oppQuestion]),
p([`Organizer's name/role`]) // NOTE : left as is to avoid doing fixtures for organizers
])
]),
div(".field", [
textarea(`${USER_APPLICATION_FORM_INPUT_OPP_ANSWER_SELECTOR}`, {
"key": 0,
"attrs": {
"name": "userapp[organizer-question]",
"placeholder": "Please enter your answer here"
},
"props": makeInputProps(answer)
}),
_makeErrDiv('answer', USER_APPLICATION_QUESTION_SCREEN_ANSWER_ERROR_SELECTOR),
]),
])
]),div(`${USER_APPLICATION_BACK_TO_TEAMS_SELECTOR}.ui.fluid.negative.button`, {
"attrs": {
"tabindex": "0",
}
}, [`Back to teams`]),
div(".ui.divided.selection.list", [
a(".item", [
div(".ui.horizontal.label", [teamName]),
teamDescription
])
]),
form(".ui.form", [
div(".ui.icon.message", [
i(".inbox.icon"),
div(".content", [
div(".header", [teamQuestion]),
p([`Team lead's name/role`]) // NOTE : left constant, not to complicate fixture
])
]),
div(".field", [
textarea(`${USER_APPLICATION_FORM_INPUT_TEAM_ANSWER_SELECTOR}`, {
"key": latestTeamIndex,
"attrs": {
"name": "userapp[organizer-question]",
"placeholder": "Please enter your answer here"
},
"props": makeInputProps(teamAnswer)
}),
_makeErrDiv('answer', USER_APPLICATION_TEAM_DETAIL_SCREEN_ANSWER_ERROR_SELECTOR)
])
])
]),div(".field", [
textarea(`${USER_APPLICATION_FORM_INPUT_TEAM_ANSWER_SELECTOR}`, {
"key": latestTeamIndex,
"attrs": {
"name": "userapp[organizer-question]",
"placeholder": "Please enter your answer here"
},
"props": makeInputProps(teamAnswer)
}),
_makeErrDiv('answer', USER_APPLICATION_TEAM_DETAIL_SCREEN_ANSWER_ERROR_SELECTOR)
])
])
]),
div(".ui.fluid.buttons", [
button(`${USER_APPLICATION_SKIP_TEAM_SELECTOR}.ui.button`, [`Skip this team`]),
div(".or"),
hasBeenJoined
? button(`${USER_APPLICATION_JOIN_UNJOIN_TEAM_SELECTOR}.ui.positive.button`, [`Unjoin team`])
: button(`${USER_APPLICATION_JOIN_UNJOIN_TEAM_SELECTOR}.ui.positive.button`, [`Join team`])
]),
divErrorMessage
])
}
}
}errorMessage
} = model;
const projectDate = date;
const projectName = name;
const latestTeamKey = keys(teams)[latestTeamIndex];
const { name: teamName, description: teamDescription, question: teamQuestion, answer: teamAnswer, hasBeenJoined } = teams[latestTeamKey];
const _makeErrDiv = makeErrDiv(validationMessages);
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
div(`${USER_APPLICATION_BACK_TO_TEAMS_SELECTOR}.ui.fluid.negative.button`, {
"attrs": {
"tabindex": "0",
}
}, [`Back to teams`]),
div(".ui.divided.selection.list", [
a(".item", [
div(".ui.horizontal.label", [teamName]),
teamDescription
])
]),},
questions: { answer },
teams,
progress: { step, hasApplied, latestTeamIndex }
},
project: { name, date, location },
validationMessages,
errorMessage
} = model;
const projectDate = date;
const projectName = name;
const _makeErrDiv = makeErrDiv(validationMessages);
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
form(".ui.form", [
h4(".ui.dividing.header", [ABOUT_YOU]),
div(".field", [
input(`${USER_APPLICATION_FORM_INPUT_SUPERPOWER_SELECTOR}`, {
"key": 0,
"attrs": {
"type": "text",const projectName = name;
const latestTeamKey = keys(teams)[latestTeamIndex];
const { name: teamName, description: teamDescription, question: teamQuestion, answer: teamAnswer, hasBeenJoined } = teams[latestTeamKey];
const _makeErrDiv = makeErrDiv(validationMessages);
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
div(`${USER_APPLICATION_BACK_TO_TEAMS_SELECTOR}.ui.fluid.negative.button`, {
"attrs": {
"tabindex": "0",
}
}, [`Back to teams`]),
div(".ui.divided.selection.list", [
a(".item", [
div(".ui.horizontal.label", [teamName]),
teamDescription
])
]),
form(".ui.form", [
div(".ui.icon.message", [
i(".inbox.icon"),
div(".content", [validationMessages,
errorMessage
} = model;
const projectDate = date;
const projectName = name;
const oppQuestion = question;
const oppAnswer = answer;
const _makeErrDiv = makeErrDiv(validationMessages);
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
div(".ui.description", [
p([`Does this look good ?`])
]),
renderProgressIndicator(step),
div(".ui.one.cards", [
div(".card", [
div(".content", [
i(`${USER_APPLICATION_REVIEW_ABOUT_SELECTOR}.right.floated.edit.icon`),
div(".header", [ABOUT_YOU]),
div(".ui.list", [
div(".item", [
div(".ui.button", [
i(".info.icon")
]),
superPowerquestions: { answer },
teams,
progress: { step, hasApplied, latestTeamIndex }
},
project: { name, date, location },
validationMessages,
errorMessage
} = model;
const projectDate = date;
const projectName = name;
const _makeErrDiv = makeErrDiv(validationMessages);
const divErrorMessage = errorMessage
? div('.c-application__error', `An error occurred : ${errorMessage}`)
: div('.c-application__error', '');
return {
outputs: {
DOM: div('#page', [
renderHeader(projectName, projectDate),
renderTitle(projectName),
renderProgressIndicator(step),
div(".ui.bottom.attached.segment", [
form(".ui.form", [
h4(".ui.dividing.header", [ABOUT_YOU]),
div(".field", [
input(`${USER_APPLICATION_FORM_INPUT_SUPERPOWER_SELECTOR}`, {
"key": 0,
"attrs": {
"type": "text",
"name": "userapp[superpower]",@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
