@talend/react-components/lib/Toggle/LabelToggle/LabelToggle.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@talend/utils");
var _theme = require("../../theme");
var _LabelToggleModule = _interopRequireDefault(require("./LabelToggle.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_LabelToggleModule.default);
const getAutoFocusValue = (autoFocus, values, value) => {
  if (!autoFocus) {
    return null;
  }
  if (value) {
    return (0, _lodash.get)(value, 'value');
  }
  return (0, _lodash.get)(values, ['0', 'value']);
};

/**
 *
 * @param {Array.<Object>} values - buttons that should be rendered
 * @param {string} name - the name attribute for all inputs
 * @param {string} value - the checked value
 * @param {function} onChange - callback that handle the state change
 */
function LabelToggle({
  id,
  values,
  name,
  value,
  onChange,
  disabled,
  autoFocus = false
}) {
  const localId = id || (0, _utils.randomUUID)();
  const handleChange = e => {
    onChange(e.target.value);
  };
  const getButtonId = currentValue => `${localId}-radio-${currentValue}`;
  const autoFocusValue = getAutoFocusValue(autoFocus, values, value);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: theme('tc-label-toggle', {
      'tc-radio-disabled': disabled
    }),
    children: values.map(button => /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
      "data-feature": button.dataFeature,
      htmlFor: getButtonId(button.value),
      className: theme({
        'tc-radio-selected': value === button.value
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        id: getButtonId(button.value),
        type: "radio",
        value: button.value,
        checked: value === button.value,
        name: name,
        disabled: disabled,
        onChange: e => handleChange(e)
        // eslint-disable-next-line jsx-a11y/no-autofocus
        ,
        autoFocus: autoFocusValue === button.value
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: button.label
      })]
    }, button.value))
  });
}
LabelToggle.propTypes = {
  autoFocus: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  id: _propTypes.default.string,
  name: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func.isRequired,
  value: _propTypes.default.string,
  values: _propTypes.default.arrayOf(_propTypes.default.shape({
    value: _propTypes.default.string.isRequired,
    label: _propTypes.default.string.isRequired,
    dataFeature: _propTypes.default.string
  }).isRequired)
};
var _default = exports.default = LabelToggle;
//# sourceMappingURL=LabelToggle.component.js.map