ffr-components/es/dynamic-form/Checkbox.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import classnames from 'classnames';
import FormLabel from './FormLabel';
import React, { useRef } from 'react';

var getCheckStatus = function getCheckStatus(checked, indeterminate) {
  if (indeterminate) {
    return 'mixed';
  } else if (checked) {
    return 'true';
  } else {
    return 'false';
  }
};

var Checkbox = function Checkbox(_ref) {
  var checked = _ref.checked,
      className = _ref.className,
      disabled = _ref.disabled,
      id = _ref.id,
      indeterminate = _ref.indeterminate,
      inline = _ref.inline,
      _ref$inputProps = _ref.inputProps,
      inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
      labelProps = _ref.labelProps,
      name = _ref.name,
      onChange = _ref.onChange,
      label = _ref.label,
      required = _ref.required,
      props = _objectWithoutProperties(_ref, ["checked", "className", "disabled", "id", "indeterminate", "inline", "inputProps", "labelProps", "name", "onChange", "label", "required"]);

  var handleChange = useRef(function (e) {
    var checked = e.target.checked;
    !disabled && onChange && onChange(e, checked);
  });
  var classes = classnames(className, 'fd-checkbox');
  return React.createElement("div", {
    className: "ffr-checkbox"
  }, React.createElement("input", _extends({}, inputProps, {
    "aria-checked": getCheckStatus(checked, indeterminate),
    checked: checked,
    className: classes,
    disabled: disabled,
    id: id,
    name: name,
    onChange: handleChange.current,
    type: "checkbox"
  })), React.createElement(FormLabel, _extends({}, labelProps, {
    disabled: disabled,
    required: required,
    htmlFor: id,
    label: label
  }), label));
};

Checkbox.displayName = 'Checkbox';
Checkbox.defaultProps = {
  onChange: function onChange() {}
};
Checkbox.propDescriptions = {
  checked: 'Set to **true** when checkbox input is checked and a controlled component.',
  defaultChecked: 'Set to **true** when the checkbox input is checked and an uncontrolled component.',
  indeterminate: 'When true, the checkbox renders a "mixed" state.',
  inline: '_INTERNAL USE ONLY._',
  inputProps: 'Props to be spread to the component `<input>` element.',
  labelProps: 'Props to be spread to the component `<label>` element.',
  name: 'Sets the `name` for the checkbox input.',
  value: 'Sets the `value` for the checkbox input.'
};
export default Checkbox;