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.
 
 
 
 

79 lines
3.0 KiB

  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. import React from 'react';
  4. import PropTypes from 'prop-types';
  5. import classNames from 'classnames';
  6. import { mapToCssModules } from './utils';
  7. var propTypes = {
  8. className: PropTypes.string,
  9. id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  10. type: PropTypes.string.isRequired,
  11. label: PropTypes.node,
  12. inline: PropTypes.bool,
  13. valid: PropTypes.bool,
  14. invalid: PropTypes.bool,
  15. bsSize: PropTypes.string,
  16. cssModule: PropTypes.object,
  17. children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
  18. innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
  19. };
  20. function CustomInput(props) {
  21. var className = props.className,
  22. label = props.label,
  23. inline = props.inline,
  24. valid = props.valid,
  25. invalid = props.invalid,
  26. cssModule = props.cssModule,
  27. children = props.children,
  28. bsSize = props.bsSize,
  29. innerRef = props.innerRef,
  30. attributes = _objectWithoutPropertiesLoose(props, ["className", "label", "inline", "valid", "invalid", "cssModule", "children", "bsSize", "innerRef"]);
  31. var type = attributes.type;
  32. var customClass = mapToCssModules(classNames(className, "custom-" + type, bsSize ? "custom-" + type + "-" + bsSize : false), cssModule);
  33. var validationClassNames = mapToCssModules(classNames(invalid && 'is-invalid', valid && 'is-valid'), cssModule);
  34. if (type === 'select') {
  35. return React.createElement("select", _extends({}, attributes, {
  36. ref: innerRef,
  37. className: classNames(validationClassNames, customClass)
  38. }), children);
  39. }
  40. if (type === 'file') {
  41. return React.createElement("div", {
  42. className: customClass
  43. }, React.createElement("input", _extends({}, attributes, {
  44. ref: innerRef,
  45. className: classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))
  46. })), React.createElement("label", {
  47. className: mapToCssModules('custom-file-label', cssModule),
  48. htmlFor: attributes.id
  49. }, label || 'Choose file'));
  50. }
  51. if (type !== 'checkbox' && type !== 'radio' && type !== 'switch') {
  52. return React.createElement("input", _extends({}, attributes, {
  53. ref: innerRef,
  54. className: classNames(validationClassNames, customClass)
  55. }));
  56. }
  57. var wrapperClasses = classNames(customClass, mapToCssModules(classNames('custom-control', {
  58. 'custom-control-inline': inline
  59. }), cssModule));
  60. return React.createElement("div", {
  61. className: wrapperClasses
  62. }, React.createElement("input", _extends({}, attributes, {
  63. type: type === 'switch' ? 'checkbox' : type,
  64. ref: innerRef,
  65. className: classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))
  66. })), React.createElement("label", {
  67. className: mapToCssModules('custom-control-label', cssModule),
  68. htmlFor: attributes.id
  69. }, label), children);
  70. }
  71. CustomInput.propTypes = propTypes;
  72. export default CustomInput;