Skip to content
Advertisement

passing props directly to utility function

i have below common function for sorting,

export const sortSelectOptions = (options, sortByKey = 'name', type) => {
  switch (type) {
    case 'alphaNumeric':
      return options
        .slice()
        .sort((a, b) =>
          Math.sign(
            parseInt(a.name.replace(/["]$/, ''), 10) -
            parseInt(b.name.replace(/["]$/, ''), 10)
          )
        );
    case 'numeric':
      return options.slice().sort((a, b) => (a.nominalSize > b.nominalSize ? 1 : -1));
    default:
      return sortBy(options, sortByKey)
  }
}

and i am calling above function like as below,

options => sortSelectOptions(options, null, 'numeric')

for numeric type i am sorting based on nominalSize, now i would like to pass this field directly from here sortSelectOptions(options, null, 'numeric') as prop. The options are array of objects and one of the property is nominalSize. I am looking kind of generic sorting function.

Could any one please let me know how can i pass exact field as a prop to common function to achieve sorting functionality.

many thanks in advance

Advertisement

Answer

If I understand you correctly, you want the logic for accessing the value to sort by outside of the sort function?

You can make properties accessible through their name like so:

export const sortSelectOptions = (options, sortByKey = 'name', type, fieldName) => {
  switch (type) {
    case 'alphaNumeric':
      return options
        .slice()
        .sort((a, b) =>
          Math.sign(
            parseInt(a.name.replace(/["]$/, ''), 10) -
            parseInt(b.name.replace(/["]$/, ''), 10)
          )
        );
    case 'numeric':
      return options.slice().sort((a, b) => (a[fieldName] > b[fieldName] ? 1 : -1));
    default:
      return sortBy(options, sortByKey)
  }
}

And call it with:

options => sortSelectOptions(options, null, 'numeric', 'nominalSize')

Or you can generalize this pattern and ask for an accessor function like so:

export const sortSelectOptions = (options, sortByKey = 'name', type, accessor) => {
  switch (type) {
    case 'alphaNumeric':
      return options
        .slice()
        .sort((a, b) =>
          Math.sign(
            parseInt(accessor(a).replace(/["]$/, ''), 10) -
            parseInt(accessor(b).replace(/["]$/, ''), 10)
          )
        );
    case 'numeric':
      return options.slice().sort((a, b) => (accessor(a) > accessor(b) ? 1 : -1));
    default:
      return sortBy(options, sortByKey)
  }
}

And call it with:

options => sortSelectOptions(options, null, 'numeric', x => x.nominalSize)
options => sortSelectOptions(options, null, 'alphaNumeric', x => x.name)

The latter version would allow you to also access deeply nested properties.

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement