@startlibs/core 1.0.7 → 1.1.0

package/src/hocs/WithLazyResource.jsx

@@ -0,0 +1,32 @@
+import React, {useReducer} from 'react'
+import _ from 'lodash/fp'
+import {ifUndefined} from '@startlibs/utils'
+
+const addExtraProp = (element, extra, override = true) => React.cloneElement(
+  element,
+  override ? {...element.props,...extra} : {...extra,...element.props},
+  element.props.children
+)
+
+export const WithLazyPlaceholder = ({value, fallback, children, forwardProps = false,...props}) => {
+  return <React.Suspense
+    fallback={React.Children.map(children(fallback,{isLoading:true}), (child) => React.isValidElement(child) ? addExtraProp(child, {isLoading: true}, false) : child)}
+  >
+    <Load value={value} children={children} forwardProps={forwardProps && props}/>
+  </React.Suspense>
+}
+
+
+export const WithLazyResource = ({value, wrap,fallback,children,forwardProps = false,...props}) => {
+
+  return (wrap || fallback !== undefined)
+    ? <React.Suspense fallback={ifUndefined(fallback,null)}><Load value={value} forwardProps={forwardProps && props} children={children}/></React.Suspense>
+    : <Load value={value} children={children} forwardProps={forwardProps && props}/>
+}
+
+const Load = ({value,children,forwardProps}) => {
+  const loaded = _.isArray(value) ? (value.forEach(v => v.promise()) || value.map(v => v.read())) : value.read()
+  const [,update] = useReducer((s) => s+1, 0)
+  const refresh = () => Promise.all(_.isArray(value) ? value.map(v => v.refresh().promise()) : [value.refresh().promise()]).then(update)
+  return forwardProps ? addExtraProp(children(loaded,{refresh,update}),forwardProps) : children(loaded, {refresh,update})
+}

package/src/hocs/WithRef.js

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react'
+
+export class WithRef extends React.Component {
+
+  constructor(props) {
+    super(props)
+    const total = props.length || props.children.length
+    const refs = new Array(total)
+    for (var i = 0; i < total; i++) {
+      refs[i] = React.createRef()
+    }
+    this.createdRefs = refs
+  }
+
+  render() {
+    const {children} = this.props
+    return children(...this.createdRefs)
+  }
+}

package/src/hocs/Wrapper.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+const valueOrDefault = (v, d) => v === undefined ? d : v
+const mergePropsAndChildren = (a, b) => ({
+  ...a, ...b,
+  children: (a.children && b.children) ?
+            <React.Fragment>{a.children}{b.children}</React.Fragment> : (a.children || b.children)
+})
+
+const wrapIf = (WrapperWithRenderProps, testKeyOrFn, defaultWrapPropsOrFn) => (functionAsChild) => (props) => {
+  const test = typeof testKeyOrFn === 'string' ? props[testKeyOrFn] : testKeyOrFn(props)
+  if (test) {
+    const defaultWrapProps = typeof defaultWrapPropsOrFn === "function" ? defaultWrapPropsOrFn(props) : defaultWrapPropsOrFn
+    if (WrapperWithRenderProps.hasRenderProps) {
+      const Wrapper = WrapperWithRenderProps.Wrapper
+      return <Wrapper {...defaultWrapProps} {...props} ref={undefined}>{(extra) => functionAsChild(mergePropsAndChildren(props, extra))}</Wrapper>
+    } else {
+      return <WrapperWithRenderProps {...defaultWrapProps} {...props} ref={undefined}>{functionAsChild(props)}</WrapperWithRenderProps>
+    }
+  } else {
+    return functionAsChild(props)
+  }
+}
+
+
+const wrapAsDefault = (Wrapper, key, defaultWrapProps) => wrapIf(Wrapper, (props) => valueOrDefault(props[key], true), defaultWrapProps)
+
+const singleWrap = (Wrapper, defaultWrapProps) => wrapIf(Wrapper, () => true, defaultWrapProps)
+
+const wraps = (...autoWrappers) => (Component) => autoWrappers.reduceRight(
+  (acc, autoWrapper) => autoWrapper(acc),
+  (props) => <Component {...props}/>
+)
+
+export const wrap = wraps
+
+wrap.renderProps = (Wrapper) => ({hasRenderProps:true,Wrapper})
+wrap.if = wrapIf
+wrap.always = singleWrap
+wrap.asDefault = wrapAsDefault

