import * as React from "react" ; import { CoreHelper } from "../../core/utils/CoreHelper" ; import { LocaleKey , LocaleParams } from "../locales" ; import { Spin } from "antd" ; import { LoadingOutlined as LoadingIcon } from "@ant-design/icons" ; import { DataStore } from "../../core/stores/DataStore" ; export type ElementSize = "xs" | "sm" | "md" | "lg" | "xl" ; const isStorybook = ! ! process . env . STORYBOOK_ENV ; export abstract class WebHelper { static Router : any = isStorybook ? require ( "react-router-dom" ) . MemoryRouter : require ( "react-router-dom" ) . BrowserRouter ; static get LoadingSpin ( ) : React . ReactNode { const icon = < LoadingIcon />; return ( < div > < Spin indicator = { icon } delay = { 500 } / > < /div>); } static formatMessage < TLocaleKey extends LocaleKey > ( messageId , variables = undefined , defaultMessage = undefined , parseLineBreaks = false ) { const { currentLocale } = DataStore . getInstance ( ) ; return CoreHelper . formatMessage ( messageId as any , variables , defaultMessage , parseLineBreaks ) ; } static parseMarkdown ( text ) { const rules = [ { regex : /(\*\*|__)(.*?)\1/g , replacement : `<strong>$2</strong>` } , { regex : /(\*|__)(.*?)\1/g , replacement : `<i>$2</i>` } , { regex : /(\+\+|__)(.*?)\1/g , replacement : `<u>$2</u>` } , ] ; let result = `<span>${ text }</span>` ; rules . forEach ( ( rule ) => { result = result . replace ( rule . regex , rule . replacement ) ; } ) ; return result ; } static parseLocationSearch ( search ) { const result = { } ; if ( search . length === 0 ) return result ; const args = search . substring ( 1 ) . split ( "&" ) ; let i , arg , kvp , key , value ; for ( i = 0 ; i < args . length ; i ++ ) { arg = args [ i ] ; if ( - 1 === arg . indexOf ( "=" ) ) { result [ decodeURIComponent ( arg ) . trim ( ) ] = true ; } else { kvp = arg . split ( "=" ) ; key = decodeURIComponent ( kvp [ 0 ] ) . trim ( ) ; value = decodeURIComponent ( kvp [ 1 ] ) . trim ( ) ; result [ key ] = value ; } } return result ; } static openLinkInNewTab ( url ) { const link = document . createElement ( "a" ) ; link . href = url ; link . target = "_blank" ; document . body . appendChild ( link ) ; link . click ( ) ; document . body . removeChild ( link ) ; } static loadScriptAsync ( src , callback ? ) { const script = document . createElement ( "script" ) ; let loaded = false ; script . setAttribute ( "src" , src ) ; if ( callback ) { script . onreadystatechange = script . onload = ( ) => { if ( ! loaded ) { callback ( script ) ; } loaded = true ; } ; } document . getElementsByTagName ( "head" ) [ 0 ] . appendChild ( script ) ; } static scrollElementTo ( element , to , duration ) { const start = element . scrollTop , change = to - start , increment = 20 ; let currentTime = 0 ; const easeInOutQuad = ( t , b , c , d ) => { t /= d / 2 ; if ( t < 1 ) return ( c / 2 ) * t * t + b ; t -- ; return ( - c / 2 ) * ( t * ( t - 2 ) - 1 ) + b ; } ; const animateScroll = ( ) => { currentTime += increment ; const value = easeInOutQuad ( currentTime , start , change , duration ) ; element . scrollTop = value ; if ( currentTime < duration ) setTimeout ( animateScroll , increment ) ; } ; animateScroll ( ) ; } static get isStorybook ( ) : boolean { return isStorybook ; } }