feat: replace forest type button with forest type modal

geops · Sep 9, 2020 · 347150a · 347150a
1 parent f7e8acb
commit 347150a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 37 deletions.
diff --git a/src/components/ForestTypeButton.js b/src/components/ForestTypeButton.js
diff --git a/src/components/ForestTypeModal.js b/src/components/ForestTypeModal.js
@@ -6,12 +6,11 @@ import { Modal } from 'semantic-ui-react';
 import Button from './Button';
 import ForestTypeDescription from './ForestTypeDescription';
 
-function ForestTypeModal({ data, setIsForestTypeModalOpen }) {
+function ForestTypeModal({ compact, data, setIsForestTypeModalOpen }) {
   const { i18n } = useTranslation();
 
   return (
     <Modal
-      open
       actions={[{ key: 'done', content: 'Ok' }]}
       content={
         <Modal.Content>
@@ -21,14 +20,20 @@ function ForestTypeModal({ data, setIsForestTypeModalOpen }) {
       header={`${data.code} - ${data[i18n.language]} (${data.la})`}
       onClose={() => setIsForestTypeModalOpen(false)}
       onOpen={() => setIsForestTypeModalOpen(true)}
-      trigger={<Button active icon="info" />}
+      trigger={<Button active compact={compact} icon="info" />}
     />
   );
 }
 
 ForestTypeModal.propTypes = {
+  compact: PropTypes.bool,
   data: PropTypes.arrayOf().isRequired,
-  setIsForestTypeModalOpen: PropTypes.func.isRequired,
+  setIsForestTypeModalOpen: PropTypes.func,
+};
+
+ForestTypeModal.defaultProps = {
+  compact: false,
+  setIsForestTypeModalOpen: () => null,
 };
 
 export default ForestTypeModal;
diff --git a/src/components/LocationResult.js b/src/components/LocationResult.js
@@ -8,7 +8,7 @@ import { info } from 'lib/src';
 
 import Dropdown from './Dropdown';
 import Ecogram from './Ecogram';
-import ForestTypeButton from './ForestTypeButton';
+import ForestTypeModal from './ForestTypeModal';
 import HelpModal from './HelpModal';
 import { setFormLocation } from '../store/actions';
 import styles from './LocationResult.module.css';
@@ -71,12 +71,13 @@ function LocationResult() {
                   <>
                     <Dropdown.Header content={t(`forestType.group.${group}`)} />
                     {forestTypes[group].map((key) => {
+                      const ftInfo = info('forestType', key);
                       return (
                         <Dropdown.Item
                           content={
                             <>
-                              <ForestTypeButton code={key} compact />
-                              {key} - {info('forestType', key)[i18n.language]}
+                              <ForestTypeModal compact data={ftInfo} />
+                              {key} - {ftInfo[i18n.language]}
                             </>
                           }
                           value={key}

diff --git a/src/components/ProjectionForm.js b/src/components/ProjectionForm.js
@@ -9,7 +9,7 @@ import { info } from 'lib/src';
 
 import ChoiceButton from './ChoiceButton';
 import Dropdown from './Dropdown';
-import ForestTypeButton from './ForestTypeButton';
+import ForestTypeModal from './ForestTypeModal';
 import { setFormLocation } from '../store/actions';
 import styles from './ProjectionForm.module.css';
 
@@ -22,7 +22,7 @@ const getDropdownOptions = (type, lng, includeKey = false) => (key) => ({
   key,
   content: includeKey ? (
     <>
-      <ForestTypeButton code={key} compact />
+      <ForestTypeModal compact data={info(type, key)} />
       {key} - {info(type, key)[lng]}
     </>
   ) : (