@startlibs/core 1.0.6 → 1.1.0

package/src/hooks/useToggle.js

@@ -0,0 +1,126 @@
+import React, {useRef, useMemo} from 'react'
+import {callIfFunction} from '@startlibs/utils'
+import {useCallState} from './useCallState'
+import {useIsUnmounted} from './useIsUnmounted'
+import {useRefState} from './useRefState'
+
+const useToggleInternal = (startWith = false, useStore, callback, key) => {
+
+  const isOpen = useStore(startWith)
+  const closing = useStore(false)
+  const refIsOpen = useRefState(isOpen.get())
+  const refIsClosing = useRefState(closing.get())
+  const timerId = useRef()
+
+  const isUnmounted = useIsUnmounted()
+
+  const clearClosing = () => {
+    if (refIsClosing.get() !== false) {
+      closing.set(false)
+      refIsClosing.set(false)
+      window.clearTimeout(timerId.current)
+    }
+  }
+
+  const toggleWith = (value = true) => {
+    const calledValue = callIfFunction(value,refIsOpen.get())
+    const newValue = refIsOpen.get() === calledValue ? !calledValue : calledValue
+    if (!isUnmounted() && refIsOpen.get() !== newValue) {
+      const result = callIfFunction(callback,newValue,refIsOpen.get())
+      if (result === false) { return }
+      isOpen.set(newValue)
+      refIsOpen.set(newValue)
+      clearClosing()
+    }
+  }
+
+  const openWith = (value) => {
+    if (process.env.NODE_ENV !== 'production' && key) {
+      console.log(key,refIsOpen.get()!==value ? "toggle":"clear", refIsOpen.get(),value)
+    }
+    const nextValue = callIfFunction(value,refIsOpen.get())
+    if (refIsOpen.get() !== nextValue) {
+      toggleWith(() => nextValue)
+    } else {
+      clearClosing()
+    }
+  }
+
+  const nextClosingTick = (ticks, tickIndex) => {
+    if (ticks.length) {
+      if (isNaN(ticks[0])) {
+        clearClosing()
+      } else if (!isNaN(ticks[0])) {
+        closing.set(tickIndex + 1)
+        refIsClosing.set(tickIndex + 1)
+        timerId.current = setTimeout(() => nextClosingTick(ticks.slice(1), tickIndex + 1), Number(ticks[0]))
+      }
+    } else {
+      openWith(false)
+    }
+  }
+  const closeAfter = (...millisecs) => {
+    if (process.env.NODE_ENV !== 'production' && key) {
+      console.log(key,!refIsOpen.get() || refIsClosing.get() ? "addCLosing" :  "closing" )
+    }
+    if (!refIsOpen.get() || refIsClosing.get()) return
+    nextClosingTick(millisecs, 0)
+  }
+
+  const _wait = (promise, start = true, end = false) => async (...args) => {
+    openWith(start)
+    try {
+      return await callIfFunction(promise,...args)
+    } finally {
+      openWith(end)
+    }
+  }
+
+  const setters = useMemo(()=>({
+    wait: (promise,start = true, end = false) => _wait(promise,start, end)(),
+    willWait: _wait,
+    open: (e) => {
+      if (process.env.NODE_ENV !== 'production') {
+        if (['string', 'number', 'boolean'].indexOf(typeof e) >= 0) {
+          console.log(`You are trying to open toggle with ${e}. Please, use openWith to open with a value`)
+        }
+      }
+      return openWith(true)
+    },
+    close: () => openWith(false),
+    toggle: (e) => {
+      if (process.env.NODE_ENV !== 'production') {
+        if (['string', 'number', 'boolean'].indexOf(typeof e) >= 0) {
+          console.log(`You are trying to toogle a toggle with ${e}. Please, use openWith to open with a value`)
+        }
+      }
+      toggleWith(true)
+    },
+    willOpenWith: (value) => () => openWith(value),
+    willCloseAfter: (...millsecs) => () => closeAfter(...millsecs),
+    willToggleWith: (value) => () => toggleWith(value),
+    openWith,
+    closeAfter,
+    toggleWith,
+    get: refIsOpen.get
+  }),[])
+  const settersWithNewRef = {...setters}
+  if (closing.val) {
+    return Object.assign(settersWithNewRef, {isOpen: isOpen.val, closing: closing.val})
+  } else {
+    Object.defineProperties(settersWithNewRef, {
+      isOpen: {
+        enumerable: true,
+        get: isOpen.get
+      },
+      closing: {
+        enumerable: true,
+        get: closing.get
+      }
+    })
+    return settersWithNewRef
+  }
+}
+
+export const useToggle = (startWith, callback,key) => useToggleInternal(startWith, useCallState, callback,key)
+export const useRefToggle = (startWith) => useToggleInternal(startWith, useRefState)

