@wener/console
Version:
Base console UI toolkit
195 lines (194 loc) • 6.19 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
}
else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null)
return {};
var target = {}, sourceKeys, key, i;
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
sourceKeys = Reflect.ownKeys(source);
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key))
continue;
target[key] = source[key];
}
return target;
}
target = _object_without_properties_loose(source, excluded);
if (Object.getOwnPropertySymbols) {
sourceKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key))
continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null)
return {};
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key))
continue;
target[key] = source[key];
}
return target;
}
import React from "react";
import { PiCalendarDotsLight, PiChartBarLight, PiDotsThreeLight, PiKanbanLight, PiListDashesLight, PiMapTrifoldLight, PiSlideshowLight, PiSquaresFourLight, PiTableLight, PiTreeViewLight } from "react-icons/pi";
import { cn } from "../utils/cn.js";
export var ViewMode = Object.freeze({
__proto__: null,
calendar: "calendar",
chart: "chart",
gallery: "gallery",
grid: "grid",
kanban: "kanban",
list: "list",
map: "map",
table: "table",
timeline: "timeline",
tree: "tree"
});
var ModeIcons = {
calendar: PiCalendarDotsLight,
chart: PiChartBarLight,
gallery: PiSlideshowLight,
grid: PiSquaresFourLight,
kanban: PiKanbanLight,
list: PiListDashesLight,
map: PiMapTrifoldLight,
table: PiTableLight,
timeline: PiDotsThreeLight,
tree: PiTreeViewLight
};
var ViewModes = {
calendar: {
value: "calendar",
label: "\u65E5\u5386",
icon: PiCalendarDotsLight
},
chart: {
value: "chart",
label: "\u56FE\u8868",
icon: PiChartBarLight
},
gallery: {
value: "gallery",
label: "\u753B\u5ECA",
icon: PiSlideshowLight
},
grid: {
value: "grid",
label: "\u7F51\u683C",
icon: PiSquaresFourLight
},
kanban: {
value: "kanban",
label: "\u770B\u677F",
icon: PiKanbanLight
},
list: {
value: "list",
label: "\u5217\u8868",
icon: PiListDashesLight
},
map: {
value: "map",
label: "\u5730\u56FE",
icon: PiMapTrifoldLight
},
table: {
value: "table",
label: "\u8868\u683C",
icon: PiTableLight
},
timeline: {
value: "timeline",
label: "\u65F6\u95F4\u7EBF",
icon: PiDotsThreeLight
},
tree: {
value: "tree",
label: "\u6811\u72B6\u56FE",
icon: PiTreeViewLight
}
};
export function ViewModeInput(_0) {
var value = _0.value, onValueChange = _0.onValueChange, _0_options = _0.options, options = _0_options === void 0 ? [] : _0_options, className = _0.className, props = _object_without_properties(_0, [
"value",
"onValueChange",
"options",
"className"
]);
if (options.length < 2) {
return null;
}
if (options.length === 2) {
var IconA = ViewModes[options[0]].icon;
var IconB = ViewModes[options[1]].icon;
var Icon = value === options[0] ? IconB : IconA; // invert
return /*#__PURE__*/ React.createElement("button", {
type: "button",
className: cn("btn btn-square join-item btn-sm", className),
onClick: function () {
return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value === options[0] ? options[1] : options[0]);
}
}, /*#__PURE__*/ React.createElement(Icon, null));
}
return /*#__PURE__*/ React.createElement("div", _object_spread({
className: cn("group join", className),
"data-value": value || null
}, props), options.map(function (mode) {
var 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: function () {
return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(mode);
}
}, Icon ? /*#__PURE__*/ React.createElement(Icon, null) : mode);
}));
}