@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/care/components/organisms/bookingSearchBar/useAnimatedPlaceholder.ts

@@ -1,86 +0,0 @@
-import React, { useEffect, useMemo } from 'react'
-
-import { useTranslations } from 'hooks/useTranslations'
-import { TranslationsKey } from 'i18n/translations'
-import shuffle from 'lodash/shuffle'
-
-import Typewriter from './utils/Typewriter'
-
-type UseAnimatedPlaceholderParams = {
-  inputRef?: React.MutableRefObject<HTMLInputElement>
-  wrapperRef?: React.MutableRefObject<HTMLDivElement>
-  disabled?: boolean
-}
-
-export function useAnimatedPlaceholder({
-  inputRef,
-  wrapperRef,
-  disabled,
-}: UseAnimatedPlaceholderParams): void {
-  const { t, locale } = useTranslations()
-
-  const values = useMemo(() => {
-    if (disabled) {
-      return []
-    }
-
-    const shuffleKeys: TranslationsKey[] = [
-      'booking.searchBar.placeholder.hospital',
-      'booking.searchBar.placeholder.doctor',
-    ]
-    if (locale !== 'zh-TW') {
-      shuffleKeys.push(
-        'booking.searchBar.placeholder.specialty',
-        'booking.searchBar.placeholder.service',
-      )
-    }
-
-    return shuffle(shuffleKeys).map((s) => t(s))
-  }, [t, locale])
-
-  useEffect(() => {
-    if (disabled) {
-      return
-    }
-    const input = getInput()
-    if (input) {
-      input.placeholder = ''
-      new Typewriter({
-        strings: values,
-        autoStart: true,
-        loop: true,
-        delay: 32,
-        deleteSpeed: 32,
-        pauseFor: 1500,
-        onCreateTextNode: customNodeCreator,
-        onRemoveNode: onRemoveNode,
-      })
-    }
-  }, [inputRef, wrapperRef])
-
-  function customNodeCreator(character: string) {
-    const input = getInput()
-    if (input) {
-      input.placeholder = input.placeholder + character
-    }
-    return null
-  }
-
-  function onRemoveNode() {
-    const input = getInput()
-    if (input) {
-      input.placeholder = input.placeholder.slice(0, -1)
-    }
-  }
-
-  function getInput(): HTMLInputElement | null {
-    if (inputRef && inputRef.current) {
-      return inputRef.current
-    } else if (wrapperRef && wrapperRef.current) {
-      return wrapperRef.current.querySelector('input') || null
-    }
-    return null
-  }
-
-  return
-}

package/src/care/components/organisms/bookingSearchBar/useSearchBarApi.ts

