@startlibs/form 1.0.11 → 1.1.0

package/src/EditableBox.jsx

@@ -0,0 +1,502 @@
+import React, {forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
+import _ from 'lodash/fp'
+import {
+  StartlibsConsumer,
+  useConsumerCatalog,
+  useLazyConstant,
+  usePopupToggle,
+  useRefState,
+  useToggle,
+  useRefMemo
+} from '@startlibs/core'
+import {Button, ContextMenu, fixDoubledLastMarginBottom, Li, willUseFlipSwitch} from '@startlibs/components'
+import {Errors} from './Errors'
+import {FormContext} from './Form'
+import {FormValue} from './FormValue'
+import {PathContext} from './enhanceInput'
+import {useDraftConfirmation} from './useDraftConfirmation'
+import styled from 'styled-components'
+import {_s, callIfFunction, formatPath, lazyValue, stopPropagation} from '@startlibs/utils'
+
+const addRootPath = (errorRootPath, errors, path) => {
+  const rootPath = [].concat(errorRootPath || [], path)
+  return Object.keys(errors).reduce((acc, error) => {
+    acc[rootPath.concat(error).join('.')] = errors[error]
+    return acc
+  }, {})
+}
+
+const EditableContext = React.createContext({})
+
+export const ConfirmEditableBoxes = forwardRef(({children, itemValidation = _.stubFalse, listValidation = () => false, transform = _.identity}, ref) => {
+
+  const submitAll = useCallback(async (withLoading) => {
+      if (withLoading) {
+        editableBoxes().forEach(_ => _.loading().open())
+      }
+      return Promise
+        .all([submitAllShared(), submitAllStandalone()])
+        .then(([shared, standalone]) => {
+          if (withLoading) {
+            editableBoxes().forEach(_ => _.loading().close())
+          }
+          return shared ? (standalone ? {shared, standalone} : shared) : standalone
+        })
+        .catch(() => withLoading && editableBoxes().forEach(_ => _.loading().close()))
+    }, []
+  )
+
+  const [confirmDraftContent, draftToggle, draftConfirmation] = useDraftConfirmation(submitAll)
+
+  useEffect(()=> draftToggle.openWith(lazyValue(() => hasModifiedBoxes())),[])
+
+  const [sharedBoxes, sharedBoxesManager] = useConsumerCatalog()
+  const [standaloneBoxes, standaloneBoxesManager] = useConsumerCatalog()
+
+  const editableBoxes = (boxes) => boxes || sharedBoxes().concat(standaloneBoxes())
+  const hasEditableBoxes = (boxes) => editableBoxes(boxes).length > 0
+
+  const provide = useMemo(() => ({
+    sharedBoxes: sharedBoxesManager,
+    standaloneBoxes: standaloneBoxesManager,
+    itemValidation,
+    transform
+  }), [])
+
+  const confirm = useCallback((cb, dialogType = 'submit-draft') => draftConfirmation(dialogType, cb), [draftConfirmation])
+  const discard = useCallback((cb) => draftConfirmation('discard-draft', cb), [draftConfirmation])
+
+
+  const modifiedEditablesPath = (boxes) => modifiedEditableBoxes(boxes).map(_ => callIfFunction(_.path))
+
+
+  const modifiedEditableBoxes = (boxes) => editableBoxes(boxes).filter(_ => _.modifiedValue()[1])
+  const hasModifiedBoxes = (boxes) => modifiedEditableBoxes(boxes).length > 0
+
+  const submitAllShared = () => {
+    if (!sharedBoxes().length) return false
+    const sharedWithForm = sharedBoxes().find(_ => _.form)
+    if (!sharedWithForm) {
+      return false
+    }
+    const {form} = sharedWithForm.props
+    const validated = modifiedEditableBoxes(sharedBoxes()).reduce(({success, errors}, box) => {
+      const index = callIfFunction(box.path)
+      const [newItem, wasModified] = box.modifiedValue()
+      const newErrors = wasModified ? itemValidation(newItem, index) : false
+      if (newErrors) {
+        return {
+          success,
+          errors: Object.assign({}, errors, addRootPath(form.meta.errorRootPath, newErrors, index))
+        }
+      }
+      const newProps = _s.set(index, transform(newItem, index), success)
+      return {success: newProps, errors}
+    }, {success: form.getOriginalValues(), errors: undefined})
+    if (validated.errors) {
+      form.setErrors(validated.errors)
+      return Promise.resolve(validated)
+    }
+    return form.submitForm(validated.success)
+  }
+
+  const submitAllStandalone = () => {
+    if (!standaloneBoxes().length) return false
+    const edited = standaloneBoxes()
+      .filter(_ => _.form.hasChanged)
+    const notValidated = edited.filter(_ => !_.form.validate())
+    if (notValidated.length) {
+      return Promise.reject({errors: notValidated})
+    } else {
+      return Promise
+        .all(edited.map(_ => _.handleSubmit()))
+        .then(boxes => {
+          const boxesAndResult = boxes
+            .map((_, i) => [edited[i], _, i])
+          boxesAndResult.filter(([edited, result, i]) => !result.errors).forEach(([_]) => _.close())
+          const failed = boxesAndResult.filter(([edited, result, i]) => result.errors)
+          if (failed.length) {
+            return {errors: failed}
+          } else {
+            return {success: boxes}
+          }
+        })
+    }
+  }
+
+  const methods = useMemo(() => ({
+    confirm, discard, submitAll, hasEditableBoxes, editableBoxes, modifiedEditablesPath
+  }), [draftConfirmation])
+
+  useImperativeHandle(ref, () => methods, [methods])
+
+  return <>
+    {confirmDraftContent}
+    <EditableContext.Provider value={provide}>
+      {callIfFunction(children, methods)}
+    </EditableContext.Provider>
+  </>
+})
+
+const FlipDiv = ({useAnimation, ...props}) => {
+  const ref = useRef()
+  useAnimation(ref)
+  return <div {...props} ref={ref}/>
+}
+
+const EditableBoxPresentation = styled(forwardRef((
+  {
+    view = (value) => value === undefined || value === null ? '' : String(value),
+    tabIndex = 1,
+    onClose,
+    editingIsOpen,
+    onOpen,
+    onDelete,
+    onCancel,
+    onSave,
+    onMouseDown,
+    onTouchStart,
+    resetField,
+    children,
+    withDelete,
+    withContextMenu,
+    edit,
+    readOnly,
+    disabled,
+    isNew,
+    saveLabel,
+    className,
+    submitRef,
+    path
+  },
+  ref
+) => {
+  const popup = usePopupToggle()
+  const editing = useToggle(editingIsOpen)
+  const loading = useToggle()
+
+  const form = useContext(FormContext)
+
+  const closeBox = (params) => {
+    callIfFunction(onClose,params)
+    editing.close()
+  }
+
+  useEffect(() => {
+    return () => callIfFunction(onClose, true)
+  }, [])
+
+  useEffect(() => {
+    if (editing.isOpen) {
+      callIfFunction(onOpen)
+    }
+  }, [editing.isOpen])
+
+  useImperativeHandle(ref, () => ({
+    loading,
+    closeBox,
+    handleCancel,
+    getValue
+  }))
+
+  const handleDelete = (e) => {
+    if (e) e.preventDefault()
+    onDelete()
+  }
+
+  const tryClose = (e) => {
+    if (e.key === 'Escape' && editing.isOpen) {
+      e.preventDefault()
+      e.stopPropagation()
+      handleCancel()
+    }
+  }
+
+  const handleCancel = () => {
+    onCancel(closeBox)
+  }
+
+  const onSubmit = (e) => {
+    if (e) e.preventDefault()
+    loading.wait(() => onSave().then(() => closeBox(true)).catch(()=>{}))
+  }
+
+  const getPath = (extraPath) => _s.toPath(path).concat(_s.toPath(extraPath))
+
+  const getValue = (extraPath, otherProps) => otherProps ? _s.get(getPath(extraPath), otherProps) : form.getValue(getPath(extraPath))
+  const setValue = (value, extraPath) => form.setValue(getPath(extraPath),value)
+
+  const flipAnimation = useLazyConstant(willUseFlipSwitch)
+
+  const disabledClick = readOnly || disabled
+
+  const openBox = () => {
+    editing.open()
+  }
+
+  const formattedPath = getPath()
+  return (
+    <PathContext.Provider value={formattedPath}>
+      <FlipDiv
+        key={editing.isOpen}
+        useAnimation={flipAnimation}
+        onKeyDown={tryClose}
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+        className={'editable-box ' + (!disabledClick ? 'clickable ' : '') + (editing.isOpen ? 'expanded' : 'collapsed') + ' ' + className}
+        onClick={editing.isOpen || disabledClick ? undefined : openBox}
+      >
+        {
+          !editing.isOpen && !disabledClick && !(withDelete || withContextMenu) &&
+          <Button tabIndex={tabIndex} className="edit-button" small onlyIcon icon="edit"/>
+        }
+        {
+          !editing.isOpen && !disabledClick && (withDelete || withContextMenu) &&
+          <Button tabIndex={tabIndex} className="edit-button arrow-down" small onlyIcon icon="arrow-down"
+                  onClick={stopPropagation(popup.toggle)}>
+            {
+              popup.isOpen &&
+              <ContextMenu>
+                <Li label="Editar" icon="edit-line" onClick={openBox}/>
+                {withContextMenu}
+                {withDelete && <Li label="Deletar" icon="remove" onClick={handleDelete}/>}
+              </ContextMenu>
+            }
+          </Button>
+        }
+        <form onSubmit={onSubmit}>
+          <FormValue path={formattedPath} key={formatPath(formattedPath)}>{(value) =>
+            fixDoubledLastMarginBottom(
+              editing.isOpen
+              ? edit(value, { getPath, getValue, path: formattedPath, tabIndex, setValue})
+              : view(value, { getPath, getValue, path: formattedPath })
+            )
+          }</FormValue>
+          <Errors path={formattedPath}/>
+          {
+            editing.isOpen &&
+            <div className="editable-box-footer">
+              <div>
+                {
+                  withDelete &&
+                  <Button
+                    icon="remove"
+                    hover="alert"
+                    tabIndex={tabIndex + 2}
+                    onClick={handleDelete}
+                  >
+                    Deletar
+                  </Button>
+                }
+              </div>
+              <StartlibsConsumer>{({labels}) =>
+                <div>
+                  <Button
+                    tabIndex={tabIndex + 1}
+                    onClick={handleCancel}
+                  >
+                    {labels.EditableBox.cancel}
+                  </Button>
+                  <Button
+                    buttonRef={submitRef}
+                    isLoading={loading.isOpen}
+                    highlight
+                    tabIndex={tabIndex}
+                    type="submit"
+                  >
+                    {callIfFunction(saveLabel,isNew) || (isNew ? labels.EditableBox.saveNew : labels.EditableBox.save)}
+                  </Button>
+                </div>
+              }
+              </StartlibsConsumer>
+            </div>
+          }
+        </form>
+        {children}
+      </FlipDiv>
+    </PathContext.Provider>
+  )
+}))`
+  ${props => props.disabled && "opacity: 0.7;"}
+`
+
+const SharedEditableTabBox = ({path,isSingle, checkIsNew = (a,b) => a!==b, ...props}) => {
+
+  const editableGroup = useContext(EditableContext)
+  const form = useContext(FormContext)
+
+  const isNew = useRefState(() => isSingle ? false : checkIsNew(_s.get(path, form.getOriginalValues()),form.getValue(path)))
+  const internalBox = React.useRef()
+  const pathRef = useRefMemo(path)
+
+  const loading = () => internalBox.current.loading
+  const modifiedValue = () => {
+    const oldItem = internalBox.current.getValue(undefined, form.getOriginalValues())
+    const newItem = internalBox.current.getValue()
+    return newItem !== oldItem ? [newItem, true] : [oldItem, false]
+  }
+
+  const selfRef = useRef({
+    loading,path:() => pathRef.current,form,modifiedValue
+  })
+
+  const resetField = () => form.resetField([].concat(path))
+
+  const onClose = (skipReset) => {
+    if (!skipReset) {
+      resetField()
+    }
+    form.clearErrors(_s.toPath(path))
+    editableGroup.sharedBoxes.unregister(selfRef.current)
+    isNew.set(false)
+  }
+
+  const onOpen = () => {
+    editableGroup.sharedBoxes.register(selfRef.current)
+  }
+
+
+  const validate = (props, path) => {
+    const errors = editableGroup.itemValidation(props, path)
+    if (errors) {
+      form.setErrors(addRootPath(form.getMeta('errorRootPath'), errors, path))
+    }
+    return errors
+  }
+
+  const onSave = () => {
+    const [newItem, wasModified] = modifiedValue()
+    if (!wasModified) {
+      internalBox.current.closeBox()
+      return Promise.resolve({})
+    }
+    const errors = validate(newItem, path)
+    if (errors) {
+      return Promise.reject({errors})
+    }
+    const transform = editableGroup.transform
+    if (isNew.get()) {
+      const arrayPath = _s.toPath(path)
+      const index = arrayPath.slice(-1)
+      const newProps = _s.update(arrayPath.slice(0,-1),_s.insertAt(index, transform(newItem, path)), form.getOriginalValues())
+      return form.submitForm(newProps)
+    } else {
+      const newProps = _s.set(path, transform(newItem, path), form.getOriginalValues())
+      return form.submitForm(newProps)
+    }
+  }
+
+  const onDelete = () => {
+    if (isNew.get()) {
+      onCancel()
+      return Promise.resolve({success: true})
+    }
+    const original = form.getOriginalValues()
+    const newProps = _s.unsetOrRemoveAt(path, original)
+    if (_s.get(_s.toPath(path).slice(0, -1), original).length !== _s.get(_s.toPath(path).slice(0, -1), newProps).length) {
+      internalBox.current.loading.open()
+      const fetch = form.submitForm(newProps)
+      fetch.then(({errors}) => {
+        internalBox.current.loading.close()
+        if (!errors) {
+          form.setValues(_s.unsetOrRemoveAt(path))
+        }
+      }).catch(() => internalBox.current.loading.close())
+      return fetch
+    } else {
+      internalBox.current.handleCancel()
+      return Promise.resolve({success: true})
+    }
+  }
+
+  const onCancel = (close) => {
+    const lastKey = Array.isArray(path) ? path.slice(-1)[0] : path
+    const prevKeys = Array.isArray(path) ? path.slice(0, path.length - 1) : []
+    if (isNew.get() && typeof lastKey === 'number') {
+      form.setValues(_s.unsetOrRemoveAt(path))
+    } else {
+      form.resetField(path)
+      close()
+    }
+  }
+
+  return <EditableBoxPresentation
+    ref={internalBox}
+    resetField={resetField}
+    onOpen={onOpen}
+    onClose={onClose}
+    onDelete={onDelete}
+    onCancel={onCancel}
+    onSave={onSave}
+    form={editableGroup.form}
+    isNew={isNew.get()}
+    path={path}
+    {...props}
+  />
+}
+
+export const EditableBox = ({path, onCancel, onClose, isNew,...props}) => {
+
+  const editableGroup = useContext(EditableContext)
+  const form = useContext(FormContext)
+
+  const internalBox = React.useRef()
+
+  const resetField = () => path ? form.resetField(_s.toPath(path)) : form.resetForm()
+
+  const _onClose = (skipReset) => {
+    if (!skipReset) {
+      resetField()
+    }
+    form.clearErrors(path)
+    editableGroup.standaloneBoxes.unregister(selfRef.current)
+    callIfFunction(onClose)
+  }
+
+  const modifiedValue = () => {
+    const oldItem = internalBox.current.getValue(undefined, form.getOriginalValues())
+    const newItem = internalBox.current.getValue()
+    return newItem !== oldItem ? [newItem, true] : [oldItem, false]
+  }
+
+  const onOpen = () => {
+    editableGroup.standaloneBoxes.register(selfRef.current)
+  }
+
+  const onDelete = () => {
+    props.removeItem(props.menuId)
+  }
+
+  const _onCancel = (close) => {
+    if (callIfFunction(onCancel,close) !== false) {
+      close()
+    }
+  }
+
+  const close = () => internalBox.current.closeBox()
+
+  const onSave = () => form.submitForm()
+
+  const handleSubmit = () => form.handleSubmit()
+
+  const loading = () => internalBox.current.loading
+
+  const pathRef = useRefMemo(path)
+  const selfRef = useRef({loading,path:() => pathRef.current,form,modifiedValue,handleSubmit,close})
+
+  return <EditableBoxPresentation
+    ref={internalBox}
+    resetField={resetField}
+    onOpen={onOpen}
+    onClose={_onClose}
+    onDelete={onDelete}
+    onCancel={_onCancel}
+    onSave={onSave}
+    form={form}
+    path={path}
+    isNew={isNew}
+    {...props}
+  />
+}
+EditableBox.Shared = SharedEditableTabBox
+

package/src/Errors.jsx

@@ -0,0 +1,174 @@
+import React, {useEffect, useContext, useRef, useMemo} from 'react'
+import styled from 'styled-components'
+import {Icon,TransitionDiv} from '@startlibs/components'
+import {usePreviousForEffect, useToggle} from '@startlibs/core'
+import {lighten} from 'polished'
+import {createSelector} from 'reselect'
+import _ from 'lodash/fp'
+import {formatPath, getColor, customTheme, identityFn, isElementInView} from '@startlibs/utils'
+
+const errorsInsidePathSelector = () => createSelector(
+  [identityFn(0), identityFn(1)],
+  (path, entries) =>
+    path ? entries.filter(([_, p]) => (p + '.').indexOf(path + '.') === 0) : entries
+)
+const parseError = (value, path) => Array.isArray(value) ? value.map(v => [v, formatPath(path)]) : [[value, formatPath(path)]]
+
+const parseMultipleErrors = (objOrArray) => [].concat.apply([],
+  (Array.isArray(objOrArray) ? objOrArray : Object.entries(objOrArray))
+    .map(([path, value]) => parseError(value, path))
+)
+
+export const ErrorsContext = React.createContext({})
+const ErrorFilterContext = React.createContext(_.identity)
+export const ErrorFilterProvider = ErrorFilterContext.Provider
+
+export const useProvideErrors = () => {
+  const errors = useToggle([])
+
+
+  const addError = (value, path) => errors.openWith(errors => errors.concat(parseError(value, path)))
+  const addErrors = (newErrors) => errors.openWith(errors => errors.concat(parseMultipleErrors(newErrors)))
+
+  const removeError = (value, path) => errors.openWith(errors => errors.filter(([v, p]) => !(value === v && (p + '.').indexOf(formatPath(path) + '.') >= 0)))
+
+  const removeErrorPath = (path) => errors.openWith(errors => errors.filter(([_, p]) => formatPath(path) !== p))
+  const clearErrors = (path) => errors.openWith(errors => path ? errors.filter(([_, p]) => (p + '.').indexOf(formatPath(path) + '.') < 0) : [])
+
+  const setErrors = (newErrors) => {
+    console.log(parseMultipleErrors(newErrors))
+    errors.openWith(parseMultipleErrors(newErrors))
+    errors.get()
+  }
+  const setError = (errorPath, errorValue) => errors.openWith(parseMultipleErrors([[errorPath, errorValue]]))
+
+  const memoizeErorrsInsidePath = useMemo(errorsInsidePathSelector, [])
+
+  const getErrorsInsidePath = (path) => memoizeErorrsInsidePath(formatPath(path), errors.get())
+
+  const utils = {
+    addErrors,
+    addError,
+    setErrors,
+    setError,
+    clearErrors,
+    removeError,
+    willRemoveError: (value, insidePath) => () => removeError(value, insidePath),
+    removeErrorPath,
+    getErrorsInsidePath,
+    hasErrors: (path) => getErrorsInsidePath(path).length > 0,
+    hasError: (path,value) => getErrorsInsidePath(path).find(([v]) => v === value)
+  }
+
+  const paths = useMemo(() => new Set(errors.isOpen.map(([_, path]) => path).filter(_ => _)), [errors.isOpen])
+  const providerValue = useMemo(() => ({paths, errors:errors.isOpen, ...utils}), [errors.isOpen])
+
+  return [ErrorsContext.Provider, providerValue, utils]
+}
+
+export const useErrors = () => {
+  const [Provider,value,utils] = useProvideErrors()
+
+  return [utils,<Provider value={value}><Errors/></Provider>]
+}
+
+export const useHasError = (path) => {
+  const {paths} = useContext(ErrorsContext)
+  return paths.has(formatPath(path))
+}
+export const useErrorsUtils = () => {
+  return useContext(ErrorsContext)
+}
+
+export const useTransientErrorHelper = () => {
+  const utils  = useErrorsUtils()
+  const showingErrors =  useRef([])
+  const clearCurrentErrors = () => {
+    showingErrors.current.forEach(([path,value]) => utils?.removeError(value,path))
+    showingErrors.current = []
+  }
+  const setErrors = (newErrors) => {
+      clearCurrentErrors()
+      utils?.addErrors(newErrors)
+      showingErrors.current = newErrors
+  }
+  useEffect(() => () => {
+    clearCurrentErrors()
+  },[])
+
+  return [setErrors,clearCurrentErrors]
+}
+
+export const Errors = ({path,filter,className, autoScroll}) => {
+  const {getErrorsInsidePath, willRemoveError} = useContext(ErrorsContext)
+  const contextFilter = useContext(ErrorFilterContext)
+  const ref = useRef()
+
+  const errors = filter ? getErrorsInsidePath(path).filter(filter) : contextFilter(getErrorsInsidePath(path))
+  const uniqErrors = _.uniqBy(_.property(0),errors).filter(([v]) => v)
+  const prevErrors = usePreviousForEffect(uniqErrors)
+  useEffect(() => {
+    const changed = _.difference(uniqErrors,prevErrors)
+    if (autoScroll && changed.length && ref.current?.scrollIntoView) {
+      isElementInView(ref.current).then((inView) => {
+        if (!inView) {
+          ref.current.scrollIntoView({behavior: "smooth"})
+        }
+      })
+    }
+  },[uniqErrors])
+
+  return <TransitionDiv block>{uniqErrors.length > 0 && <Errors.Container ref={ref} className={className}>
+    {uniqErrors.map(([value]) => value && value !== true &&
+      <Errors.Item key={value}>
+        {value}
+        <Errors.CloseIcon onClick={willRemoveError(value, path)}/>
+      </Errors.Item>
+    )}
+  </Errors.Container>}</TransitionDiv>
+}
+
+Errors.displayName = 'Errors'
+
+Errors.Container = styled.ul`
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  `
+
+Errors.Item = styled.li`
+    background-color: ${props => lighten(0.42, props.theme.colors.alert)};
+    padding: 1rem 3.5rem 1rem 1rem;
+    border-radius: 8px;
+    border: 1px solid ${props => lighten(0.35, props.theme.colors.alert)};
+    color: ${getColor('alert')};
+    position:relative;
+    text-align: left;
+    font-size: 13px;
+    line-height: 130%;
+    & ~ & {
+      margin-top: 0.5rem;
+    }
+    ${customTheme('ErrorItem')}
+  `
+Errors.CloseIcon = styled(Icon).attrs({icon: 'x'})`
+    color: ${getColor('alert')};
+    font-weight: 600;
+    display: inline-block;
+    background-color: ${props => lighten(0.35, props.theme.colors.alert)};
+    width: 21px;
+    height: 21px;
+    line-height: 21px;
+    text-align: center;
+    border-radius: 50%;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 14px;
+    z-index: 2;
+    &:hover {
+      background-color: ${props => lighten(0.32, props.theme.colors.alert)};
+    }
+  `
+