@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
80 lines (79 loc) • 2.72 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Children } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useControlled } from "../hooks/useControlled.js";
import { setId } from "../utils/setId.js";
import { HvControlsContextProvider } from "./context/ControlsContext.js";
import { useClasses } from "./Controls.styles.js";
import { staticClasses } from "./Controls.styles.js";
import { HvMultiButton } from "../MultiButton/MultiButton.js";
import { HvButton } from "../Button/Button.js";
const HvControls = (props) => {
const {
id,
className,
classes: classesProp,
views,
callbacks,
selectedView,
defaultView,
children,
hideViewSwitcher = false,
onViewChange
} = useDefaultProps("HvControls", props);
const { classes, cx } = useClasses(classesProp);
const [currentView, setCurrentView] = useControlled(
selectedView,
defaultView
);
const onViewChangeHandler = (evt, btnId) => {
setCurrentView(btnId);
onViewChange?.(evt, btnId);
};
const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);
const onSortHandler = (value) => callbacks?.setSortBy?.([
{
id: value?.accessor,
desc: value?.desc
}
]);
const childrenCount = Children.count(children);
const childrenArray = Children.toArray(children);
const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
const leftChildren = childrenArray.slice(0, childrenIndexCut);
const rightChildren = childrenArray.slice(
childrenIndexCut,
childrenCount || 0
);
return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), children: /* @__PURE__ */ jsxs(
HvControlsContextProvider,
{
value: {
onSearch: onSearchHandler,
onSort: onSortHandler
},
children: [
/* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
/* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
rightChildren,
views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(
HvButton,
{
id: btnId,
icon: true,
selected: currentView === btnId,
onClick: (evt) => onViewChangeHandler(evt, btnId),
...others,
children: icon
},
btnId
)) })
] })
]
}
) });
};
export {
HvControls,
staticClasses as controlsClasses
};