From 27853272f4dd267b79bd201ff61ed6b63b9a4bc4 Mon Sep 17 00:00:00 2001
From: Camila Campos <camila.campos@geolabor.com.br>
Date: Fri, 3 Sep 2021 11:38:41 -0300
Subject: [PATCH 1/3] fix: fix use of form dropdown template

---
 demo/FormExamples.jsx      | 39 +++++++++++++++++++-------------------
 src/forms/FormDropdown.jsx |  6 ++++--
 src/mixed/Dropdown.jsx     |  6 ++++--
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 334de0c..38e7d61 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -369,48 +369,47 @@ export function FormExamples() {
         options={[
           {
             value: {
+              firstValue: 'Title one',
+              secondvalue: 1,
+            },
+            label: {
               title: 'Title one',
               subtitle: 'subtitle one',
             },
-            label: (
-              <div>
-                <h5>Title one</h5>
-                <p>Subtitle one</p>
-              </div>
-            ),
           },
           {
             value: {
+              firstValue: 'Title two',
+              secondvalue: 2,
+            },
+            label: {
               title: 'Title two',
               subtitle: 'subtitle two',
             },
-            label: (
-              <div>
-                <h5>Title two</h5>
-                <p>Subtitle two</p>
-              </div>
-            ),
           },
           {
             value: {
+              firstValue: 'Title three',
+              secondvalue: 3,
+            },
+            label: {
               title: 'Title three',
               subtitle: 'subtitle three',
             },
-            label: (
-              <div>
-                <h5>Title three</h5>
-                <p>Subtitle three</p>
-              </div>
-            ),
           },
         ]}
         help="dropdown help"
         placeholder="Select one value"
         afterChange={() => console.log('afterChange dropdown')}
-        template={(label) => <div>{label}</div>}
+        template={(label) => (
+          <div>
+            <strong>{label.title ?? '-'}</strong>
+            <p className="m-0">{label.subtitle ?? '-'}</p>
+          </div>
+        )}
         itemClassName="border-bottom"
         childClassName="text-muted"
-        trackBy="title"
+        trackBy="secondvalue"
       />
 
       <FormGroupDropdown
diff --git a/src/forms/FormDropdown.jsx b/src/forms/FormDropdown.jsx
index 59cb631..084af5d 100644
--- a/src/forms/FormDropdown.jsx
+++ b/src/forms/FormDropdown.jsx
@@ -57,7 +57,7 @@ export const FormDropdown = ({
   const toggleDropdown = useCallback(() => (isOpen ? close() : open()), [close, isOpen, open]);
 
   useEffect(() => {
-   /* The logic in this effect allows the user to close the dropdown menu when they click outside of the component. */
+    /* The logic in this effect allows the user to close the dropdown menu when they click outside of the component. */
     const pageClickEvent = (e) => {
       if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {
         if (isOpen) {
@@ -81,7 +81,9 @@ export const FormDropdown = ({
     <div ref={dropdownRef}>
       <Dropdown
         isOpen={isOpen}
-        items={includeEmptyItem ? [{ value: null, label: <div className="m-3"></div> }, ...items] : items}
+        items={
+          includeEmptyItem ? [{ value: null, label: <div className="m-3"></div>, useTemplate: false }, ...items] : items
+        }
         onSelect={onSelectItem}
         template={template}
         itemClassName={itemClassName}
diff --git a/src/mixed/Dropdown.jsx b/src/mixed/Dropdown.jsx
index 27cc182..0a29e61 100644
--- a/src/mixed/Dropdown.jsx
+++ b/src/mixed/Dropdown.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { isNullLike } from 'js-var-type';
+
 import { safeClick } from '../utils/event-handlers';
 import { formatClasses } from '../utils/attributes';
 
@@ -30,14 +32,14 @@ export function Dropdown({
           // aria-labelledby="dropdownMenuButton"
           style={{ maxHeight: '200px', overflowY: 'auto' }}
         >
-          {items.map(({ label, value, isDisabled }, index) => (
+          {items.map(({ label, value, isDisabled, useTemplate }, index) => (
             <a
               key={index}
               href="#"
               className={formatClasses(['dropdown-item', isDisabled && 'disabled', itemClassName])}
               onClick={safeClick(onSelect, { value, index, label })}
             >
-              {template(label)}
+              {!isNullLike(useTemplate) && !useTemplate ? label : template(label)}
             </a>
           ))}
         </div>

From c64c4475f06410ccd8f3ec98bcf34619622159e9 Mon Sep 17 00:00:00 2001
From: Camila Campos <camila.campos@geolabor.com.br>
Date: Fri, 3 Sep 2021 15:41:43 -0300
Subject: [PATCH 2/3] wip

---
 demo/FormExamples.jsx      | 16 ++++++++++------
 src/forms/FormDropdown.jsx |  4 +---
 src/mixed/Dropdown.jsx     |  6 ++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 38e7d61..7556f6e 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -401,12 +401,16 @@ export function FormExamples() {
         help="dropdown help"
         placeholder="Select one value"
         afterChange={() => console.log('afterChange dropdown')}
-        template={(label) => (
-          <div>
-            <strong>{label.title ?? '-'}</strong>
-            <p className="m-0">{label.subtitle ?? '-'}</p>
-          </div>
-        )}
+        template={(label, value) => {
+          return value ? (
+            <div>
+              <strong>{label.title ?? '-'}</strong>
+              <p className="m-0">{label.subtitle ?? '-'}</p>
+            </div>
+          ) : (
+            label
+          );
+        }}
         itemClassName="border-bottom"
         childClassName="text-muted"
         trackBy="secondvalue"
diff --git a/src/forms/FormDropdown.jsx b/src/forms/FormDropdown.jsx
index 084af5d..9a855d7 100644
--- a/src/forms/FormDropdown.jsx
+++ b/src/forms/FormDropdown.jsx
@@ -81,9 +81,7 @@ export const FormDropdown = ({
     <div ref={dropdownRef}>
       <Dropdown
         isOpen={isOpen}
-        items={
-          includeEmptyItem ? [{ value: null, label: <div className="m-3"></div>, useTemplate: false }, ...items] : items
-        }
+        items={includeEmptyItem ? [{ value: null, label: <div className="m-3"></div> }, ...items] : items}
         onSelect={onSelectItem}
         template={template}
         itemClassName={itemClassName}
diff --git a/src/mixed/Dropdown.jsx b/src/mixed/Dropdown.jsx
index 0a29e61..320f1ea 100644
--- a/src/mixed/Dropdown.jsx
+++ b/src/mixed/Dropdown.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { isNullLike } from 'js-var-type';
-
 import { safeClick } from '../utils/event-handlers';
 import { formatClasses } from '../utils/attributes';
 
@@ -32,14 +30,14 @@ export function Dropdown({
           // aria-labelledby="dropdownMenuButton"
           style={{ maxHeight: '200px', overflowY: 'auto' }}
         >
-          {items.map(({ label, value, isDisabled, useTemplate }, index) => (
+          {items.map(({ label, value, isDisabled }, index) => (
             <a
               key={index}
               href="#"
               className={formatClasses(['dropdown-item', isDisabled && 'disabled', itemClassName])}
               onClick={safeClick(onSelect, { value, index, label })}
             >
-              {!isNullLike(useTemplate) && !useTemplate ? label : template(label)}
+              {template(label, value, index)}
             </a>
           ))}
         </div>

From d30debf944d88f085f43656e191fe5448ab70774 Mon Sep 17 00:00:00 2001
From: Nerissa <nerissa.aguirre@geolabor.com.br>
Date: Fri, 3 Sep 2021 16:10:47 -0300
Subject: [PATCH 3/3] =?UTF-8?q?Padroniza=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/FormExamples.jsx      | 8 ++++----
 src/forms/FormDropdown.jsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 7556f6e..6e6c3ae 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -370,7 +370,7 @@ export function FormExamples() {
           {
             value: {
               firstValue: 'Title one',
-              secondvalue: 1,
+              secondValue: 1,
             },
             label: {
               title: 'Title one',
@@ -380,7 +380,7 @@ export function FormExamples() {
           {
             value: {
               firstValue: 'Title two',
-              secondvalue: 2,
+              secondValue: 2,
             },
             label: {
               title: 'Title two',
@@ -390,7 +390,7 @@ export function FormExamples() {
           {
             value: {
               firstValue: 'Title three',
-              secondvalue: 3,
+              secondValue: 3,
             },
             label: {
               title: 'Title three',
@@ -413,7 +413,7 @@ export function FormExamples() {
         }}
         itemClassName="border-bottom"
         childClassName="text-muted"
-        trackBy="secondvalue"
+        trackBy="secondValue"
       />
 
       <FormGroupDropdown
diff --git a/src/forms/FormDropdown.jsx b/src/forms/FormDropdown.jsx
index 9a855d7..e3959af 100644
--- a/src/forms/FormDropdown.jsx
+++ b/src/forms/FormDropdown.jsx
@@ -92,7 +92,7 @@ export const FormDropdown = ({
           className={formatClasses(['input-group justify-content-between form-control h-auto', childClassName])}
           onClick={toggleDropdown}
         >
-          {selectedItem ? template(selectedItem.label) : <div className="text-muted">{placeholder}</div>}
+          {selectedItem ? template(selectedItem.label, selectedItem.value) : <div className="text-muted">{placeholder}</div>}
           {toggleIcon(isOpen)}
         </div>
       </Dropdown>