You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

FormFile.js 3.1 KiB

3 years ago
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. import classNames from 'classnames';
  4. import React, { useContext, useMemo } from 'react';
  5. import all from 'prop-types-extra/lib/all';
  6. import Feedback from './Feedback';
  7. import FormFileInput from './FormFileInput';
  8. import FormFileLabel from './FormFileLabel';
  9. import FormContext from './FormContext';
  10. import { useBootstrapPrefix } from './ThemeProvider';
  11. var defaultProps = {
  12. disabled: false,
  13. isValid: false,
  14. isInvalid: false
  15. };
  16. var FormFile = React.forwardRef(function (_ref, ref) {
  17. var id = _ref.id,
  18. bsPrefix = _ref.bsPrefix,
  19. bsCustomPrefix = _ref.bsCustomPrefix,
  20. disabled = _ref.disabled,
  21. isValid = _ref.isValid,
  22. isInvalid = _ref.isInvalid,
  23. feedback = _ref.feedback,
  24. className = _ref.className,
  25. style = _ref.style,
  26. label = _ref.label,
  27. children = _ref.children,
  28. custom = _ref.custom,
  29. lang = _ref.lang,
  30. dataBrowse = _ref['data-browse'],
  31. _ref$as = _ref.as,
  32. Component = _ref$as === void 0 ? 'div' : _ref$as,
  33. _ref$inputAs = _ref.inputAs,
  34. inputAs = _ref$inputAs === void 0 ? 'input' : _ref$inputAs,
  35. props = _objectWithoutPropertiesLoose(_ref, ["id", "bsPrefix", "bsCustomPrefix", "disabled", "isValid", "isInvalid", "feedback", "className", "style", "label", "children", "custom", "lang", "data-browse", "as", "inputAs"]);
  36. var _ref2 = custom ? [bsCustomPrefix, 'custom'] : [bsPrefix, 'form-file'],
  37. prefix = _ref2[0],
  38. defaultPrefix = _ref2[1];
  39. bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
  40. var type = 'file';
  41. var _useContext = useContext(FormContext),
  42. controlId = _useContext.controlId;
  43. var innerFormContext = useMemo(function () {
  44. return {
  45. controlId: id || controlId,
  46. custom: custom
  47. };
  48. }, [controlId, custom, id]);
  49. var hasLabel = label != null && label !== false && !children;
  50. var input = /*#__PURE__*/React.createElement(FormFileInput, _extends({}, props, {
  51. ref: ref,
  52. isValid: isValid,
  53. isInvalid: isInvalid,
  54. disabled: disabled,
  55. as: inputAs,
  56. lang: lang
  57. }));
  58. return /*#__PURE__*/React.createElement(FormContext.Provider, {
  59. value: innerFormContext
  60. }, /*#__PURE__*/React.createElement(Component, {
  61. style: style,
  62. className: classNames(className, bsPrefix, custom && "custom-" + type)
  63. }, children || /*#__PURE__*/React.createElement(React.Fragment, null, custom ? /*#__PURE__*/React.createElement(React.Fragment, null, input, hasLabel && /*#__PURE__*/React.createElement(FormFileLabel, {
  64. "data-browse": dataBrowse
  65. }, label)) : /*#__PURE__*/React.createElement(React.Fragment, null, hasLabel && /*#__PURE__*/React.createElement(FormFileLabel, null, label), input), (isValid || isInvalid) && /*#__PURE__*/React.createElement(Feedback, {
  66. type: isValid ? 'valid' : 'invalid'
  67. }, feedback))));
  68. });
  69. FormFile.displayName = 'FormFile';
  70. FormFile.defaultProps = defaultProps;
  71. FormFile.Input = FormFileInput;
  72. FormFile.Label = FormFileLabel;
  73. export default FormFile;