Merge pull request #750 from the-deep/feature-entry-state

Add state for each entry
the-deep · Apr 7, 2019 · b8e8e53 · b8e8e53
2 parents 56c8ec3 + 4040c11
commit b8e8e53
Show file tree

Hide file tree

Showing 17 changed files with 259 additions and 129 deletions.
diff --git a/src/components/leftpanel/TabularPreview/TabularSheetPreview/Field/index.js b/src/components/leftpanel/TabularPreview/TabularSheetPreview/Field/index.js
@@ -101,6 +101,14 @@ export default class Field extends React.PureComponent {
         onClick(e, { key: leadKey });
     }
 
+    handleFieldStateChange = (value) => {
+        const {
+            onFieldStateChange,
+            fieldId,
+        } = this.props;
+        onFieldStateChange(fieldId, value);
+    }
+
     render() {
         const {
             className,
@@ -110,6 +118,7 @@ export default class Field extends React.PureComponent {
             title,
             tabularFieldData,
             showGraphs,
+            fieldState,
         } = this.props;
 
         const healthStatusData = this.getHealthStatusData(healthStats);
@@ -138,26 +147,25 @@ export default class Field extends React.PureComponent {
                 onClick={this.handleClick}
                 onKeyDown={this.handleClick}
             >
-                { showGraphs ? (
-                    <DataSeries
-                        className={styles.series}
-                        value={tabularFieldData}
-                    />
-                ) : (
-                    <h5>
-                        {title}
-                    </h5>
-                )}
-                <HealthBar
-                    className={styles.healthBar}
-                    data={healthStatusData}
-                    valueSelector={valueSelector}
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    colorScheme={healthColorScheme}
-                    enlargeOnHover={false}
-                    hideLabel
+                <DataSeries
+                    className={showGraphs && styles.series}
+                    value={tabularFieldData}
+                    onEntryStateChange={this.handleFieldStateChange}
+                    entryState={fieldState}
+                    hideDetails={!showGraphs}
                 />
+                { showGraphs &&
+                    <HealthBar
+                        className={styles.healthBar}
+                        data={healthStatusData}
+                        valueSelector={valueSelector}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
+                        colorScheme={healthColorScheme}
+                        enlargeOnHover={false}
+                        hideLabel
+                    />
+                }
             </div>
         );
     }

diff --git a/src/components/leftpanel/TabularPreview/TabularSheetPreview/index.js b/src/components/leftpanel/TabularPreview/TabularSheetPreview/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import produce from 'immer';
 
 import VirtualizedListView from '#rscv/VirtualizedListView';
 import Field from './Field';
@@ -26,6 +27,25 @@ export default class TabularSheetPreview extends React.PureComponent {
     static defaultProps = defaultProps;
     static keySelector = d => d.id;
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            fieldStates: {},
+        };
+    }
+
+    handleFieldStateChange = (fieldKey, value) => {
+        this.setState((state) => {
+            const { fieldStates } = state;
+            const newFieldStates = produce(fieldStates, (deferred) => {
+                // eslint-disable-next-line no-param-reassign
+                deferred[fieldKey] = value;
+            });
+            return { fieldStates: newFieldStates };
+        });
+    }
+
     renderParams = (key, field) => ({
         fieldId: field.id,
         title: field.title,
@@ -37,6 +57,9 @@ export default class TabularSheetPreview extends React.PureComponent {
         leadKey: (this.props.highlights[field.id] || {}).key,
         onClick: this.props.onClick,
         showGraphs: this.props.showGraphs,
+
+        fieldState: this.state.fieldStates[field.id],
+        onFieldStateChange: this.handleFieldStateChange,
     })
 
     render() {

diff --git a/src/components/leftpanel/TabularPreview/index.js b/src/components/leftpanel/TabularPreview/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import memoize from 'memoize-one';
 
 import LoadingAnimation from '#rscv/LoadingAnimation';
 import Message from '#rscv/Message';
@@ -56,6 +57,14 @@ export default class TabularPreview extends React.PureComponent {
         });
     }
 
+    getHighlights = memoize(highlights => (
+        listToMap(
+            highlights.filter(highlight => !!highlight.tabularFieldId),
+            highlight => highlight.tabularFieldId,
+            highlight => highlight,
+        )
+    ))
+
     setBook = (response) => {
         const validSheets = response.sheets.filter(
             sheet => sheet.fields.length > 0,
@@ -141,12 +150,7 @@ export default class TabularPreview extends React.PureComponent {
             );
         }
 
-        // FIXME: memoize this
-        const highlights = listToMap(
-            highlightsFromProps.filter(highlight => !!highlight.tabularFieldId),
-            highlight => highlight.tabularFieldId,
-            highlight => highlight,
-        );
+        const highlights = this.getHighlights(highlightsFromProps);
 
         return (
             <div className={className}>

diff --git a/src/components/other/TabularBook/Sheet/index.js b/src/components/other/TabularBook/Sheet/index.js
@@ -16,6 +16,7 @@ import {
     caseInsensitiveSubmatch,
     isFalsyString as isFalsyStr,
     isTruthyString as isTruthyStr,
+    doesObjectHaveNoData,
 } from '@togglecorp/fujs';
 import update from '#rsu/immutable-update';
 import _cs from '#cs';
@@ -416,7 +417,7 @@ export default class Sheet extends React.PureComponent {
             viewMode,
         } = this.props;
 
-        const { searchTerm } = options;
+        const { searchTerm, sortOrder } = options;
 
         const columns = this.getSheetColumns(
             fields,
@@ -454,14 +455,14 @@ export default class Sheet extends React.PureComponent {
                     />
                     <Button
                         onClick={this.handleResetSort}
-                        disabled={disabled}
+                        disabled={disabled || doesObjectHaveNoData(sortOrder)}
                         transparent
                     >
                         {_ts('tabular.sheets', 'resetSortTitle')}
                     </Button>
                     <Button
                         onClick={this.handleResetFilter}
-                        disabled={disabled}
+                        disabled={disabled || doesObjectHaveNoData(searchTerm)}
                         transparent
                     >
                         {_ts('tabular.sheets', 'resetFilterTooltip')}