ui-lib/src/controls/button/index.jsx

"use strict";

const React = require("react");

const defaultStyle = require("./style.css");
const useTheme = require("../../util/themeable");
const useID = require("../../util/use-id");
const contexts = require("../../contexts");
const composeHandlers = require("../../util/compose-handlers");

const Icon = require("../icon");

module.exports = function Button({ type, onClick, children, icon, default: default_ }) {
	// TODO: Validate type?
	// TODO: How does icon + custom HTML children end up looking? Should we use a grid to ensure that the icon is always displayed on the left in its own column?
	let { withTheme } = useTheme({ control: "button", defaultStyle });
	let id = useID();
	let selectedID = React.useContext(contexts.button_selectedID);
	let capturedOnClick = React.useContext(contexts.button_onClick);

	React.useEffect(() => {
		if (capturedOnClick != null && default_ === true) {
			// This is a default selection in a choice list of some sort, eg. a button-set - so we simulate a click event.
			capturedOnClick(id);
		}
	}, [ capturedOnClick, id ]);

	let isSelected = (id === selectedID);

	let onClickAll = composeHandlers([
		capturedOnClick,
		onClick
	]);

	return (
		<button className={withTheme("button", `type-${type}`, { selected: isSelected })} onClick={() => onClickAll(id)}>
			<span className={withTheme("buttonContents")}>
				{(icon != null)
					? <Icon icon={icon} />
					: null
				}

				<contexts.button_selectedID.Provider value={null}>
					{children}
				</contexts.button_selectedID.Provider>
			</span>
		</button>
	);
};