package/src/hocs/consumes.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const propsOrConsume = (prop, Consumer,childrenAsFunction) => prop ? childrenAsFunction(prop) : <Consumer>{childrenAsFunction}</Consumer>
+
+const addConsumers = (Component,obj) =>
+  Object.entries(obj)
+    .reduce(
+      (acc, [propKey, Consumer]) => (props) =>
+        propsOrConsume(props[propKey],Consumer,v => acc({[propKey]: v, ...props})),
+      (props) => <Component {...props} />
+    )
+
+export const consumes = (obj) => (Component) => {
+  const withConsumers = addConsumers(Component,obj)
+  return (props) => withConsumers(props)
+}

package/src/hocs/withDialogError.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const withDialogError = (Dialog) => {
+  const ErrorBoundedComponent = React.forwardRef((props,ref) => {
+    return <Dialog ref={ref} {...props}/>
+
+    // const ErrorBoundary = __internals('ErrorBoundary')
+    /*return (
+      <ErrorBoundary Error={props.Error || __internals('DialogError')} closeDialog={props.closeDialog}>
+        <Dialog {...props}/>
+      </ErrorBoundary>
+    )*/
+  })
+  // ErrorBoundedComponent.contextTypes = {startlibs:()=>null}
+  return ErrorBoundedComponent
+}

package/src/hocs/withGroupEvent.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import mitt from 'mitt'
+
+export const GroupEventFactory = () => {
+  let emitter = mitt()
+
+  class WithGroupEvent extends React.Component {
+    componentDidMount() {
+      emitter.on('*', this.processEvent)
+    }
+
+    componentWillUnmount() {
+      emitter.off('*',this.processEvent)
+    }
+
+    events = {}
+
+    processEvent = (type, event) => {
+      (this.events[type] || []).forEach(c => c(event))
+    }
+
+    groupEventProps = {
+      on: (type,callback) => {
+        this.events[type] = (this.events[type] || []).concat(callback)
+      },
+      off: (type,callback) => {
+        this.events[type] = (this.events[type] || []).filter(e=>e!==callback)
+      },
+      emit: emitter.emit
+    }
+
+    render() {
+      return this.props.children(this.groupEventProps)
+    }
+  }
+  return WithGroupEvent
+}
+
+export const withGroupEvent = (Component) => {
+  const WithGroupEvent = GroupEventFactory()
+  return React.forwardRef((props,ref) => <WithGroupEvent>{(groupEvent) => <Component {...props} ref={ref} groupEvent={groupEvent}/>}</WithGroupEvent>)
+}
+

package/src/hooks/WithConstant.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import {useLazyConstant} from './useConstant'
+
+export const WithConstant = ({inputs=[],value,children}) => {
+  const constant = useLazyConstant(value,inputs)
+  return children(constant)
+}

package/src/hooks/WithEffect.jsx

@@ -0,0 +1,6 @@
+import React, {useEffect} from 'react'
+
+export const WithEffect = ({inputs=[],children}) => {
+  useEffect(children,inputs)
+  return null
+}

package/src/hooks/useAsyncEffect.jsx

@@ -0,0 +1,11 @@
+import React, {useEffect} from 'react'
+import {callIfFunction} from '@startlibs/utils'
+
+export const useAsyncEffect = (fn,args) => {
+  useEffect(() => {
+    const result = fn()
+    return () => {
+      result.then(end => callIfFunction(end))
+    }
+  },args)
+}

package/src/hooks/useCallState.js

