@cdc/data-bite 1.1.4 → 9.22.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cdcdatabite.js +8 -8
  2. package/examples/gallery/calculated-average.json +3167 -0
  3. package/examples/gallery/calculated-with-pic.json +3173 -0
  4. package/examples/gallery/max-value.json +3167 -0
  5. package/examples/gallery/sum-of-data.json +3161 -0
  6. package/examples/private/double.json +0 -0
  7. package/examples/private/totals.json +1 -0
  8. package/package.json +3 -3
  9. package/src/CdcDataBite.tsx +66 -81
  10. package/src/components/EditorPanel.js +547 -166
  11. package/src/index.html +11 -2
  12. package/src/scss/bite.scss +99 -37
  13. package/src/scss/editor-panel.scss +0 -1
  14. package/src/scss/main.scss +2 -2
package/src/components/EditorPanel.js CHANGED
@@ -10,7 +10,7 @@ import {
10
10
 
11
11
  import { useDebounce } from 'use-debounce'
12
12
  import Context from '../context'
13
- import WarningImage from '../images/warning.svg'
13
+ import WarningImage from '@cdc/core/assets/icon-warning-circle.svg'
14
14
  import Tooltip from '@cdc/core/components/ui/Tooltip'
15
15
  import Icon from '@cdc/core/components/ui/Icon'
16
16
  import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -310,142 +310,341 @@ const EditorPanel = memo(() => {
310
310
 
311
311
  return (
312
312
  <ErrorBoundary component="EditorPanel">
313
- {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error /> }
313
+ {!config.newViz &&
314
+ config.runtime &&
315
+ config.runtime.editorErrorMessage && <Error />}
314
316
  {(!config.dataColumn || !config.dataFunction) && <Confirm />}
315
- <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
316
- <section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}>
317
+ <button
318
+ className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`}
319
+ title={displayPanel ? `Collapse Editor` : `Expand Editor`}
320
+ onClick={onBackClick}
321
+ />
322
+ <section
323
+ className={
324
+ displayPanel ? "editor-panel cove" : "hidden editor-panel cove"
325
+ }
326
+ >
317
327
  <div className="heading-2">Configure Data Bite</div>
318
328
  <section className="form-container">
319
329
  <form>
320
330
  <Accordion allowZeroExpanded={true}>
321
- <AccordionItem> {/* General */}
331
+ <AccordionItem>
332
+ {" "}
333
+ {/* General */}
322
334
  <AccordionItemHeading>
323
- <AccordionItemButton>
324
- General
325
- </AccordionItemButton>
335
+ <AccordionItemButton>General</AccordionItemButton>
326
336
  </AccordionItemHeading>
327
337
  <AccordionItemPanel>
328
- <Select value={config.biteStyle} fieldName="biteStyle" label="Data Bite Style" updateField={updateField} options={BITE_LOCATIONS} initial="Select" />
329
- <TextField value={config.title} fieldName="title" label="Title" placeholder="Data Bite Title" updateField={updateField} />
330
- <TextField type="textarea" value={config.biteBody} fieldName="biteBody" label="Message" updateField={updateField} tooltip={
331
- <Tooltip style={{textTransform: 'none'}}>
332
- <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
333
- <Tooltip.Content>
334
- <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
335
- </Tooltip.Content>
336
- </Tooltip>
337
- }/>
338
- <TextField value={config.subtext} fieldName="subtext" label="Subtext/Citation" placeholder="Data Bite Subtext or Citation" updateField={updateField} tooltip={
339
- <Tooltip style={{textTransform: 'none'}}>
340
- <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
341
- <Tooltip.Content>
342
- <p>
343
- Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
344
- </Tooltip.Content>
345
- </Tooltip>
346
- }/>
347
- <CheckBox value={config.general.isCompactStyle} section="general" fieldName="isCompactStyle" label="Compact Style" updateField={updateField} tooltip={
348
- <Tooltip style={{ textTransform: 'none' }}>
349
- <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }} /></Tooltip.Target>
350
- <Tooltip.Content>
351
- <p>Simple data bite style that formats certain elements for a more compact view.</p>
352
- </Tooltip.Content>
353
- </Tooltip>
354
- } />
338
+ <Select
339
+ value={config.biteStyle}
340
+ fieldName="biteStyle"
341
+ label="Data Bite Style"
342
+ updateField={updateField}
343
+ options={BITE_LOCATIONS}
344
+ initial="Select"
345
+ />
346
+ <TextField
347
+ value={config.title}
348
+ fieldName="title"
349
+ label="Title"
350
+ placeholder="Data Bite Title"
351
+ updateField={updateField}
352
+ />
353
+
354
+ <TextField
355
+ type="textarea"
356
+ value={config.biteBody}
357
+ fieldName="biteBody"
358
+ label="Message"
359
+ updateField={updateField}
360
+ tooltip={
361
+ <Tooltip style={{ textTransform: "none" }}>
362
+ <Tooltip.Target>
363
+ <Icon
364
+ display="question"
365
+ style={{ marginLeft: "0.5rem" }}
366
+ />
367
+ </Tooltip.Target>
368
+ <Tooltip.Content>
369
+ <p>
370
+ Enter the message text for the visualization. The
371
+ following HTML tags are supported: strong, em, sup,
372
+ and sub.
373
+ </p>
374
+ </Tooltip.Content>
375
+ </Tooltip>
376
+ }
377
+ />
378
+ <TextField
379
+ value={config.subtext}
380
+ fieldName="subtext"
381
+ label="Subtext/Citation"
382
+ placeholder="Data Bite Subtext or Citation"
383
+ updateField={updateField}
384
+ tooltip={
385
+ <Tooltip style={{ textTransform: "none" }}>
386
+ <Tooltip.Target>
387
+ <Icon
388
+ display="question"
389
+ style={{ marginLeft: "0.5rem" }}
390
+ />
391
+ </Tooltip.Target>
392
+ <Tooltip.Content>
393
+ <p>
394
+ Enter supporting text to display below the data
395
+ visualization, if applicable. The following HTML
396
+ tags are supported: strong, em, sup, and sub.
397
+ </p>
398
+ </Tooltip.Content>
399
+ </Tooltip>
400
+ }
401
+ />
355
402
  </AccordionItemPanel>
356
403
  </AccordionItem>
357
404
 
358
- <AccordionItem> {/*Data*/}
405
+ <AccordionItem>
406
+ {" "}
407
+ {/*Data*/}
359
408
  <AccordionItemHeading>
360
409
  <AccordionItemButton>
361
- Data {(!config.dataColumn || !config.dataFunction) && <WarningImage width="25" className="warning-icon" />}
410
+ Data{" "}
411
+ {(!config.dataColumn || !config.dataFunction) && (
412
+ <WarningImage width="25" className="warning-icon" />
413
+ )}
362
414
  </AccordionItemButton>
363
415
  </AccordionItemHeading>
364
416
  <AccordionItemPanel>
365
417
  <ul className="column-edit">
366
418
  <li className="two-col">
367
- <Select value={config.dataColumn || ""} fieldName="dataColumn" label="Data Column" updateField={updateField} initial="Select" required={true} options={getColumns()} />
368
- <Select value={config.dataFunction || ""} fieldName="dataFunction" label="Data Function" updateField={updateField} initial="Select" required={true} options={DATA_FUNCTIONS} />
419
+ <Select
420
+ value={config.dataColumn || ""}
421
+ fieldName="dataColumn"
422
+ label="Data Column"
423
+ updateField={updateField}
424
+ initial="Select"
425
+ required={true}
426
+ options={getColumns()}
427
+ />
428
+ <Select
429
+ value={config.dataFunction || ""}
430
+ fieldName="dataFunction"
431
+ label="Data Function"
432
+ updateField={updateField}
433
+ initial="Select"
434
+ required={true}
435
+ options={DATA_FUNCTIONS}
436
+ />
369
437
  </li>
370
438
  </ul>
371
439
  <span className="divider-heading">Number Formatting</span>
372
440
  <ul className="column-edit">
373
441
  <li className="three-col">
374
- <TextField value={config.dataFormat.prefix} section="dataFormat" fieldName="prefix" label="Prefix" updateField={updateField} />
375
- <TextField value={config.dataFormat.suffix} section="dataFormat" fieldName="suffix" label="Suffix" updateField={updateField} />
376
- <TextField type="number" value={config.dataFormat.roundToPlace} section="dataFormat" fieldName="roundToPlace" label="Round" updateField={updateField} min='0' max='99' />
442
+ <TextField
443
+ value={config.dataFormat.prefix}
444
+ section="dataFormat"
445
+ fieldName="prefix"
446
+ label="Prefix"
447
+ updateField={updateField}
448
+ />
449
+ <TextField
450
+ value={config.dataFormat.suffix}
451
+ section="dataFormat"
452
+ fieldName="suffix"
453
+ label="Suffix"
454
+ updateField={updateField}
455
+ />
456
+ <TextField
457
+ type="number"
458
+ value={config.dataFormat.roundToPlace}
459
+ section="dataFormat"
460
+ fieldName="roundToPlace"
461
+ label="Round"
462
+ updateField={updateField}
463
+ min="0"
464
+ max="99"
465
+ />
377
466
  </li>
378
467
  </ul>
379
468
  <CheckBox value={config.dataFormat.commas} section="dataFormat" fieldName="commas" label="Add commas" updateField={updateField} />
380
469
  <CheckBox value={config.dataFormat.ignoreZeros} section="dataFormat" fieldName="ignoreZeros" label="Ignore Zeros" updateField={updateField} />
381
470
  <hr className="accordion__divider" />
382
471
 
383
- <label style={{marginBottom: '1rem'}}>
472
+ <label style={{ marginBottom: "1rem" }}>
384
473
  <span className="edit-label">
385
474
  Data Point Filters
386
- <Tooltip style={{ textTransform: 'none' }}>
387
- <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
475
+ <Tooltip style={{ textTransform: "none" }}>
476
+ <Tooltip.Target>
477
+ <Icon
478
+ display="question"
479
+ style={{ marginLeft: "0.5rem" }}
480
+ />
481
+ </Tooltip.Target>
388
482
  <Tooltip.Content>
389
- <p>To refine the highlighted data point, specify one or more filters (e.g., "Male" and
390
- "Female" for a column called "Sex").</p>
483
+ <p>
484
+ To refine the highlighted data point, specify one or
485
+ more filters (e.g., "Male" and "Female" for a column
486
+ called "Sex").
487
+ </p>
391
488
  </Tooltip.Content>
392
489
  </Tooltip>
393
490
  </span>
394
491
  </label>
395
- {
396
- config.filters &&
492
+ {config.filters && (
397
493
  <ul className="filters-list">
398
494
  {config.filters.map((filter, index) => (
399
495
  <fieldset className="edit-block" key={index}>
400
- <button type="button" className="remove-column" onClick={() => {removeFilter(index)}}>Remove</button>
496
+ <button
497
+ type="button"
498
+ className="remove-column"
499
+ onClick={() => {
500
+ removeFilter(index);
501
+ }}
502
+ >
503
+ Remove
504
+ </button>
401
505
  <label>
402
- <span className="edit-label column-heading">Column</span>
403
- <select value={filter.columnName ? filter.columnName : ''} onChange={(e) => {updateFilterProp('columnName', index, e.target.value)}}>
506
+ <span className="edit-label column-heading">
507
+ Column
508
+ </span>
509
+ <select
510
+ value={filter.columnName ? filter.columnName : ""}
511
+ onChange={(e) => {
512
+ updateFilterProp(
513
+ "columnName",
514
+ index,
515
+ e.target.value
516
+ );
517
+ }}
518
+ >
404
519
  <option value="">- Select Option -</option>
405
520
  {getColumns().map((dataKey, index) => (
406
- <option value={dataKey} key={index}>{dataKey}</option>
521
+ <option value={dataKey} key={index}>
522
+ {dataKey}
523
+ </option>
407
524
  ))}
408
525
  </select>
409
526
  </label>
410
527
  <label>
411
- <span className="edit-label column-heading">Column Value</span>
412
- <select value={filter.columnValue} onChange={(e) => {updateFilterProp('columnValue', index, e.target.value)}}>
528
+ <span className="edit-label column-heading">
529
+ Column Value
530
+ </span>
531
+ <select
532
+ value={filter.columnValue}
533
+ onChange={(e) => {
534
+ updateFilterProp(
535
+ "columnValue",
536
+ index,
537
+ e.target.value
538
+ );
539
+ }}
540
+ >
413
541
  <option value="">- Select Option -</option>
414
- {getFilterColumnValues(index).map((dataKey, index) => (
415
- <option value={dataKey} key={index}>{dataKey}</option>
416
- ))}
542
+ {getFilterColumnValues(index).map(
543
+ (dataKey, index) => (
544
+ <option value={dataKey} key={index}>
545
+ {dataKey}
546
+ </option>
547
+ )
548
+ )}
417
549
  </select>
418
550
  </label>
419
551
  </fieldset>
420
552
  ))}
421
553
  </ul>
422
- }
423
- {(!config.filters || config.filters.length === 0) &&
554
+ )}
555
+ {(!config.filters || config.filters.length === 0) && (
424
556
  <div>
425
557
  <fieldset className="edit-block">
426
- <p style={{textAlign: "center"}}>There are currently no filters.</p>
558
+ <p style={{ textAlign: "center" }}>
559
+ There are currently no filters.
560
+ </p>
427
561
  </fieldset>
428
562
  </div>
429
- }
430
- <button type="button" onClick={addNewFilter} className="btn full-width">Add Filter</button>
563
+ )}
564
+ <button
565
+ type="button"
566
+ onClick={addNewFilter}
567
+ className="btn full-width"
568
+ >
569
+ Add Filter
570
+ </button>
431
571
  </AccordionItemPanel>
432
572
  </AccordionItem>
433
573
 
434
- <AccordionItem> {/*Visual*/}
574
+ <AccordionItem>
575
+ {" "}
576
+ {/*Visual*/}
435
577
  <AccordionItemHeading>
436
- <AccordionItemButton>
437
- Visual
438
- </AccordionItemButton>
578
+ <AccordionItemButton>Visual</AccordionItemButton>
439
579
  </AccordionItemHeading>
440
580
  <AccordionItemPanel>
441
- <TextField type="number" value={config.biteFontSize} fieldName="biteFontSize" label="Bite Font Size" updateField={updateField} min="16" max="65" />
442
- <Select value={config.fontSize} fieldName="fontSize" label="Overall Font Size" updateField={updateField} options={['small', 'medium', 'large']} />
443
- <CheckBox value={config.shadow} fieldName="shadow" label="Display Shadow" updateField={updateField} />
444
- <label className="header">
581
+ <TextField
582
+ type="number"
583
+ value={config.biteFontSize}
584
+ fieldName="biteFontSize"
585
+ label="Bite Font Size"
586
+ updateField={updateField}
587
+ min="17"
588
+ max="65"
589
+ />
590
+ <Select
591
+ value={config.fontSize}
592
+ fieldName="fontSize"
593
+ label="Overall Font Size"
594
+ updateField={updateField}
595
+ options={["small", "medium", "large"]}
596
+ />
597
+ <CheckBox
598
+ value={config.visual?.border}
599
+ section="visual"
600
+ fieldName="border"
601
+ label="Display Border"
602
+ updateField={updateField}
603
+ />
604
+ <CheckBox
605
+ value={config.visual?.borderColorTheme}
606
+ section="visual"
607
+ fieldName="borderColorTheme"
608
+ label="Use Border Color Theme"
609
+ updateField={updateField}
610
+ />
611
+ <CheckBox
612
+ value={config.visual?.accent}
613
+ section="visual"
614
+ fieldName="accent"
615
+ label="Use Accent Style"
616
+ updateField={updateField}
617
+ />
618
+ <CheckBox
619
+ value={config.visual?.background}
620
+ section="visual"
621
+ fieldName="background"
622
+ label="Use Theme Background Color"
623
+ updateField={updateField}
624
+ />
625
+ <CheckBox
626
+ value={config.visual?.hideBackgroundColor}
627
+ section="visual"
628
+ fieldName="hideBackgroundColor"
629
+ label="Hide Background Color"
630
+ updateField={updateField}
631
+ />
632
+ <label>
445
633
  <span className="edit-label">Theme</span>
446
634
  <ul className="color-palette">
447
- {headerColors.map( (palette) => (
448
- <li title={ palette } key={ palette } onClick={ () => { updateConfig({...config, theme: palette})}} className={ config.theme === palette ? "selected " + palette : palette} />
635
+ {headerColors.map((palette) => (
636
+ <li
637
+ title={palette}
638
+ key={palette}
639
+ onClick={() => {
640
+ updateConfig({ ...config, theme: palette });
641
+ }}
642
+ className={
643
+ config.theme === palette
644
+ ? "selected " + palette
645
+ : palette
646
+ }
647
+ />
449
648
  ))}
450
649
  </ul>
451
650
  </label>
@@ -459,132 +658,314 @@ const EditorPanel = memo(() => {
459
658
  </AccordionItemPanel>
460
659
  </AccordionItem>
461
660
 
462
- {['title', 'body', 'graphic'].includes(config.biteStyle) &&
463
- <AccordionItem> {/*Image & Dynamic Images*/}
661
+ {['title', 'body', 'graphic'].includes(config.biteStyle) && (
662
+ <AccordionItem>
663
+ {" "}
664
+ {/*Image & Dynamic Images*/}
464
665
  <AccordionItemHeading>
465
666
  <AccordionItemButton>
466
- Image{[ 'dynamic' ].includes(config.imageData.display) && 's'}
667
+ Image
668
+ {["dynamic"].includes(config.imageData.display) && "s"}
467
669
  </AccordionItemButton>
468
670
  </AccordionItemHeading>
469
-
470
671
  <AccordionItemPanel>
471
- <Select value={config.imageData.display || ""} section="imageData" fieldName="display" label="Image Display Type" updateField={updateField} options={['none', 'static', 'dynamic']} />
472
- <Select value={config.bitePosition || ""} fieldName="bitePosition" label="Image/Graphic Position" updateField={updateField} initial="Select" options={IMAGE_POSITIONS} />
473
- {['static'].includes(config.imageData.display) &&
672
+ <Select
673
+ value={config.imageData.display || ""}
674
+ section="imageData"
675
+ fieldName="display"
676
+ label="Image Display Type"
677
+ updateField={updateField}
678
+ options={["none", "static", "dynamic"]}
679
+ />
680
+ <Select
681
+ value={config.bitePosition || ""}
682
+ fieldName="bitePosition"
683
+ label="Image/Graphic Position"
684
+ updateField={updateField}
685
+ initial="Select"
686
+ options={IMAGE_POSITIONS}
687
+ />
688
+ {["static"].includes(config.imageData.display) && (
474
689
  <>
475
- <TextField value={config.imageData.url} section="imageData" fieldName="url" label="Image URL" updateField={updateField} />
476
- <TextField value={config.imageData.alt} section="imageData" fieldName="alt" label="Alt Text" updateField={updateField} />
690
+ <TextField
691
+ value={config.imageData.url}
692
+ section="imageData"
693
+ fieldName="url"
694
+ label="Image URL"
695
+ updateField={updateField}
696
+ />
697
+ <TextField
698
+ value={config.imageData.alt}
699
+ section="imageData"
700
+ fieldName="alt"
701
+ label="Alt Text"
702
+ updateField={updateField}
703
+ />
477
704
  </>
478
- }
705
+ )}
479
706
 
480
- {[ 'dynamic' ].includes(config.imageData.display) &&
707
+ {["dynamic"].includes(config.imageData.display) && (
481
708
  <>
482
- <TextField value={config.imageData.url || ""} section="imageData" fieldName="url" label="Image URL (default)" updateField={updateField} />
483
- <TextField value={config.imageData.alt} section="imageData" fieldName="alt" label="Alt Text (default)" updateField={updateField} />
709
+ <TextField
710
+ value={config.imageData.url || ""}
711
+ section="imageData"
712
+ fieldName="url"
713
+ label="Image URL (default)"
714
+ updateField={updateField}
715
+ />
716
+ <TextField
717
+ value={config.imageData.alt}
718
+ section="imageData"
719
+ fieldName="alt"
720
+ label="Alt Text (default)"
721
+ updateField={updateField}
722
+ />
484
723
 
485
724
  <hr className="accordion__divider" />
486
725
 
487
- {(!config.imageData.options || config.imageData.options.length === 0) && <p style={{textAlign: "center"}}>There are currently no dynamic images.</p>}
488
- {config.imageData.options && config.imageData.options.length > 0 &&
489
- <>
490
- <ul>
491
- {config.imageData.options.map((option, index) => (
492
- <fieldset className="edit-block" key={index}>
493
- <button type="button" className="remove-column" onClick={() => {removeDynamicImage(index)}}>Remove</button>
494
- <label>
495
- <span className="edit-label column-heading"><strong>{'Image #' + (index + 1)}</strong></span>
496
-
497
- <div className="accordion__panel-row align-center">
498
- <div className="accordion__panel-col flex-auto">
499
- If Value
500
- </div>
501
- <div className="accordion__panel-col flex-auto">
502
- <select value={option.arguments[0]?.operator || ""} onChange={(e) => {updateDynamicImage('operator', index, 0, e.target.value)}}>
503
- <option value="" disabled/>
504
- {DATA_OPERATORS.map((operator, index) => (
505
- <option value={operator} key={index}>{operator}</option>
506
- ))}
507
- </select>
508
- </div>
509
- <div className="accordion__panel-col flex-grow flex-shrink">
510
- <input type="number" value={option.arguments[0]?.threshold || ""} onChange={(e) => {updateDynamicImage('threshold', index, 0, e.target.value)}} />
511
- </div>
512
- </div>
513
-
514
- <div className="accordion__panel-row mb-2 align-center">
515
- <div className="accordion__panel-col flex-grow">
516
- <select className='border-dashed text-center' value={option.secondArgument ? 'and' : 'then'} onChange={(e) => {
517
- if ('then' === e.target.value) {updateDynamicImage('secondArgument', index, null,false); removeDynamicArgument(index)}
518
- if ('and' === e.target.value) {updateDynamicImage('secondArgument', index, null,true)}
519
- }}>
520
- <option value={'then'}>Then</option>
521
- <option value={'and'}>And</option>
522
- </select>
523
- </div>
524
- </div>
525
-
526
- {option.secondArgument && true === option.secondArgument &&
527
- <>
726
+ {(!config.imageData.options ||
727
+ config.imageData.options.length === 0) && (
728
+ <p style={{ textAlign: "center" }}>
729
+ There are currently no dynamic images.
730
+ </p>
731
+ )}
732
+ {config.imageData.options &&
733
+ config.imageData.options.length > 0 && (
734
+ <>
735
+ <ul>
736
+ {config.imageData.options.map(
737
+ (option, index) => (
738
+ <fieldset
739
+ className="edit-block"
740
+ key={index}
741
+ >
742
+ <button
743
+ type="button"
744
+ className="remove-column"
745
+ onClick={() => {
746
+ removeDynamicImage(index);
747
+ }}
748
+ >
749
+ Remove
750
+ </button>
751
+ <label>
752
+ <span className="edit-label column-heading">
753
+ <strong>
754
+ {"Image #" + (index + 1)}
755
+ </strong>
756
+ </span>
757
+
528
758
  <div className="accordion__panel-row align-center">
529
759
  <div className="accordion__panel-col flex-auto">
530
760
  If Value
531
761
  </div>
532
762
  <div className="accordion__panel-col flex-auto">
533
- <select value={option.arguments[1]?.operator || ""} onChange={(e) => {setDynamicArgument(index, 'operator', e.target.value)}}>
534
- <option value="" disabled/>
535
- {DATA_OPERATORS.map((operator, index) => (
536
- <option value={operator} key={index}>{operator}</option>
537
- ))}
763
+ <select
764
+ value={
765
+ option.arguments[0]?.operator ||
766
+ ""
767
+ }
768
+ onChange={(e) => {
769
+ updateDynamicImage(
770
+ "operator",
771
+ index,
772
+ 0,
773
+ e.target.value
774
+ );
775
+ }}
776
+ >
777
+ <option value="" disabled />
778
+ {DATA_OPERATORS.map(
779
+ (operator, index) => (
780
+ <option
781
+ value={operator}
782
+ key={index}
783
+ >
784
+ {operator}
785
+ </option>
786
+ )
787
+ )}
538
788
  </select>
539
789
  </div>
540
790
  <div className="accordion__panel-col flex-grow flex-shrink">
541
- <input type="number" value={option.arguments[1]?.threshold || ""} onChange={(e) => {setDynamicArgument(index, 'threshold', e.target.value)}} />
791
+ <input
792
+ type="number"
793
+ value={
794
+ option.arguments[0]
795
+ ?.threshold || ""
796
+ }
797
+ onChange={(e) => {
798
+ updateDynamicImage(
799
+ "threshold",
800
+ index,
801
+ 0,
802
+ e.target.value
803
+ );
804
+ }}
805
+ />
542
806
  </div>
543
807
  </div>
544
- <div className="accordion__panel-row mb-2 align-center text-center text-capitalize">
808
+
809
+ <div className="accordion__panel-row mb-2 align-center">
545
810
  <div className="accordion__panel-col flex-grow">
546
- Then
811
+ <select
812
+ className="border-dashed text-center"
813
+ value={
814
+ option.secondArgument
815
+ ? "and"
816
+ : "then"
817
+ }
818
+ onChange={(e) => {
819
+ if ("then" === e.target.value) {
820
+ updateDynamicImage(
821
+ "secondArgument",
822
+ index,
823
+ null,
824
+ false
825
+ );
826
+ removeDynamicArgument(index);
827
+ }
828
+ if ("and" === e.target.value) {
829
+ updateDynamicImage(
830
+ "secondArgument",
831
+ index,
832
+ null,
833
+ true
834
+ );
835
+ }
836
+ }}
837
+ >
838
+ <option value={"then"}>
839
+ Then
840
+ </option>
841
+ <option value={"and"}>And</option>
842
+ </select>
547
843
  </div>
548
844
  </div>
549
- </>
550
- }
551
-
552
- <div className="accordion__panel-row mb-2 align-center">
553
- <div className="accordion__panel-col flex-auto">
554
- Show
555
- </div>
556
- <div className="accordion__panel-col flex-grow">
557
- <input type="text" value={option.source || ""} onChange={(e) => {updateDynamicImage('source', index, null, e.target.value)}} />
558
- </div>
559
- </div>
560
-
561
- <div className="accordion__panel-row mb-2 align-center">
562
- <div className="accordion__panel-col flex-auto">
563
- Alt Text
564
- </div>
565
- <div className="accordion__panel-col flex-grow">
566
- <input type="text" value={option.alt || ""} onChange={(e) => {updateDynamicImage('alt', index, null, e.target.value)}} />
567
- </div>
568
- </div>
569
- </label>
570
- </fieldset>
571
- ))}
572
- </ul>
573
- </>
574
- }
575
- <button type="button" onClick={addDynamicImage} className="btn full-width">Add Dynamic Image</button>
845
+
846
+ {option.secondArgument &&
847
+ true === option.secondArgument && (
848
+ <>
849
+ <div className="accordion__panel-row align-center">
850
+ <div className="accordion__panel-col flex-auto">
851
+ If Value
852
+ </div>
853
+ <div className="accordion__panel-col flex-auto">
854
+ <select
855
+ value={
856
+ option.arguments[1]
857
+ ?.operator || ""
858
+ }
859
+ onChange={(e) => {
860
+ setDynamicArgument(
861
+ index,
862
+ "operator",
863
+ e.target.value
864
+ );
865
+ }}
866
+ >
867
+ <option value="" disabled />
868
+ {DATA_OPERATORS.map(
869
+ (operator, index) => (
870
+ <option
871
+ value={operator}
872
+ key={index}
873
+ >
874
+ {operator}
875
+ </option>
876
+ )
877
+ )}
878
+ </select>
879
+ </div>
880
+ <div className="accordion__panel-col flex-grow flex-shrink">
881
+ <input
882
+ type="number"
883
+ value={
884
+ option.arguments[1]
885
+ ?.threshold || ""
886
+ }
887
+ onChange={(e) => {
888
+ setDynamicArgument(
889
+ index,
890
+ "threshold",
891
+ e.target.value
892
+ );
893
+ }}
894
+ />
895
+ </div>
896
+ </div>
897
+ <div className="accordion__panel-row mb-2 align-center text-center text-capitalize">
898
+ <div className="accordion__panel-col flex-grow">
899
+ Then
900
+ </div>
901
+ </div>
902
+ </>
903
+ )}
904
+
905
+ <div className="accordion__panel-row mb-2 align-center">
906
+ <div className="accordion__panel-col flex-auto">
907
+ Show
908
+ </div>
909
+ <div className="accordion__panel-col flex-grow">
910
+ <input
911
+ type="text"
912
+ value={option.source || ""}
913
+ onChange={(e) => {
914
+ updateDynamicImage(
915
+ "source",
916
+ index,
917
+ null,
918
+ e.target.value
919
+ );
920
+ }}
921
+ />
922
+ </div>
923
+ </div>
924
+
925
+ <div className="accordion__panel-row mb-2 align-center">
926
+ <div className="accordion__panel-col flex-auto">
927
+ Alt Text
928
+ </div>
929
+ <div className="accordion__panel-col flex-grow">
930
+ <input
931
+ type="text"
932
+ value={option.alt || ""}
933
+ onChange={(e) => {
934
+ updateDynamicImage(
935
+ "alt",
936
+ index,
937
+ null,
938
+ e.target.value
939
+ );
940
+ }}
941
+ />
942
+ </div>
943
+ </div>
944
+ </label>
945
+ </fieldset>
946
+ )
947
+ )}
948
+ </ul>
949
+ </>
950
+ )}
951
+ <button
952
+ type="button"
953
+ onClick={addDynamicImage}
954
+ className="btn full-width"
955
+ >
956
+ Add Dynamic Image
957
+ </button>
576
958
  </>
577
- }
959
+ )}
578
960
  </AccordionItemPanel>
579
961
  </AccordionItem>
580
- }
581
-
962
+ )}
582
963
  </Accordion>
583
964
  </form>
584
965
  </section>
585
966
  </section>
586
967
  </ErrorBoundary>
587
- )
968
+ );
588
969
  })
589
970
 
590
971
  export default EditorPanel;