@startlibs/form 1.0.12 → 1.1.0

package/src/useConfirmDialog.jsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import {Errors} from './Errors'
+import {WithForm} from './Form'
+import {callIfFunction, addExtraProp, using} from '@startlibs/utils'
+import {setNotification, Button, Dialog} from '@startlibs/components'
+import {useDialogWithToggle, useDialog} from '@startlibs/components'
+
+export const useConfirmDialog = (dialog, args, toggleCallback) => {
+  return useDialog((closeDialog) => addExtraProp(callIfFunction(dialog, closeDialog), {closeDialog}), args, toggleCallback)
+}
+
+export const useConfirmDialogWithProps = (dialog, args, {overrideClose = true} = {}) => {
+  return useDialogWithToggle((toggle) => addExtraProp(callIfFunction(dialog, toggle.isOpen, toggle.close), {closeDialog: toggle.close}, overrideClose), args)
+}
+
+export const ConfirmDialog = ({
+                                action = _.identity,
+                                onSuccess,
+  skipDom,
+                                className,
+                                closeDialog,
+                                onClose,
+                                skipCloseIcon,
+                                cancelLabel = "Cancelar",
+                                cancelButton = cancelLabel && <Button tabIndex={2}>{cancelLabel}</Button>,
+                                onFailure,
+                                title,
+                                keepOnSuccess,
+                                confirm,
+  formRef,
+                                children,
+                                preValidation,
+                                onNonPreValidation,
+                                values,meta,
+  onChange,
+                                alternativeButton,
+                                notify,
+                                confirmChanges,
+                                auxiliarActions,
+  transform,
+  isLoading,
+  stickyFooter,
+  fullscreen,
+  fullscreenOnMobile,
+  alwaysSave = true,skipErrors,
+  hidden,
+                                skipCheckFocus
+                              }) => {
+  const handleClose = React.useCallback(async () => {
+    if (onClose) await onClose().catch(console.error)
+    if (closeDialog) closeDialog()
+  }, [onClose, closeDialog])
+
+  return <WithForm
+    alwaysSave={alwaysSave}
+    ref={formRef}
+    preValidation={preValidation}
+    onNonPreValidation={onNonPreValidation}
+    values={values}
+    meta={meta}
+    action={action}
+    transform={transform}
+    onFailure={onFailure}
+    onChange={onChange}
+    onSuccess={(...props) =>
+      Promise.resolve(callIfFunction(onSuccess, ...props))
+        .then((v) => {
+          if (!keepOnSuccess) {
+            handleClose()
+          }
+          if (notify) {
+            setNotification(notify)
+          }
+          return v
+        })
+    }
+  >{form => !hidden &&
+    <Dialog
+      className={className}
+      title={title}
+      skipCheckFocus={skipCheckFocus}
+      skipCloseIcon={skipCloseIcon}
+      confirmChanges={confirmChanges}
+      isLoading={isLoading}
+      closeDialog={handleClose}
+      form={form}
+      stickyFooter={stickyFooter}
+      auxiliarActions={auxiliarActions}
+      fullscreen={fullscreen}
+      fullscreenOnMobile={fullscreenOnMobile}
+      footer={(cancelButton || alternativeButton || confirm) && <>
+        {cancelButton && addExtraProp(callIfFunction(cancelButton,handleClose),{onClick:handleClose},false)}
+        {callIfFunction(alternativeButton, handleClose)}
+        {confirm && using(callIfFunction(confirm,{form,isLoading}))( c => c && addExtraProp(c, {isLoading: form.isLoading, type: "submit"}))}
+      </>}
+    >
+      {callIfFunction(children,form)}
+      {!skipErrors && <Errors autoScroll/>}
+    </Dialog>
+  }</WithForm>
+}
+
+
+export const FormDialog = ConfirmDialog

package/src/useDraftConfirmation.jsx

