@geneui/components/FormContainer/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useMemo, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { n as noop, s as stopEvent } from '../index-a0e4e333.js';
import Paper from '../Paper/index.js';
import Button from '../Button/index.js';
import { F as FormProvider, u as useFormContext } from '../index-262edd7a.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../index-031ff73c.js';
import '../Icon/index.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .form-buttons{margin:2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .form-buttons>*+*{margin-inline-start:1rem}[data-gene-ui-version=\"2.16.5\"] form{width:100%}";
styleInject(css_248z);

const KEYBOARD_ENTER_KEY = 13;
function Form(_ref) {
  let {
    children,
    buttons,
    className,
    cancelText,
    submitText,
    onSubmit,
    onCancel,
    onFormChange,
    onValidationChange,
    submitOnEnter,
    onKeyPress,
    readOnly,
    disableFooter,
    ...restProps
  } = _ref;
  const {
    fields,
    setReadOnly,
    setAllowValidation
  } = useFormContext();
  const checkFormValidation = useMemo(() => fields.every(item => item.isValid), [fields]);
  // Comment this row, because it can be useful after
  // const checkFormChanges = useMemo(() => fields.some(item => item.isChanged), [fields]);
  const checkFormChanges = true;
  const handleSubmit = useCallback(e => {
    stopEvent(e, true);
    setAllowValidation(true);
    checkFormValidation && onSubmit(e);
  }, [setAllowValidation, checkFormValidation, onSubmit]);
  const handleCancel = useCallback(e => {
    stopEvent(e, true);
    onCancel(e);
  }, [onCancel]);
  const stopFormSubmit = useCallback(stopEvent, []);

  // handle this because we need stop form default submit when user press `Enter` key,
  // and form still invalid
  const handleFormDefaultSubmit = useCallback(e => {
    if (e.which === 13) {
      checkFormValidation && submitOnEnter && handleSubmit(e);
    } else {
      stopEvent(e);
    }
    onKeyPress(e);
  }, [checkFormValidation, handleSubmit, onKeyPress, submitOnEnter]);

  /**
   * in this cases form call this two functions `onFormChange and onValidationChange`
   * only in that case if this two values are changed
   * but if we want to call this function in every change, we must add some other variables in deps list
   */
  // No need to fire effect when `onFormChange` changes
  useEffect(() => {
    onFormChange(checkFormChanges, fields);
  }, [checkFormChanges]);

  // No need to fire effect when `onValidationChange` changes
  useEffect(() => {
    onValidationChange(checkFormValidation, fields);
  }, [checkFormValidation]);
  useEffect(() => {
    setReadOnly(readOnly);
  }, [readOnly]);
  const onKeyDown = useCallback(e => {
    e.keyCode === KEYBOARD_ENTER_KEY && checkFormChanges && submitOnEnter && handleSubmit(e);
  }, [handleSubmit, checkFormChanges]);
  return /*#__PURE__*/React__default.createElement("form", _extends({}, restProps, {
    noValidate: true // disable native (browser) form validation
    ,
    className: className,
    onSubmit: stopFormSubmit,
    onKeyPress: handleFormDefaultSubmit,
    onKeyDown: onKeyDown
  }), children, !disableFooter && (buttons || /*#__PURE__*/React__default.createElement(Paper, {
    justifyContent: "center",
    className: "form-buttons"
  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
    onClick: handleCancel,
    appearance: "outline"
  }, cancelText), /*#__PURE__*/React__default.createElement(Button, {
    disabled: !checkFormChanges,
    onClick: handleSubmit
  }, submitText)))));
}
function FormContainer(_ref2) {
  let {
    readOnly,
    ...restProps
  } = _ref2;
  return /*#__PURE__*/React__default.createElement(FormProvider, {
    value: {
      readOnly
    }
  }, /*#__PURE__*/React__default.createElement(Form, _extends({}, restProps, {
    readOnly: readOnly
  })));
}
FormContainer.propTypes = {
  /**
   * Disables form footer with cancel and sumbit buttons
   */
  disableFooter: PropTypes.bool,
  /**
   * Desables events on form's elements
   */
  readOnly: PropTypes.bool,
  /**
   * Form submit will be called on ENTER press
   */
  submitOnEnter: PropTypes.bool,
  /**
   * Render custom buttons in footer
   */
  buttons: PropTypes.any,
  /**
   * Valid React nodes
   */
  children: PropTypes.node,
  /**
   * Additional classname which applies to form element
   */
  className: PropTypes.string,
  /**
   * Custom text for reject button in footer
   */
  cancelText: PropTypes.string,
  /**
   * Custom text for submit button in footer
   */
  submitText: PropTypes.string,
  /**
   * fires event when submit button in footer was clicked
   * (event: Event) => void
   */
  onSubmit: PropTypes.func,
  /**
   * Fires event when reject button in footer was clicked
   * (event: Event) => void
   */
  onCancel: PropTypes.func,
  /**
   * Fires when user attempts to change form's fields
   * (changedFields: Array) => void
   */
  onFormChange: PropTypes.func,
  /**
   * Check if every fields are valid
   * (isValid: Boolean) => void
   */
  onValidationChange: PropTypes.func,
  /**
   * Fires event when `ENTER` is pressed
   * (event: Event) => void
   */
  onKeyPress: PropTypes.func
};
FormContainer.defaultProps = {
  cancelText: 'Cancel',
  submitText: 'Submit',
  submitOnEnter: true,
  onCancel: noop,
  onSubmit: noop,
  onKeyPress: noop,
  onValidationChange: noop,
  onFormChange: noop
};

export { FormContainer as default };