@@ -0,0 +1,15 @@
+import React, {useMemo, useState} from 'react'
+import {_s} from '@startlibs/utils'
+
+const isPath = (path) => typeof path === 'string' || typeof path === 'number' || Array.isArray(path)
+
+const getter = (value) => path => isPath(path) ? _s.get(path, value) : value
+
+export const useCallState = (defaultValue, setCallback) => {
+  const [val, setValue] = useState(defaultValue)
+
+  return useMemo(() => {
+    const get = () => val
+    return {get, val, set: setValue}
+  }, [val])
+}

package/src/hooks/useCallbackStable.jsx

@@ -0,0 +1,12 @@
+import React, {useInsertionEffect} from 'react'
+
+export const useCallbackStable = (fn) => {
+  const ref = React.useRef([fn, (...args) => ref[0](...args)]).current;
+  // Per Dan Abramov: useInsertionEffect executes marginally closer to the
+  // correct timing for ref synchronization than useLayoutEffect on React 18.
+  // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
+  useInsertionEffect(() => {
+    ref[0] = fn;
+  });
+  return ref[1];
+}

package/src/hooks/useConstant.js

@@ -0,0 +1,20 @@
+import React, {useRef} from 'react'
+import {callIfFunction} from '@startlibs/utils'
+
+const not_defined = {}
+
+export const useConstant = (value) => {
+  const ref = useRef(not_defined)
+  if (ref.current === not_defined) {
+    ref.current = value
+  }
+  return ref.current
+}
+
+export const useLazyConstant= (value) => {
+  const ref = useRef(not_defined)
+  if (ref.current === not_defined) {
+    ref.current = callIfFunction(value)
+  }
+  return ref.current
+}

package/src/hooks/useConsumerCatalog.jsx

@@ -0,0 +1,21 @@
+import React, {useEffect, useMemo} from 'react'
+import {callMany} from '@startlibs/utils'
+import {useRefState} from './useRefState'
+
+export const useConsumerCatalog = (mountCallback,unmountCallback) => {
+  const elements = useRefState([])
+
+  const register = callMany((element) => elements.set((elements) => elements.concat([element])), mountCallback)
+  const unregister = callMany((element) =>  elements.set((elements) => elements.filter(_ => _ !== element)), unmountCallback)
+
+  const manager = useMemo(()=> ({register,unregister}), [])
+
+  return [elements.get,manager]
+}
+
+export const useCatalogManager = ({register,unregister},ref) => {
+  useEffect(() => {
+    register(ref)
+    return () => unregister(ref)
+  },[ref])
+}

package/src/hooks/useEnsureRef.js

@@ -0,0 +1,6 @@
+import React, {useRef} from 'react'
+
+export const useEnsureRef = (forwardedRef) => {
+  const ref = useRef()
+  return forwardedRef || ref
+}

package/src/hooks/useForceUpdate.jsx

@@ -0,0 +1,16 @@
+import {useState} from 'react'
+import {willUseSharedState} from './willUseSharedState'
+
+export const useForceUpdate = () => {
+  const [value, setValue] = useState(0); // integer state
+  return () => setValue(value => value + 1); // update the state to force render
+}
+
+export const willUseForceUpdate = () => {
+  const [useValue,,set] = willUseSharedState()
+  const useForceUpdate = () => {
+    const [v,setV] = useValue(0)
+    return () => setV(value => value + 1)
+  }
+  return [useForceUpdate,() => set(value => value + 1)]
+}

package/src/hooks/useIsUnmounted.jsx

@@ -0,0 +1,12 @@
+import {useEffect, useRef} from 'react'
+
+export const useIsUnmounted = () => {
+  const unmounted = useRef(false)
+
+  useEffect(() => {
+    unmounted.current = false
+    return () => { unmounted.current = true }
+  }, [])
+
+  return () => unmounted.current
+}

