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 --- .../lib/components/settings/settings-inner.jsx | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx') diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx new file mode 100755 index 0000000..e318b25 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx @@ -0,0 +1,123 @@ +import * as Uebersicht from "uebersicht"; +import * as Icons from "../icons/icons.jsx"; +import SettingsItem from "./settings-item.jsx"; +import * as Utils from "../../utils"; +import * as Settings from "../../settings"; + +const { React } = Uebersicht; + +/** + * SettingsInner component to render each setting category. + * @param {Object} props - Component properties. + * @param {string} props.settingKey - Key of current setting. + * @param {Object} props.setting - Contains infos & documentation data. + * @param {string[]} props.setting.infos - Current settings information. + * @param {string} props.setting.documentation - Current setting documentation link. + * @param {Object} props.newSettings - Object containing current modified settings. + * @param {Function} props.setNewSettings - Function allowing to save newly modified settings. + */ +export default function SettingsInner({ + settingKey, + setting, + newSettings, + setNewSettings, +}) { + const { infos, documentation } = setting; + return ( + <> + {Object.keys(Settings.defaultSettings[settingKey]).map((subKey) => { + const subSetting = Settings.data[subKey]; + if (!subSetting) return null; + const { + Component, + fullWidth, + label, + options, + placeholder, + title, + type, + minHeight, + } = subSetting; + + const code = settingKey + subKey; + const defaultValue = newSettings[settingKey][subKey]; + + const classes = Utils.classNames("settings__item", { + "settings__item--radio": type === "radio", + "settings__item--text": + type === "text" || type === "number" || type === "color", + "settings__item--textarea": type === "textarea", + "settings__item--color": type === "color", + "settings__item--full-width": fullWidth, + }); + + const onChange = (e) => { + let value = e.target.value; + if (type === "checkbox") { + value = e.target.checked; + } + if (type === "number") { + value = parseFloat(value); + if (isNaN(value)) { + value = 0; + } + } + + const updatedSettings = { + ...newSettings, + [settingKey]: { ...newSettings[settingKey], [subKey]: value }, + }; + setNewSettings(updatedSettings); + }; + + return ( + + {title &&
{title}
} +
+ +
+
+ ); + })} + {documentation && ( +
+ + + You{"'"}ll find all the information about these settings{" "} + + here on the documentation + {" "} + hosted on jeantinland.com. + +
+ )} + {infos && infos.length && ( +
+
Tips
+ {infos.map((info, i) => ( +
+ ))} +
+ )} + + ); +} -- cgit v1.3