Merge pull request #259 from 4dn-dcic/utk_react_18

Redux v5 Updates
4dn-dcic · Aug 27, 2024 · fd0221c · fd0221c
2 parents 0239f16 + fc6e50d
commit fd0221c
Show file tree

Hide file tree

Showing 43 changed files with 453 additions and 458 deletions.
diff --git a/es/components/browse/components/AboveSearchTablePanel.js b/es/components/browse/components/AboveSearchTablePanel.js
@@ -21,7 +21,6 @@ export var AboveSearchTablePanel = /*#__PURE__*/React.memo(function (_ref) {
   })));
 });
 AboveSearchTablePanel.propTypes = {
-  'href': PropTypes.string.isRequired,
   'context': PropTypes.object.isRequired,
   'placeholderReplacementFxn': PropTypes.func
 };

diff --git a/es/components/browse/components/FacetList/FacetTermsList.js b/es/components/browse/components/FacetList/FacetTermsList.js
@@ -299,7 +299,7 @@ _defineProperty(Term, "propTypes", {
     term: PropTypes.string
   }),
   'onClick': PropTypes.func.isRequired,
-  'status': PropTypes.oneOf(["none", "selected", "omitted"]),
+  'status': PropTypes.oneOf(["none", "selected", "omitted", "partial"]),
   'getTermStatus': PropTypes.func.isRequired,
   'termTransformFxn': PropTypes.func,
   'useRadioIcon': PropTypes.bool.isRequired,
@@ -565,7 +565,7 @@ var ListOfTerms = /*#__PURE__*/React.memo(function (props) {
   /** Create term components and sort by status (selected->omitted->unselected) */
   var _useMemo = useMemo(function () {
       var field = facet.field;
-      var facetSearchActive = searchType === 'basic' && searchText && typeof searchText === 'string' && searchText.length > 0;
+      var facetSearchActive = searchType === 'basic' && typeof searchText === 'string' && searchText.length > 0;
       var _ref7 = facetSearchActive ? getFilteredTerms(terms, searchText, facetHasGroupBy) : {},
         _ref7$filteredTerms = _ref7.filteredTerms,
         textFilteredTerms = _ref7$filteredTerms === void 0 ? {} : _ref7$filteredTerms,

diff --git a/es/components/browse/components/FacetList/index.js b/es/components/browse/components/FacetList/index.js
@@ -839,7 +839,7 @@ _defineProperty(FacetList, "propTypes", {
   'context': PropTypes.shape({
     'filters': PropTypes.arrayOf(PropTypes.object).isRequired // context.filters
   }).isRequired,
-  'itemTypeForSchemas': PropTypes.string.isRequired,
+  'itemTypeForSchemas': PropTypes.string,
   // For tooltips
   'showClearFiltersButton': PropTypes.bool.isRequired,
   'onClearFilters': PropTypes.func.isRequired,
@@ -977,7 +977,8 @@ export var FacetListHeader = /*#__PURE__*/React.memo(function (props) {
     },
     className: "btn btn-xs btn-outline-secondary",
     onClick: onCollapseFacets,
-    "data-tip": "Collapse all facets below"
+    "data-tip": "Collapse all facets below",
+    autoComplete: "off"
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-minus fas"
   }), " Collapse All"), /*#__PURE__*/React.createElement("button", {
@@ -988,7 +989,8 @@ export var FacetListHeader = /*#__PURE__*/React.memo(function (props) {
     },
     className: "btn btn-xs btn-outline-secondary",
     onClick: onClearFilters,
-    "data-tip": "Clear all filters"
+    "data-tip": "Clear all filters",
+    autoComplete: "off"
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-times fas"
   }), " Clear All")))));