package/src/hooks/useUpdateEffect.js

@@ -0,0 +1,14 @@
+import React, {useRef, useEffect} from 'react'
+
+export const useUpdateEffect = (effect,inputs) => {
+
+  const pastFirstTime = useRef()
+
+  useEffect(() => {
+    if (pastFirstTime.current) {
+      return effect()
+    } else {
+      pastFirstTime.current = true
+    }
+  },inputs)
+}

package/src/hooks/useUpdateOnResize.jsx

@@ -0,0 +1,14 @@
+import {useEffect} from 'react'
+import {useForceUpdate} from './useForceUpdate'
+import _ from 'lodash/fp'
+
+export const useUpdateOnResize = (debounceInterval = 200) => {
+  const update = useForceUpdate()
+  useEffect(() => {
+    const trigger = _.debounce(debounceInterval, update)
+    window.addEventListener('resize', trigger)
+    return () => {
+      window.removeEventListener('resize', trigger)
+    }
+  },[])
+}

package/src/hooks/useWithTransition.jsx

@@ -0,0 +1,14 @@
+import {startTransition, useEffect, useState} from "react";
+
+
+export const useWithTransition = (value) => {
+  const [state,setState] = useState(value)
+
+  useEffect(() => {
+    startTransition(() => {
+      setState(value)
+    })
+  },[value])
+
+  return state
+}

package/src/hooks/willUseLayers.jsx

@@ -0,0 +1,42 @@
+import React, {useState, useCallback} from 'react'
+import {willUseSharedCallback} from './willUseSharedCallback'
+import {callIfFunction} from '@startlibs/utils'
+
+
+export const willUseLayers = (useEffect = React.useEffect) => {
+  const [useRegisterSharedCallback,callGroup,getSize] = willUseSharedCallback(useEffect)
+  const useLayer = ({onFirst, onEmpty, onTop, onRemove} = {}, listener) => {
+
+    const resetIndex = useCallback(() => {
+      setIndex(getIndex())
+      if (getIndex()+1 === getSize()) {
+        callIfFunction(onTop,getIndex)
+      }
+    },[])
+
+    const getIndex = useRegisterSharedCallback(resetIndex, listener)
+    const [index,setIndex] = useState(getIndex())
+
+    useEffect(() => {
+      if (getIndex() === 0) {
+        callIfFunction(onFirst)
+      }
+      resetIndex()
+      return () => {
+        callIfFunction(onRemove,getSize())
+        if (getSize() === 0) {
+          callIfFunction(onEmpty)
+        }
+        callGroup()
+      }
+    },[])
+
+    return [index,{
+      isFirst: ()=> getIndex() === 1,
+      isTop: () => getIndex() === getSize()-1,
+      isEmpty: () => getSize() === 0,
+      getSize: () => getSize()
+    }]
+  }
+  return [useLayer,getSize]
+}

package/src/hooks/willUseSharedCallback.jsx

