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

0c8fa3a2a270747f3dbb54fe8792f3f0aec997e3 · 3.9 KB · 143 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as Utils from "../../utils";
3
4 const { React } = Uebersicht;
5
6 /**
7 * Item component to render different types of settings inputs.
8 * @param {Object} props - Component properties.
9 * @param {string} props.code - Unique code for the setting.
10 * @param {React.Component} props.Component - Custom component for the setting.
11 * @param {any} props.defaultValue - Default value of the setting.
12 * @param {string} props.label - Label for the setting.
13 * @param {string} props.type - Type of the setting input.
14 * @param {Array} [props.options] - Options for select or radio inputs.
15 * @param {string} [props.placeholder] - Placeholder for text inputs.
16 * @param {number} [props.minHeight] - Minimum height for textarea inputs.
17 * @param {Function} props.onChange - Change handler for the setting input.
18 */
19 export default function SettingsItem({
20 code,
21 Component,
22 defaultValue,
23 label,
24 type,
25 options,
26 placeholder,
27 minHeight,
28 onChange,
29 }) {
30 const onClick = (e) => Utils.clickEffect(e);
31 if (type === "component") {
32 return <Component defaultValue={defaultValue} onChange={onChange} />;
33 }
34 if (type === "select") {
35 return (
36 <React.Fragment>
37 <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
38 <select
39 id={code}
40 className="settings__select"
41 onChange={onChange}
42 defaultValue={defaultValue}
43 >
44 {options.map((option) => (
45 <option key={option.code} value={option.code}>
46 {option.name}
47 </option>
48 ))}
49 </select>
50 </React.Fragment>
51 );
52 }
53 if (type === "radio") {
54 return options.map((option) => (
55 <div className="settings__item-option" key={option} onClick={onClick}>
56 <input
57 name={code}
58 id={option}
59 value={option}
60 type="radio"
61 defaultChecked={option === defaultValue}
62 />
63 <label
64 htmlFor={option}
65 dangerouslySetInnerHTML={{ __html: `${option} ${label}` }}
66 />
67 </div>
68 ));
69 }
70 if (type === "text" || type === "color") {
71 return (
72 <React.Fragment>
73 <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
74 {type === "color" && (
75 <div
76 className="settings__item-color-pill"
77 style={{ backgroundColor: defaultValue || "transparent" }}
78 />
79 )}
80 <input
81 id={code}
82 type="text"
83 defaultValue={defaultValue}
84 placeholder={placeholder}
85 onChange={onChange}
86 autoComplete="off"
87 autoCorrect="off"
88 autoCapitalize="off"
89 spellCheck={false}
90 />
91 </React.Fragment>
92 );
93 }
94 if (type === "number") {
95 return (
96 <React.Fragment>
97 <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
98 <input
99 id={code}
100 type="number"
101 value={defaultValue}
102 placeholder={placeholder}
103 onChange={onChange}
104 autoComplete="off"
105 />
106 </React.Fragment>
107 );
108 }
109 if (type === "textarea") {
110 return (
111 <React.Fragment>
112 <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
113 <textarea
114 id={code}
115 defaultValue={defaultValue}
116 placeholder={placeholder}
117 onChange={onChange}
118 autoComplete="off"
119 autoCorrect="off"
120 autoCapitalize="off"
121 spellCheck={false}
122 style={{ minHeight }}
123 />
124 </React.Fragment>
125 );
126 }
127 return (
128 <React.Fragment>
129 <input
130 id={code}
131 type="checkbox"
132 defaultChecked={defaultValue}
133 onChange={onChange}
134 onClick={onClick}
135 />
136 <label
137 htmlFor={code}
138 onClick={onClick}
139 dangerouslySetInnerHTML={{ __html: label }}
140 />
141 </React.Fragment>
142 );
143 }