Nothing Plus Modules

    @zohodesk/providers

    1.0.34 • Public • Published

    Components

    1. I18NProvider
    2. ConnectI18NProvider
    3. I18N
    4. FormatText
    5. PluralFormat
    6. DateTimeFormat

    How to use

       <I18NProvider i18n={{key:"value"}} timeZone="Asia/kolkatta">
          <YourApp>
          </YourApp>
       </I18NProvider>
       <ConnectI18NProvider i18n={(state)=>{return state.i18nObj }} timeZone={(state)=>state.user.timeZone}dateTimeFormatMessages={()=>dateTimeFormatMessages}
       onChange=((accept,reject)=>{call accept or reject})>
          <YourApp>
          </YourApp>
       </ConnectI18NProvider>
       <AppProvider i18n={(state)=>{return state.i18nObj }} timeZone={(state)=>state.user.timeZone}
        user={}
        permission={}
        license={}
       dateTimeFormatMessages={()=>dateTimeFormatMessages}
       onChange=((accept,reject)=>{call accept or reject})>
          <YourApp>
          </YourApp>
       </AppProvider>
       <FormatText i18NKey="" values={[] | ""}/>
       <PluralFormat one="i18n key for singluar" many="i18n key for plural" zero="i18n key for zero" value={1}/>

    Formats

    Mask Description Example
    yyyy 4-digits year 1984
    yy 2-digits year 84
    MMMM Month name January
    MMM Short month name Jan
    mmmm Numeric month 1
    mmm 2-digits month 01
    dddd Numeric day 1
    dd 2-digits day 01
    DDDD Day of the week Tuesday
    DDD Short day of the week Tue
    A Day period AM, PM
    HHHH 24-hours Numeric hour 1
    HH 24-hours 2-digits hour 01
    hhhh 12-hours Numeric hour 1
    hh 12-hours 2-digits hour 01
    MM Numeric minute 1
    mm 2-digits minute 01
    ssss Numeric second 1
    ss 2-digits second 01

    Default format dd MMM yyyy hh:mm A;

    Display Date Using Component

    <DateTimeFormat format="dd MMMMM"
    	dateTime={apiTimeFormat}
    />
    output => 01 January

    Display Date by string

    getDateTimeFormat({dateTime : apiTimeFormat, format : "dd MMMMM" });
    	
    output => 01 January

    Display Date - Custom Formatting

    <DateTimeFormat dateTime={apiTimeFormat} 
        customFormat={(dateDetails,translator,dateConverter)=>{
        if(dateDetails.isToday){
            
            return translator('Today');
        }
        else if(dateDetails.isTomorrow){
        
            return translator('Tomorrow');
        }
        
        return dateConverter('dd MMMM yyyy');
     }}
    
    />
    possible outputs => `Today` , `Tomorrow`, `01 January 1984`

    Display Diff Date using component

     
     <DateTimeFormat type="diff"
    	dateTime={apiTimeFormat} 
    />  
    output => 10 minutes ago

    Display Diff Date using string

     
     getDateTimeFormat({ type : "diff", dateTime : apiTimeFormat , customFormat }); 
    output => 10 minutes ago

    Display Diff Date - Custom Formatting

     
     <DateTimeFormat type="diff"
    	dateTime={apiTimeFormat} 
    	customFormat={(dateDetails,translator)=>{
    	    
    	     if( days > 1){
                return 'one day ago'
              }
              
              return 'many days ago'
              
    	}}
    />  
    output => 'one day ago'

    Some scenario

    More general component

    var Greetings = ()=>{
       return <span>Hello,{this.props.name}</span>
    }
    <Greetings name="vimal"/>
    
    Hello - hard coded data
    name - dynamic data mostly no need to I18N. In case any dynamic data going to pass generic component. use i18nUtils.getI18NValue function
    
    I18N Implementation
    var Greetings = ()=>{
       return <span><FormatText key="helloI18nKey"/>,{this.props.name}</span>
    }
    <Greetings name="vimal"/>
    <Greetings name={i18nUtils.getI18NValue("world")}/>
    
    textarea placeholder display i18n value
    var Textarea=()=>{
    return <textarea placeHolder={this.props.placeHolder} value={this.props.value}></textarea>
    }
    
    You can mention particular props going to accept i18n key. so convert using I18N HOC
    Textarea = HOCI18N(["placeHolder"])(Textarea)
    <Textarea placeHolder="i18n.please.enter.desc.key"/>
    
    You can use utils function
    <Textarea placeHolder={i18nUtils.getI18NValue("i18n.please.enter.desc.key")}/>
    

    i18n json build time composes not yet done

    #1.2.0-beta.9

    • es6 move and prettier format

    #1.2.0-beta.11

    title support missing use Cases today yesterday tomorrow error fix pattern format changed

    #1.2.0-beta.12 user date format pattern issue fix

    #1.2.0-beta.13 suffix issue fix - pattern "00000" to "0000"

    #1.2.0-beta.14 proptypes move to prop-types package "getValues" duplicate method build issue

    Install

    npm i @zohodesk/providers

    DownloadsWeekly Downloads

    26

    Version

    1.0.34

    License

    MIT

    Unpacked Size

    520 kB

    Total Files

    107

    Last publish

    Collaborators

    • muthumari
    • sundarrajkumar.m
    • vimalesan27
    • prakash.m
    • maheshmdr
    • akshay.ps
    • _dev_johnson
    • karuppiah.r
    • karthick.a
    • navas-0968
    • vallinayagam.t
    • iambk
    • lakshmi_ts
    • mariappan.r
    • antro.j
    • ganeshkumar.m
    • vimalesan
    • skumaresan
    • kathiresan.r
    • jesinth
    • sriramamoorthy
    • lingam
    • vimalchandhru
    • ponkumar.s
    • sudalaimuthu
    • iniankarthick
    • johnson_raavanan
    • ksamy2020
    • kumaresanm
    • villuvicky
    • indragith
    • subashree