@@ -0,0 +1,60 @@
+import React, {useRef} from 'react'
+
+
+const callList = (list, firstArg, ...args) => list.map(({current}) => typeof firstArg === 'function' ? firstArg(current) : current(firstArg,...args))
+
+export const willUseSharedCallback = (useEffect = React.useEffect) => {
+  let mountedCallbacks = []
+  let listenerCallbacks = []
+  const remove = (ref) => mountedCallbacks = mountedCallbacks.filter(_ => _ !== ref)
+  const add = (ref) => mountedCallbacks = mountedCallbacks.concat([ref])
+  const get = () => mountedCallbacks
+
+  const removeListener = (ref) => listenerCallbacks = listenerCallbacks.filter(_ => _ !== ref)
+  const addListener = (ref) => listenerCallbacks = listenerCallbacks.concat([ref])
+  const getListeners = (ref) => listenerCallbacks
+
+  const lastCall = {current:null,index:0}
+
+  const call = (...args) => {
+    const resp = callList(get(), ...args)
+    callList(getListeners(), ...args)
+    lastCall.current = args
+    lastCall.index++
+    return resp
+  }
+  const getSize = () => get().length
+
+  const useRegister = (callback, listener = false) => {
+    const ref = useRef(callback)
+    if (ref.current !== callback) {
+      ref.current = callback
+    }
+    const lastCallIndex = lastCall.index
+    useEffect(() => {
+      if (!ref.current) { return }
+      if (listener) {
+        addListener(ref)
+      } else {
+        add(ref)
+        if (lastCallIndex !== lastCall.index && lastCall.current) {
+          callList([ref],...lastCall.current)
+        }
+      }
+      return () => {
+        if (listener) {
+          removeListener(ref)
+        } else {
+          remove(ref)
+        }
+      }
+    }, [])
+    return () => get().indexOf(ref)
+  }
+
+  return [
+    useRegister,
+    call,
+    getSize
+  ]
+}

package/src/hooks/willUseSharedState.jsx

@@ -0,0 +1,34 @@
+import React, {useState} from 'react'
+import {callIfFunction, ifUndefined} from '@startlibs/utils'
+import {willUseSharedCallback} from './willUseSharedCallback'
+
+const notDefined = {}
+
+export const willUseSharedState = (initialValue) => {
+  const [useRegisterGroupCallback,callGroup,getSize] = willUseSharedCallback()
+  let sharedValue = ifUndefined(initialValue,notDefined)
+
+  const setGroupState = (newValue) => {
+    sharedValue = callIfFunction(newValue,sharedValue)
+    callGroup(sharedValue)
+  }
+
+  const refState = () => {
+    useRegisterGroupCallback()
+    return [()=>sharedValue,setGroupState]
+  }
+
+  const valueState = (defaultValue) => {
+    const prevValue = sharedValue !== notDefined ? sharedValue : defaultValue
+    if (prevValue === defaultValue) {
+      sharedValue = defaultValue
+    }
+    const [value, setValue] = useState(prevValue)
+    useRegisterGroupCallback(setValue)
+    return [value,setGroupState]
+  }
+  const clear = () => {
+    sharedValue = notDefined
+  }
+  return [valueState,refState,setGroupState,()=>sharedValue,clear]
+}

package/src/hooks/willUseSpreadState.jsx

