@zuzjs/ui 0.3.2 → 0.3.4

package/src/core/index.tsx

@@ -0,0 +1,241 @@
+import Hashids from "hashids"
+import { nanoid } from "nanoid"
+import StyleCache from './css'
+import Cookies from 'js-cookie'
+import axios from 'axios'
+import {
+    cssColors,
+    cssProps, cssPropsDirect, cssPropsIgnore, cssPropsVals
+} from "./styles"
+
+const _Hashids = new Hashids('', 4)
+const _Alphabets = "#abcdefghijklmnopqrstuvwxyz0123456789"
+
+export const setCookie = (key : string, value : any, expiry? : number, host? : string)  => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host })
+
+export const getCookie = (key : string) => key == `` ? Cookies.get() : Cookies.get(key) || null;
+
+export const removeCookie = (key : string) => Cookies.remove(key)
+
+export const uuid = (len=11) => nanoid(len)
+
+export const makeCSSValue = (k: any, v: any, o: any) => { 
+    let ignore = cssPropsIgnore.indexOf(o) == -1
+    if(k in cssPropsDirect && ignore == true){
+        return cssPropsDirect[k].indexOf(`__VALUE__`) > - 1 ? 
+            cssPropsDirect[k].replaceAll(`__VALUE__`, `${v}${"number" == typeof v ? `px` : ``}`) 
+            : cssPropsDirect[k];
+    }
+    let unit = "number" == typeof v && ignore ? `px` : ``;
+    if(cssColors.indexOf(v) > -1){
+        v = `var(--colors-${v.replaceAll(`.`, `-`)})`;
+        unit = ``;
+    }else if(v in cssPropsVals){
+        v = cssPropsVals[v];
+    }
+    return `${k}:${v}${unit};`;
+}
+
+export const cleanProps = (props: {}, del=true) : {} => {
+    const ignore = [`as`, `hover`, `bref`, `tag`,`onSubmit`,`method`,`should`,`options`,`required`]
+    let items = { ...props }
+    Object.keys(props).map(k => {
+        if(k in cssProps || ignore.indexOf(k) > -1){
+            if(del)
+                delete items[k]
+            else
+                items[k] = undefined
+        }
+    })
+    return items
+}
+
+export const buildCSS = (k : any, v : any) => {
+	if(k in cssProps){
+		return makeCSSValue(cssProps[k], v, k)
+	}
+	return ``
+}
+
+const _withStyle = (props, pseudo=``) : string => {
+	if(!props) return ``
+	let cx = [props.className || props.as || ``]
+	const propRegexp = /\#|px|\(|\)|-|\s/g
+    Object.keys(props).map(k => {
+        if(k != 'children' && k in cssProps){
+            const _css = buildCSS(k, props[k]).toString().replace(/;|:|\s/g, "")           
+            let _indices = 0
+            for(let i = 0; i < _css.length; i++){ _indices += _Alphabets.indexOf(_css.charAt(i)) }            
+            let _cp = k.substring(0, 1);
+            if(cssProps[k].indexOf("-") > -1){
+                _cp = "";
+                cssProps[k].split("-").map(c => _cp += c.substring(0, 1))
+            }
+			if(props[k].toString().indexOf("-") > -1){
+				props[k].toString().split("-").map(c => _cp += c.substring(0, 1))
+			}
+            const _id = `${_cp}${_Hashids.encode(cssProps[k].length + _indices + (isNaN(parseInt(props[k])) ? 0 : parseInt(props[k])))}`   
+            // const _id = `${_cp}${cssProps[k]}-${props[k]}`   
+            cx.push(_id)
+            StyleCache[_id + pseudo] = buildCSS(k, props[k])
+        }
+    })
+    return cx.join(" ").trim()
+}
+
+export const withStyle = ( props ) : string => {
+	const style = [_withStyle(props)]
+	if("hover" in props){
+		style.push(_withStyle(props.hover, `:hover`))
+	}
+	if("before" in props){
+		style.push(_withStyle(props.hover, `:before`))
+	}
+	if("after" in props){
+		style.push(_withStyle(props.hover, `:after`))
+	}
+	return style.join(style.length > 1 ? " " : "")
+}
+
+export const getStylesheet = () => Object.keys(StyleCache).map(ck => StyleCache[ck] != "" ? `.${ck}{${StyleCache[ck]}}` : `__`).filter(x => x != `__`)
+
+export const isEmail = (e : string) => {
+	let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
+	return reg.test(e);
+}
+
+export const buildFormData = form => {
+	if (!form || form.nodeName !== "FORM") {
+		return;
+	}
+	var i, j, q = [];
+	for (i = form.elements.length - 1; i >= 0; i = i - 1) {
+		if (form.elements[i].name === "") {
+			continue;
+		}
+		switch (form.elements[i].nodeName) {
+		case 'INPUT':
+			switch (form.elements[i].type) {
+			case 'text':
+			case 'hidden':
+			case 'password':
+			case 'button':
+			case 'reset':
+			case 'submit':
+                q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
+				break;
+			case 'checkbox':
+			case 'radio':
+				if (form.elements[i].checked) {
+					q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
+				}						
+				break;
+			case 'file':
+				break;
+			}
+			break;			 
+		case 'TEXTAREA':
+			q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
+			break;
+		case 'SELECT':
+			switch (form.elements[i].type) {
+			case 'select-one':
+				q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
+				break;
+			case 'select-multiple':
+				for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
+					if (form.elements[i].options[j].selected) {
+						q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].options[j].value) });
+					}
+				}
+				break;
+			}
+			break;
+		case 'BUTTON':
+			switch (form.elements[i].type) {
+			case 'reset':
+			case 'submit':
+			case 'button':
+				q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
+				break;
+			}
+			break;
+		}
+	}
+	return q //return q.join("&");
+}
+
+export const withRest = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
+    var Bearer = getCookie(bearer) || `${uuid(8)}^${uuid(8)}`;
+	var isWindow = typeof window !== 'undefined' 
+    var cancelToken = null
+    if(isWindow){
+        window['__grabToken'] = axios.CancelToken.source();
+        cancelToken = window['__grabToken'].token
+    }
+    if(fd){
+        return new Promise((resolve, reject) => {
+            axios({
+                method: "post",
+                url: uri,
+                data: buildFormData(data),
+                timeout: 1000 * timeout,
+                cancelToken: cancelToken,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    'Authorization': `Bearer ${Bearer}`
+                },
+                onUploadProgress: ev => {
+                    //TODO: Add progress                    
+                }
+            })
+            .then(resp => {
+                if(resp.data && "kind" in resp.data){
+                    resolve(resp.data)
+                }else{
+                    reject(resp.data)
+                }            
+            })
+            .catch(err => reject(err));
+        })
+    }
+    return new Promise((resolve, reject) => {
+        axios.post(
+            uri,
+            {
+                ...Cookies.get(),
+                ...data,
+                __poken: new Date().getTime() / 1000
+            },
+            {
+                timeout: 1000 * timeout,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${Bearer}`
+                },
+                cancelToken: cancelToken
+            }
+        )
+        .then(resp => {
+            if(resp.data && "kind" in resp.data){
+                resolve(resp.data)
+            }else{
+                reject(resp.data)
+            }            
+        })
+        .catch(err => reject(err));
+    })
+}
+
+export const formatBytes = bytes => {
+	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+	if (bytes == 0) return '0 Byte';
+	var i = Math.floor(Math.log(bytes) / Math.log(1024)),
+	nx = bytes / Math.pow(1024, i);
+	return  nx.toFixed(2) + ' ' + sizes[i];
+}
+
+export const formatSeconds = (n: number): string => {
+    let d = new Date(n * 1000).toISOString().slice(11, 19)
+    return d.indexOf("00:") > -1 ? d.replace("00:", "") : d
+}