fz-react-cli
Version:
A CLI tool for build modern web application and libraries
701 lines (611 loc) • 75.4 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=stylesheet href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
rel="stylesheet" />
<link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
<script src="./js/codemirror.js"></script>
<script src="./js/javascript.js"></script>
<script src="./js/active-line.js"></script>
<script src="./js/matchbrackets.js"></script>
<link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
<title>Zoho Desk - React Components</title>
<script>
function selectText(containerid) {
if (document.selection) {
// IE
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
document.execCommand('copy');
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
}
}
</script>
</head>
<body>
<div id="react"></div>
<div class="iframeCentering">
<span class="posAb">Zoho Desk - React Components</span>
<iframe src="about:blank" id="ifm"></iframe>
</div>
<script src="/docs/js/babel.min.js"></script>
<script type="text/babel">
window.loadDOC = function(Component, mdata) {
window.RTLmode = false;
var ReactDOM = Component.ReactDOM;
var React = Component.React;
class Doc extends React.Component {
constructor(props) {
super(props);
this.state = {
componentObj:props.componentObj,
search: '',
selectedComponent: location.hash,
Components: Component,
popUp: '',
fullScreenSrc: '',
viewGroup:'Global',
viewFolder:'General',
moreInform:false,
infoTab:'component',
changeset:null,
version:'',
frameWidth:'100%',
isMenuClose:false,
isRTL:false,
isRem:true,
isRemOpen:false,
rootSize:16,
pixelSize:16,
resultRem:'1rem'
};
this.search = this.search.bind(this);
this.clear = this.clear.bind(this);
this.toggleRemContainer = this.toggleRemContainer.bind(this);
this.hashChange = this.hashChange.bind(this);
this.popupToggle = this.popupToggle.bind(this);
this.popupToggleDoc = this.popupToggleDoc.bind(this);
this.removeClose = this.removeClose.bind(this);
this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
this.toggleFolder = this.toggleFolder.bind(this);
this.toggleGroup = this.toggleGroup.bind(this);
this.onTabinfo = this.onTabinfo.bind(this);
this.codeview = this.codeview.bind(this);
this.reloadFrame = this.reloadFrame.bind(this);
this.getFileDetails = this.getFileDetails.bind(this);
this.iframeSize = this.iframeSize.bind(this);
this.menuOpen = this.menuOpen.bind(this);
this.onRtlView=this.onRtlView.bind(this);
this.onREMView=this.onREMView.bind(this);
this.calculatePxToRem=this.calculatePxToRem.bind(this);
this.calculateRemToPx=this.calculateRemToPx.bind(this);
this.onChangeRem=this.onChangeRem.bind(this);
this.onChangePixel=this.onChangePixel.bind(this);
this.onChangeBase=this.onChangeBase.bind(this);
}
toggleRemContainer()
{
this.setState({ isRemOpen: !this.state.isRemOpen });
}
calculatePxToRem()
{
let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
this.setState({resultRem:result+"rem"});
}
calculateRemToPx()
{
let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
this.setState({pixelSize:result});
}
onChangeBase(e) {
let result=Number((this.state.pixelSize/e.target.value ).toFixed(4));
this.setState({ rootSize: e.target.value,resultRem:result+"rem" });
}
onChangePixel(e) {
let result=Number((e.target.value/this.state.rootSize).toFixed(4));
this.setState({ pixelSize: e.target.value ,resultRem:result+"rem" });
}
onChangeRem(e) {
let result=Number(((Number(parseFloat(e.target.value))*this.state.rootSize).toFixed(4)));
this.setState({ resultRem: e.target.value,pixelSize:result});
}
toggleFolder(name){
let { viewFolder } = this.state;
if(name == viewFolder)
{
name =''
}
this.setState({ viewFolder: name });
}
hashChange() {
let ele = document.getElementById('componentIframe')
if(ele){
var src = document.getElementById('componentIframe').src;
var url = src && src.split('#')[0];
document.getElementById('componentIframe').src = url + location.hash;
}
this.setState({ selectedComponent: location.hash, infoTab:'component' });
}
toggleGroup(name) {
let { viewGroup } = this.state;
if(name == viewGroup)
{
name =''
}
this.setState({ viewGroup: name });
}
componentDidMount() {
window.addEventListener('hashchange', this.hashChange);
document.addEventListener('click', this.popupToggleDoc);
fetch('/cli/version').then((res)=>{return res.json()}).then((response)=>{
(response && response.version) ? this.setState({version : response.version }) : this.setState({version : "version get failure" })
}).catch(function(err) {
this.setState({changeset : "Error accured" })
});
}
codeview()
{
let compName = location.hash != '' ? location.hash.substring(1) : null;
let element = document.getElementById('codeView')
if (Component[compName] && typeof CodeMirror !== 'undefined' && element ) {
CodeMirror(element, {
value:'',
lineNumbers: false,
styleActiveLine: false,
matchBrackets: false,
theme: 'blackboard',
});
}
}
componentWillUnmount() {
document.removeEventListener('click', this.popupToggleDoc);
}
componentWillUnmount() {
window.removeEventListener('hashchange', this.hashChange);
}
search(e) {
this.setState({ search: e.target.value });
}
clear(e) {
this.setState({ search: '' });
}
popupToggleDoc() {
this.setState({ popUp: '' });
}
fullScreenSrcToggle(select) {
this.setState({ fullScreenSrc: select });
this.popupToggleDoc();
}
popupToggle(popup, e) {
this.setState({ popUp: popup });
e.stopPropagation && e.stopPropagation();
e.nativeEvent.stopImmediatePropagation &&
e.nativeEvent.stopImmediatePropagation();
}
removeClose(e) {
e.stopPropagation && e.stopPropagation();
e.nativeEvent.stopImmediatePropagation &&
e.nativeEvent.stopImmediatePropagation();
}
filter(list, str) {
list = list.sort((a, b) => {
var at = a.toLowerCase();
var bt = b.toLowerCase();
return at > bt ? 1 : at < bt ? -1 : 0;
});
// return list.filter(
// item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
// );
return list.filter((item)=>{
let value = item.split('__')[0]
return value.toUpperCase().indexOf(str.toUpperCase()) != -1
})
}
onTabinfo(name)
{
this.setState({infoTab:name})
}
reloadFrame()
{
let iframeEle = document.getElementById('componentIframe');
iframeEle.contentDocument.location.reload()
parent.document.getElementById("loadingText").style.display= 'block'
}
getFileDetails()
{
this.onTabinfo('changeset')
let compName = location.hash != '' ? location.hash.substring(1) : null;
let compNameSub= Component[compName].docs.filePath || ''
let namee = compNameSub ? compNameSub.split('__')[0] : '';
let propComName = namee.replace("/docs/","/")
fetch('/author/get?componentName='+propComName+'.js').then((res)=>{return res.json()}).then((response)=>{
(response && response.stdout) ? this.setState({changeset : response.stdout }) : this.setState({changeset : "response is empty" })
}).catch(function(err) {
this.setState({changeset : "Error accured" })
});
}
iframeSize(type) {
if (type == 'mobile') {
this.setState({frameWidth:'350px'})
this.setState({isMenuClose:false})
} else if (type == 'tab') {
this.setState({frameWidth:'798px'})
this.setState({isMenuClose:false})
} else if (type == 'desktop') {
this.setState({frameWidth:'1010px'})
this.setState({isMenuClose:false})
} else if (type == 'full') {
this.setState({frameWidth:'100%'})
this.setState({isMenuClose:true})
} else {
this.setState({frameWidth:'100%'})
this.setState({isMenuClose:false})
}
}
menuOpen()
{
this.setState({isMenuClose:!this.state.isMenuClose})
}
onRtlView(e) {
let iframeEle = document.getElementById('componentIframe');
let ele = e.target.element || null
if (!this.state.isRTL) {
this.setState({isRTL:true})
window.RTLmode = true;
iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
} else {
this.setState({isRTL:false})
iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
window.RTLmode = false;
}
}
onREMView(e) {
let iframeEle = document.getElementById('componentIframe');
let ele = e.target.element || null
if (!this.state.isRem) {
this.setState({isRem:true})
iframeEle.contentDocument.documentElement.classList.add('isRem');
} else {
this.setState({isRem:false})
iframeEle.contentDocument.documentElement.classList.remove('isRem');
}
}
render() {
const {
Components,
componentObj,
search,
selectedComponent,
popUp,
viewGroup,
viewFolder,
moreInform,
infoTab,
changeset,
version,
frameWidth,
isMenuClose,
isRTL,
isRem,
isRemOpen,
rootSize,
pixelSize,
resultRem
} = this.state;/* Components & componentObj no need in the state access in props itself*/
let reactCliVersion =version.split(' ').filter(function(el){return el.toLowerCase().indexOf("fz-react-cli@") > -1;});
let versionFz = reactCliVersion.length?reactCliVersion[0].substring(reactCliVersion[0].indexOf('@')+1,reactCliVersion[0].length) : '';
let compName = location.hash != '' ? location.hash.substring(1) : null;
let propComName = compName ? compName.split('__')[0] : '';
let propsObj =
(Components &&
Components[propComName] &&
Components[propComName].propTypes) ||
{};
let currentCompProps = Object.keys(propsObj) || [];
let currentCompDefault =
(Components[propComName] && Components[propComName].defaultProps) || {};
return (
<main className="dflex flexrow">
{location.hash && <div className={"rtlChkDis offSelection "+(isRTL?'rtlChkSel':'')} onClick={this.onRtlView} id="rtl"> {isRTL?'Disable':'Enable'} RTL </div>}
{location.hash && <div className={"rtlChkDis remCheckButton offSelection "+(isRem?'rtlChkSel':'')} onClick={this.onREMView} id="rem"> {isRem?'Disable':'Enable'} REM </div>}
<div
className="showToggleLeft"
onClick={this.menuOpen}
><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
</div>
<div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
<div className="dflex flexcolumn">
<div className="flexshrink logoPart"><img src="./css/desklogo.png" />
</div>
<div className="flexgrow flexbasis sliderContainer">
<div className="dflex flexcolumn">
<div className="flexshrink searchPart">
<Search onChange={this.search} value={search} onClear={this.clear} />
</div>
<menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
{componentObj &&
Object.keys(componentObj).length &&
Object.keys(componentObj).map(folderName => {
let folderCompCount=0;
let outcomp = Object.keys(componentObj[folderName]).map(
grn => {
let searchList = this.filter(
componentObj[folderName][grn],
search
);
if(searchList.length){
folderCompCount=folderCompCount+1;
}
return searchList.length ? true : false;
}
);
if (outcomp.indexOf(true) != -1) {
return (
<div>
<div
onClick={this.toggleFolder.bind(
this,
folderName
)}
className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
(viewFolder == folderName
? 'mainMenuActive'
: '')
}
>
<span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
<span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
<i className={'flexshrink mainMenuArrow'}><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 792 792" ><g><g id="Rectangle_5_copy"><g><polygon points="580.802,369.604 580.802,369.604 211.198,0 184.802,26.396 554.405,396 184.802,765.604 211.198,792
607.198,396 " className="arrowPath"/></g></g></g>
</svg></i>
</div>
<div
className={
viewFolder == folderName || search
? 'folderOpen'
: 'hide'
}
>
{Object.keys(componentObj[folderName]).map(
groupName => {
return (
<ComponentList
type={groupName}
components={this.filter(
componentObj[folderName][groupName],
search
)}
selectedComponent={selectedComponent}
toggleGroup={this.toggleGroup}
viewGroup={
search ? groupName : viewGroup
}
/>
);
}
)}
</div>
</div>
);
} else {
return null;
}
})}
</menu>
{versionFz!=''&&<div className="flexshrink versionPart ">
<span>Version {versionFz}</span>
</div>}
<div className="flexshrink tools" onClick={this.toggleRemContainer}>
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" /><span>REM Converter</span>
</div>
</div>
<div className={"slider "+(isRemOpen?'sopen':'')}>
<div className="tools sliderHeader">
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
<span className="sliderTitle">REM Converter</span>
<span className="searchClose" onClick={this.toggleRemContainer}>
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
</span>
</div>
<div className="sliderFormContainer">
<div className="sliderInputContainer">
<label className="sliderInputTitle">Base font-size (in px)</label>
<input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
</div>
<div className="sliderInputContainer">
<label className="sliderInputTitle">PX size to convert</label>
<input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
</div>
<div className="sliderInputContainer">
<label className="sliderInputTitle">Result</label>
<div className="sliderResult">
<input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
<span id="remoutput" className="copyTxtHiden">{resultRem}</span>
<span className="copyResult" onClick={selectText.bind(this, 'remoutput')}><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="flexgrow flexbasis">
<container id="container" className="dflex flexcolumn flexbasis">
{compName ?
<div className="flexshrink cheader">
<div className="dflex flexrow flexbasis alignVertical">
<div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
<div className='flexgrow flexbasis infoTabs dflex'>
<span onClick={this.onTabinfo.bind(this,'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
<span onClick={this.onTabinfo.bind(this,'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
<span onClick={this.onTabinfo.bind(this,'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
{ /* <span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span> */}
<span onClick={this.onTabinfo.bind(this,'references')}className={infoTab=='references' ? 'dotted infoactive' : 'dotted'}>References</span>
<span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
<span onClick={this.getFileDetails} className={infoTab == 'changeset' ? 'dotted infoactive' : 'dotted'}>Author</span>
</div>
<a className="newTab flexshrink" href={'/docs/component.html' + location.hash} target="_blank" >
Open in New Tab
<svg x="0px" y="0px" viewBox="0 0 26 26" style={{enableBackground:'new 0 0 26 26'}} xmlSpace="preserve">
<path d="M18,17.759v3.366C18,22.159,17.159,23,16.125,23H4.875C3.841,23,3,22.159,3,21.125V9.875C3,8.841,3.841,8,4.875,8h3.429l3.001-3h-6.43C2.182,5,0,7.182,0,9.875v11.25C0,23.818,2.182,26,4.875,26h11.25C18.818,26,21,23.818,21,21.125v-6.367L18,17.759z"/>
<path d="M22.581,0H12.322c-1.886,0.002-1.755,0.51-0.76,1.504l3.22,3.22l-5.52,5.519c-1.145,1.144-1.144,2.998,0,4.141l2.41,2.411c1.144,1.141,2.996,1.142,4.14-0.001l5.52-5.52l3.16,3.16c1.101,1.1,1.507,1.129,1.507-0.757L26,3.419C25.999-0.018,26.024-0.001,22.581,0z"/>
</svg>
</a>
</div>
</div>
:null}
<div className="flexgrow flexbasis cfooter ">
<div className="dflex flexcolumn flexbasis">
<div className="flexgrow flexbasis scrollY ccontent">
{infoTab == 'changeset' ?
<pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
:null}
{infoTab == 'code' ?
<CodeView compName={compName} src={Component[compName].docs.source}/>
:null}
{infoTab == 'src' ?
<CodeView compName={compName+'src'} src={Component[propComName].source}/>
: null}
{infoTab == 'component' &&
<section id="resize" style={{"width":frameWidth}} className={"dflex flexcolumn flexbasis iframeSection"}>
<span className="loadingText" id='loadingText'><div className="lds-ripple"><div></div><div></div></div></span>
<iframe
id="componentIframe"
className="iframe"
src={'/docs/component.html' + location.hash}
/>
<div className={"responsive offSelection "}>
<span className={"responsiveMenu"} onClick={this.reloadFrame}>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1" id="Capa_1"
viewBox="0 0 28.265 28.265"
className={"relaodIfr"}>
<g>
<path d="M14.133,28.265c-7.061,0-12.805-5.75-12.805-12.809c0-7.06,5.744-12.807,12.805-12.807c0.469,0,0.943,0.027,1.414,0.08 v-2.07c0-0.266,0.164-0.508,0.406-0.611c0.252-0.098,0.531-0.043,0.723,0.148l4.537,4.547c0.258,0.258,0.258,0.67,0,0.932 l-4.535,4.557c-0.193,0.188-0.473,0.246-0.725,0.143c-0.242-0.104-0.406-0.344-0.406-0.609V7.47 c-0.469-0.086-0.941-0.125-1.414-0.125c-4.473,0-8.113,3.639-8.113,8.111c0,4.471,3.641,8.113,8.113,8.113s8.111-3.643,8.111-8.113 c0-0.363,0.295-0.66,0.662-0.66h3.369c0.365,0,0.662,0.297,0.662,0.66C26.937,22.515,21.189,28.265,14.133,28.265z"/>
</g>
</svg>
</span>
<span className={"responsiveMenu"} onClick={()=>this.iframeSize('mobile')}>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 503.604 503.604" >
<g>
<g>
<path d="M337.324,0H167.192c-28.924,0-53.5,23.584-53.5,52.5v398.664c0,28.916,24.056,52.44,52.98,52.44l170.412-0.184
c28.92,0,52.58-23.528,52.58-52.448l0.248-398.5C389.908,23.452,366.364,0,337.324,0z M227.68,31.476h49.36
c4.336,0,7.868,3.52,7.868,7.868c0,4.348-3.532,7.868-7.868,7.868h-49.36c-4.348,0-7.868-3.52-7.868-7.868
C219.812,34.996,223.332,31.476,227.68,31.476z M198.02,33.98c2.916-2.912,8.224-2.952,11.136,0c1.46,1.456,2.324,3.5,2.324,5.588
c0,2.048-0.864,4.088-2.324,5.548c-1.452,1.46-3.504,2.32-5.548,2.32c-2.084,0-4.088-0.86-5.588-2.32
c-1.452-1.456-2.28-3.5-2.28-5.548C195.736,37.48,196.568,35.436,198.02,33.98z M250.772,488.008
c-12.984,0-23.544-10.568-23.544-23.548c0-12.984,10.56-23.548,23.544-23.548s23.544,10.564,23.544,23.548
C274.316,477.44,263.752,488.008,250.772,488.008z M365.488,424.908H141.232V74.756h224.256V424.908z"/>
</g>
</g>
</svg>
</span>
<span className={"responsiveMenu"} onClick={()=>this.iframeSize('tab')}>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 503.592 503.592">
<g>
<g>
<path d="M428.636,27.852C428.636,12.508,416.144,0,400.792,0H102.66C87.312,0,74.828,12.504,74.828,27.852l0.132,447.892
c0,15.352,12.488,27.848,27.832,27.848h298.136c15.352,0,27.836-12.496,27.836-27.848L428.636,27.852z M232.36,31.472h38.884
c4.36,0,7.868,3.52,7.868,7.868c0,4.344-3.508,7.872-7.868,7.872H232.36c-4.348,0-7.868-3.524-7.868-7.872
S228.012,31.472,232.36,31.472z M202.964,33.912c2.916-2.948,8.184-2.948,11.136,0c1.452,1.46,2.324,3.504,2.324,5.552
c0,2.08-0.872,4.084-2.324,5.544c-1.46,1.496-3.504,2.324-5.584,2.324c-2.084,0-4.096-0.828-5.552-2.324
c-1.452-1.456-2.316-3.464-2.316-5.544C200.648,37.416,201.516,35.372,202.964,33.912z M250.216,488.128
c-12.98,0-23.544-10.564-23.544-23.544c0-12.984,10.568-23.548,23.544-23.548c12.988,0,23.544,10.564,23.544,23.548
S263.208,488.128,250.216,488.128z M94.424,424.904V74.752h314.744v350.152H94.424z"/>
</g>
</g>
</svg>
</span>
<span className={"responsiveMenu"} onClick={()=>this.iframeSize('desktop')}>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 503.588 503.588" >
<g>
<g>
<path d="M499.312,375.728h-23.256v-260.76c0-17.776-14.72-30.384-32.492-30.384H59.556c-17.784,0-32.016,12.604-32.016,30.384
v260.756H3.8c-2.172,0-3.8-0.204-3.8,1.968v3.664c0,19.724,15.904,37.648,35.62,37.648h431.86
c19.728,0,36.108-17.924,36.108-37.648v-3.664C503.592,375.524,501.484,375.728,499.312,375.728z M246.008,96.676
c2.912-2.952,8.18-2.952,11.092,0c1.492,1.452,2.32,3.5,2.32,5.548c0,2.084-0.828,4.092-2.32,5.584
c-1.46,1.456-3.464,2.28-5.544,2.28s-4.092-0.824-5.548-2.28c-1.5-1.496-2.324-3.504-2.324-5.584
C243.688,100.136,244.512,98.128,246.008,96.676z M452.444,359.988h-401.3V119.996h401.3V359.988z"/>
</g>
</g>
</svg>
</span>
<span className={"responsiveMenu"} onClick={()=>this.iframeSize('default')}>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 503.588 503.588" >
<g>
<g>
<path d="M492.128,76.714H11.676C5.168,76.714,0,80.238,0,86.75v27.276V354.25v27.512c0,6.512,5.168,13.632,11.676,13.632h196.84
v15.74H59.132c-4.348,0-7.868,3.524-7.868,7.868c0,4.344,3.52,7.872,7.868,7.872h387.404c4.344,0,7.868-3.528,7.868-7.872
s-3.524-7.868-7.868-7.868H295.072v-15.74h197.056c6.508,0,11.46-7.12,11.46-13.632V354.25V114.03V86.754
C503.588,80.238,498.636,76.714,492.128,76.714z M257.448,379.27c-1.452,1.456-3.5,2.288-5.54,2.288
c-2.084,0-4.096-0.832-5.552-2.288c-1.496-1.496-2.32-3.5-2.32-5.58c0-2.092,0.824-4.092,2.28-5.556
c2.952-2.952,8.224-2.952,11.132,0c1.46,1.46,2.328,3.46,2.328,5.556C259.776,375.774,258.908,377.774,257.448,379.27z
M15.732,356.05V116.058h472.112V356.05H15.732z"/>
</g>
</g>
</svg>
</span>
<span className={"responsiveMenu"} onClick={()=>this.iframeSize('full')}>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 473.083 473.083" >
<g>
<path style={{fill: '#020202'}} d="M330.406,213.107c-1.407-0.588-3.041-0.263-4.115,0.821l-15.018,15.024l-32.595-32.588
c-6.189-6.191-16.216-6.191-22.407,0c-6.189,6.189-6.189,16.216,0,22.405l32.597,32.589L273.833,266.4
c-1.082,1.083-1.4,2.708-0.819,4.116c0.588,1.407,1.965,2.336,3.497,2.336h52.456c1.006,0,1.965-0.403,2.678-1.114
c0.704-0.695,1.106-1.672,1.106-2.662l-0.008-52.472C332.744,215.072,331.823,213.695,330.406,213.107z" />
<path style={{fill: '#020202'}} d="M194.793,196.365l-32.595,32.588l-15.017-15.024c-1.076-1.084-2.708-1.409-4.117-0.821
c-1.416,0.588-2.336,1.965-2.336,3.497l-0.008,52.472c0,0.99,0.402,1.967,1.107,2.662c0.711,0.711,1.67,1.114,2.676,1.114h52.458
c1.53,0,2.909-0.929,3.497-2.336c0.58-1.408,0.263-3.033-0.821-4.116l-15.033-15.041L217.2,218.77
c6.189-6.189,6.189-16.216,0-22.405C211.01,190.174,200.983,190.174,194.793,196.365z" />
<path style={{fill: '#020202'}} d="M267.126,153.995c4.053,0,8.108-1.546,11.203-4.641l32.595-32.589l15.019,15.026
c1.076,1.082,2.708,1.406,4.116,0.818c1.415-0.588,2.336-1.964,2.336-3.497l0.008-52.472c0-0.99-0.402-1.965-1.106-2.661
c-0.711-0.712-1.672-1.114-2.678-1.114h-52.456c-1.532,0-2.909,0.929-3.497,2.337c-0.58,1.409-0.263,3.033,0.821,4.117
l15.032,15.04l-32.595,32.587c-6.191,6.189-6.191,16.217,0,22.407C259.019,152.449,263.072,153.995,267.126,153.995z" />
<path style={{fill: '#020202'}} d="M142.715,132.611c1.409,0.588,3.041,0.264,4.117-0.818l15.017-15.026l32.597,32.589
c3.095,3.095,7.148,4.641,11.203,4.641c4.055,0,8.108-1.546,11.203-4.641c6.19-6.19,6.19-16.218,0-22.407l-32.596-32.587
l15.033-15.04c1.084-1.084,1.401-2.708,0.821-4.117c-0.588-1.408-1.965-2.337-3.497-2.337h-52.458
c-1.004,0-1.965,0.402-2.676,1.114c-0.704,0.696-1.106,1.671-1.106,2.661l0.008,52.472
C140.379,130.647,141.3,132.023,142.715,132.611z" />
<path style={{fill: '#020202'}} d="M434.431,13.91H38.654C17.338,13.91,0,31.256,0,52.566V321.16c0,21.309,17.338,38.654,38.654,38.654
h132.682v51.822h-20.937c-13.13,0-23.768,10.646-23.768,23.769c0,13.121,10.638,23.768,23.768,23.768h172.317
c13.13,0,23.768-10.646,23.768-23.768c0-13.122-10.638-23.769-23.768-23.769H301.78v-51.822h132.65
c21.315,0,38.653-17.346,38.653-38.654V52.566C473.083,31.256,455.746,13.91,434.431,13.91z M377.974,336.047
c-5.958,0-10.77-4.813-10.77-10.754c0-5.958,4.813-10.771,10.77-10.771c5.942,0,10.754,4.813,10.754,10.771
C388.728,331.235,383.916,336.047,377.974,336.047z M425.51,338.631c-7.381,0-13.354-5.973-13.354-13.338
c0-7.381,5.974-13.355,13.354-13.355c7.365,0,13.338,5.974,13.338,13.355C438.848,332.658,432.875,338.631,425.51,338.631z
M441.393,298.46H31.69V52.566c0-3.838,3.126-6.964,6.963-6.964h395.777c3.838,0,6.962,3.126,6.962,6.964V298.46z" />
</g>
</svg>
</span>
</div>
</section>
}
{infoTab == 'proptypes' ?
<div className="propsTable">
<div className="tableHeader">
<span className="brR">PropsName</span>
<span className="brR">Type</span>
<span className="brR">isRequired</span>
<span className="brR ">Default Props</span>
</div>
{currentCompProps.map((value, i) => {
return (
<div
className={
currentCompProps.length - 1 == i