@activecollab/components
Version:
ActiveCollab Components
114 lines • 4.64 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["required", "multiple", "invalid", "options", "selected", "onChange"];
import React, { useRef, useState, useEffect } from "react";
import { StyledChoose, StyledFlexContainer, StyledLabel, StyledRadioOption, StyledVerticalContainer } from "./Styles";
import { useResizeObserver, useForkRef } from "../../utils";
import { ButtonGroup } from "../ButtonGroup";
import { Checkbox } from "../Checkbox";
import { RadioButton } from "../RadioButton";
export const ChooseV2 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
var _parentSize$width, _flexSize$width;
let {
required = false,
multiple = false,
invalid = false,
options,
selected,
onChange
} = _ref,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const internalRef = useRef(null);
const flexContainerRef = useRef(null);
const handleRef = useForkRef(ref, internalRef);
const [useVerticalLayout, setUseVerticalLayout] = useState(false);
const [isReady, setIsReady] = useState(false);
const parentSize = useResizeObserver(internalRef);
const flexSize = useResizeObserver(flexContainerRef);
const parentWidth = (_parentSize$width = parentSize == null ? void 0 : parentSize.width) != null ? _parentSize$width : 0;
const flexWidth = (_flexSize$width = flexSize == null ? void 0 : flexSize.width) != null ? _flexSize$width : 0;
useEffect(() => {
if (parentWidth === 0) return;
const measure = () => {
const temp = document.createElement("div");
temp.style.display = "inline-flex";
temp.style.visibility = "hidden";
temp.style.position = "absolute";
temp.style.whiteSpace = "nowrap";
temp.style.pointerEvents = "none";
document.body.appendChild(temp);
options.forEach(option => {
const button = document.createElement("button");
button.textContent = option.name;
button.style.padding = "6px 12px";
button.style.border = "1px solid transparent";
button.style.marginRight = "4px";
temp.appendChild(button);
});
const totalWidth = temp.offsetWidth + 8;
document.body.removeChild(temp);
setUseVerticalLayout(totalWidth > parentWidth);
setIsReady(true);
};
requestAnimationFrame(measure);
}, [parentWidth, options, flexWidth]);
const handleSelect = id => {
if (multiple) {
const newSelected = selected.includes(id) ? selected.filter(s => s !== id) : [...selected, id];
if (required && newSelected.length === 0) return;
onChange(newSelected);
} else {
const newSelected = selected.includes(id) ? [] : [id];
if (required && newSelected.length === 0) return;
onChange(newSelected);
}
};
if (!isReady) {
return /*#__PURE__*/React.createElement("div", {
ref: handleRef,
style: {
width: "100%",
minHeight: "32px"
}
});
}
return /*#__PURE__*/React.createElement("div", _extends({
ref: handleRef
}, rest, {
style: {
display: "flex",
width: "100%"
}
}), useVerticalLayout ? /*#__PURE__*/React.createElement(StyledVerticalContainer, null, options.map(option => /*#__PURE__*/React.createElement(StyledRadioOption, {
$disabled: !!option.disabled,
key: option.id,
"data-disabled": option.disabled
}, multiple || !required ? /*#__PURE__*/React.createElement(Checkbox, {
checked: selected.includes(option.id),
disabled: option.disabled,
onChange: () => !option.disabled && handleSelect(option.id),
name: "choose-v2-" + option.id,
id: "choose-v2-" + option.id
}) : /*#__PURE__*/React.createElement(RadioButton, {
checked: selected.includes(option.id),
disabled: option.disabled,
onChange: () => !option.disabled && handleSelect(option.id),
id: "choose-v2-" + option.id,
name: "choose-v2-" + option.id
}), /*#__PURE__*/React.createElement(StyledLabel, {
$disabled: !!option.disabled,
weight: "regular",
htmlFor: "choose-v2-" + option.id
}, option.name)))) : /*#__PURE__*/React.createElement(StyledFlexContainer, {
ref: flexContainerRef
}, /*#__PURE__*/React.createElement(ButtonGroup, {
invalid: invalid
}, options.map(option => /*#__PURE__*/React.createElement(StyledChoose, {
key: option.id,
active: selected.includes(option.id),
disabled: option.disabled,
onClick: () => handleSelect(option.id)
}, option.name)))));
});
ChooseV2.displayName = "ChooseV2";
//# sourceMappingURL=ChooseV2.js.map