@@ -1,150 +0,0 @@
-import { useCallback, Dispatch } from 'react'
-
-import { PATHS } from 'care/api/paths'
-import { getApiPath } from 'care/api/utils'
-import { ID_OPTION_CURRENT_LOCATION } from 'care/interfaces/constants'
-import {
-  SearchBarSectionApi,
-  SearchCityByGeoIpApi,
-  SearchCityByKeywordApi,
-} from 'care/interfaces/types'
-import { LocaleType, GPSType } from 'interfaces/types'
-
-import { SEARCH_KEYWORD_MIN_LENGTH } from './constants'
-import { Action, ActionTypes, ReducerState } from './reducer'
-
-type UseSearchBarApiParams = {
-  dispatch: Dispatch<Action>
-  careApiDomain: string
-  locale?: LocaleType
-}
-
-export default function useSearchBarApi({
-  dispatch,
-  careApiDomain,
-  locale = 'vi-VN',
-}: UseSearchBarApiParams) {
-  const fetchCitiesApi = useCallback(
-    function fetchCitiesApi(path, params = {}) {
-      const url = `${careApiDomain}${path}`
-      dispatch({ type: ActionTypes.FetchCitiesStart })
-      return fetch(getApiPath(url, params, locale), { method: 'GET' })
-        .then((res) => res.json())
-        .then((data) => {
-          if (data._status !== 1 || !data._data) {
-            console.log('error loading cities', data)
-            return Promise.reject(data)
-          }
-          return data?._data
-        })
-        .finally(() => dispatch({ type: ActionTypes.FetchCitiesFinish }))
-    },
-    [locale],
-  )
-
-  const fetchCitiesByLocation = useCallback(
-    function fetchCitiesByLocation({ coordinates }: { coordinates?: GPSType }) {
-      let params = {}
-      if (coordinates) {
-        params = {
-          lat: coordinates.lat,
-          lng: coordinates.lng,
-        } as GPSType
-      }
-      return fetchCitiesApi(PATHS.GET_CITY_BY_IP, params)
-        .then((data: SearchCityByGeoIpApi) => {
-          dispatch({
-            type: ActionTypes.FetchCitiesByGeoIpComplete,
-            payload: data,
-          })
-        })
-        .catch((err) => console.error('error loading cities by location', err))
-    },
-    [locale, careApiDomain, dispatch],
-  )
-
-  const fetchCitiesByKeyword = useCallback(
-    function fetchCitiesByKeyword(keyword: string) {
-      return fetchCitiesApi(PATHS.GET_CITIES_LIST, { keyword })
-        .then((data: SearchCityByKeywordApi) => {
-          dispatch({
-            type: ActionTypes.FetchCitiesByKeywordComplete,
-            payload: data.cities,
-          })
-        })
-        .catch((err) => console.error('error loading cities by keyword', err))
-    },
-    [locale, careApiDomain, dispatch],
-  )
-
-  const fetchSearchResults = useCallback(
-    function fetchSearchResults(searchKeywords: string, state: ReducerState) {
-      const url = `${careApiDomain}${PATHS.GET_SEARCH_V2}`
-      dispatch({ type: ActionTypes.FetchSearchResultsStart })
-      const { defaultCity, selectedLocation, geoLocationCoordinates } = state
-      let cityId: number | string = ''
-      if (!selectedLocation || !defaultCity) {
-        dispatch({ type: ActionTypes.FetchSearchResultsFinish })
-        return
-      }
-      const isCurrentLocationSelected =
-        selectedLocation.id === ID_OPTION_CURRENT_LOCATION
-      if (isCurrentLocationSelected) {
-        if (!geoLocationCoordinates) {
-          cityId = defaultCity.id
-        }
-      } else {
-        cityId = selectedLocation.id
-      }
-      const lat = geoLocationCoordinates?.lat || ''
-      const lng = geoLocationCoordinates?.lng || ''
-      return fetch(
-        getApiPath(
-          url,
-          {
-            domain: careApiDomain,
-            searchType: 'global',
-            keyword:
-              searchKeywords.trim().length > SEARCH_KEYWORD_MIN_LENGTH[locale]
-                ? searchKeywords.trim()
-                : '',
-            city: cityId === ID_OPTION_CURRENT_LOCATION ? '' : cityId,
-            lat,
-            lng,
-          },
-          locale,
-        ),
-        {
-          method: 'GET',
-          headers: {
-            accept: 'version=2.0.0.0',
-          },
-        },
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          if (data._status !== 1 || !data._data) {
-            return Promise.reject(data)
-          }
-          return data?._data
-        })
-        .then((results: SearchBarSectionApi[]) =>
-          dispatch({
-            type: ActionTypes.FetchSearchResultsComplete,
-            payload: results,
-          }),
-        )
-        .catch((error) => {
-          console.log('error loading search results', { url, error })
-        })
-        .finally(() => dispatch({ type: ActionTypes.FetchSearchResultsFinish }))
-    },
-    [locale, careApiDomain, dispatch],
-  )
-
-  return {
-    fetchCitiesByLocation,
-    fetchCitiesByKeyword,
-    fetchSearchResults,
-  }
-}

package/src/care/components/organisms/bookingSearchBar/utils/Typewriter.ts

