@cdc/data-bite 1.1.4 → 4.22.10

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 (15) hide show
  1. package/LICENSE +201 -0
  2. package/dist/cdcdatabite.js +8 -8
  3. package/examples/gallery/calculated-average.json +3167 -0
  4. package/examples/gallery/calculated-with-pic.json +3173 -0
  5. package/examples/gallery/max-value.json +3167 -0
  6. package/examples/gallery/sum-of-data.json +3161 -0
  7. package/examples/private/double.json +0 -0
  8. package/examples/private/totals.json +1 -0
  9. package/package.json +3 -3
  10. package/src/CdcDataBite.tsx +55 -100
  11. package/src/components/EditorPanel.js +549 -173
  12. package/src/index.html +11 -2
  13. package/src/scss/bite.scss +99 -37
  14. package/src/scss/editor-panel.scss +0 -1
  15. package/src/scss/main.scss +10 -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,281 +310,657 @@ 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
+ <div className="checkbox-group">
598
+ <CheckBox
599
+ value={config.visual?.border}
600
+ section="visual"
601
+ fieldName="border"
602
+ label="Display Border"
603
+ updateField={updateField}
604
+ />
605
+ <CheckBox
606
+ value={config.visual?.borderColorTheme}
607
+ section="visual"
608
+ fieldName="borderColorTheme"
609
+ label="Use Border Color Theme"
610
+ updateField={updateField}
611
+ />
612
+ <CheckBox
613
+ value={config.visual?.accent}
614
+ section="visual"
615
+ fieldName="accent"
616
+ label="Use Accent Style"
617
+ updateField={updateField}
618
+ />
619
+ <CheckBox
620
+ value={config.visual?.background}
621
+ section="visual"
622
+ fieldName="background"
623
+ label="Use Theme Background Color"
624
+ updateField={updateField}
625
+ />
626
+ <CheckBox
627
+ value={config.visual?.hideBackgroundColor}
628
+ section="visual"
629
+ fieldName="hideBackgroundColor"
630
+ label="Hide Background Color"
631
+ updateField={updateField}
632
+ />
633
+ </div>
634
+ <label>
445
635
  <span className="edit-label">Theme</span>
446
636
  <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} />
637
+ {headerColors.map((palette) => (
638
+ <li
639
+ title={palette}
640
+ key={palette}
641
+ onClick={() => {
642
+ updateConfig({ ...config, theme: palette });
643
+ }}
644
+ className={
645
+ config.theme === palette
646
+ ? "selected " + palette
647
+ : palette
648
+ }
649
+ />
449
650
  ))}
450
651
  </ul>
451
652
  </label>
452
- {/* <div className="cove-accordion__panel-section">
453
- <CheckBox value={config.visual.border} section="visual" fieldName="border" label="Display Border" updateField={updateField} />
454
- <CheckBox value={config.visual.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use Border Color Theme" updateField={updateField} />
455
- <CheckBox value={config.visual.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
456
- <CheckBox value={config.visual.background} section="visual" fieldName="background" label="Use Theme Background Color" updateField={updateField} />
457
- <CheckBox value={config.visual.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
458
- </div> */}
459
653
  </AccordionItemPanel>
460
654
  </AccordionItem>
461
655
 
462
- {['title', 'body', 'graphic'].includes(config.biteStyle) &&
463
- <AccordionItem> {/*Image & Dynamic Images*/}
656
+ {['title', 'body', 'graphic'].includes(config.biteStyle) && (
657
+ <AccordionItem>
658
+ {" "}
659
+ {/*Image & Dynamic Images*/}
464
660
  <AccordionItemHeading>
465
661
  <AccordionItemButton>
466
- Image{[ 'dynamic' ].includes(config.imageData.display) && 's'}
662
+ Image
663
+ {["dynamic"].includes(config.imageData.display) && "s"}
467
664
  </AccordionItemButton>
468
665
  </AccordionItemHeading>
469
-
470
666
  <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) &&
667
+ <Select
668
+ value={config.imageData.display || ""}
669
+ section="imageData"
670
+ fieldName="display"
671
+ label="Image Display Type"
672
+ updateField={updateField}
673
+ options={["none", "static", "dynamic"]}
674
+ />
675
+ <Select
676
+ value={config.bitePosition || ""}
677
+ fieldName="bitePosition"
678
+ label="Image/Graphic Position"
679
+ updateField={updateField}
680
+ initial="Select"
681
+ options={IMAGE_POSITIONS}
682
+ />
683
+ {["static"].includes(config.imageData.display) && (
474
684
  <>
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} />
685
+ <TextField
686
+ value={config.imageData.url}
687
+ section="imageData"
688
+ fieldName="url"
689
+ label="Image URL"
690
+ updateField={updateField}
691
+ />
692
+ <TextField
693
+ value={config.imageData.alt}
694
+ section="imageData"
695
+ fieldName="alt"
696
+ label="Alt Text"
697
+ updateField={updateField}
698
+ />
477
699
  </>
478
- }
700
+ )}
479
701
 
