WIP
parent
63fee8ca26
commit
7dff6bfdef
@ -0,0 +1,9 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
// FIXME: Port over the remaining stand-alone contexts to the new context design
|
||||||
|
module.exports = {
|
||||||
|
button_onClick: React.createContext(),
|
||||||
|
button_selectedID: React.createContext()
|
||||||
|
};
|
@ -0,0 +1,36 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
const asExpression = require("as-expression");
|
||||||
|
|
||||||
|
const useTheme = require("../../util/themeable");
|
||||||
|
const defaultStyle = require("./style.css");
|
||||||
|
const contexts = require("../../contexts");
|
||||||
|
|
||||||
|
module.exports = function ButtonSet({ direction, choice, children }) {
|
||||||
|
let { withTheme } = useTheme({ control: "buttonSet", defaultStyle });
|
||||||
|
let [ selectedItem, setSelectedItem ] = React.useState();
|
||||||
|
|
||||||
|
// direction: horizontal, vertical
|
||||||
|
// FIXME: Validate direction
|
||||||
|
|
||||||
|
let wrappedChildren = asExpression(() => {
|
||||||
|
if (choice === true) {
|
||||||
|
return (
|
||||||
|
<contexts.button_onClick.Provider value={setSelectedItem}>
|
||||||
|
<contexts.button_selectedID.Provider value={selectedItem}>
|
||||||
|
{children}
|
||||||
|
</contexts.button_selectedID.Provider>
|
||||||
|
</contexts.button_onClick.Provider>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={withTheme("buttonSet", `direction-${direction}`)}>
|
||||||
|
{wrappedChildren}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,11 @@
|
|||||||
|
.buttonSet {
|
||||||
|
composes: combinedButton from "../shared.css";
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-horizontal {
|
||||||
|
grid-auto-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-vertical {
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
}
|
@ -0,0 +1,44 @@
|
|||||||
|
:import("../icon/style.css") {
|
||||||
|
icon: icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
composes: centerContent from "../shared.css";
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContents {
|
||||||
|
padding: 0px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-inline, .type-inlineTiny {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: inline;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-inline {
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0px 9px 0px 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-inlineTiny {
|
||||||
|
.icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin: 0px 11px 0px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FIXME: buttonSetActive */
|
@ -1,4 +1,18 @@
|
|||||||
|
:import("../button/style.css") { button: button; }
|
||||||
|
:import("../shared.css") { combinedButton: combinedButton; }
|
||||||
|
|
||||||
.ribbon {
|
.ribbon {
|
||||||
composes: notSelectable from "../shared.css";
|
composes: notSelectable from "../shared.css";
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combinedButton {
|
||||||
|
display: grid; /* block, not inline */
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,11 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
module.exports = function composeHandlers(handlers) {
|
||||||
|
let nonNullHandlers = handlers.filter((handler) => handler != null);
|
||||||
|
|
||||||
|
return function callOnEvent(... args) {
|
||||||
|
for (let handler of nonNullHandlers) {
|
||||||
|
handler(... args);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
@ -0,0 +1,8 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const insecureNanoid = require("nanoid/non-secure").nanoid;
|
||||||
|
const useGuaranteedMemo = require("./use-guaranteed-memo");
|
||||||
|
|
||||||
|
module.exports = function useID() {
|
||||||
|
return useGuaranteedMemo(() => insecureNanoid());
|
||||||
|
};
|
Loading…
Reference in New Issue