package/src/hooks/usePopupToggle.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import {useToggle} from './useToggle'
+import {callIfFunction} from '@startlibs/utils'
+
+let prevOpenToggleClose = () => {}
+let sameTick = false
+
+export const clearPopups = () => {
+  if (!sameTick) {
+    prevOpenToggleClose()
+    prevOpenToggleClose = () => {}
+  }
+}
+
+export const usePopupToggle = (startWith,callback) => {
+  const toggle = useToggle(startWith,(v,prev) => {
+    const result = callIfFunction(callback,v,prev)
+    if (result === false) { return false}
+    if (v !== false && prevOpenToggleClose !== toggle.close) {
+      prevOpenToggleClose()
+      prevOpenToggleClose = toggle.close
+      sameTick = true
+      window.setTimeout(()=>sameTick = false, 1)
+    }
+    if (v === false) {
+      prevOpenToggleClose = () => {}
+    }
+  })
+  return toggle
+}

package/src/hooks/usePrevious.jsx

@@ -0,0 +1,27 @@
+import {useEffect, useRef} from 'react'
+
+export function usePrevious(value,initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export function usePreviousUnique(value,initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => {
+    if (value !== ref.current) {
+      ref.current = value;
+    }
+  });
+  return ref.current;
+}
+
+export function usePreviousForEffect(value,initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => () => {
+    ref.current = value;
+  },[value]);
+  return ref.current;
+}

package/src/hooks/useRecycleFocus.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styled from 'styled-components'
+
+styled
+
+const TabFocus = styled.div`width:0;height:0;position:absolute;`
+export const useRecycleFocus = (ref, enabled = true,lastIndex) => {
+
+  const recycle = i => (e) => {
+    if (!enabled || !ref.current) {
+      return
+    }
+    const nextTab = ref.current.querySelectorAll('[tabindex]')
+    if (nextTab) {
+      if (i<0) {
+        console.log(nextTab[1])
+        nextTab[1].focus()
+      } else {
+        console.log(nextTab[nextTab.length - 2])
+        nextTab[nextTab.length - 2].focus()
+      }
+    }
+  }
+
+  return [<TabFocus tabIndex={1} onFocus={recycle(0)}></TabFocus>,<TabFocus tabIndex={lastIndex || 1} onFocus={recycle(-1)}></TabFocus>]
+}

package/src/hooks/useRefMemo.jsx

@@ -0,0 +1,10 @@
+import React, {useRef} from 'react'
+import  {callIfFunction} from '@startlibs/utils'
+
+export const useRefMemo = (value) => {
+  const ref = useRef(value)
+  if (ref.current !== value) {
+    ref.current = callIfFunction(value)
+  }
+  return ref
+}

package/src/hooks/useRefState.js

@@ -0,0 +1,26 @@
+import React, {useMemo, useRef} from 'react'
+import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
+
+const isPath = (path) => typeof path === 'string' || typeof path === 'number' || Array.isArray(path)
+
+const getter = (value) => path => path !== "" && isPath(path) ? _s.get(path,value) : value
+
+const uninitialized = {}
+
+export const useRefState = (defaultValue, setCallback) => {
+  const ref = useRef(uninitialized)
+  if (ref.current === uninitialized) {
+    ref.current = callIfFunction(defaultValue)
+  }
+  return useMemo(() => {
+    const get = (path) => getter(ref.current)(path)
+    const set = (v, config) => {
+      const prev = ref.current
+      ref.current = callIfFunctions(v, () => get())
+      if (prev !== ref.current && (!config || !config.ignoreCallback)) {
+        callIfFunction(setCallback, prev, ref.current)
+      }
+    }
+    return {get, set}
+  }, [])
+}

package/src/hooks/useSignal.jsx

