PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / gutenberg / blocks / feedback-form / src / inspector.js

inspector.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/feedback-form/src/inspector.js

455 lines 24.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from "@wordpress/i18n";
2 import { InspectorControls } from "@wordpress/block-editor";
3 import {
4 TabPanel,
5 PanelBody,
6 TextControl,
7 BaseControl,
8 ButtonGroup,
9 Button,
10 } from "@wordpress/components";
11 import ColorControl from "../../../util/color-control";
12 import TypographyDropdown from "../../../util/typography-control-v2";
13 import ResponsiveRangeController from "../../../util/responsive-range-control";
14 import ResponsiveDimensionsControl from "../../../util/dimensions-control-v2";
15
16 import {
17 ICON_SIZE,
18 FORM_WIDTH,
19 FORM_HEIGHT,
20 FORM_HEADING_ALIGN,
21 FORM_BUTTON_WIDTH,
22 FORM_BUTTON_PADDING,
23 FORM_BUTTON_ALIGN,
24 } from "./constants";
25 import {
26 formTitleTypo,
27 feedBackFormHeadingtypo,
28 feedbackFormLabelTypo,
29 feedbackFormButtonTextTypo,
30 } from "./typographyPrefixConstants";
31 import objAttributes from "./attributes";
32
33 const Inspector = ({ attributes, setAttributes }) => {
34 const {
35 formContent,
36 formTitle,
37 buttonText,
38 formContentColor,
39 resOption,
40 iconColor,
41 feedbackFormHeadingColor,
42 feedbackFormHeadingAlignment,
43 feedbackFormLabelColor,
44 feedbackFormButtonBackColor,
45 feedbackFormButtonTextColor,
46 feedbackFormButtonAlignment,
47 feedbackFormNameLabelText,
48 feedbackFormEmailLabelText,
49 feedbackFormMessageLabelText
50 } = attributes;
51
52 const resRequiredProps = {
53 setAttributes,
54 resOption,
55 attributes,
56 objAttributes,
57 };
58
59 return (
60 <InspectorControls key="controls">
61 <div className="eb-panel-control">
62 <TabPanel
63 className="eb-parent-tab-panel"
64 activeClass="active-tab"
65 tabs={[
66 {
67 name: "content",
68 title: __("Content", "betterdocs"),
69 className: "eb-tab styles",
70 },
71 {
72 name: "styles",
73 title: __("Styles", "betterdocs"),
74 className: "eb-tab styles",
75 },
76 ]}
77 >
78 {(tab) => {
79 return (
80 <div className={"eb-tab-controls " + tab.name}>
81 {tab.name === "content" && (
82 <PanelBody
83 title={__("General", "betterdocs")}
84 initialOpen={true}
85 >
86 <TextControl
87 label={__("Label Name Text", "betterdocs")}
88 type="text"
89 value={feedbackFormNameLabelText}
90 onChange={(value) => {
91 setAttributes({
92 feedbackFormNameLabelText:
93 value.toString(),
94 });
95 }}
96 />
97 <TextControl
98 label={__("Label Email Text", "betterdocs")}
99 type="text"
100 value={feedbackFormEmailLabelText}
101 onChange={(value) => {
102 setAttributes({
103 feedbackFormEmailLabelText:
104 value.toString(),
105 });
106 }}
107 />
108 <TextControl
109 label={__("Label Message Text", "betterdocs")}
110 type="text"
111 value={feedbackFormMessageLabelText}
112 onChange={(value) => {
113 setAttributes({
114 feedbackFormMessageLabelText:
115 value.toString(),
116 });
117 }}
118 />
119 <TextControl
120 label={__("Content", "betterdocs")}
121 type="text"
122 value={formContent}
123 onChange={(value) => {
124 setAttributes({
125 formContent:
126 value.toString(),
127 });
128 }}
129 />
130 <TextControl
131 label={__(
132 "Feedback Form Title",
133 "betterdocs"
134 )}
135 type="text"
136 value={formTitle}
137 onChange={(value) => {
138 setAttributes({
139 formTitle: value.toString(),
140 });
141 }}
142 />
143 <TextControl
144 label={__(
145 "Button Text",
146 "betterdocs"
147 )}
148 type="text"
149 value={buttonText}
150 onChange={(value) => {
151 setAttributes({
152 buttonText:
153 value.toString(),
154 });
155 }}
156 />
157 </PanelBody>
158 )}
159 {tab.name === "styles" && (
160 <>
161 <PanelBody
162 title={__("Text", "betterdocs")}
163 initialOpen={false}
164 >
165 <ColorControl
166 label={__(
167 "Color",
168 "betterdocs"
169 )}
170 defaultColor={formContentColor}
171 onChange={(value) => {
172 setAttributes({
173 formContentColor: value,
174 });
175 }}
176 />
177 <TypographyDropdown
178 baseLabel={__(
179 "Typography",
180 "betterdocs"
181 )}
182 typographyPrefixConstant={
183 formTitleTypo
184 }
185 resRequiredProps={
186 resRequiredProps
187 }
188 />
189 </PanelBody>
190 <PanelBody
191 title={__("Icon", "betterdocs")}
192 initialOpen={false}
193 >
194 <ColorControl
195 label={__(
196 "Color",
197 "betterdocs"
198 )}
199 defaultColor={iconColor}
200 onChange={(value) => {
201 setAttributes({
202 iconColor: value,
203 });
204 }}
205 />
206 <ResponsiveRangeController
207 baseLabel={__(
208 "Size",
209 "betterdocs"
210 )}
211 controlName={ICON_SIZE}
212 resRequiredProps={
213 resRequiredProps
214 }
215 min={1}
216 max={1000}
217 step={1}
218 />
219 </PanelBody>
220 <PanelBody
221 title={__(
222 "Feedback Form",
223 "betterdocs"
224 )}
225 initialOpen={false}
226 >
227 <ResponsiveRangeController
228 baseLabel={__(
229 "Width",
230 "betterdocs"
231 )}
232 controlName={FORM_WIDTH}
233 resRequiredProps={
234 resRequiredProps
235 }
236 min={1}
237 max={1000}
238 step={1}
239 />
240 <ResponsiveRangeController
241 baseLabel={__(
242 "Height",
243 "betterdocs"
244 )}
245 controlName={FORM_HEIGHT}
246 resRequiredProps={
247 resRequiredProps
248 }
249 min={1}
250 max={1000}
251 step={1}
252 />
253
254 <ColorControl
255 label={__(
256 "Heading Color",
257 "betterdocs"
258 )}
259 defaultColor={
260 feedbackFormHeadingColor
261 }
262 onChange={(value) => {
263 setAttributes({
264 feedbackFormHeadingColor:
265 value,
266 });
267 }}
268 />
269 <TypographyDropdown
270 baseLabel={"Heading Typography"}
271 typographyPrefixConstant={
272 feedBackFormHeadingtypo
273 }
274 resRequiredProps={
275 resRequiredProps
276 }
277 />
278 <BaseControl
279 label={__(
280 "Heading Alignment",
281 "betterdocs"
282 )}
283 id="eb-advance-heading-alignment"
284 >
285 <ButtonGroup id="eb-advance-heading-alignment">
286 {FORM_HEADING_ALIGN.map(
287 (item, key) => (
288 <Button
289 key={key}
290 isPrimary={
291 feedbackFormHeadingAlignment ===
292 item.value
293 }
294 isSecondary={
295 feedbackFormHeadingAlignment !==
296 item.value
297 }
298 onClick={() =>
299 setAttributes(
300 {
301 feedbackFormHeadingAlignment:
302 item.value,
303 }
304 )
305 }
306 >
307 {item.label}
308 </Button>
309 )
310 )}
311 </ButtonGroup>
312 </BaseControl>
313 <ColorControl
314 label={__(
315 "Label Color",
316 "betterdocs"
317 )}
318 defaultColor={
319 feedbackFormLabelColor
320 }
321 onChange={(value) => {
322 setAttributes({
323 feedbackFormLabelColor:
324 value,
325 });
326 }}
327 />
328 <TypographyDropdown
329 baseLabel={__(
330 "Label Typography",
331 "betterdocs"
332 )}
333 typographyPrefixConstant={
334 feedbackFormLabelTypo
335 }
336 resRequiredProps={
337 resRequiredProps
338 }
339 />
340 <ColorControl
341 label={__(
342 "Button Background Color",
343 "betterdocs"
344 )}
345 defaultColor={
346 feedbackFormButtonBackColor
347 }
348 onChange={(value) => {
349 setAttributes({
350 feedbackFormButtonBackColor:
351 value,
352 });
353 }}
354 />
355 <ColorControl
356 label={__(
357 "Button Text Color",
358 "betterdocs"
359 )}
360 defaultColor={
361 feedbackFormButtonTextColor
362 }
363 onChange={(value) => {
364 setAttributes({
365 feedbackFormButtonTextColor:
366 value,
367 });
368 }}
369 />
370 <TypographyDropdown
371 baseLabel={__(
372 "Button Text Typography",
373 "betterdocs"
374 )}
375 resRequiredProps={
376 resRequiredProps
377 }
378 typographyPrefixConstant={
379 feedbackFormButtonTextTypo
380 }
381 />
382 <ResponsiveRangeController
383 baseLabel={__(
384 "Button Width",
385 "betterdocs"
386 )}
387 controlName={FORM_BUTTON_WIDTH}
388 resRequiredProps={
389 resRequiredProps
390 }
391 min={1}
392 max={1000}
393 step={1}
394 />
395 <ResponsiveDimensionsControl
396 baseLabel={__(
397 "Button Padding",
398 "betterdocs"
399 )}
400 resRequiredProps={
401 resRequiredProps
402 }
403 controlName={
404 FORM_BUTTON_PADDING
405 }
406 />
407 <BaseControl
408 label={__(
409 "Button Alignment",
410 "betterdocs"
411 )}
412 id="eb-advance-heading-alignment"
413 >
414 <ButtonGroup id="eb-advance-heading-alignment">
415 {FORM_BUTTON_ALIGN.map(
416 (item, key) => (
417 <Button
418 key={key}
419 isPrimary={
420 feedbackFormButtonAlignment ===
421 item.value
422 }
423 isSecondary={
424 feedbackFormButtonAlignment !==
425 item.value
426 }
427 onClick={() =>
428 setAttributes(
429 {
430 feedbackFormButtonAlignment:
431 item.value,
432 }
433 )
434 }
435 >
436 {item.label}
437 </Button>
438 )
439 )}
440 </ButtonGroup>
441 </BaseControl>
442 </PanelBody>
443 </>
444 )}
445 </div>
446 );
447 }}
448 </TabPanel>
449 </div>
450 </InspectorControls>
451 );
452 };
453
454 export default Inspector;
455