@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

Package Sidebar

Install

npm i @zohodesk/providers

Weekly Downloads

20

Version

1.0.34

License

MIT

Unpacked Size

520 kB

Total Files

107

Last publish

Collaborators

  • arunkumar.ps
  • hariharan_vs
  • eldhose_saji
  • sankara.subramanian
  • madhubalan
  • deekay.npm
  • sheikbasheeth
  • jos33
  • rajsekar.haribalan
  • selvakumar.pl
  • muthumari
  • sundarrajkumar.m
  • prakash.m
  • maheshmdr
  • _dev_johnson
  • karuppiah.r
  • navas-0968
  • vallinayagam.t
  • iambk
  • lakshmi_ts
  • mariappan.r
  • antro.j
  • ganeshkumar.m
  • vimalesan
  • skumaresan
  • kathiresan.r
  • jesinth
  • sriramamoorthy
  • lingam
  • ponkumar.s
  • sudalaimuthu
  • iniankarthick
  • johnson_raavanan
  • ksamy2020
  • kumaresanm
  • villuvicky
  • indragith
  • subashree