480
- {[ 'dynamic' ].includes(config.imageData.display) &&
702
+ {["dynamic"].includes(config.imageData.display) && (
481
703
  <>
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} />
704
+ <TextField
705
+ value={config.imageData.url || ""}
706
+ section="imageData"
707
+ fieldName="url"
708
+ label="Image URL (default)"
709
+ updateField={updateField}
710
+ />
711
+ <TextField
712
+ value={config.imageData.alt}
713
+ section="imageData"
714
+ fieldName="alt"
715
+ label="Alt Text (default)"
716
+ updateField={updateField}
717
+ />
484
718
 
485
719
  <hr className="accordion__divider" />
486
720
 
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
- <>
721
+ {(!config.imageData.options ||
722
+ config.imageData.options.length === 0) && (
723
+ <p style={{ textAlign: "center" }}>
724
+ There are currently no dynamic images.
725
+ </p>
726
+ )}
727
+ {config.imageData.options &&
728
+ config.imageData.options.length > 0 && (
729
+ <>
730
+ <ul>
731
+ {config.imageData.options.map(
732
+ (option, index) => (
733
+ <fieldset
734
+ className="edit-block"
735
+ key={index}
736
+ >
737
+ <button
738
+ type="button"
739
+ className="remove-column"
740
+ onClick={() => {
741
+ removeDynamicImage(index);
742
+ }}
743
+ >
744
+ Remove
745
+ </button>
746
+ <label>
747
+ <span className="edit-label column-heading">
748
+ <strong>
749
+ {"Image #" + (index + 1)}
750
+ </strong>
751
+ </span>
752
+
528
753
  <div className="accordion__panel-row align-center">
529
754
  <div className="accordion__panel-col flex-auto">
530
755
  If Value
531
756
  </div>
532
757
  <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
- ))}
758
+ <select
759
+ value={
760
+ option.arguments[0]?.operator ||
761
+ ""
762
+ }
763
+ onChange={(e) => {
764
+ updateDynamicImage(
765
+ "operator",
766
+ index,
767
+ 0,
768
+ e.target.value
769
+ );
770
+ }}
771
+ >
772
+ <option value="" disabled />
773
+ {DATA_OPERATORS.map(
774
+ (operator, index) => (
775
+ <option
776
+ value={operator}
777
+ key={index}
778
+ >
779
+ {operator}
780
+ </option>
781
+ )
782
+ )}
538
783
  </select>
539
784
  </div>
540
785
  <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)}} />
786
+ <input
787
+ type="number"
788
+ value={
789
+ option.arguments[0]
790
+ ?.threshold || ""
791
+ }
792
+ onChange={(e) => {
793
+ updateDynamicImage(
794
+ "threshold",
795
+ index,
796
+ 0,
797
+ e.target.value
798
+ );
799
+ }}
800
+ />
542
801
  </div>
543
802
  </div>
544
- <div className="accordion__panel-row mb-2 align-center text-center text-capitalize">
803
+
804
+ <div className="accordion__panel-row mb-2 align-center">
545
805
  <div className="accordion__panel-col flex-grow">
546
- Then
806
+ <select
807
+ className="border-dashed text-center"
808
+ value={
809
+ option.secondArgument
810
+ ? "and"
811
+ : "then"
812
+ }
813
+ onChange={(e) => {
814
+ if ("then" === e.target.value) {
815
+ updateDynamicImage(
816
+ "secondArgument",
817
+ index,
818
+ null,
819
+ false
820
+ );
821
+ removeDynamicArgument(index);
822
+ }
823
+ if ("and" === e.target.value) {
824
+ updateDynamicImage(
825
+ "secondArgument",
826
+ index,
827
+ null,
828
+ true
829
+ );
830
+ }
831
+ }}
832
+ >
833
+ <option value={"then"}>
834
+ Then
835
+ </option>
836
+ <option value={"and"}>And</option>
837
+ </select>
547
838
  </div>
548
839
  </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>
840
+
841
+ {option.secondArgument &&
842
+ true === option.secondArgument && (
843
+ <>
844
+ <div className="accordion__panel-row align-center">
845
+ <div className="accordion__panel-col flex-auto">
846
+ If Value
847
+ </div>
848
+ <div className="accordion__panel-col flex-auto">
849
+ <select
850
+ value={
851
+ option.arguments[1]
852
+ ?.operator || ""
853
+ }
854
+ onChange={(e) => {
855
+ setDynamicArgument(
856
+ index,
857
+ "operator",
858
+ e.target.value
859
+ );
860
+ }}
861
+ >
862
+ <option value="" disabled />
863
+ {DATA_OPERATORS.map(
864
+ (operator, index) => (
865
+ <option
866
+ value={operator}
867
+ key={index}
868
+ >
869
+ {operator}
870
+ </option>
871
+ )
872
+ )}
873
+ </select>
874
+ </div>
875
+ <div className="accordion__panel-col flex-grow flex-shrink">
876
+ <input
877
+ type="number"
878
+ value={
879
+ option.arguments[1]
880
+ ?.threshold || ""
881
+ }
882
+ onChange={(e) => {
883
+ setDynamicArgument(
884
+ index,
885
+ "threshold",
886
+ e.target.value
887
+ );
888
+ }}
889
+ />
890
+ </div>
891
+ </div>
892
+ <div className="accordion__panel-row mb-2 align-center text-center text-capitalize">
893
+ <div className="accordion__panel-col flex-grow">
894
+ Then
895
+ </div>
896
+ </div>
897
+ </>
898
+ )}
899
+
900
+ <div className="accordion__panel-row mb-2 align-center">
901
+ <div className="accordion__panel-col flex-auto">
902
+ Show
903
+ </div>
904
+ <div className="accordion__panel-col flex-grow">
905
+ <input
906
+ type="text"
907
+ value={option.source || ""}
908
+ onChange={(e) => {
909
+ updateDynamicImage(
910
+ "source",
911
+ index,
912
+ null,
913
+ e.target.value
914
+ );
915
+ }}
916
+ />
917
+ </div>
918
+ </div>
919
+
920
+ <div className="accordion__panel-row mb-2 align-center">
921
+ <div className="accordion__panel-col flex-auto">
922
+ Alt Text
923
+ </div>
924
+ <div className="accordion__panel-col flex-grow">
925
+ <input
926
+ type="text"
927
+ value={option.alt || ""}
928
+ onChange={(e) => {
929
+ updateDynamicImage(
930
+ "alt",
931
+ index,
932
+ null,
933
+ e.target.value
934
+ );
935
+ }}
936
+ />
937
+ </div>
938
+ </div>
939
+ </label>
940
+ </fieldset>
941
+ )
942
+ )}
943
+ </ul>
944
+ </>
945
+ )}
946
+ <button
947
+ type="button"
948
+ onClick={addDynamicImage}
949
+ className="btn full-width"
950
+ >
951
+ Add Dynamic Image
952
+ </button>
576
953
  </>
577
- }
954
+ )}
578
955
  </AccordionItemPanel>
579
956
  </AccordionItem>
580
- }
581
-
957
+ )}
582
958
  </Accordion>
583
959
  </form>
584
960
  </section>
585
961
  </section>
586
962
  </ErrorBoundary>
587
- )
963
+ );
588
964
  })
589
965
 
590
966
  export default EditorPanel;