Merge pull request #16501 from Nexus-Mods/fblo-mutable-index

added index input element + handlers

src/extensions/file_based_loadorder/views/ItemRenderer.tsx

@@ -12,7 +12,9 @@ import { IProfile, IState } from '../../../types/api';
 import * as selectors from '../../../util/selectors';
 import { getSafe } from '../../../util/storeHelper';
 
-import { setFBLoadOrderEntry } from '../actions/loadOrder';
+import { setFBLoadOrder, setFBLoadOrderEntry } from '../actions/loadOrder';
+
+import { LoadOrderIndexInput } from './loadOrderIndex';
 
 interface IConnectedProps {
   modState: any;
@@ -22,6 +24,7 @@ interface IConnectedProps {
 
 interface IActionProps {
   onSetLoadOrderEntry: (profileId: string, entry: ILoadOrderEntry) => void;
+  onSetLoadOrder: (profileId: string, loadOrder: LoadOrder) => void;
 }
 
 interface IBaseProps {
@@ -69,8 +72,6 @@ class ItemRenderer extends ComponentEx<IProps, {}> {
     const { loadOrder, className } = this.props;
     const key = !!item.name ? `${item.name}` : `${item.id}`;
 
-    const position = loadOrder.findIndex(entry => entry.id === item.id) + 1;
-
     let classes = ['load-order-entry'];
     if (className !== undefined) {
       classes = classes.concat(className.split(' '));
@@ -103,9 +104,18 @@ class ItemRenderer extends ComponentEx<IProps, {}> {
         ref={this.props.item.setRef}
       >
         <Icon className='drag-handle-icon' name='drag-handle'/>
-        <p className='load-order-index'>{position}</p>
+        <LoadOrderIndexInput
+          className='load-order-index'
+          api={this.context.api}
+          item={item}
+          currentPosition={this.currentPosition()}
+          lockedEntriesCount={this.lockedEntriesCount()}
+          loadOrder={loadOrder}
+          isLocked={this.isLocked}
+          onApplyIndex={this.onApplyIndex}
+        />
         {this.renderValidationError()}
-          <p className='load-order-name'>{key}</p>   
+        <p className='load-order-name'>{key}</p>
         {this.renderExternalBanner(item)}
         {checkBox()}
         {lock()}
@@ -129,6 +139,34 @@ class ItemRenderer extends ComponentEx<IProps, {}> {
     };
     onSetLoadOrderEntry(profile.id, entry);
   }
+
+  private currentPosition = (): number => {
+    const { item, loadOrder } = this.props;
+    return loadOrder.findIndex(entry => entry.id === item.loEntry.id) + 1;
+  }
+
+  private onApplyIndex = (idx: number) => {
+    const { item, onSetLoadOrder, profile, loadOrder } = this.props;
+    const currentIdx = this.currentPosition();
+    if (currentIdx === idx) {
+      return;
+    }
+
+    const entry = {
+      ...item.loEntry,
+      index: idx,
+    };
+
+    const newLO = loadOrder.filter((entry) => entry.id !== item.loEntry.id);
+    newLO.splice(idx - 1, 0, entry);
+    onSetLoadOrder(profile.id, newLO);
+  }
+
+  private lockedEntriesCount = (): number => {
+    const { loadOrder } = this.props;
+    const locked = loadOrder.filter(item => this.isLocked(item));
+    return locked.length;
+  }
 }
 
 const empty = {};
@@ -145,6 +183,8 @@ function mapDispatchToProps(dispatch: any): IActionProps {
   return {
     onSetLoadOrderEntry: (profileId, entry) =>
       dispatch(setFBLoadOrderEntry(profileId, entry)),
+    onSetLoadOrder: (profileId, loadOrder) =>
+      dispatch(setFBLoadOrder(profileId, loadOrder)),
   };
 }
 

src/extensions/file_based_loadorder/views/loadOrderIndex.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { ILoadOrderEntry } from '../../../types/api';
+import { IExtensionApi, LoadOrder } from '../../../types/api';
+
+interface IProps {
+  className?: string;
+  api: IExtensionApi;
+  item: ILoadOrderEntry;
+  loadOrder: LoadOrder;
+  currentPosition: number;
+  lockedEntriesCount: number;
+  isLocked: (item: ILoadOrderEntry) => boolean
+  onApplyIndex: (idx: number) => void;
+}
+
+export function LoadOrderIndexInput(props: IProps) {
+  const { item, loadOrder, currentPosition, lockedEntriesCount, onApplyIndex } = props;
+
+  // Valid ranges.
+  const startIndex = lockedEntriesCount + 1;
+  const maxIndex = loadOrder.length;
+
+  const [inputValue, setInputValue] = useState(currentPosition.toString());
+
+  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    // Meant to be used as validation only.
+    try {
+      const newIndex = parseInt(event.target.value, 10);
+      setInputValue(newIndex.toString());
+    } catch (err) {
+      setInputValue(currentPosition.toString());
+    }
+  }, [currentPosition, maxIndex, startIndex]);
+
+  const handleKeyPress = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      // Apply new index
+      let newIndex = parseInt(inputValue, 10);
+      newIndex = Math.max(startIndex, Math.min(maxIndex, newIndex));
+      onApplyIndex(newIndex);
+      setInputValue(newIndex.toString());
+    }
+    if (event.key === 'Escape') {
+      // reset
+      setInputValue(currentPosition.toString());
+    }
+  }, [currentPosition, maxIndex, startIndex, inputValue]);
+
+  React.useEffect(() => {
+    setInputValue(currentPosition.toString());
+  }, [currentPosition]);
+
+  return props.isLocked(item) ? (
+    <p className={props.className}>{inputValue}</p>
+  ) : (
+    <div className={props.className}>
+      <input
+        type='number'
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyPress}
+        min={startIndex}
+        max={maxIndex}
+        defaultValue={currentPosition}
+      />
+    </div>
+  );
+}

src/stylesheets/vortex/page-mod-load-order.scss

@@ -74,6 +74,15 @@
       //padding: 2px 2px;
       // margin-right: 15px;
       min-width: 24px;
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button,
+      input {
+        -webkit-appearance: none;
+        margin: 0;
+        border: none;
+        background: $brand-bg;
+        max-width: fit-content;
+      }
     }
 
     .load-order-name-container {