From d06784958d73159b5e4abafe5114804662114ed7 Mon Sep 17 00:00:00 2001 From: Ryan Schanzenbacher Date: Thu, 9 Jul 2026 22:15:53 -0400 Subject: move ubersicht modules in tree --- .../components/settings/user-widgets-creator.jsx | 297 +++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx') diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx new file mode 100755 index 0000000..a026047 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx @@ -0,0 +1,297 @@ +import * as Uebersicht from "uebersicht"; +import * as Icons from "../icons/icons.jsx"; +import * as Settings from "../../settings"; +import * as Utils from "../../utils"; +import ColorPicker from "./color-picker.jsx"; +import IconPicker from "./icon-picker.jsx"; + +const { React } = Uebersicht; + +/** + * UserWidgetsCreator component allows users to create and manage custom widgets. + * @param {Object} props - The component props. + * @param {Object} props.defaultValue - The default value for the widgets. + * @param {Function} props.onChange - The function to call when the widgets change. + * @returns {JSX.Element} The UserWidgetsCreator component. + */ +export default function UserWidgetsCreator({ defaultValue, onChange }) { + const [widgets, setWidgets] = React.useState(defaultValue || {}); + const keys = Object.keys(widgets); + + // Determine the highest widget ID and calculate the new ID for a new widget + const highestId = keys.reduce((acc, key) => { + const keyAsNumber = parseInt(key, 10); + return keyAsNumber > acc ? keyAsNumber : acc; + }, 1); + const newId = highestId + 1; + + // Function to add a new widget + const onClick = () => + setWidgets((widgets) => ({ + ...widgets, + [newId]: { ...Settings.userWidgetDefault }, + })); + + // Function to handle changes to a widget + const onWidgetChange = (index, field, value) => { + const newWidgets = { ...widgets }; + const newKeys = Object.keys(newWidgets); + const updatedWidgets = newKeys.reduce((acc, key, i) => { + const widget = newWidgets[key]; + return { + ...acc, + [i + 1]: key === index ? { ...widget, [field]: value } : widget, + }; + }, {}); + setWidgets(updatedWidgets); + }; + + // Effect to detect changes in widgets and call onChange prop + React.useEffect(() => { + const diffs = Utils.compareObjects(defaultValue, widgets); + const hasDiffs = Object.keys(diffs).length > 0; + if (hasDiffs) onChange({ target: { value: widgets } }); + }, [defaultValue, onChange, widgets]); + + return ( +
+ {keys.map((key, i) => ( + + ))} + +
+ ); +} + +/** + * UserWidgetCreator component allows users to configure individual widgets. + * @param {Object} props - The component props. + * @param {string} props.index - The index of the widget. + * @param {boolean} props.isFirst - Whether the widget is the first in the list. + * @param {boolean} props.isLast - Whether the widget is the last in the list. + * @param {Function} props.onWidgetChange - The function to call when the widget changes. + * @param {Function} props.setWidgets - The function to set the widgets state. + * @param {Object} props.widget - The widget data. + * @returns {JSX.Element} The UserWidgetCreator component. + */ +function UserWidgetCreator({ + index, + isFirst, + isLast, + onWidgetChange, + setWidgets, + widget, +}) { + const { + title, + icon, + backgroundColor, + output, + onClickAction, + onRightClickAction, + onMiddleClickAction, + refreshFrequency, + active = true, + noIcon = false, + hideWhenNoOutput = true, + showOnDisplay = "", + } = widget; + + const indexAsNumber = parseInt(index, 10); + + // Function to remove a widget + const onRemoveClick = () => { + setWidgets((widgets) => { + const keys = Object.keys(widgets); + return keys.reduce( + (acc, key) => (key === index ? acc : { ...acc, [key]: widgets[key] }), + {}, + ); + }); + }; + + // Function to handle changes to widget fields + const onChange = (field, chexbox = false) => { + return (e) => { + const value = (chexbox ? e?.target?.checked : e?.target?.value) ?? ""; + onWidgetChange(index, field, value); + }; + }; + + // Function to move the widget up in the list + const onBeforeClick = () => { + setWidgets((widgets) => { + const swapedWidget = widgets[indexAsNumber - 1]; + return { + ...widgets, + [indexAsNumber - 1]: widget, + [indexAsNumber]: swapedWidget, + }; + }); + }; + + // Function to move the widget down in the list + const onAfterClick = () => { + setWidgets((widgets) => { + const swapedWidget = widgets[indexAsNumber + 1]; + return { + ...widgets, + [indexAsNumber + 1]: widget, + [indexAsNumber]: swapedWidget, + }; + }); + }; + + return ( +
+
+ {!isFirst && ( + + )} + {!isLast && ( + + )} +
+ +
+ n°{index} +
+ +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + +
+
+
+ ); +} -- cgit v1.3