@@ -0,0 +1,103 @@
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {_s, formatPath} from '@startlibs/utils'
+import _ from 'lodash/fp'
+import {useCatalogManager, useConsumerCatalog} from './useConsumerCatalog'
+import {useIsUnmounted} from './useIsUnmounted'
+import {useRefState} from './useRefState'
+
+const updateAllInputsState = (inputs, values) => {
+  const deferedUndefined = []
+  inputs.forEach((input) => {
+    const [setValue, selector] = input
+    const newValue = selector(values)
+    if (newValue === undefined) {
+      deferedUndefined.push([setValue,newValue])
+    } else {
+      setValue(newValue)
+    }
+  })
+  deferedUndefined.forEach(([set,value])=> set(value))
+}
+
+const pathSelector = (path) => _s.get(path || [])
+const parsePathOrSelector = (pathOrSelector) => {
+  const isNotSelector = typeof pathOrSelector !== 'function'
+  if (isNotSelector) {
+    return [formatPath(pathOrSelector), pathSelector(pathOrSelector)]
+  } else {
+    return ['', pathOrSelector]
+  }
+}
+export const willUseSpreadState = (defaultContextValue,options = {}) => {
+
+  const Context = React.createContext(defaultContextValue)
+  const EMPTY_GLOBAL = {}
+  let prevInitState = EMPTY_GLOBAL
+  let globalState = EMPTY_GLOBAL
+  const getGlobalState = (key) => _.isString(key) || _.isArray(key) ? _.get(key,globalState) : globalState
+
+  const useProvideSpreadState = (initState, setCallback) => {
+    const [consumerList, manager] = useConsumerCatalog((input) => updateAllInputsState([input], state.get()))
+    const state = useRefState(initState, setCallback)
+
+    if (options.initRefCheck) {
+      if (prevInitState !== initState) {
+        globalState = initState
+      }
+      prevInitState = initState
+    }
+
+    if (globalState === EMPTY_GLOBAL) {
+      globalState = initState
+    }
+    useEffect(() => {
+      globalState = state.get()
+    },[])
+
+    const setState = (newState, fastPath, config) => {
+      // console.log("Fastpath noop:"+fastPath)
+      state.set(newState, config)
+      globalState = state.get()
+      updateAllInputsState(consumerList(), state.get())
+    }
+    const contextValue = useMemo(() => [state.get, setState, manager], [])
+
+    return [Context.Provider, contextValue, [state.get, setState]]
+  }
+
+  const useSpreadState = (pathOrSelector, inputs) => {
+    const [getSpreadState, setSpreadState, manager] = useContext(Context)
+    const [path, selector] = parsePathOrSelector(pathOrSelector)
+    const pathOrInput = [path] || inputs || []
+    const [value, setValue] = useState(selector(getSpreadState()))
+
+    const isUnmounted = useIsUnmounted()
+
+    const currentPath = useRefState(path)
+    if (path !== currentPath.get()) {
+      /* when path changes, the consumerCatalogCallback will update the new value
+      *  another solution would be to call setValue here directly
+      *  the return value will still be the old, but will be changed before render, just like getDerivedStateFromProps
+      *
+      *  if there's a need for the return value to be the same, the value or, if enters here new value,
+      *  can be returned in an temp variable
+      * */
+      currentPath.set(path)
+    }
+
+    const input = useMemo(() => [(v) => {
+      /* noop for elements that may be unregistered while looping through consumerList */
+      if (path === currentPath.get() && !isUnmounted()) {
+        setValue(v)
+      }
+    }, selector], pathOrInput)
+
+    useCatalogManager(manager, input)
+    const setState = useCallback((v) => setSpreadState((_.isFunction(v) ? (pathOrSelector === undefined ? () => v : _.update) : _.set)(path, v), path), pathOrInput)
+    const getValue = () => selector(getGlobalState())
+    return [value, setState, getValue]
+  }
+
+
+  return [useProvideSpreadState, useSpreadState, Context, getGlobalState]
+}

package/src/index.js

@@ -0,0 +1,32 @@
+export * from './StartlibsProvider'
+export * from './hooks/willUseLayers'
+export * from './hooks/willUseSharedCallback'
+export * from './hooks/willUseSharedState'
+export * from './hooks/willUseSpreadState'
+export * from './SlotFill'
+export * from './hocs/consumes'
+export * from './hocs/withDialogError'
+export * from './hocs/withGroupEvent'
+export * from './hocs/WithRef'
+export * from './hocs/WithLazyResource'
+export * from './hooks/useCallbackStable'
+export * from './hooks/WithEffect'
+export * from './hooks/useToggle'
+export * from './hooks/usePopupToggle'
+export * from './hooks/useCallState'
+export * from './hooks/useRefState'
+export * from './hooks/useConsumerCatalog'
+export * from './hooks/useTitle'
+export * from './hooks/useRecycleFocus'
+export * from './hooks/usePrevious'
+export * from './hooks/useIsUnmounted'
+export * from './hooks/useEnsureRef'
+export * from './hooks/useConstant'
+export * from './hooks/useForceUpdate'
+export * from './hooks/useUpdateOnResize'
+export * from './hooks/useAsyncEffect'
+export * from './hooks/useUpdateEffect'
+export * from './hooks/useRefMemo'
+export * from './hooks/useSignal'
+export * from './hooks/WithConstant'
+export * from './hooks/useWithTransition'

package/.babelrc

@@ -1,27 +0,0 @@
-// .babelrc
-{
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-flow",
-    [
-      "@babel/preset-env",
-      {
-        "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}]
-  ]
-}