/** * * Toggle * */ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { Toggle as StyledToggle, ToggleWrapper } from '@buffetjs/styles'; import Label from '../Label'; function Toggle(_ref) { var disabled = _ref.disabled, id = _ref.id, className = _ref.className, name = _ref.name, onChange = _ref.onChange, value = _ref.value; var isIndeterminate = value === null; var handleRef = useCallback(function (element) { if (element) { element.indeterminate = isIndeterminate; // eslint-disable-line no-param-reassign } }, [isIndeterminate]); var handleChange = function handleChange(e) { var targetValue = e.target.checked; // Handle click when the state is inteterminate if (isIndeterminate) { // Select the right value depending on the mouse position targetValue = e.nativeEvent.offsetX >= e.target.offsetWidth / 2; } onChange({ target: { name: name, value: targetValue } }); }; return /*#__PURE__*/React.createElement(ToggleWrapper, { className: className }, /*#__PURE__*/React.createElement(Label, { htmlFor: id || name }, /*#__PURE__*/React.createElement(StyledToggle, { disabled: disabled, checked: value || false, id: id || name, name: id || name, onChange: handleChange, ref: handleRef }), /*#__PURE__*/React.createElement("span", null, "OFF"), /*#__PURE__*/React.createElement("span", null, "ON"))); } Toggle.defaultProps = { className: null, disabled: false, id: null, onChange: function onChange() {}, value: false }; Toggle.propTypes = { className: PropTypes.string, disabled: PropTypes.bool, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, value: PropTypes.bool }; export default Toggle;