Dashboard sipadu mbip
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

ToggleButton.js 2.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
  4. import classNames from 'classnames';
  5. import React from 'react';
  6. import Button from './Button';
  7. var noop = function noop() {};
  8. var ToggleButton =
  9. /*#__PURE__*/
  10. function (_React$Component) {
  11. _inheritsLoose(ToggleButton, _React$Component);
  12. function ToggleButton() {
  13. var _this;
  14. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  15. args[_key] = arguments[_key];
  16. }
  17. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  18. _this.state = {
  19. focused: false
  20. };
  21. _this.handleFocus = function (e) {
  22. if (e.target.tagName === 'INPUT') _this.setState({
  23. focused: true
  24. });
  25. };
  26. _this.handleBlur = function (e) {
  27. if (e.target.tagName === 'INPUT') _this.setState({
  28. focused: false
  29. });
  30. };
  31. return _this;
  32. }
  33. var _proto = ToggleButton.prototype;
  34. _proto.render = function render() {
  35. var _this$props = this.props,
  36. children = _this$props.children,
  37. name = _this$props.name,
  38. className = _this$props.className,
  39. checked = _this$props.checked,
  40. type = _this$props.type,
  41. onChange = _this$props.onChange,
  42. value = _this$props.value,
  43. disabled = _this$props.disabled,
  44. inputRef = _this$props.inputRef,
  45. innerRef = _this$props.innerRef,
  46. props = _objectWithoutPropertiesLoose(_this$props, ["children", "name", "className", "checked", "type", "onChange", "value", "disabled", "inputRef", "innerRef"]);
  47. var focused = this.state.focused;
  48. return React.createElement(Button, _extends({}, props, {
  49. ref: innerRef,
  50. className: classNames(className, focused && 'focus', disabled && 'disabled'),
  51. type: null,
  52. active: !!checked,
  53. as: "label"
  54. }), React.createElement("input", {
  55. name: name,
  56. type: type,
  57. value: value,
  58. ref: inputRef,
  59. autoComplete: "off",
  60. checked: !!checked,
  61. disabled: !!disabled,
  62. onFocus: this.handleFocus,
  63. onBlur: this.handleBlur,
  64. onChange: onChange || noop
  65. }), children);
  66. };
  67. return ToggleButton;
  68. }(React.Component);
  69. export default React.forwardRef(function (props, ref) {
  70. return React.createElement(ToggleButton, _extends({
  71. innerRef: ref
  72. }, props));
  73. });