@@ -0,0 +1,60 @@
+import React, {useContext} from 'react'
+import {useToggle, useRefToggle, StartlibsContext, useRefState} from '@startlibs/core'
+import {callIfFunction} from '@startlibs/utils'
+
+export const useDraftConfirmation = (submit, discard, meta) => {
+  const loading = useToggle()
+  const dialog = useToggle()
+  const draft = useRefToggle()
+  const promiseResolver = useRefState()
+  const startlibs = useContext(StartlibsContext)
+
+  const confirmation = (dialogType = 'submit-draft', callback) => {
+    if (callIfFunction(draft.isOpen)) {
+      dialog.openWith(dialogType)
+      return new Promise((res) =>
+        promiseResolver.set(() => (r) => {
+          dialog.close()
+          callIfFunction(callback,r)
+          res(r)
+        }))
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+
+  const submitAndResolve = async () => {
+    loading.open()
+     try {
+      await submit()
+      callIfFunction(promiseResolver.get())
+    } catch (e) { } finally {
+      dialog.close()
+      loading.close()
+    }
+  }
+
+  const discardAndResolve = () => {
+    callIfFunction(discard)
+    callIfFunction(promiseResolver.get())
+  }
+
+  const Dialog = startlibs.dialogs[dialog.isOpen]
+  if (process.env.NODE_ENV !== 'production') {
+    if (dialog.isOpen && !Dialog) { console.log(`Dialog [${dialogType}] not registered in startlibs.dialogs`) }
+  }
+
+  const feedback =
+    dialog.isOpen
+    ? <Dialog
+      submit={submitAndResolve}
+      discard={discardAndResolve}
+      isLoading={loading.isOpen}
+      cancel={dialog.close}
+      {...meta}
+    />
+    : null
+
+  return [feedback, draft, confirmation]
+}

package/src/validation.js

@@ -0,0 +1,92 @@
+import _ from 'lodash/fp'
+import {callIfFunction} from '@startlibs/utils'
+
+const error = 'Error'
+
+let messages = {
+  required: error,
+  minLength: (n) => error,
+  confirmPassword: error,
+  confirmEmails: error,
+  emailValidation: error,
+  SERVER_ERROR: error
+}
+
+export let SERVER_ERROR = messages.SERVER_ERROR
+
+export const setErrorMessages = (newMessages) => messages = newMessages
+
+const onEmpty = (success, errors) => Object.keys(errors).length ? errors : success
+
+export const required = (s, k) => !s && messages.required
+
+export const minLength = (n) => (s, k) => s && s.length < n && messages.minLength(n)
+
+export const confirmPasswords = (passwordKey) => (confirm, k, props) => (props[passwordKey] || confirm) && props[passwordKey] !== confirm && messages.confirmPassword
+export const confirmEmails = (emailKey) => (confirm, k, props) => (props[emailKey] || confirm) && props[emailKey] !== confirm && messages.confirmEmails
+export const confirm = (sourceKey,messageKey,isEqual = (a,b) => a === b) => (confirm, k, props) => (props[sourceKey] || confirm) && !isEqual(props[sourceKey],confirm) && (messages[messageKey] || messageKey)
+
+const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i
+export const emailValidation = (s, k) => !emailRegex.test(s) && messages.emailValidation
+
+export const optional = (cb) => (v, ...args) => v ? cb(v, ...args) : false
+
+export const buildValidation = (validations, custom = () => {
+}) => (values) =>
+  onEmpty(false,
+    {
+      ..._.flow(
+        _.entries,
+        _.map(([k, v]) => [k, [].concat(v).map(fn => fn(_.get(k, values), k, values)).filter(_ => _)]),
+        _.filter(([k, v]) => v.length),
+        _.fromPairs
+      )(callIfFunction(validations)),
+      ...callIfFunction(custom, values)
+    }
+  )
+
+export const buildAsyncValidation = (validations, custom = async () => {
+}) => async (props) =>
+  onEmpty(false,
+    {
+      ... await _.flow(
+        _.entries,
+        _.map(([k, v]) => Promise.all([].concat(v).map(fn => fn(_.get(k, props), k, props))).then(v => [k,v.filter(Boolean)])),
+        promiseArray => Promise.all(promiseArray).then((v) =>
+          _.flow(
+            _.filter(([k, v]) => v.length),
+            _.fromPairs
+          )(v)
+        )
+      )(await callIfFunction(validations)),
+      ... await callIfFunction(custom, props)
+    }
+  )
+
+
+export const responseFailure = (fn) => (v, response, {setErrors}) => {
+  const errorSetter = setErrors
+  const r = [].concat(response, v)
+  const error = fn(...r)
+  if (error === true) {
+  } else if (error) {
+    errorSetter(error)
+  } else if (!_.get('[0].errors',response)) {
+    errorSetter({"": [messages.SERVER_ERROR]})
+  }
+}
+
+export const validation = {
+  SERVER_ERROR,
+  setErrorMessages,
+  required,
+  minLength,
+  confirmPasswords,
+  confirmEmails,
+  confirm,
+  emailValidation,
+  optional,
+  buildValidation,
+  buildAsyncValidation,
+  responseFailure
+}

package/src/withFormImageInput.jsx

@@ -0,0 +1,297 @@
+import React, {useContext, useState} from 'react'
+import styled from 'styled-components'
+import {FormContext, useFormValue} from './Form'
+import {useToggle} from '@startlibs/core'
+import {getUID, callIfFunction} from '@startlibs/utils'
+import _ from 'lodash/fp'
+
+export const FileInput = styled.input.attrs({type: 'file'})`
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    ::-webkit-file-upload-button {
+      visibility: hidden;
+    }
+    ::file-upload-button {
+      visibility: hidden;
+    }
+  `
+
+
+export const WithImageInput = ({children, multiple, path = ["image"], preValidation = _.stubFalse, onChangeFile, onClose, onClick, uploadFetcher, onSuccess, onFailure, ajaxError, onTouchEnd, ...rest}) => {
+  const form = useContext(FormContext)
+  const loading = useToggle()
+  const [tempImage, setTempImage] = useState()
+  const getPath = (str,fileIndex = 0) => typeof path === 'function' ? [].concat(path(str,fileIndex)) : str !== 'image' ? [].concat(path).slice(0, -1).concat(str) : path
+
+  const imagePath = getPath('image')
+  const [formImage] = useFormValue(imagePath)
+  const image = tempImage || formImage
+
+  const validate = (files) => {
+    const validations = files.map(preValidation).filter(Boolean)
+    if (validations.length) {
+      validations.forEach(v =>
+        form.setError(getPath('image').join('.'), v)
+      )
+      return files.filter((file) => !preValidation(file))
+    }
+    return files
+  }
+
+  const handleFileEvent = (e) => {
+    e.preventDefault()
+    callIfFunction(onClose)
+    const files = Array.from((e.nativeEvent.dataTransfer || e.nativeEvent.target).files)
+    if (files.length > 0) {
+      validate(files.slice(0,multiple ? undefined : 1)).forEach( (file,i) =>
+        handleFile(file,e,i)
+      )
+    }
+  }
+
+  const handleFile = (file, eventTarget, fileIndex = 0) => {
+    const getIndexedPath = (str) => getPath(str,fileIndex)
+    const path = getIndexedPath()
+    const oldUploadStatus = form.getMeta(getIndexedPath('uploadStatus'))
+    const oldImage = form.getValue(getIndexedPath('image'))
+    const oldImageHeight = form.getValue(getIndexedPath('imageHeight'))
+    const oldImageWidth = form.getValue(getIndexedPath('imageWidth'))
+    const oldFilename = form.getValue(getIndexedPath('fileName'))
+
+    const objectUrl = URL.createObjectURL(file)
+    const image = document.createElement('img')
+    image.onload = () => {
+      const {naturalWidth: imageWidth, naturalHeight: imageHeight} = image
+      const newValues = {image: file, filename: file.name, imageWidth, imageHeight}
+      form.setValues(_.flow(
+        _.set(getIndexedPath('filename'), file.name),
+        _.set(getIndexedPath('image'), file),
+        _.set(getIndexedPath('imageWidth'), imageWidth),
+        _.set(getIndexedPath('imageHeight'), imageHeight)
+      ))
+      form.setMeta(_.flow(
+        _.update('submittingFiles', (v) => v ? v + 1 : 1),
+        _.update('uploadingPaths', _.union([path.join(".")])),
+        _.set(getIndexedPath('uploadStatus'), 'loading')
+      ))
+      setTempImage(objectUrl)
+      callIfFunction(onChangeFile,file)
+      loading.open()
+      uploadFetcher(file, newValues)
+        .then(({image, uploadStatus}) => {
+          loading.close()
+          if (form.getValue(getIndexedPath('image')) !== file) {
+            form.setMeta(_.update(['submittingFiles'], (v) => v - 1))
+            return
+          }
+          form.clearErrors()
+          form.setValue(getIndexedPath('image'), image, false)
+          form.setMeta(_.flow(
+            _.update('uploadingPaths', _.difference(_,[path.join(".")])),
+            _.update(['submittingFiles'], (v) => v - 1),
+            _.update(['submittedFiles'], (v) => (v || []).concat([{path, file, image}])),
+            _.set(getIndexedPath('uploadStatus'), uploadStatus)
+          ))
+          setTempImage(null)
+          callIfFunction(onSuccess, {image, uploadStatus, imageWidth, imageHeight})
+        }).catch((e) => {
+          loading.close()
+          if (form.getValue(getIndexedPath('image')) !== file) {
+            form.setMeta(_.update(['submittingFiles'], (v) => v - 1))
+            return
+          }
+          form.setError(getIndexedPath('image').join('.'), callIfFunction(ajaxError,_.get('[1].status',e)))
+          form.setValues(_.flow(
+            _.set(getIndexedPath('filename'), oldFilename),
+            _.set(getIndexedPath('image'), oldImage),
+            _.set(getIndexedPath('imageWidth'), oldImageWidth),
+            _.set(getIndexedPath('imageHeight'), oldImageHeight)
+            ),
+            false
+          )
+          form.setMeta(_.flow(
+            _.update('uploadingPaths', _.difference(_,[path.join(".")])),
+            _.update(['submittingFiles'], (v) => v - 1),
+            _.update(['submittedFiles'], (v) => (v || []).concat([{path, file, image}])),
+            _.set(getIndexedPath('uploadStatus'), oldUploadStatus)
+          ))
+          setTempImage(null)
+          callIfFunction(onFailure)
+        })
+      if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function')
+        eventTarget.parentNode.click()
+    }
+    image.src = objectUrl
+  }
+
+  const listenToClose = () => {
+  }
+
+  const handleClick = (e) => {
+    callIfFunction(onClick,e)
+    listenToClose()
+  }
+  const handleTouchEnd = (e) => {
+    callIfFunction(onTouchEnd,e)
+    listenToClose()
+  }
+
+  return children(
+    <FileInput multiple={multiple} onChange={handleFileEvent} onClick={handleClick} tabIndex={-1} onTouchEnd={handleTouchEnd}/>,
+    {
+      image,
+      isLoading: loading.isOpen,
+      handleFile,
+      handleFileEvent,
+      Input: FileInput
+    }
+  )
+}
+
+
+
+
+export const WithFileInput = ({children, multiple, path = ["file"], preValidation = _.stubFalse, onChangeFile, onClose, onClick, uploadFetcher, onSuccess, onFailure, ajaxError, onTouchEnd, maxFiles, ...rest}) => {
+  const form = useContext(FormContext)
+  const loading = useToggle()
+  const [tempImage, setTempImage] = useState()
+  const getPath = (str,fileIndex) => typeof path === 'function' ? [].concat(path(str,fileIndex)) : str !== 'file' ? [].concat(path).slice(0, -1).concat(str) : path
+
+  const validate = (files) => {
+    const validations = files.map(preValidation).filter(Boolean)
+    if (validations.length) {
+      validations.forEach(v =>
+                            form.setError(getPath('file',0).join('.'), v)
+      )
+      return files.filter((file) => !preValidation(file))
+    }
+    return files
+  }
+
+  const handleFileEvent = (e) => {
+    e.preventDefault()
+    callIfFunction(onClose)
+    const files = Array.from((e.nativeEvent.dataTransfer || e.nativeEvent.target).files)
+    if (files.length > 0) {
+      validate(files.slice(0,multiple ? undefined : 1)).forEach( (file,i) =>
+                                                                   handleFile(file,e,i)
+      )
+    }
+  }
+
+  const handleFile = (file, eventTarget) => {
+    const currentFileIndex = (form.getValue(getPath()) || []).length
+    if (currentFileIndex >= maxFiles) {
+      form.setErrors({'': 'Número máximo de arquivos atingido'})
+      return
+    }
+    const createGetIndexedPath = (index) => (str) => getPath(str,index)
+    const getIndexedPath = createGetIndexedPath(currentFileIndex)
+    const path = getIndexedPath()
+    const oldUploadStatus = form.getMeta(getIndexedPath('uploadStatus'))
+    const oldFile = form.getValue(getIndexedPath('file'))
+    const oldFilename = form.getValue(getIndexedPath('fileName'))
+
+    const uid = getUID()
+
+    form.setValues(_.flow(
+      _.set(getIndexedPath('filename'), file.name),
+      _.set(getIndexedPath('file'), file),
+      _.set(getIndexedPath('uid'), uid),
+    ))
+    form.setMeta(_.flow(
+      _.update('submittingFiles', (v) => v ? v + 1 : 1),
+      _.update('uploadingPaths', _.union([path.join(".")])),
+      _.set(getIndexedPath('uploadStatus'), 'loading')
+    ))
+    callIfFunction(onChangeFile,file)
+
+    loading.open()
+    uploadFetcher(file)
+    .then(({file, uploadStatus, response}) => {
+      loading.close()
+      const list = (form.getValue(getPath()) || [])
+      const index = list.findIndex((f) => f.uid === uid)
+      if (index < 0) {
+        form.setMeta(_.update(['submittingFiles'], (v) => v - 1))
+        return
+      }
+      const getIndexedPath = createGetIndexedPath(index)
+      form.clearErrors()
+      form.setValue(getIndexedPath('file'), response, false)
+      form.setMeta(_.flow(
+        _.update('uploadingPaths', _.difference(_,[path.join(".")])),
+        _.update(['submittingFiles'], (v) => v - 1),
+        _.update(['submittedFiles'], (v) => (v || []).concat([{path, file}])),
+        _.set(getIndexedPath('uploadStatus'), uploadStatus)
+      ))
+      callIfFunction(onSuccess, {file, uploadStatus})
+    }).catch((e) => {
+      loading.close()
+      const list = (form.getValue(getPath()) || [])
+      const index = list.findIndex((f) => f.uid === uid)
+      if (index < 0) {
+        form.setMeta(_.update(['submittingFiles'], (v) => v - 1))
+        return
+      }
+      const getIndexedPath = createGetIndexedPath(index)
+      form.setError(getIndexedPath('file').join('.'), callIfFunction(ajaxError,_.get('[1].status',e)))
+      if (oldFile) {
+        form.setValues(
+          _.flow(
+            _.set(getIndexedPath('filename'), oldFilename),
+            _.set(getIndexedPath('file'), oldFile),
+          ),
+          false
+        )
+      } else {
+        form.setValues(
+          _.update(getPath(), _.filter((f) => f.uid !== uid)),
+          false
+        )
+      }
+      form.setMeta(_.flow(
+        _.update('uploadingPaths', _.difference(_,[path.join(".")])),
+        _.update(['submittingFiles'], (v) => v - 1),
+        _.update(['submittedFiles'], (v) => (v || []).concat([{path, file}])),
+        _.set(getIndexedPath('uploadStatus'), oldUploadStatus)
+      ))
+      callIfFunction(onFailure)
+    })
+    if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function')
+      eventTarget.parentNode.click()
+  }
+
+  const listenToClose = () => {
+  }
+
+  const handleClick = (e) => {
+    callIfFunction(onClick,e)
+    listenToClose()
+  }
+  const handleTouchEnd = (e) => {
+    callIfFunction(onTouchEnd,e)
+    listenToClose()
+  }
+
+  return children(
+    <FileInput multiple={multiple} onChange={handleFileEvent} onClick={handleClick} tabIndex={-1} onTouchEnd={handleTouchEnd}/>,
+    {
+      isLoading: loading.isOpen,
+      handleFile,
+      handleFileEvent,
+      Input: FileInput
+    }
+  )
+}
+
+

package/.babelrc

@@ -1,28 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-flow",
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    "lodash",
-    "macros",
-    "@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-optional-chaining",
-    "@babel/plugin-proposal-object-rest-spread",
-    ["@babel/plugin-proposal-class-properties", {"loose": true}],
-    ["@babel/plugin-transform-private-methods", {"loose": true}],
-    ["@babel/plugin-transform-private-property-in-object", {"loose": true}]
-  ]
-}