users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx

d06784958d73159b5e4abafe5114804662114ed7 · 3.9 KB · 123 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as Icons from "../icons/icons.jsx";
3 import SettingsItem from "./settings-item.jsx";
4 import * as Utils from "../../utils";
5 import * as Settings from "../../settings";
6
7 const { React } = Uebersicht;
8
9 /**
10 * SettingsInner component to render each setting category.
11 * @param {Object} props - Component properties.
12 * @param {string} props.settingKey - Key of current setting.
13 * @param {Object} props.setting - Contains infos & documentation data.
14 * @param {string[]} props.setting.infos - Current settings information.
15 * @param {string} props.setting.documentation - Current setting documentation link.
16 * @param {Object} props.newSettings - Object containing current modified settings.
17 * @param {Function} props.setNewSettings - Function allowing to save newly modified settings.
18 */
19 export default function SettingsInner({
20 settingKey,
21 setting,
22 newSettings,
23 setNewSettings,
24 }) {
25 const { infos, documentation } = setting;
26 return (
27 <>
28 {Object.keys(Settings.defaultSettings[settingKey]).map((subKey) => {
29 const subSetting = Settings.data[subKey];
30 if (!subSetting) return null;
31 const {
32 Component,
33 fullWidth,
34 label,
35 options,
36 placeholder,
37 title,
38 type,
39 minHeight,
40 } = subSetting;
41
42 const code = settingKey + subKey;
43 const defaultValue = newSettings[settingKey][subKey];
44
45 const classes = Utils.classNames("settings__item", {
46 "settings__item--radio": type === "radio",
47 "settings__item--text":
48 type === "text" || type === "number" || type === "color",
49 "settings__item--textarea": type === "textarea",
50 "settings__item--color": type === "color",
51 "settings__item--full-width": fullWidth,
52 });
53
54 const onChange = (e) => {
55 let value = e.target.value;
56 if (type === "checkbox") {
57 value = e.target.checked;
58 }
59 if (type === "number") {
60 value = parseFloat(value);
61 if (isNaN(value)) {
62 value = 0;
63 }
64 }
65
66 const updatedSettings = {
67 ...newSettings,
68 [settingKey]: { ...newSettings[settingKey], [subKey]: value },
69 };
70 setNewSettings(updatedSettings);
71 };
72
73 return (
74 <React.Fragment key={code}>
75 {title && <div className="settings__item-title">{title}</div>}
76 <div
77 className={classes}
78 onChange={type === "radio" ? onChange : undefined}
79 >
80 <SettingsItem
81 code={code}
82 Component={Component}
83 defaultValue={defaultValue}
84 label={label}
85 onChange={onChange}
86 options={options}
87 placeholder={placeholder}
88 type={type}
89 minHeight={minHeight}
90 />
91 </div>
92 </React.Fragment>
93 );
94 })}
95 {documentation && (
96 <div className="settings__documentation">
97 <Icons.OpenBook className="settings__documentation-icon" />
98 <span className="settings__documentation-title">
99 You{"'"}ll find all the information about these settings{" "}
100 <a
101 href={`https://www.jeantinland.com/toolbox/simple-bar/documentation${documentation}`}
102 >
103 here on the documentation
104 </a>{" "}
105 hosted on jeantinland.com.
106 </span>
107 </div>
108 )}
109 {infos && infos.length && (
110 <div className="settings__infos">
111 <div className="settings__infos-title">Tips</div>
112 {infos.map((info, i) => (
113 <div
114 key={i}
115 className="settings__info"
116 dangerouslySetInnerHTML={{ __html: info }}
117 />
118 ))}
119 </div>
120 )}
121 </>
122 );
123 }