@scenid/react-formulator 0.5.3 → 0.5.4

package/src/Editable/FormField.jsx

@@ -1,231 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
-
-import isEqual from 'fast-deep-equal'
-
-import {
-  FormControl,
-  FormHelperText,
-  InputAdornment,
-  FormControlLabel,
-  FormGroup
-} from '@material-ui/core'
-
-import { makeStyles } from '@material-ui/styles'
-
-import AutorenewIcon from '@material-ui/icons/Autorenew'
-
-const useStyles = makeStyles(theme => ({ error: { color: theme.palette.error.main } }))
-
-const FormControlField = ({
-  variant,
-  type,
-  name,
-  label,
-  component,
-  componentProps,
-  defaultValue,
-  value,
-  options,
-  hasErrors,
-  errors,
-  required,
-  disabled,
-  validating,
-  dirty,
-  onChange
-}) => {
-  const styles = useStyles()
-
-  const finalProps = {
-    name,
-    label,
-    defaultValue,
-    value,
-    options,
-    required,
-    disabled,
-    ...componentProps,
-    onChange
-  }
-
-  const isRender = type === '@@render'
-
-  if (validating) {
-    finalProps.endAdornment = [(
-      <InputAdornment position="end">
-        <AutorenewIcon />
-      </InputAdornment>
-    )]
-  }
-
-  let control
-  if (isRender) {
-    try {
-      const oldProps = component.props || {}
-      control = React.cloneElement(
-        component,
-        {
-          ...finalProps,
-          ...oldProps,
-          variant,
-          label,
-          hasErrors,
-          errors,
-          dirty
-        }
-      )
-    } catch (e) {
-      throw new Error(`error creating control for field "${name}": ${e.message}`)
-    }
-  } else {
-    try {
-      control = React.createElement(
-        component,
-        {
-          variant,
-          ...finalProps
-        }
-      )
-    } catch (e) {
-      throw new Error(`error creating control for field "${name}": ${e.message}`)
-    }
-  }
-  const isSwitch = type === 'boolean'
-  const isRepeater = type === 'array'
-
-  if (isRepeater || isRender) {
-    return control
-  }
-
-  return (
-    <FormControl
-      className="data-card-field"
-      error={dirty && hasErrors}
-      variant={variant}
-      margin="dense"
-      fullWidth
-      required={required}
-    >
-      {
-        isSwitch
-          && (
-            <FormControlLabel
-              className={cx({ [styles.error]: dirty && hasErrors })}
-              control={control}
-              label={label}
-              labelPlacement={finalProps.labelPlacement || 'end'}
-            />
-          )
-      }
-      {
-        (!isSwitch && !isRepeater && !isRender)
-          && control
-      }
-      {
-        (dirty && !disabled && hasErrors)
-          && (
-            <FormHelperText>
-              {errors.map(e => e.message).join('. ')}
-            </FormHelperText>
-          )
-      }
-    </FormControl>
-  )
-}
-
-FormControlField.propTypes = {
-  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  component: PropTypes.any.isRequired,
-  componentProps: PropTypes.object,
-  type: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool
-  ]),
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.array,
-    PropTypes.object
-  ]),
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.array,
-    PropTypes.object
-  ]),
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any
-  })),
-  hasErrors: PropTypes.bool,
-  errors: PropTypes.array,
-  validating: PropTypes.bool,
-  dirty: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
-}
-
-const FormField = ({
-  prepend,
-  append,
-  componentProps,
-  ...fieldProps
-}) => {
-  const finalProps = {
-    componentProps,
-    ...fieldProps
-  }
-
-  if (componentProps?.type === 'hidden') {
-    return <input type="hidden" name={fieldProps.name} value={fieldProps.value} />
-  }
-
-  return (
-    <FormGroup>
-      {prepend}
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <FormControlField {...finalProps} />
-      {append}
-    </FormGroup>
-  )
-}
-
-FormField.propTypes = {
-  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  component: PropTypes.any.isRequired,
-  componentProps: PropTypes.object,
-  type: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool
-  ]),
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.array,
-    PropTypes.object
-  ]),
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any
-  })),
-  prepend: PropTypes.array,
-  append: PropTypes.array,
-  hasErrors: PropTypes.bool,
-  errors: PropTypes.array,
-  validating: PropTypes.bool,
-  required: PropTypes.bool,
-  dirty: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
-}
-
-export default React.memo(FormField, (prevProps, nextProps) => isEqual(prevProps, nextProps))

