change the opacity of inactive agreement rows

Kyubinhan · Aug 14, 2018 · 127b1f8 · 127b1f8
1 parent 83e7fbf
commit 127b1f8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/components/agreement/AgreementTable.js b/src/components/agreement/AgreementTable.js
@@ -74,7 +74,7 @@ export class AgreementTable extends Component {
         user={user}
         key={index}
         index={index}
-        isActive={activeIndex === index}
+        activeIndex={activeIndex}
         agreement={agreement}
         references={references}
         agreementsMapWithAllPlan={agreementsMapWithAllPlan}

diff --git a/src/components/agreement/AgreementTableItem.js b/src/components/agreement/AgreementTableItem.js
@@ -11,7 +11,7 @@ const propTypes = {
   agreement: PropTypes.shape({ plans: PropTypes.array }).isRequired,
   user: PropTypes.shape({}).isRequired,
   index: PropTypes.number.isRequired,
-  isActive: PropTypes.bool.isRequired,
+  activeIndex: PropTypes.bool.isRequired,
   handleActiveIndexChange: PropTypes.func.isRequired,
   references: PropTypes.shape({}).isRequired,
   agreementsMapWithAllPlan: PropTypes.shape({}).isRequired,
@@ -58,8 +58,9 @@ export class AgreementTableItem extends Component {
 
   render() {
     const {
+      index: currIndex,
+      activeIndex,
       agreement,
-      isActive,
       user,
       agreementsMapWithAllPlan,
       references,
@@ -79,9 +80,14 @@ export class AgreementTableItem extends Component {
     const staffFullName = getUserFullName(staff);
     const { primaryAgreementHolder } = getAgreementHolders(clients);
     const primaryAgreementHolderName = primaryAgreementHolder && primaryAgreementHolder.name;
+    const isActive = activeIndex === currIndex;
+    const className = classnames('agrm__table__row', {
+      'agrm__table__row--active': isActive,
+      'agrm__table__row--not-active': (activeIndex >= 0 && !isActive),
+    });
 
     return (
-      <div className={classnames('agrm__table__row', { 'agrm__table__row--active': isActive })}>
+      <div className={className}>
         <button
           className="agrm__table__accordian"
           onClick={this.onRowClicked}

diff --git a/src/styles/Agreement.scss b/src/styles/Agreement.scss
@@ -107,10 +107,14 @@ $third_agrm_table_cell_rate: 1.8;
     }
     &__row {
       border-bottom: 1px solid rgba(34,36,38,.1);
+
       &--active {
         background-color: #eee;
         border-radius: 5px;
       }
+      &--not-active {
+        opacity: 0.4;
+      }
     }
     &__accordian {
       color: #444;