@startlibs/utils 1.0.3 → 1.1.0

package/src/utils.jsx

@@ -0,0 +1,342 @@
+import {scrollWidth} from './fixMediaQuery'
+import _ from 'lodash/fp'
+
+export const formatPath = (...paths) => paths.map(path=>Array.isArray(path) ? path.join('.') : ( path ? path.toString().replace(/\[/g,'.').replace(/^\./,'').replace(/]/g,'') : '')).filter(_=>_).join('.')
+
+export const identityFn = (n=0) => (...e) => e[n]
+
+export const will = (fn,...props) => (...more) => fn(...props,...more)
+
+export const lazyValue = (v) => () => v
+export const callIfFunction = (prop,...args) => typeof prop === "function" ? prop(...args) : prop
+export const callIfFunctions = (prop,...args) => typeof prop === "function" ? prop(...args.map((e)=>callIfFunction(e))) : prop
+export const callMany = (...many) => (...args) => many.map(_=> callIfFunction(_,...args))
+export const ifUndefined = (v,...or) => v !== undefined ?  v : (or.length === 1 ? or[0] : ifUndefined(or[0],...or.slice(1)))
+export const using = (...v) => (fn) => fn(...v.map((v) => callIfFunction(v)))
+
+export const stopPropagation = (cb) => (e) => { (e && e.stopPropagation && e.stopPropagation()); callIfFunction(cb,e) }
+export const preventDefault = (cb) => (e) => { (e && e.preventDefault && e.preventDefault()); callIfFunction(cb,e) }
+export const constrainEvent = (cb) => (e) => { e?.preventDefault(); e.stopPropagation(); callIfFunction(cb,e) }
+
+export const mapGetOrSet = (map,key,value) => (map.has(key) ? map : map.set(key, value)).get(key);
+
+export const intToHour = (hour, autoFill = true) => {
+  if (hour === undefined || hour === null) return ''
+  if (hour === 0) { return "00:00"}
+
+    //const [h,m] = ('000' + hour.toString().replace(":","")).slice(-4).replace(/(\d\d)(\d\d)/, '$1:$2').split(":")
+
+  const h = hour.toString().replace(":","").slice(-4, -2)
+  const m = hour.toString().replace(":","").slice(-2)
+  if (callIfFunction(autoFill,hour)) {
+    return ('000' + (h ? parseInt(h,10) % 24 : '') + m).slice(-4).replace(/(\d\d)(\d\d)/, '$1:$2')
+  }
+  if (h) return (parseInt(h, 10) > 23 ? h.slice(1) : h) + ':' + m
+  return m
+}
+export const formatHour = (hour = "") => {
+  if (!hour) { return ""}
+  const h = hour.toString().replace(":","").slice(-4, -2)
+  const m = hour.toString().replace(":","").slice(-2)
+  if (!h && parseInt(m) < 24 && !_.isFinite(hour)) {
+    return m+":00"
+  } else if (h) {
+    return (parseInt(h, 10) > 23 ? h.slice(1) : h) + ':' + m
+  }
+  return ('000' + hour.toString().replace(":","")).slice(-4).replace(/(\d\d)(\d\d)/, '$1:$2')
+}
+
+
+export const willRafThrottle = () => {
+  let ticking = false;
+  return (fn) => {
+    if (!ticking) {
+      window.requestAnimationFrame(() => {
+        fn()
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }
+}
+
+export const rafThrottle = (fn) => {
+  const throttle = willRafThrottle()
+  return () => {
+    throttle(fn)
+  }
+}
+
+export const intsToHour = ({open, close}) => intToHour(open) + ' - ' + intToHour(close)
+
+export function isSmallDevice(width=600) {
+  const smallDeviceQuery = window.matchMedia ? window.matchMedia( `(max-width: ${width+scrollWidth}px)` ) : {matches:false}
+  return smallDeviceQuery.matches;
+}
+
+export function isHighDensity() {
+  return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3))
+}
+
+export function isRetina() {
+  return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent)
+}
+
+export function isMobile() {
+  if (typeof navigator === 'undefined') return false
+
+  const ua = navigator.userAgent
+
+  const isAndroid = /android/i.test(ua)
+  const isiOS = /iphone|ipod|ipad/i.test(ua)
+
+  // iPadOS 13+ reports "Macintosh" but has touch
+  const isIPadOS =
+    navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
+
+  return isAndroid || isiOS || isIPadOS
+}
+export function isAndroid() {
+  if (navigator.userAgentData) {
+    return navigator.userAgentData.platform === "Android"
+  }
+  return /Android/i.test(navigator.userAgent)
+}
+export const isPWA = () => {
+  return (window.matchMedia && window.matchMedia("(display-mode: standalone)").matches)
+    || !!window.hasWebviewBridge
+}
+
+export function isTouchDevice() {
+  return window.document && 'ontouchstart' in window.document.documentElement;
+}
+
+export const isIOS = () => {
+  return /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+}
+export const isIPad = () => {
+  return navigator.userAgent.match(/iPad/i) != null;
+}
+
+export const getNumberInputType2 = () => {
+  const isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
+  return isMobile() ? (isIOS ? "tel" : "number") : "text"
+}
+export const getNumberInputType = () => {
+  return "tel"
+}
+
+export function addHttp(s,secure) {
+  s = (s || '').trim()
+  if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) {
+    return s
+  } else {
+    return `http${secure ? 's': ''}://` + s
+  }
+}
+
+const protocols = '(^|\\s|\u00a0)(https?://)?(www\\.)?'
+const subdomains = '([a-zA-Z0-9][a-zA-Z0-9-_]*[a-zA-Z0-9]?\\.)*'
+const domain = '(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\\.[a-zA-Z]{2,3})'
+const resource = '[\u00A1-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z0-9-._~:/?#%[\\]@!$&\'()*+,;=]*'
+export const linkRegex = new RegExp(protocols + subdomains + domain + resource)
+
+export function isUrl(url) {
+  return linkRegex.test(addHttp(url))
+}
+
+export function ellipsis(str = "", length) {
+  if (str.length > length) {
+    let words = str.slice(0, length).split(' ')
+    if (str.split(' ').indexOf(words[words.length - 1]) < 0)
+      words = words.slice(0, words.length - 1)
+    return words.join(' ') + '...'
+  } else
+    return str
+}
+
+export function safeNewLineToBr(str,keepMany) {
+  const result = (str||"").replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+  if (keepMany===true) {
+    return result.replace(/\n/g,'<br/>')
+  }
+  return result.replace(/\n+/g,'<br/>')
+}
+
+function padGroups(pattern,value) {
+  return pattern.split('').reduce(([acc,value],char,i) => {
+    if (char === '0') {
+      const shouldHave = pattern.slice(i).search(/[^0#?*]/)
+      const has = value.slice(i).search(/\D/)
+      if (has > 0 && shouldHave > has) {
+        return [acc.concat('0'),acc.join('')+'0'+value.slice(i)]
+      } else {
+        return [acc.concat(value[i]),value]
+      }
+    } else {
+      return [acc.concat(value[i]),value]
+    }
+  },[[],value])[0].join('')
+}
+
+export const digitsToPattern = (patternWithLimit,optValue) => {
+  const value = optValue || ""
+  if (patternWithLimit[0] === '>' && Number(patternWithLimit.replace(/^>(\d*).*/g,"$1"))>value.length) return value
+  const pattern = patternWithLimit.replace(/^>\d+/,'')
+  const digits = padGroups(pattern,value).replace(/\D/g,'')
+  const totalRequired = pattern.split(/[0#]/).length-1
+  const totalOptional = pattern.split(/[?*]/).length-1
+  const available = digits.length-totalRequired
+
+  if (available>0 && totalOptional>0) {
+    let i = 0;
+    return digitsToPattern(
+      pattern
+        .replace(/\?/g,()=>i++<available?'#':'')
+        .replace('*',new Array(Math.max(0,available-i+1)).join("#")),
+      value
+    )
+  }
+  let i = 0
+  return pattern.replace(/^>\d*/,'').split('').reduce((acc,char)=> {
+    if (!digits[Math.max(i-1,0)] || char === '?' || char === '*') return acc
+    if (char==='#' || char=== '0') {
+      return acc+(digits[i++]||'')
+    } else {
+      return acc+char
+    }
+  },'')
+}
+
+export const normalizeTouch = (fn, endFn) => (e) => {
+  const touch = e.touches[0]
+  if (e.touches.length > 1 && e.type !== 'touchend') {
+    callIfFunction(endFn,e,touch)
+  } else {
+    callIfFunction(fn,e, touch)
+  }
+}
+export const normalizeMouse = (fn,endFn) => (e) => {
+  if (e.buttons>1 && e.type !== 'mouseup') {
+    callIfFunction(endFn,e,e)
+  } else {
+    callIfFunction(fn,e, e)
+  }
+}
+
+export const normalizePress = (fn,endFn) => (e) => {
+  if (e.touches) {
+    normalizeTouch(fn,endFn)(e)
+  } else {
+    normalizeMouse(fn,endFn)(e)
+  }
+}
+
+
+export const touchClick = (cb,sensibility = 5) => (e) => {
+  if (e.touches?.length !== 1) { return }
+  const target = e.target
+  const originalX = e.touches[0].screenX
+  const originalY = e.touches[0].screenY
+  const isInsideBounds = (touch) => Math.sqrt( Math.pow((originalX-touch.screenX), 2) + Math.pow((originalY-touch.screenY), 2) ) < sensibility
+
+  const checkBounds = (e) => {
+    if (e.touches.length !== 1) { return }
+    if (!isInsideBounds(e.changedTouches[0])) {
+      maybeClick()
+    }
+  }
+  const maybeClick = (e) => {
+    target.removeEventListener('touchend',maybeClick)
+    target.removeEventListener('touchmove',checkBounds)
+    if (e?.changedTouches?.length !== 1) { return }
+    if (isInsideBounds(e.changedTouches[0])) {
+      e.preventDefault()
+      cb(e)
+    }
+  }
+  target.addEventListener('touchend',maybeClick)
+  target.addEventListener('touchmove',checkBounds)
+}
+
+
+export const isEmptyHtml = (__html = "") => {
+  const a = document.createElement('span')
+  a.innerHTML = __html
+  return a.textContent.replace(/\s/g,'').length === 0
+}
+
+
+export const getScrollParent = (node) => {
+  if (!node) {
+    return window
+  }
+  const overflowY = window.getComputedStyle(node).overflowY
+  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden'
+  if (isScrollable && (node.scrollHeight > node.clientHeight || overflowY === 'scroll')) {
+    return node
+  } else {
+    return getScrollParent((node.offsetParent))
+  }
+}
+
+export const scrollIntoViewWithOffset = (el,offset) => {
+  const scrollOffset = getScrollParent(el)
+  const scrollY = scrollOffset === window ? window.pageYOffset : scrollOffset.scrollTop
+
+  const elTop = el.getBoundingClientRect().top
+  const computedOffset = callIfFunction(offset,elTop > 0)
+
+  const y = el.getBoundingClientRect().top + scrollY + computedOffset;
+
+  scrollOffset.scrollTo({top: y, behavior: 'smooth'});
+}
+export const isElementInView = async (element) => {
+  if (!element) return false;
+  if (1 !== element.nodeType) return false;
+
+  var html = document.documentElement;
+  var rect = element.getBoundingClientRect();
+  if (IntersectionObserver) {
+    return new Promise(resolve => {
+      const o = new IntersectionObserver(([entry]) => {
+        resolve(entry.intersectionRatio === 1);
+        o.disconnect();
+      });
+      o.observe(element);
+    });
+  }
+  return !!rect &&
+    rect.bottom >= 0 &&
+    rect.right >= 0 &&
+    rect.left <= html.clientWidth &&
+    rect.top <= html.clientHeight;
+}
+
+
+let i = 0
+export const getUID = () => Date.now().toString(36)+Math.random().toString(36).slice(2)+(i++).toString(36)
+
+export const getUrlParams = () => _.fromPairs(Array.from(new URLSearchParams(location.search).entries()))
+
+export const isShallowEqualSameKeys = (a, b) => {
+  for(var key in a) {
+    if(a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+export const isShallowEqual = (a, b) => {
+  for(var key in a) {
+    if(!(key in b) || a[key] !== b[key]) {
+      return false;
+    }
+  }
+  for(var key in b) {
+    if(!(key in a) || a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/wrapLazy.jsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import {callIfFunction} from './utils'
+
+// Suspense integrations like Relay implement
+// a contract like this to integrate with React.
+// Real implementations can be significantly more complex.
+// Don't copy-paste this into your project!
+const EMPTY_ARGS = []
+const UNDEFINED_CURRENT_VALUE = {}
+const innerWrapLazy = (refreshCallback) => (maybePromise, ...rootArgs) => {
+  let status;
+  let awaitReadResolver;
+  let checker = _.isEqual;
+  let lazyArgs = EMPTY_ARGS;
+  let uid = Math.random().toString()+Date.now();
+  let result;
+  let currentValue = UNDEFINED_CURRENT_VALUE
+
+  const promisify = (maybePromise,resolveNow) => {
+    return ((_.isFunction(maybePromise) && !resolveNow) ? new Promise(res => awaitReadResolver = res) : Promise.resolve())
+      .then((...args) => callIfFunction(maybePromise, ...rootArgs, ...lazyArgs, ...args))
+  }
+  const onPromiseSuccess = (returnedPromise) => r => {
+    if (returnedPromise !== suspender) {
+      return suspender
+    }
+    status = "success";
+    currentValue = r
+    result = r;
+    return r
+  }
+  const onPromiseError = (returnedPromise) => (e) => {
+    if (returnedPromise !== suspender) {
+      return suspender
+    }
+    status = "error";
+    result = e;
+    return Promise.reject(e)
+  }
+
+  const suspend = (maybePromise) => {
+    status = "pending"
+    awaitReadResolver = _.identity
+    const returnedPromise = promisify(maybePromise)
+    returnedPromise.then(onPromiseSuccess(returnedPromise), onPromiseError(returnedPromise));
+    return returnedPromise;
+  }
+
+  let suspender = suspend(maybePromise)
+
+  return {
+    read() {
+      awaitReadResolver()
+      if (status === "pending") {
+        throw suspender;
+      } else if (status === "error") {
+        throw result;
+      } else if (status === "success") {
+        return currentValue;
+      }
+    },
+    promise() {
+      awaitReadResolver()
+      return suspender
+    },
+    refresh(force) {
+      if (status !== "pending" || force)  {
+        suspender = suspend(maybePromise)
+        uid = Math.random().toString()+Date.now();
+        callIfFunction(refreshCallback,this)
+      }
+      return this
+    },
+    next(...args) {
+      return wrapLazy(maybePromise, ...rootArgs, ...args).checkWith(checker)
+    },
+    use(...args) {
+      if (!checker(args, lazyArgs)) {
+        if (lazyArgs !== EMPTY_ARGS) {
+          uid = Math.random().toString()+Date.now();
+        }
+        lazyArgs = args
+        suspender = suspend(maybePromise)
+      }
+      return this
+    },
+    _getCurrentValue() {
+      return currentValue
+    },
+    silentRefresh() {
+      const currentSuspender = suspender
+      const suspended = promisify(maybePromise,true).then((v) => {
+        if (currentSuspender === suspender) {
+          suspender = suspended
+        }
+        return v
+      })
+      suspended.then(onPromiseSuccess(suspended),onPromiseError(suspended))
+      uid = Math.random().toString()+Date.now();
+      callIfFunction(refreshCallback,this)
+      return suspended
+    },
+    and(lazy) {
+
+    },
+    checkWith(isEqual) {
+      checker = isEqual
+      return this
+    },
+    localUpdate(updater) {
+      currentValue = callIfFunction(updater,currentValue)
+      return this
+    },
+    uid() {
+      return uid
+    }
+  }
+}
+const UNMOUNTED = {}
+
+export const wrapLazy = innerWrapLazy()

package/.babelrc

@@ -1,26 +0,0 @@
-// .babelrc
-{
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-flow",
-    ["@babel/preset-env", {
-      "exclude": ["@babel/plugin-proposal-unicode-property-regex", "@babel/plugin-transform-unicode-regex"],
-      "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    "lodash",
-    "macros",
-    "fbjs-scripts/babel-6/dev-expression",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-proposal-throw-expressions",
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-proposal-json-strings",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-arrow-functions",
-    "@babel/plugin-transform-spread",
-    "@babel/plugin-proposal-object-rest-spread",
-    ["@babel/plugin-proposal-class-properties", {"loose": true}]
-  ]
-}