Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
viewof test = render(({ useSetter }) => {
const [state, setState] = useState({
title: '',
type: 'Percentage',
amount: 0.1,
limit: 'None'
});
useSetter(state);
return form(null, [
input({
name: 'title',
label: 'Discount code',
placeholder: 'FIRSTNAMELASTNAME',
state,
setState
}),
radio({
name: 'type',
label: 'Discount type',
options: ['Percentage', 'Fixed'],
value: 'Percentage',
state,
setState
}),
input({
name: 'amount',
label: 'Amount',
placeholder: 0.1,
value: 0.1,
type: 'number',
state,
setState
}),
radio({
name: 'limit',
label: 'Usage limit',
options: ['None', '1'],
value: 'None',
state,
setState
}),
button({
label: 'Create',
onClick: () => {
console.log(state);
},
disabled: !state.title || state.title === ''
})
]);
})
test
// viewof test = form(null, [
// input({
// name: 'title',
// label: 'Discount code',
// placeholder: 'FIRSTNAMELASTNAME'
// }),
// radio({
// name: 'type',
// label: 'Discount type',
// options: ['Percentage', 'Fixed'],
// value: 'Percentage'
// }),
// input({
// name: 'amount',
// label: 'Amount',
// placeholder: 0.1,
// value: 0.1,
// type: 'number'
// }),
// radio({
// name: 'limit',
// label: 'Usage limit',
// options: ['None', '1', '2', '3', '4'],
// value: 'None'
// }),
// button(state => ({
// label: 'Create',
// onClick: () => {
// console.log(state);
// },
// disabled: !state.title || state.title === ''
// }))
// ])
// button = arg => ({ state, setState }) => {
// if (typeof arg === 'function') {
// return jsx`
// <div class="mt-4">
// <button class="form-input w-full border-transparent focus:border-gray-500 focus:ring-0" ...${arg(
// state
// )}>Create</button>
// </div>`;
// }
// const { name, label, ...props } = arg;
// return jsx`
// <div class="mt-4">
// <button class="form-input w-full border-transparent focus:border-gray-500 focus:ring-0">Create</button>
// </div>`;
// }
button = ({ state, setState, ...props }) => {
return jsx`
<div class="mt-4">
<button class="form-input w-full border-transparent focus:border-gray-500 focus:ring-0" ...${props}>Create</button>
</div>`;
}
// radio = ({ name, label, options, value, ...props }) => ({
// state,
// setState
// }) => {
// useEffect(() => {
// setState({ ...state, [name]: value || options[0] });
// }, [value]);
// return jsx`
// <div class="mt-4">
// <span class="text-gray-700">${label || name}</span>
// <div class="mt-2">
// ${options.map(
// (
// value,
// index
// ) => jsx`<label key=${index} class="inline-flex items-center ${index >
// 0 && 'ml-4'}">
// <input type="radio" class="form-radio" onChange=${() =>
// setState({ ...state, [name]: value })} checked=${value ===
// state[name]} ...${props}/>
// <span class="ml-2 mr-8">${value}</span>
// </label>`
// )}
// </div>
// </div>`;
// }
radio = ({ name, label, options, value, state, setState, ...props }) => {
return jsx`
<div class="mt-4">
<span class="text-gray-700">${label || name}</span>
<div class="mt-2">
${options.map(
(
value,
index
) => jsx`<label key=${index} class="inline-flex items-center ${index >
0 && 'ml-4'}">
<input type="radio" class="form-radio" onChange=${() =>
setState({ ...state, [name]: value })} checked=${value ===
state[name]} ...${props}/>
<span class="ml-2 mr-8">${value}</span>
</label>`
)}
</div>
</div>`;
}
// input = ({ name, label, placeholder, value, ...props }) => ({
// state,
// setState
// }) => {
// useEffect(() => {
// setState({ ...state, [name]: value || '' });
// }, [value]);
// return jsx`
// <label class="block mt-4">
// <span class="text-gray-700">${label || name}</span>
// <input type="text" class="form-input block w-full border-transparent focus:border-gray-500 focus:ring-0" placeholder=${placeholder ||
// name} onChange=${event => {
// setState({ ...state, [name]: event.target.value });
// }}
// value=${state[name]} ...${props} />
// </label>`;
// }
input = ({ name, label, placeholder, value, state, setState, ...props }) => {
return jsx`
<label class="block mt-4">
<span class="text-gray-700">${label || name}</span>
<input type="text" class="form-input block w-full border-transparent focus:border-gray-500 focus:ring-0" placeholder=${placeholder ||
name} onChange=${event => {
setState({ ...state, [name]: event.target.value });
}}
value=${state[name]} ...${props} />
</label>`;
}
// form = (props = {}, children) =>
// render(({ useSetter }) => {
// const [state, setState] = useState({});
// useSetter(state);
// return jsx`
// <div data-scoped-0 class="text-gray-900 font-sans antialiased p-4">
// ${children.map(
// (child, key) => jsx`<${child} ...${{ state, setState, key }} />`
// )}
// </div>
// `;
// })
form = (props, children) => jsx`
<div data-scoped-0 class="text-gray-900 font-sans antialiased p-4">
${children}
</div>
`
html`<style>
[data-scoped-0] input:not([type]), [data-scoped-0] input[type=email], [data-scoped-0] input[type=number], [data-scoped-0] input[type=password], [data-scoped-0] input[type=range], [data-scoped-0] input[type=search], [data-scoped-0] input[type=tel], [data-scoped-0] input[type=text], [data-scoped-0] input[type=url] {
width: 100%;
}
</style>`
styles
import { render, useState, useEffect, jsx } from '@j-f1/react'
import { tailwindStyles as styles } from '@hastebrot/hello-tailwind-css'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