diff --git a/es/components/browse/components/SearchResultTable.js b/es/components/browse/components/SearchResultTable.js
@@ -430,7 +430,7 @@ _defineProperty(ResultRow, "propTypes", {
   'columnWidths': PropTypes.objectOf(PropTypes.number),
   'renderDetailPane': PropTypes.func.isRequired,
   'detailPane': PropTypes.element,
-  'detailOpen': PropTypes.bool.isRequired,
+  'detailOpen': PropTypes.oneOfType([PropTypes.number, PropTypes.bool]).isRequired,
   'defaultColAlignment': PropTypes.string,
   'setDetailHeight': PropTypes.func.isRequired,
   'id': PropTypes.string.isRequired,
@@ -601,7 +601,7 @@ var LoadMoreAsYouScroll = /*#__PURE__*/function (_React$Component) {
         infiniteLoadBeginEdgeOffset: canLoadMore ? 200 : undefined,
         preloadAdditionalHeight: Infinite.containerHeightScaleFactor(1.5),
         preloadBatchSize: Infinite.containerHeightScaleFactor(1.5),
-        styles: isOwnPage ? null : this.memoized.getStyles(maxResultsBodyHeight)
+        styles: isOwnPage ? {} : this.memoized.getStyles(maxResultsBodyHeight)
       }, children);
     }
   }], [{

diff --git a/es/components/browse/components/SelectedItemsController.js b/es/components/browse/components/SelectedItemsController.js
@@ -329,9 +329,12 @@ export var SelectStickyFooter = /*#__PURE__*/React.memo(function (props) {
   }), "\xA0 Cancel"))));
 });
 export var BackNavigationStickyFooter = /*#__PURE__*/React.memo(function (props) {
-  var text = props.text,
-    tooltip = props.tooltip,
-    navigateToInitialPage = props.navigateToInitialPage;
+  var _props$text = props.text,
+    text = _props$text === void 0 ? 'Return to Selection List' : _props$text,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? 'Go to selection page' : _props$tooltip,
+    _props$navigateToInit = props.navigateToInitialPage,
+    navigateToInitialPage = _props$navigateToInit === void 0 ? true : _props$navigateToInit;
   var onBackButtonClick = useCallback(function () {
     if (window.history.length === 0) {
       return;
@@ -356,11 +359,6 @@ BackNavigationStickyFooter.propTypes = {
   'tooltip': PropTypes.string,
   'navigateToInitialPage': PropTypes.bool
 };
-BackNavigationStickyFooter.defaultProps = {
-  'text': 'Return to Selection List',
-  'tooltip': 'Go to selection page',
-  'navigateToInitialPage': true
-};
 
 /**
  * General purpose sticky footer component

diff --git a/es/components/browse/components/above-table-controls/RightButtonsSection.js b/es/components/browse/components/above-table-controls/RightButtonsSection.js
@@ -46,7 +46,8 @@ export var RightButtonsSection = /*#__PURE__*/React.memo(function (props) {
 export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_ref) {
   var open = _ref.open,
     onClick = _ref.onClick,
-    className = _ref.className;
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "btn btn-outline-primary" : _ref$className;
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     key: "toggle-visible-columns",
@@ -61,13 +62,11 @@ export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_re
     className: "icon icon-fw icon-angle-down ml-03 fas"
   }));
 });
-ConfigureVisibleColumnsButton.defaultProps = {
-  "className": "btn btn-outline-primary"
-};
 export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
   var open = _ref2.open,
     onClick = _ref2.onClick,
-    className = _ref2.className;
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "btn btn-outline-primary" : _ref2$className;
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     key: "toggle-visible-columns",
@@ -82,9 +81,6 @@ export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
     className: "icon icon-fw icon-angle-down ml-03 fas"
   }));
 });
-MultiColumnSortButton.defaultProps = {
-  "className": "btn btn-outline-primary"
-};
 
 /** Toggles between regular & full screen views */
 export var ToggleLayoutButton = /*#__PURE__*/function (_React$PureComponent) {

diff --git a/es/components/forms/SubmissionView.js b/es/components/forms/SubmissionView.js
@@ -189,9 +189,8 @@ var SubmissionView = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
       if (currentAction !== pastProps.currentAction) {
-        var edit = ncurrentAction === 'edit';
         this.setState({
-          edit: edit,
+          edit: currentAction === 'edit',
           create: currentAction === 'create' || currentAction === 'add'
         });
       }
@@ -2742,7 +2741,8 @@ var IndividualObjectView = /*#__PURE__*/function (_React$Component2) {
 }(React.Component);
 var FormFieldsContainer = /*#__PURE__*/React.memo(function (props) {
   var children = props.children,
-    title = props.title;
+    _props$title = props.title,
+    title = _props$title === void 0 ? 'Fields & Dependencies' : _props$title;
   if (React.Children.count(children) === 0) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: "form-fields-container"
@@ -2752,10 +2752,6 @@ var FormFieldsContainer = /*#__PURE__*/React.memo(function (props) {
     className: "form-section-body"
   }, children));
 });