@@ -1,437 +0,0 @@
-export const EVENT_NAMES = {
-  TYPE_CHARACTER: 'TYPE_CHARACTER',
-  REMOVE_CHARACTER: 'REMOVE_CHARACTER',
-  REMOVE_ALL: 'REMOVE_ALL',
-  REMOVE_LAST_VISIBLE_NODE: 'REMOVE_LAST_VISIBLE_NODE',
-  PAUSE_FOR: 'PAUSE_FOR',
-  CHANGE_DELETE_SPEED: 'CHANGE_DELETE_SPEED',
-  CHANGE_DELAY: 'CHANGE_DELAY',
-  PASTE_STRING: 'PASTE_STRING',
-}
-
-const getRandomInteger = (min, max) => {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-export const VISIBLE_NODE_TYPES = {
-  TEXT_NODE: 'TEXT_NODE',
-}
-
-class Typewriter {
-  state = {
-    lastFrameTime: null,
-    pauseUntil: null,
-    eventQueue: [],
-    eventLoop: null,
-    eventLoopPaused: false,
-    reverseCalledEvents: [],
-    calledEvents: [],
-    visibleNodes: [],
-    initialOptions: null,
-  }
-
-  options = {
-    strings: null,
-    delay: 'natural',
-    pauseFor: 1500,
-    deleteSpeed: 'natural',
-    loop: false,
-    autoStart: false,
-    stringSplitter: null,
-    onCreateTextNode: null,
-    onRemoveNode: null,
-  }
-
-  constructor(options) {
-    if (options) {
-      this.options = {
-        ...this.options,
-        ...options,
-      }
-    }
-
-    this.state.initialOptions = { ...this.options }
-
-    this.init()
-  }
-
-  init() {
-    this.addEventToQueue(EVENT_NAMES.REMOVE_ALL, null, true)
-
-    if (this.options.autoStart === true && this.options.strings) {
-      this.typeOutAllStrings().start()
-    }
-  }
-
-  start = () => {
-    this.state.eventLoopPaused = false
-    this.runEventLoop()
-
-    return this
-  }
-
-  pause = () => {
-    this.state.eventLoopPaused = true
-
-    return this
-  }
-
-  stop = () => {
-    if (this.state.eventLoop) {
-      window.cancelAnimationFrame(this.state.eventLoop)
-      this.state.eventLoop = null
-    }
-
-    return this
-  }
-
-  pauseFor = (ms) => {
-    this.addEventToQueue(EVENT_NAMES.PAUSE_FOR, { ms })
-
-    return this
-  }
-
-  typeOutAllStrings = () => {
-    if (typeof this.options.strings === 'string') {
-      this.typeString(this.options.strings).pauseFor(this.options.pauseFor)
-      return this
-    }
-
-    this.options.strings.forEach((string) => {
-      this.typeString(string)
-        .pauseFor(this.options.pauseFor)
-        .deleteAll(this.options.deleteSpeed)
-    })
-
-    return this
-  }
-
-  typeString = (string, node = null) => {
-    if (string) {
-      const { stringSplitter } = this.options || {}
-      const characters =
-        typeof stringSplitter === 'function'
-          ? stringSplitter(string)
-          : string.split('')
-      this.typeCharacters(characters, node)
-    }
-
-    return this
-  }
-
-  pasteString = (string, node = null) => {
-    if (string) {
-      this.addEventToQueue(EVENT_NAMES.PASTE_STRING, {
-        character: string,
-        node,
-      })
-    }
-
-    return this
-  }
-
-  deleteAll = (speed = 'natural') => {
-    this.addEventToQueue(EVENT_NAMES.REMOVE_ALL, { speed })
-    return this
-  }
-
-  changeDeleteSpeed = (speed) => {
-    if (!speed) {
-      throw new Error('Must provide new delete speed')
-    }
-
-    this.addEventToQueue(EVENT_NAMES.CHANGE_DELETE_SPEED, { speed })
-
-    return this
-  }
-
-  changeDelay = (delay) => {
-    if (!delay) {
-      throw new Error('Must provide new delay')
-    }
-
-    this.addEventToQueue(EVENT_NAMES.CHANGE_DELAY, { delay })
-
-    return this
-  }
-
-  deleteChars = (amount) => {
-    if (!amount) {
-      throw new Error('Must provide amount of characters to delete')
-    }
-
-    for (let i = 0; i < amount; i++) {
-      this.addEventToQueue(EVENT_NAMES.REMOVE_CHARACTER)
-    }
-
-    return this
-  }
-
-  typeCharacters = (characters, node = null) => {
-    if (!characters || !Array.isArray(characters)) {
-      throw new Error('Characters must be an array')
-    }
-
-    characters.forEach((character) => {
-      this.addEventToQueue(EVENT_NAMES.TYPE_CHARACTER, { character, node })
-    })
-
-    return this
-  }
-
-  removeCharacters = (characters) => {
-    if (!characters || !Array.isArray(characters)) {
-      throw new Error('Characters must be an array')
-    }
-
-    characters.forEach(() => {
-      this.addEventToQueue(EVENT_NAMES.REMOVE_CHARACTER)
-    })
-
-    return this
-  }
-
-  addEventToQueue = (eventName, eventArgs?, prepend = false) => {
-    return this.addEventToStateProperty(
-      eventName,
-      eventArgs,
-      prepend,
-      'eventQueue',
-    )
-  }
-
-  addReverseCalledEvent = (eventName, eventArgs, prepend = false) => {
-    const { loop } = this.options
-
-    if (!loop) {
-      return this
-    }
-
-    return this.addEventToStateProperty(
-      eventName,
-      eventArgs,
-      prepend,
-      'reverseCalledEvents',
-    )
-  }
-
-  addEventToStateProperty = (
-    eventName,
-    eventArgs,
-    prepend = false,
-    property,
-  ) => {
-    const eventItem = {
-      eventName,
-      eventArgs: eventArgs || {},
-    }
-
-    if (prepend) {
-      this.state[property] = [eventItem, ...this.state[property]]
-    } else {
-      this.state[property] = [...this.state[property], eventItem]
-    }
-
-    return this
-  }
-
-  runEventLoop = () => {
-    if (!this.state.lastFrameTime) {
-      this.state.lastFrameTime = Date.now()
-    }
-
-    // Setup variables to calculate if this frame should run
-    const nowTime = Date.now()
-    const delta = nowTime - this.state.lastFrameTime
-
-    if (!this.state.eventQueue.length) {
-      if (!this.options.loop) {
-        return
-      }
-
-      // Reset event queue if we are looping
-      this.state.eventQueue = [...this.state.calledEvents]
-      this.state.calledEvents = []
-      this.options = { ...this.state.initialOptions }
-    }
-
-    // Request next frame
-    this.state.eventLoop = window.requestAnimationFrame(this.runEventLoop)
-
-    // Check if event loop is paused
-    if (this.state.eventLoopPaused) {
-      return
-    }
-
-    // Check if state has pause until time
-    if (this.state.pauseUntil) {
-      // Check if event loop should be paused
-      if (nowTime < this.state.pauseUntil) {
-        return
-      }
-
-      // Reset pause time
-      this.state.pauseUntil = null
-    }
-
-    // Make a clone of event queue
-    const eventQueue = [...this.state.eventQueue]
-
-    // Get first event from queue
-    const currentEvent = eventQueue.shift()
-
-    // Setup delay variable
-    let delay = 0
-
-    // Check if frame should run or be
-    // skipped based on fps interval
-    if (
-      currentEvent.eventName === EVENT_NAMES.REMOVE_LAST_VISIBLE_NODE ||
-      currentEvent.eventName === EVENT_NAMES.REMOVE_CHARACTER
-    ) {
-      delay =
-        this.options.deleteSpeed === 'natural'
-          ? getRandomInteger(40, 80)
-          : this.options.deleteSpeed
-    } else {
-      delay =
-        this.options.delay === 'natural'
-          ? getRandomInteger(120, 160)
-          : this.options.delay
-    }
-
-    if (delta <= delay) {
-      return
-    }
-
-    // Get current event args
-    const { eventName, eventArgs } = currentEvent
-
-    // Run item from event loop
-    switch (eventName) {
-      case EVENT_NAMES.PASTE_STRING:
-      case EVENT_NAMES.TYPE_CHARACTER: {
-        const { character } = eventArgs
-        const textNode = document.createTextNode(character)
-
-        let textNodeToUse = textNode
-
-        if (
-          this.options.onCreateTextNode &&
-          typeof this.options.onCreateTextNode === 'function'
-        ) {
-          textNodeToUse = this.options.onCreateTextNode(character, textNode)
-        }
-
-        this.state.visibleNodes = [
-          ...this.state.visibleNodes,
-          {
-            type: VISIBLE_NODE_TYPES.TEXT_NODE,
-            character,
-            node: textNodeToUse,
-          },
-        ]
-
-        break
-      }
-
-      case EVENT_NAMES.REMOVE_CHARACTER: {
-        eventQueue.unshift({
-          eventName: EVENT_NAMES.REMOVE_LAST_VISIBLE_NODE,
-          eventArgs: { removingCharacterNode: true },
-        })
-        break
-      }
-
-      case EVENT_NAMES.PAUSE_FOR: {
-        const { ms } = currentEvent.eventArgs
-        this.state.pauseUntil = Date.now() + parseInt(ms)
-        break
-      }
-
-      case EVENT_NAMES.REMOVE_ALL: {
-        const { visibleNodes } = this.state
-        const { speed } = eventArgs
-        const removeAllEventItems = []
-
-        if (speed) {
-          removeAllEventItems.push({
-            eventName: EVENT_NAMES.CHANGE_DELETE_SPEED,
-            eventArgs: { speed, temp: true },
-          })
-        }
-
-        for (let i = 0, length = visibleNodes.length; i < length; i++) {
-          removeAllEventItems.push({
-            eventName: EVENT_NAMES.REMOVE_LAST_VISIBLE_NODE,
-            eventArgs: { removingCharacterNode: false },
-          })
-        }
-
-        if (speed) {
-          removeAllEventItems.push({
-            eventName: EVENT_NAMES.CHANGE_DELETE_SPEED,
-            eventArgs: { speed: this.options.deleteSpeed, temp: true },
-          })
-        }
-
-        eventQueue.unshift(...removeAllEventItems)
-
-        break
-      }
-
-      case EVENT_NAMES.REMOVE_LAST_VISIBLE_NODE: {
-        if (this.state.visibleNodes.length) {
-          const { node, character } = this.state.visibleNodes.pop()
-
-          if (
-            this.options.onRemoveNode &&
-            typeof this.options.onRemoveNode === 'function'
-          ) {
-            this.options.onRemoveNode({
-              node,
-              character,
-            })
-          }
-
-          if (node) {
-            node.parentNode.removeChild(node)
-          }
-        }
-        break
-      }
-
-      case EVENT_NAMES.CHANGE_DELETE_SPEED: {
-        this.options.deleteSpeed = currentEvent.eventArgs.speed
-        break
-      }
-
-      case EVENT_NAMES.CHANGE_DELAY: {
-        this.options.delay = currentEvent.eventArgs.delay
-        break
-      }
-
-      default: {
-        break
-      }
-    }
-
-    // Add que item to called queue if we are looping
-    if (this.options.loop) {
-      if (
-        currentEvent.eventName !== EVENT_NAMES.REMOVE_LAST_VISIBLE_NODE &&
-        !(currentEvent.eventArgs && currentEvent.eventArgs.temp)
-      ) {
-        this.state.calledEvents = [...this.state.calledEvents, currentEvent]
-      }
-    }
-
-    // Replace state event queue with cloned queue
-    this.state.eventQueue = eventQueue
-
-    // Set last frame time so it can be used to calculate next frame
-    this.state.lastFrameTime = nowTime
-  }
-}
-
-export default Typewriter

package/src/care/index.ts

@@ -1,6 +0,0 @@
-export {
-  BookingSearchBar,
-  Props as BookingSearchBarProps,
-} from './components/organisms/bookingSearchBar'
-export * as CareConstants from './interfaces/constants'
-export * as CareTypes from './interfaces/types'