Program = () => {
const { List, ListItem, Divider } = react95;
return htm`
<${WinContainer}>
<${List}>
<${Default} />
<${ListItem} size="sm">View</>
<${Divider} />
<${ListItem} size="sm">Paste</>
<${ListItem} size="sm">Paste Shortcut</>
<${ListItem} size="sm">Undo Copy</>
<${Divider} />
<${ListItem} size="sm">Properties</>
</${List}>
</${WinContainer}>
`;
}
function Default() {
const [state, setState] = React.useState({
cheese: true,
bacon: false,
broccoli: false
});
const { cheese, bacon, broccoli } = state;
const ingredientsArr = Object.values(state).map((val) => (val ? 1 : 0));
const possibleIngredients = Object.keys(state).length;
const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0);
const isIndeterminate = ![0, possibleIngredients].includes(chosenIngredients);
const toggleAll = () => {
console.log(ingredientsArr);
if (isIndeterminate) {
setState({
cheese: true,
bacon: true,
broccoli: true
});
} else if (ingredientsArr[0] === 1) {
setState({
cheese: false,
bacon: false,
broccoli: false
});
} else {
setState({
cheese: true,
bacon: true,
broccoli: true
});
}
};
const toggleIngredient = (e) => {
const value = e.target.value;
setState({
...state,
[value]: !state[value]
});
};
return React.createElement(
"div",
{ style: { maxWidth: "250px" } },
React.createElement(react95.Checkbox, {
name: "allToppings",
label: "All",
value: "allToppings",
indeterminate: isIndeterminate,
checked: !isIndeterminate && chosenIngredients === possibleIngredients,
onChange: toggleAll
}),
React.createElement(
"div",
{ style: { paddingLeft: "1.5rem" } },
React.createElement(react95.Checkbox, {
checked: !!cheese,
onChange: toggleIngredient,
value: "cheese",
label: "🧀 Extra cheese",
name: "ingredients"
}),
React.createElement("br", null),
React.createElement(react95.Checkbox, {
checked: !!bacon,
onChange: toggleIngredient,
value: "bacon",
label: "🥓 Bacon",
name: "ingredients"
}),
React.createElement("br", null),
React.createElement(react95.Checkbox, {
checked: !!broccoli,
onChange: toggleIngredient,
value: "broccoli",
label: "🥦 Broccoli",
name: "ingredients"
})
),
React.createElement(react95.Checkbox, {
name: "shipping",
value: "shipping",
label: "Free shipping",
defaultChecked: true,
disabled: true,
style: { marginTop: "1rem" }
})
);
}
WinContainer = ({ children, theme = react95_theme, ...otherProps }) => {
const { createGlobalStyle, ThemeProvider } = styled
const { styleReset } = react95
//const GlobalStyle = createGlobalStyle`
// ${styleReset};
//`
return htm`
<${WinStyleContainer} backgroundColor=${theme.backgroundColor} ...${otherProps}>
<${ThemeProvider} theme=${theme}>
${children}
</${ThemeProvider}>
</${WinStyleContainer}>
`
}
WinStyleContainer = styled.div`
${winFontFaces};
font-family: 'MS Sans Serif', sans-serif;
background: ${props => props.backgroundColor} none repeat scroll 0% 0%;
padding: 2rem;
& {
hr { padding: unset; }
}
`
winFontFaces = styled.css`
@font-face {
font-family: 'MS Sans Serif';
src: url('${react95_font_normal_url}') format('woff2');
font-weight: normal; /* 400 */
font-style: normal;
}
@font-face {
font-family: 'MS Sans Serif';
src: url('${react95_font_bold_url}') format('woff2');
font-weight: bold; /* 700 */
font-style: normal;
}
`
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.