-FormFieldsContainer.defaultProps = {
-  'title': 'Fields & Dependencies',
-  'currKey': 0
-};
 
 /**
  * Simple Component that opens/closes and renders a Detail panel using the context

diff --git a/es/components/forms/components/EditableField.js b/es/components/forms/components/EditableField.js
@@ -124,38 +124,37 @@ export var EditableField = /*#__PURE__*/function (_React$Component) {
         };
       });
     }
-
-    /** @todo Refactor to use memoization, didUpdate, derivedStateFromProps, or remove component entirely */
   }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var newState = {},
-        stateChangeCallback = null;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var newState = {};
+      var stateChangeCallback = null;
 
-      // Reset value/savedValue if props.context or props.labelID changes for some reason.
-      if (!this.state.dispatching && (this.props.context !== newProps.context || this.props.labelID !== newProps.labelID)) {
-        var newVal = object.getNestedProperty(newProps.context, this.props.labelID, true);
+      // Handle prop changes
+      if (!this.state.dispatching && (prevProps.context !== this.props.context || prevProps.labelID !== this.props.labelID)) {
+        var newVal = object.getNestedProperty(this.props.context, this.props.labelID, true);
         newState.savedValue = newState.value = newVal || null;
         newState.valueExistsOnObj = typeof newVal !== 'undefined';
       }
+
       // Update state.validationPattern && state.isRequired if this.props.schemas becomes available
       // (loaded via ajax by app.js) or from props if is provided.
-      if (newProps.schemas !== this.props.schemas || newProps.pattern !== this.props.pattern || newProps.required !== this.props.required) {
-        newState.validationPattern = newProps.pattern || this.validationPattern(newProps.schemas);
-        newState.required = newProps.required || this.isRequired(newProps.schemas);
+      if (this.props.schemas !== prevProps.schemas || this.props.pattern !== prevProps.pattern || this.props.required !== prevProps.required) {
+        newState.validationPattern = this.props.pattern || this.validationPattern(this.props.schemas);
+        newState.required = this.props.required || this.isRequired(this.props.schemas);
         // Also, update state.valid if in editing mode
         if (this.props.parent.state && this.props.parent.state.currentlyEditing && this.inputElementRef.current) {
           stateChangeCallback = this.handleChange;
         }
       }
+
       // Apply state edits, if any
-      if (_.keys(newState).length > 0) this.setState(newState, stateChangeCallback);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(oldProps, oldState) {
-      // If state change but not onChange event -- e.g. change to/from editing state
-      if (oldState.value === this.state.value && oldState.loading === this.state.loading && oldState.dispatching === this.state.dispatching && oldState.savedValue === this.state.savedValue) {
+      if (_.keys(newState).length > 0) {
+        this.setState(newState, stateChangeCallback);
+      }
+
+      // Handle state changes
+      if (prevState.value === this.state.value && prevState.loading === this.state.loading && prevState.dispatching === this.state.dispatching && prevState.savedValue === this.state.savedValue) {
         if (this.justUpdatedLayout) {
           this.justUpdatedLayout = false;
           return false;
@@ -846,7 +845,7 @@ _defineProperty(EditableField, "propTypes", {
   // Optional pattern to use in lieu of one derived from schema or default field pattern. If set to false, will skip (default or schema-based) validation.
   required: PropTypes.bool,
   // Optionally set if field is required, overriding setting derived from schema (if any). Defaults to false.
-  schemas: PropTypes.object.isRequired,
+  schemas: PropTypes.object,
   debug: PropTypes.bool,
   // Verbose lifecycle log messages.
   handleCustomSave: PropTypes.func,

diff --git a/es/components/forms/components/SearchAsYouTypeAjax.js b/es/components/forms/components/SearchAsYouTypeAjax.js
@@ -785,11 +785,14 @@ export var SquareButton = /*#__PURE__*/React.memo(function (props) {
     disabled = props.disabled,
     onClick = props.onClick,
     tip = props.tip,
-    bsStyle = props.bsStyle,
+    _props$bsStyle = props.bsStyle,
+    bsStyle = _props$bsStyle === void 0 ? 'danger' : _props$bsStyle,
     className = props.className,
     buttonContainerClassName = props.buttonContainerClassName,
-    icon = props.icon,
-    style = props.style;
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? 'times fas' : _props$icon,
+    _props$style = props.style,
+    style = _props$style === void 0 ? null : _props$style;
   var outerCls = "remove-button-container" + (buttonContainerClassName ? ' ' + buttonContainerClassName : '');
   var btnCls = "btn" + (className ? " " + className : "");
   if (bsStyle) {
@@ -812,9 +815,4 @@ export var SquareButton = /*#__PURE__*/React.memo(function (props) {
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-" + icon
   })))));
-});
-SquareButton.defaultProps = {
-  'bsStyle': 'danger',
-  'icon': 'times fas',
-  'style': null
-};
+});
diff --git a/es/components/forms/components/SearchAsYouTypeLocal.js b/es/components/forms/components/SearchAsYouTypeLocal.js
@@ -131,7 +131,7 @@ export var SearchAsYouTypeLocal = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 }(React.PureComponent);
 SearchAsYouTypeLocal.propTypes = {
-  searchList: PropTypes.arrayOf(PropTypes.string).isRequired,
+  searchList: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
   value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   filterMethod: PropTypes.string,

diff --git a/es/components/forms/components/Toggle.js b/es/components/forms/components/Toggle.js
@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "id", "disabled"];
+var _excluded = ["className", "id", "disabled", "name", "onChange", "checked"];
 import React from 'react';
 import _ from 'underscore';
 import { randomId } from './../../util/object';
@@ -15,20 +15,33 @@ import { patchedConsoleInstance as console } from './../../util/patched-console'
  * @prop {boolean} checked - Whether is checked or not.
  */
 export var Toggle = /*#__PURE__*/React.memo(function (_ref) {
-  var className = _ref.className,
-    id = _ref.id,
-    disabled = _ref.disabled,
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "onoffswitch" : _ref$name,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function (e) {
+      console.log("Toggled ", e.target);
+    } : _ref$onChange,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
     remainingProps = _objectWithoutProperties(_ref, _excluded);
   var useID = id || randomId();
   return /*#__PURE__*/React.createElement("div", {
     className: "onoffswitch " + className + (disabled ? ' disabled' : '')
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
-    id: useID
-  }, remainingProps, {
+    id: useID,
+    name: name,
+    onChange: onChange,
+    checked: checked,
     className: "onoffswitch-checkbox",
     disabled: disabled
-  })), /*#__PURE__*/React.createElement("label", {
+  }, remainingProps)), /*#__PURE__*/React.createElement("label", {
     className: "onoffswitch-label",
     htmlFor: id
   }, /*#__PURE__*/React.createElement("span", {
@@ -37,15 +50,6 @@ export var Toggle = /*#__PURE__*/React.memo(function (_ref) {
     className: "onoffswitch-switch"
   })));
 });
-Toggle.defaultProps = {
-  'name': 'onoffswitch',
-  'onChange': function onChange() {
-    console.log("Toggled ", this);
-  },
-  'id': null,
-  'checked': false,
-  'className': ''
-};
 
 /** Pulled out into own component so can style/adjust-if-needed together w. Case Review Tab */
 export var IconToggle = function (props) {

diff --git a/es/components/forms/components/submission-fields.js b/es/components/forms/components/submission-fields.js
@@ -168,7 +168,7 @@ export var BuildField = /*#__PURE__*/function (_React$PureComponent) {
             type: "number"
           }, inputProps));
         case 'boolean':
-          return /*#__PURE__*/React.createElement(Checkbox, _extends({}, _.omit(inputProps, 'value', 'placeholder'), {
+          return /*#__PURE__*/React.createElement(Checkbox, _extends({}, _.omit(inputProps, 'value', 'placeholder', 'ref'), {
             checked: !!value
           }), /*#__PURE__*/React.createElement("span", {
             style: {
@@ -514,7 +514,9 @@ export var BuildField = /*#__PURE__*/function (_React$PureComponent) {
       if (fieldType === 'linked object' && LinkedObj.isInSelectionField(fieldBeingSelected, nestedField, arrayIdx, fieldBeingSelectedArrayIdx)) {
         extClass += ' in-selection-field';
       }
-      return wrapFunc( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return wrapFunc( /*#__PURE__*/React.createElement(React.Fragment, {
+        key: field + '.' + (arrayIdx || '')
+      }, /*#__PURE__*/React.createElement("div", {
         className: 'field-column col' + extClass
       }, fieldToDisplay), fieldType === 'array' || fieldType === 'file upload' ? null : /*#__PURE__*/React.createElement(SquareButton, {
         show: showDelete,