fix: data dimension spacing and crash (NO JIRA) (#504)

* fix: proper spacing for data dimension selector * fix: resolve crash issue due to ui@5 selected handling
dhis2 · Jun 18, 2020 · 99d6c73 · 99d6c73
1 parent da51e81
commit 99d6c73
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 14 deletions.
diff --git a/src/components/DataDimension/DataTypesSelector.js b/src/components/DataDimension/DataTypesSelector.js
@@ -11,7 +11,7 @@ export const DataTypes = ({ currentDataType, onChange }) => (
         <SingleSelectField
             label={i18n.t('Data Type')}
             selected={dataTypes[currentDataType]?.id}
-            onChange={ref => onChange(ref.selected.value)}
+            onChange={ref => onChange(ref.selected)}
             dense
         >
             {Object.values(dataTypes).map(type => (

diff --git a/src/components/DataDimension/Detail.js b/src/components/DataDimension/Detail.js
@@ -18,7 +18,7 @@ export const Detail = ({ currentValue, onChange }) => {
             <SingleSelectField
                 label={i18n.t('Detail')}
                 selected={currentValue}
-                onChange={ref => onChange(ref.selected.value)}
+                onChange={ref => onChange(ref.selected)}
                 dense
             >
                 {Object.entries(options).map(option => (

diff --git a/src/components/DataDimension/Groups.js b/src/components/DataDimension/Groups.js
@@ -35,7 +35,7 @@ export const Groups = ({
                             ? dataTypes[dataType].getPlaceholder()
                             : null
                     }
-                    onChange={ref => onGroupChange(ref.selected.value)}
+                    onChange={ref => onGroupChange(ref.selected)}
                     dense
                 >
                     {optionItems.map(item => (

diff --git a/src/components/DataDimension/styles/DataTypesSelector.style.js b/src/components/DataDimension/styles/DataTypesSelector.style.js
@@ -4,10 +4,7 @@ export default css`
     .container {
         display: flex;
         flex-flow: column;
-        height: 70px;
         border-bottom: 0;
-        padding-left: 10px;
-        padding-right: 5px;
-        padding-top: 5px;
+        padding: 5px 5px 10px 10px;
     }
 `
diff --git a/src/components/DataDimension/styles/Detail.style.js b/src/components/DataDimension/styles/Detail.style.js
@@ -4,8 +4,6 @@ export default css`
     .detail-container {
         display: flex;
         flex-flow: column;
-        width: 40%;
-        padding-right: 5px;
-        padding-left: 5px;
+        padding-left: 6px;
     }
 `
diff --git a/src/components/DataDimension/styles/Groups.style.js b/src/components/DataDimension/styles/Groups.style.js
@@ -8,15 +8,13 @@ export default css`
         min-height: 53px;
         border-right: 0;
         border-left: 0;
-        padding-top: 5px;
-        padding-left: 10px;
+        padding: 5px 5px 10px 10px;
     }
     .group-container {
         display: flex;
         flex-direction: column;
         width: inherit;
-        min-width: 294px;
+        min-width: 290px;
         flex-grow: 1;
-        padding-right: 5px;
     }
 `