@wener/console
Version:
Base console UI toolkit
96 lines (95 loc) • 2.79 kB
JavaScript
import React from "react";
import { PiCalendarDotsLight, PiChartBarLight, PiDotsThreeLight, PiKanbanLight, PiListDashesLight, PiMapTrifoldLight, PiSlideshowLight, PiSquaresFourLight, PiTableLight, PiTreeViewLight } from "react-icons/pi";
import { flexRender } from "@wener/reaction";
import { cn } from "../tw/index.js";
const ModeIcons = {
calendar: PiCalendarDotsLight,
chart: PiChartBarLight,
gallery: PiSlideshowLight,
grid: PiSquaresFourLight,
kanban: PiKanbanLight,
list: PiListDashesLight,
map: PiMapTrifoldLight,
table: PiTableLight,
timeline: PiDotsThreeLight,
tree: PiTreeViewLight
};
const AllViewMode = [
{
value: "calendar",
label: "\u65E5\u5386"
},
{
value: "chart",
label: "\u56FE\u8868"
},
{
value: "gallery",
label: "\u753B\u5ECA"
},
{
value: "grid",
label: "\u7F51\u683C"
},
{
value: "kanban",
label: "\u770B\u677F"
},
{
value: "list",
label: "\u5217\u8868"
},
{
value: "map",
label: "\u5730\u56FE"
},
{
value: "table",
label: "\u8868\u683C"
},
{
value: "timeline",
label: "\u65F6\u95F4\u7EBF"
},
{
value: "tree",
label: "\u6811\u72B6\u56FE"
}
];
export function ViewModeInput({ value, onValueChange, options = [] }) {
if (options.length < 2) {
return null;
}
if (options.length === 2) {
const IconA = ModeIcons[options[0]];
const IconB = ModeIcons[options[1]];
return /*#__PURE__*/ React.createElement("label", {
className: "swap"
}, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
checked: value === options[0]
}), /*#__PURE__*/ React.createElement(IconA, null), /*#__PURE__*/ React.createElement(IconB, null));
}
return /*#__PURE__*/ React.createElement("div", {
className: "group join",
"data-value": value || null
}, options.map((mode) => {
const Icon = ModeIcons[mode];
return /*#__PURE__*/ React.createElement("button", {
key: mode,
type: "button",
title: mode,
className: cn("btn btn-square join-item btn-sm", // 'group-data-[value=list]:btn-active',
{
"btn-active": value === mode
}),
onClick: () => onValueChange?.(mode)
}, Icon ? /*#__PURE__*/ React.createElement(Icon, null) : mode);
}));
}
export const ViewModeRenderer = ({ views, useViewMode, viewMode = useViewMode?.() }) => {
if (!viewMode)
return null;
return flexRender(views?.[viewMode], {});
};
//# sourceMappingURL=ViewModeInput.js.map