package/src/Editable/FormNumber.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { TextField } from '@material-ui/core'
-
-import { castToNumber } from '../helpers'
-
-const FormNumber = ({ name, value, min, max, step, onChange, ...props }) => (
-  <TextField
-    name={name}
-    type="number"
-    value={castToNumber(value, step)}
-    inputProps={{ min, max, step }}
-    onChange={e => onChange({
-      target: {
-        name,
-        value: castToNumber(e.target.value, step)
-      }
-    })}
-    {...props}
-  />
-)
-
-FormNumber.propTypes = {
-  name: PropTypes.string.isRequired,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  step: PropTypes.number,
-  value: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
-  onChange: PropTypes.func.isRequired
-}
-
-export default FormNumber

package/src/Editable/FormRepeater.jsx

@@ -1,218 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  Box,
-  TextField,
-  Button,
-  List,
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-  InputAdornment,
-  FormControl,
-  Typography,
-  MenuItem,
-  ClickAwayListener
-} from '@material-ui/core'
-
-import {
-  Delete as DeleteIcon,
-  Clear as ClearIcon,
-  Save as SaveIcon
-} from '@material-ui/icons'
-
-const getValue = (value, catalog) => {
-  if (catalog && catalog[value] !== undefined) return catalog[value]
-  return value
-}
-
-const FormRepeater = ({ variant, name, label, value, options, onChange }) => {
-  const [entries, setEntries] = useState(value || [])
-  const [inEdit, setInEdit] = useState(false)
-  const [inputValue, setInputValue] = useState('')
-  const [catalogSelectValue, setCatalogSelectValue] = useState('')
-
-  const handleEntryAdd = () => {
-    if (inputValue.length > 0) {
-      setEntries([...entries, inputValue])
-      setInputValue('')
-    }
-  }
-
-  const handleCancelNewEntry = () => {
-    setInEdit(false)
-    setInputValue('')
-    setCatalogSelectValue('')
-  }
-
-  const handleEntryDel = delIndex => {
-    const newEntries = [...entries]
-    newEntries.splice(delIndex, 1)
-    setEntries(newEntries)
-  }
-
-  useEffect(() => {
-    const newValue = entries.length > 0 ? entries : undefined
-    onChange({ target: { name, value: newValue } })
-  }, [entries])
-
-  let blockedOptions = []
-  if (options) {
-    blockedOptions = Object.entries(options).filter(e => Array.isArray(value) && value.includes(e[0])).map(e => e[0])
-  }
-
-  return (
-    <Box>
-      <Typography variant="body1">
-        {label}
-      </Typography>
-      {
-        (!entries || entries?.length === 0)
-          && (
-            <Box mt={1} pl={2}>
-              <Typography variant="body2" color="textSecondary">
-                Keine Einträge vorhanden
-              </Typography>
-            </Box>
-          )
-      }
-      <List dense>
-        {
-          entries.map((entry, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <ListItem key={`entry-${index}`}>
-              <ListItemText primary={getValue(entry, options)} />
-              <ListItemSecondaryAction>
-                <IconButton
-                  edge="end"
-                  aria-label="delete"
-                  size="small"
-                  onClick={() => handleEntryDel(index)}
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </ListItemSecondaryAction>
-            </ListItem>
-          ))
-        }
-      </List>
-      {
-        !inEdit
-          && (
-            <Box>
-              <Button
-                color="primary"
-                variant="outlined"
-                onClick={() => setInEdit(true)}
-              >
-                Einträge hinzufügen
-              </Button>
-            </Box>
-          )
-      }
-      {
-        (inEdit && !options)
-          && (
-            <Box
-              width="100%"
-              display="flex"
-              alignItems="center"
-            >
-              <ClickAwayListener
-                onClickAway={() => {
-                  if (inputValue === '') {
-                    setInEdit(false)
-                  }
-                }}
-              >
-                <FormControl
-                  variant="filled"
-                  fullWidth
-                >
-                  <TextField
-                    label="Neuer Eintrag"
-                    variant={variant}
-                    value={inputValue}
-                    InputProps={{
-                      endAdornment: (
-                        <InputAdornment position="end">
-                          <Box mr={1}>
-                            <IconButton size="small" onClick={handleEntryAdd}>
-                              <SaveIcon fontSize="small" />
-                            </IconButton>
-                          </Box>
-                          <IconButton size="small" onClick={handleCancelNewEntry}>
-                            <ClearIcon fontSize="small" />
-                          </IconButton>
-                        </InputAdornment>
-                      )
-                    }}
-                    onKeyDown={e => {
-                      if (e.key === 'Enter') handleEntryAdd()
-                      if (e.key === 'Escape') handleCancelNewEntry()
-                    }}
-                    onChange={e => setInputValue(e.target.value)}
-                  />
-                </FormControl>
-              </ClickAwayListener>
-            </Box>
-          )
-      }
-      {
-        (inEdit && options)
-          && (
-            <Box
-              width="100%"
-              display="flex"
-              alignItems="center"
-            >
-              <FormControl
-                variant="filled"
-                fullWidth
-              >
-                <TextField
-                  label="Eintrag auswählen"
-                  select
-                  variant={variant}
-                  value={catalogSelectValue}
-                  onBlur={handleCancelNewEntry}
-                  onChange={e => {
-                    setCatalogSelectValue('')
-                    setEntries([...entries, e.target.value])
-                  }}
-                >
-                  {
-                    Object
-                      .entries(options)
-                      .sort((a, b) => a[1].localeCompare(b[1]))
-                      .map(e => (
-                        <MenuItem
-                          key={`option-${e[0]}`}
-                          value={e[0]}
-                          disabled={blockedOptions.includes(e[0])}
-                        >
-                          {e[1]}
-                        </MenuItem>
-                      ))
-                  }
-                </TextField>
-              </FormControl>
-            </Box>
-          )
-      }
-    </Box>
-  )
-}
-
-FormRepeater.propTypes = {
-  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  name: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.any,
-  options: PropTypes.object,
-  onChange: PropTypes.func.isRequired
-}
-
-export default FormRepeater

