src/view/com/composer/text-input/hooks/useGrapheme.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import {useCallback, useMemo} from 'react'
import Graphemer from 'graphemer'

export const useGrapheme = () => {
  const splitter = useMemo(() => new Graphemer(), [])

  const getGraphemeString = useCallback(
    (name: string, length: number) => {
      let remainingCharacters = 0

      if (name.length > length) {
        const graphemes = splitter.splitGraphemes(name)

        if (graphemes.length > length) {
          remainingCharacters = 0
          name = `${graphemes.slice(0, length).join('')}...`
        } else {
          remainingCharacters = length - graphemes.length
          name = graphemes.join('')
        }
      } else {
        remainingCharacters = length - name.length
      }

      return {
        name,
        remainingCharacters,
      }
    },
    [splitter],
  )

  return {
    getGraphemeString,
  }
}