@@ -0,0 +1,193 @@
+import React, {startTransition, use, useMemo, useCallback, useContext, useEffect, useRef, useState} from 'react'
+import {useConstant, useLazyConstant} from './useConstant'
+import {useForceUpdate} from './useForceUpdate'
+import {_s, callIfFunction} from '@startlibs/utils'
+import _ from 'lodash/fp'
+
+const IS_ARRAY_ITEMS_EQUALS = (a,b) => a.length === b.length && !a.some((x, i) => !Object.is(x, b[i]));
+const IS_DEPS_EQUALS = (a = [],b = []) => Object.is(a,b) || IS_ARRAY_ITEMS_EQUALS(a,b)
+
+const SHALLOW_IS_EQUAL = (a,b) => Object.is(a,b) || (_.isArray(a) && _.isArray(b) && IS_ARRAY_ITEMS_EQUALS(a,b))
+
+const EMPTY_DEPS = []
+const EMPTY_VALUE = {"EMPTY":true}
+export const useUpdateSignal = (initialValue) => {
+  const value = useRef(initialValue)
+  value.current = initialValue
+  return useLazyConstant(() => {
+    let registered = []
+    const register = (selector = _.identity, isEqual = SHALLOW_IS_EQUAL, withTransition = false) => {
+      const selectorRef = useRef()
+      selectorRef.current = selector
+      const update = useForceUpdate()
+      const lastValueRef = useRef(_s.select(selectorRef.current, value.current))
+      useEffect(() => {
+        const item = [update, selectorRef, isEqual, lastValueRef, withTransition]
+        registered = [...registered, item]
+        return () => {
+          registered = registered.filter(v => v !== item)
+        }
+      }, [])
+      if (value.current === EMPTY_VALUE) {
+        return EMPTY_VALUE
+      }
+      return lastValueRef.current
+    }
+    const call = (...args) =>
+      registered.forEach(([fn, selectorRef, isEqual, lastValueRef, withTransition]) => {
+        const nextValue = _s.select(selectorRef.current, ...args)
+        if (!callIfFunction(isEqual,nextValue,lastValueRef.current)) {
+          lastValueRef.current = nextValue
+          if (withTransition) {
+            (withTransition === true ? startTransition : withTransition)(() => fn(nextValue))
+          } else {
+            fn(nextValue)
+          }
+        }
+      })
+    return [register, call]
+  })
+}
+
+const useSelectorSignal = (value) => {
+  const prevValue = useRef(value)
+  const [_register, call] = useUpdateSignal(value)
+  const register = useCallback((selector, deps, isEqual, withTransition) => {
+    const prevDeps = useRef(EMPTY_DEPS)
+    if (prevDeps.current !== EMPTY_DEPS  && !IS_DEPS_EQUALS(deps, prevDeps.current)) {
+      call(prevValue.current)
+    }
+    prevDeps.current = deps
+    return _register(selector, isEqual, withTransition)
+  }, [])
+  useEffect(() => {
+    if (prevValue.current !== value) {
+      prevValue.current = value
+      call(value)
+    }
+  },[value])
+  return register
+}
+
+const updateStateFn = (path,update) => state =>
+  path
+    ? _.update(path,(v) => callIfFunction(update,v),state)
+    : callIfFunction(update,state)
+
+
+export const createStatefulContext = (v,defaultIsEqual) => {
+  const Ctx = React.createContext(v)
+  const Provider = ({value, setValue, utils,children}) => {
+    const register = useSelectorSignal(value)
+    const v = useLazyConstant(() => [register,setValue, utils])
+    return <Ctx.Provider value={v}>{children}</Ctx.Provider>
+  }
+  const useCtx = () => useContext(Ctx)
+
+  const useSelectValue = (selector,deps,defaultIsEqual, withTransition) => {
+    const [useRegister] = useCtx()
+    if (deps === true) {
+      return useRegister(selector,[],undefined,startTransition)
+    } else if (_.isPlainObject(deps)) {
+      return useRegister(selector,deps.deps,deps.isEqual, deps.withTransition)
+    } else {
+      return useRegister(selector,_.isArray(deps) ? deps : deps?.deps,defaultIsEqual, withTransition)
+    }
+  }
+  const useSetValue = (path) => {
+    const [reg,set ] = useCtx()
+    return useConstant((update) => set(updateStateFn(path,update)))
+  }
+  const useUtils = (path,deps) => {
+    const [reg,set, utils ] = useCtx()
+    return utils
+  }
+  return [Provider,[useSelectValue, useSetValue, useUtils, useCtx]]
+}
+
+export const createSelfStatefulContext = (v,defaultIsEqual) => {
+  const [Provider,[useSelectValue, useSetValue, useUtils, useCtx]] = createStatefulContext(v,defaultIsEqual)
+
+  const StateFullProvider = ({init = {}, utils,children}) => {
+    const [state,setState] = useState(init)
+    return <Provider value={state} setValue={setState} utils={utils}>
+      {children}
+    </Provider>
+  }
+  return [StateFullProvider,[useSelectValue, useSetValue, useUtils, useCtx]]
+}
+
+
+export const createLazyStatefulContext = (toPromise,defaultIsEqual) => {
+  const [Provider,[useSelectValue, useSetValue, useUtils, useCtx]] = createStatefulContext(EMPTY_VALUE,defaultIsEqual)
+  const useSelectLazyValue = (selector,deps,isEqual = defaultIsEqual,withTransition) => {
+    const value = useSelectValue(selector,deps,isEqual,withTransition)
+    const utils = useUtils()
+    if (value === EMPTY_VALUE) {
+      const loadedValue = use(utils._lazyValue())
+      return _s.select(selector,loadedValue)
+    }
+    return value
+  }
+  const useSetLazyValue = (path) => {
+    const [,setValue,utils] = useCtx()
+    return useConstant((update) => {
+      return setValue(value =>
+        value === EMPTY_VALUE
+          ? updateStateFn(path,update)(utils.loadedValue())
+          : updateStateFn(path,update)(value)
+      )
+    })
+  }
+
+  const useValuePromise = (selector,deps,isEqual,withTransition) => {
+    const value = useSelectValue(selector,deps,isEqual,withTransition)
+    const utils = useUtils()
+    return useCallback(() => {
+      if (value === EMPTY_VALUE) {
+        return utils._lazyValue().then(v => console.log(v,_s.select(selector,v),selector) || _s.select(selector,v))
+      }
+      return new Promise(value)
+    },[value,deps])
+  }
+  const LazyStateFullProvider = ({value, utils,children, fallback = null}) => {
+    const [state,setState] = useState(EMPTY_VALUE)
+    const promise = useRef()
+    const loadedValue = useRef()
+    const lazyUtils = useMemo(() => ({
+      ...utils,
+      _lazyValue: () => {
+        promise.current ??= callIfFunction(toPromise || _.identity,value)
+        promise.current.then((value) => {
+          loadedValue.current = value
+        })
+        return promise.current
+      },
+      loadedValue: () => loadedValue.current
+    }),[value,utils])
+    return <Provider value={state} setValue={setState} utils={lazyUtils}>
+      {
+        fallback===false
+          ? children
+          : <React.Suspense fallback={fallback}>{children}</React.Suspense>
+      }
+    </Provider>
+  }
+
+  return [LazyStateFullProvider,[useSelectLazyValue, useSetLazyValue, useValuePromise]]
+}
+
+export const createSelectableContext = (v) => {
+  const [Provider,[useSelectValue]] = createStatefulContext(v)
+  return [Provider,useSelectValue]
+}
+export const createTriggerUpdateContext = (v) => {
+  const [Provider,[useSelectValue]] = createStatefulContext(v)
+  const TriggerProvider = React.forwardRef(({children},ref) => {
+    const [v,setV] = useState(0)
+    const trigger = React.useMemo(() => () => setV(v => v+1),[v])
+    React.useImperativeHandle(ref, () => ({trigger}) , [])
+    return <Provider value={trigger}>{children}</Provider>
+  })
+  return [TriggerProvider,useSelectValue]
+}

package/src/hooks/useTitle.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import {willUseLayers} from './willUseLayers'
+
+const [useTitleLayers] = willUseLayers()
+
+export const useTitle = (title) => {
+  const layer = useTitleLayers({
+    onTop: () => {
+      document.title = title
+    }
+  })
+}