package/src/Editable/FormSelect.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { TextField, MenuItem } from '@material-ui/core'
-
-const FormSelect = ({ options, required, value, ...props }) => {
-  let unselectOption = []
-
-  if (!required) {
-    unselectOption = [{ label: 'Auswahl löschen', value: undefined }]
-  }
-
-  const allOptions = [
-    ...unselectOption,
-    ...options.sort((l, r) => l.label.localeCompare(r.label))
-  ]
-
-  return (
-    <TextField
-      select
-      required={required}
-      value={value === undefined ? '' : value}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {
-        allOptions
-          .map(({ label: itemLabel, value: itemValue }) => (
-            <MenuItem
-              key={itemLabel}
-              value={itemValue}
-            >
-              {itemLabel}
-            </MenuItem>
-          ))
-      }
-    </TextField>
-  )
-}
-
-FormSelect.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any
-  })).isRequired,
-  required: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
-}
-
-export default FormSelect

package/src/Editable/FormText.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { TextField } from '@material-ui/core'
-
-const FormText = props => {
-  const { type } = props
-  const finalProps = { ...props }
-
-  if (type === 'date' || type === 'datetime-local') {
-    finalProps.InputLabelProps = { shrink: true }
-  }
-
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return <TextField type={type} {...finalProps} />
-}
-
-FormText.propTypes = { type: PropTypes.string }
-
-export default FormText

package/src/FormGroupHeader.jsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Box, Typography } from '@material-ui/core'
-
-const FormGroupHeader = ({ label, labelVariant, desc, descVariant, textAlign }) => (
-  <Box
-    style={{
-      width: '100%',
-      display: 'flex',
-      flexDirection: 'column'
-    }}
-  >
-    {
-      label
-        && (
-          <Box mb={2}>
-            <Typography
-              variant={labelVariant}
-              align={textAlign}
-            >
-              {label}
-            </Typography>
-          </Box>
-        )
-    }
-    {
-      desc
-        && (
-          <Box mb={2}>
-            <Typography
-              variant={descVariant}
-              align={textAlign}
-            >
-              {desc}
-            </Typography>
-          </Box>
-        )
-    }
-  </Box>
-)
-
-FormGroupHeader.propTypes = {
-  label: PropTypes.string,
-  labelVariant: PropTypes.oneOf([
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'subtitle1',
-    'subtitle2',
-    'body1',
-    'body2',
-    'button',
-    'caption',
-    'overline'
-  ]),
-  text: PropTypes.string,
-  textVariant: PropTypes.oneOf([
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'subtitle1',
-    'subtitle2',
-    'body1',
-    'body2',
-    'button',
-    'caption',
-    'overline'
-  ]),
-  textAlign: PropTypes.oneOf(['left', 'center', 'right'])
-}
-
-FormGroupHeader.defaultProps = {
-  labelVariant: 'h5',
-  textVariant: 'body2',
-  textAlign: 'left'
-}
-
-export default FormGroupHeader