Useful hook for when updating multiple values that must fit 100%

use-mutual-number-field.js

function useMutualNumberField({
  values,
  index,
  setCurrentValue,
  setAllValues,
}) {
  return function handlePercentageChange(rawInputtedValue) {
    const inputtedValue = parseInt((rawInputtedValue || 0).toString(), 10)
    const prevValue = values[index].percentage
    
    let remainingPercentage =
      100 -
      values.reduce(
        (curr, next) => curr + (next.percentage || 0),
        0
      )

    if (values.length === 1) {
      if (
        (remainingPercentage > 0 && inputtedValue <= 100) ||
        prevValue > inputtedValue
      ) {
        setCurrentValue(inputtedValue)
      }
    } else {
      const newValue = values.slice()
      const valueToBeModified = values[index + 1] ? index + 1 : index - 1

      remainingPercentage -= inputtedValue + prevValue * -1

      if (remainingPercentage < 0 && inputtedValue > prevValue) {
        const allValuesExceptCurrent = values.reduce(
          (curr, next, i) =>
            i === index ? curr : curr + next.percentage,
          0
        )

        newValue[valueToBeModified].percentage -=
          inputtedValue + allValuesExceptCurrent - 100
      }

      newValue[index].percentage = inputtedValue

      if (newValue[valueToBeModified].percentage <= 0) {
        newValue.splice(valueToBeModified, 1)
      }

      setAllValues(newValue)
    }
  }
}