saffroncodejs

Package of graphical and non graphical libraries for React developers such as Canvas preloader and Regex functions.

(Support us with your stars on Github )

npm install saffroncodejs

ui

import {ui} from 'saffroncodejs'

Preloader

1- Set the Preloader color,size and animation speed once in index.js ui.Preloader.setUp("#777777ff",200,200,0.2)
2- and then use it every where like below: <ui.Preloader/> ☺

Input

This is just like html input tag but it has better control on patterns and it will correct the user's mismatches character

TagForInput

this component displayes a tag name on top corner of the input element passed to it (as a child component)
**the element can be an input, a textArea or a select input
**supports rtl and ltr direction
to use inside a react app:

<ui.TagForInput tagName="title">
  <input />
</ui.TagForInput>

Properties:

rtl : boolean ---> whether the tagName should be on left corner or right -- default is false
tagName: string ---> the tag title
tagBackGround: string ---> the background color of the tag span -- default is white
tagColor: string ---> tagName color -- default is black

ItemSlider

this component is a slider for the cards (or divs with your own design) you pass to it.

DEMO
to use inside a react app:

<ui.ItemsSlider rtl id="slider1">
 <div className="item"></div>
 <div className="item"></div>
 <div className="item"></div>
 <div className="item"></div>
</ui.ItemsSlider>

***Notice that the divs you pass to this component, should have a class and the class can be named and styled as you wish***

Properties:
id : string ---> this is the identifier that enables navigation button scrolling
rtl : boolean ---> whether the tagName should be on left corner or right -- default is false
color : string ---> color for the navigation buttons -- default is black
fontSize: string ---> font size of the navigation buttons -- default is 20px
top: string ---> the position of the navigation buttons from top of the container
noNavButtons: boolean ---> display or don't display Navigation Buttons -- default is false(display)

libs

Pure JS functions and classes
import {libs} from 'saffroncodejs'

StringFunctions

Full list of libs.StringFunctions functions:

clearDoubleQuartmarksOnJSON(str:string=""):string
clearHTMLTags(ReferText:string=""):string
clearSpacesAndTabs(str:string=""):string
clearSpacesAndTabsAndArrows(str:string="")
compairFarsiString(str1:string="",str2:string=""):number
correctInputString(str:string=""):string
correctUTF(utfWord:string=""):string
currancyPrint(inputcurencynumber:string):string
fileSizeInString(fileSizeInByte:number=0):string
findMainDomain(url:string="",removeHTTPPart:boolean=true):string
findPortOfURL(url:string=""):number
generateLinks(str:string="",linkColors:number=-1):string
htmlCharacterEncoder(str:string=""):string
isArabic(str:string=""):boolean
isEmail(email:string=""):boolean
isLocation(str:string=""):boolean
isNullOrEmpty(value:string):boolean
isPersian(str:string="",stringLength:number=NaN):boolean
isURL(str:string=""):boolean
jsonCorrector(oldJson:string=""):string
KaafYe(str:string=""):string
makeHTMLWithSize(pureHML:string="", defaultFontSize:number=0):string
numCorrection(str:string=""):string
numToString(num:number,numberLenght:number=2):string
removeHTML(ReferText:string=""):string
removeNumberFromBegining(str:string=""):string
removeSpacesFromTwoSides(str:string=""):string
returnLasNumberPartInInteger(str:string=""):number
search(str:string="",searchedWord:string="",fineAll:boolean = true,arabic:boolean=false, arabic2:boolean=false)
short(str:string="",len:number=10,removeEntersWith:string='')
stringToColor(str:string=""):number
timeInString(seconds:number=0):string
utfToUnicode(utfString:string=""):string

framework

import {framework} from 'saffroncodejs'

EventDispatcher

var dispatcher = new EventDispatcher();

//How to add and remove an EventListner on an dispatcher

dispatcher.addEventListner(type:string,trigger:(eventType?:string,param?:any)=>any):void;

//sample : dispatcher.addEventListner("LOGGED_IN",this.userIsLoggedIn)

dispatcher.removeEventListner(type:string,trigger:(eventType?:string,param?:any)=>any):void;

//sample : dispatcher.removeEventListner("LOGGED_IN",this.userIsLoggedIn)

//How to dispatch an event on your dispatcher

dispatcher.dispatchEvent(type:string,param:any=null):void;

//sample : dispatcher.dispatchEvent("LOGGED_IN",userTocken)

PageManager(ReactRouter's Assist)

dispatcher:new EventDispatcher()

PAGE_CHANGED : "PAGE_CHANGED"

routerParamList:''

changePage:changePage

decodePageParams:decodePageParams

getCurrentPage:getCurrentPage

registerPage:registerPage

PageData

url:string;

pageName:string;

component?:React.ComponentClass;

pageData:any;