antd Cascader case-insensitive search

caseInsensitiveFilter.ts

import {CascaderOptionType, FilledFieldNamesType} from 'antd/lib/cascader'

export const caseInsensitiveFilter = (inputValue: string, path: CascaderOptionType[], names: FilledFieldNamesType) =>
  path.some((option) => option[names.label].toLowerCase().includes(inputValue.toLowerCase()))

caseInsensitiveHighlight.tsx

import {CascaderOptionType, FilledFieldNamesType} from 'antd/lib/cascader'
import * as React from 'react'

export const caseInsensitiveHighlight = (
  inputValue: string,
  path: CascaderOptionType[],
  prefixCls: string | undefined,
  names: FilledFieldNamesType,
) =>
  path.map((option, index) => {
    const label = option[names.label]
    const node = label.toLowerCase().includes(inputValue.toLowerCase())
      ? highlightKeyword(label, inputValue, prefixCls)
      : label
    return index === 0 ? node : [' / ', node]
  })

const highlightKeyword = (string: string, search: string, prefixCls?: string) => {
  const startIndex = string.toLowerCase().indexOf(search.toLowerCase())

  if (startIndex === -1) {
    return string
  }

  const head = string.substr(0, startIndex)
  const matchingPart = string.substr(startIndex, search.length)
  const tail = string.substr(startIndex + search.length)
  const highlightedSpan = (
    <span className={`${prefixCls}-menu-item-keyword`} key="seperator">
      {matchingPart}
    </span>
  )

  return [head, highlightedSpan, tail]
}