Merge pull request #752 from the-deep/feature-have-consistent-region-…

…tooltip Have consistent region tooltip for field edit tabular
the-deep · Apr 8, 2019 · 755e220 · 755e220
2 parents b8e8e53 + 2da06b3
commit 755e220
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 27 deletions.
diff --git a/src/components/other/TabularBook/Sheet/Header/FieldEditModal/ProjectRegionsTooltip/index.js b/src/components/other/TabularBook/Sheet/Header/FieldEditModal/ProjectRegionsTooltip/index.js
@@ -81,6 +81,7 @@ export default class ProjectRegionsTooltip extends React.PureComponent {
                     <ListView
                         data={adminLevels}
                         renderer={AdminLevel}
+                        className={styles.list}
                         keySelector={adminLevelKeySelector}
                         rendererParams={this.adminLevelRendererParams}
                         groupKeySelector={groupKeySelector}

diff --git a/...omponents/other/TabularBook/Sheet/Header/FieldEditModal/ProjectRegionsTooltip/styles.scss b/...omponents/other/TabularBook/Sheet/Header/FieldEditModal/ProjectRegionsTooltip/styles.scss
@@ -1,7 +1,13 @@
 @import '~base-scss/base';
 
 .tooltip {
+    display: flex;
+    flex-direction: column;
+    max-height: 360px;
+    overflow-y: auto;
+
     .heading {
+        flex-grow: 1;
         padding: $spacing-small;
         padding-bottom: 0;
     }
@@ -23,7 +29,15 @@
         }
     }
 
+    .list {
+        position: relative;
+        flex-grow: 1;
+        overflow-y: auto;
+    }
+
     .group {
+        position: sticky;
+
         &:not(:first-child) {
             border-top: $width-separator-thin solid $color-separator;
         }

diff --git a/src/components/other/TabularBook/Sheet/Header/FieldEditModal/index.js b/src/components/other/TabularBook/Sheet/Header/FieldEditModal/index.js
@@ -3,7 +3,6 @@ import React from 'react';
 import Faram, { FaramGroup, requiredCondition } from '@togglecorp/faram';
 
 import Button from '#rsca/Button';
-import Icon from '#rscg/Icon';
 import DangerButton from '#rsca/Button/DangerButton';
 import PrimaryButton from '#rsca/Button/PrimaryButton';
 import NonFieldErrors from '#rsci/NonFieldErrors';
@@ -12,7 +11,6 @@ import SegmentInput from '#rsci/SegmentInput';
 import SelectInput from '#rsci/SelectInput';
 import TextInput from '#rsci/TextInput';
 import FloatingContainer from '#rscv/FloatingContainer';
-import Tooltip from '#rscv/Tooltip';
 import {
     calcFloatPositionInMainWindow,
     defaultOffset,
@@ -204,6 +202,33 @@ export default class FieldEditModal extends React.PureComponent {
         return optionsContainerPosition;
     }
 
+    handleTooltipInvalidate = (container) => {
+        // Note: pass through prop
+        // eslint-disable-next-line react/prop-types
+        const { parentBCR } = this.props;
+
+        const contentRect = container.getBoundingClientRect();
+
+        const optionsContainerPosition = (
+            calcFloatPositionInMainWindow({
+                parentRect: parentBCR,
+                contentRect,
+                offset: {
+                    ...defaultOffset,
+                    left: -260,
+                },
+                limit: {
+                    ...defaultLimit,
+                    minW: 240,
+                    maxW: 240,
+                    maxH: 360,
+                },
+            })
+        );
+
+        return optionsContainerPosition;
+    }
+
     renderSettingsForType = (type) => {
         if (type === DATA_TYPE.number) {
             return (
@@ -223,19 +248,16 @@ export default class FieldEditModal extends React.PureComponent {
 
             return (
                 <React.Fragment>
-                    <div className={styles.infoContainer}>
-                        <SegmentInput
-                            faramElementName="geoType"
-                            label={_ts('tabular.fieldEditModal', 'geoTypeTitle')} // Geo Type
-                            options={geoTypeOptions}
-                        />
-                        <Tooltip tooltip={tooltip} >
-                            <Icon
-                                name="infoOutline"
-                                className={styles.infoIcon}
-                            />
-                        </Tooltip>
-                    </div>
+                    <SegmentInput
+                        faramElementName="geoType"
+                        label={_ts('tabular.fieldEditModal', 'geoTypeTitle')} // Geo Type
+                        options={geoTypeOptions}
+                    />
+                    <FloatingContainer
+                        onInvalidate={this.handleTooltipInvalidate}
+                    >
+                        {tooltip}
+                    </FloatingContainer>
                     <NumberInput
                         faramElementName="adminLevel"
                         label={_ts('tabular.fieldEditModal', 'adminLevelTitle')} // Admin Level

diff --git a/src/components/other/TabularBook/Sheet/Header/FieldEditModal/styles.scss b/src/components/other/TabularBook/Sheet/Header/FieldEditModal/styles.scss
@@ -15,18 +15,6 @@
         }
     }
 
-    .info-container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .info-icon {
-            cursor: pointer;
-            color: $color-primary;
-            font-size: $font-size-large;
-        }
-    }
-
     .action-buttons {
         display: flex;
         justify-content: flex-end;