@dnb/eufemia/components/radio/Radio.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _AlignmentHelper, _span;
const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "element", "label", "label_sr_only", "label_position", "size", "readOnly", "skeleton", "className", "id", "group", "value", "checked", "disabled", "children", "on_change", "on_state_update", "innerRef"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { isTrue, makeUniqueId, extendPropsWithContextInClassComponent, validateDOMAttributes, getStatusState, combineDescribedBy, dispatchCustomElementEvent, keycode } from '../../shared/component-helper';
import AlignmentHelper from '../../shared/AlignmentHelper';
import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
import FormLabel from '../form-label/FormLabel';
import FormStatus from '../form-status/FormStatus';
import RadioGroup from './RadioGroup';
import RadioGroupContext from './RadioGroupContext';
import Context from '../../shared/Context';
import Suffix from '../../shared/helpers/Suffix';
import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
export default class Radio extends React.PureComponent {
  static getDerivedStateFromProps(props, state) {
    if (state._listenForPropChanges) {
      if (props.checked !== state._checked) {
        state.checked = Radio.parseChecked(props.checked);
      }
    }
    state._listenForPropChanges = true;
    if (state.checked !== state.__checked) {
      dispatchCustomElementEvent({
        props
      }, 'on_state_update', {
        checked: state.checked
      });
    }
    state._checked = props.checked;
    state.__checked = state.checked;
    return state;
  }
  constructor(props) {
    super(props);
    _defineProperty(this, "onKeyDownHandler", event => {
      const key = keycode(event);
      if (this.isInNoGroup()) {
        switch (key) {
          case 'enter':
            this.onChangeHandler(event);
            break;
        }
      } else if (this.isContextGroupOrSingle()) {
        switch (key) {
          case 'space':
          case 'enter':
            {
              const {
                value
              } = this.context;
              if (value !== null && typeof value !== 'undefined') {
                event.preventDefault();
              }
              this.onChangeHandler(event);
              break;
            }
        }
      } else {
        switch (key) {
          case 'space':
            {
              event.preventDefault();
              break;
            }
        }
      }
      dispatchCustomElementEvent(this, 'on_key_down', {
        event
      });
    });
    _defineProperty(this, "onChangeHandler", _event => {
      const event = _event;
      if (isTrue(this.props.readOnly)) {
        return event.preventDefault();
      }
      const value = event.target.value;
      const checked = !this.state.checked;
      if (this.isPlainGroup()) {
        setTimeout(() => {
          this.setState({
            checked,
            _listenForPropChanges: false
          }, () => {
            this.callOnChange({
              value,
              checked,
              event
            });
          });
        }, 1);
      } else {
        this.setState({
          checked,
          _listenForPropChanges: false
        });
        this.callOnChange({
          value,
          checked,
          event
        });
      }
    });
    _defineProperty(this, "isContextGroupOrSingle", () => typeof this.context.value !== 'undefined' && !this.props.group);
    _defineProperty(this, "isPlainGroup", () => typeof this.context.value === 'undefined' && this.props.group);
    _defineProperty(this, "isInNoGroup", () => typeof this.context.value === 'undefined' && !this.props.group);
    _defineProperty(this, "onClickHandler", event => {
      if (isTrue(this.props.readOnly)) {
        return event.preventDefault();
      }
      if (!this.isPlainGroup()) {
        return;
      }
      const value = event.target.value;
      const checked = event.target.checked;
      this.callOnChange({
        value,
        checked,
        event
      });
    });
    _defineProperty(this, "callOnChange", _ref => {
      let {
        value,
        checked,
        event
      } = _ref;
      const {
        group
      } = this.props;
      if (this.context.onChange) {
        this.context.onChange({
          value,
          event
        });
      }
      dispatchCustomElementEvent(this, 'on_change', {
        group,
        checked,
        value,
        event
      });
      if (this._refInput.current) {
        this._refInput.current.focus();
      }
    });
    this._refInput = React.createRef();
    this._id = props.id || makeUniqueId();
    this.state = {
      _listenForPropChanges: true
    };
  }
  componentDidMount() {
    if (this.props.innerRef) {
      typeof this.props.innerRef === 'function' ? this.props.innerRef(this._refInput.current) : this.props.innerRef.current = this._refInput.current;
    }
  }
  render() {
    return React.createElement(Context.Consumer, null, context => {
      const contextProps = extendPropsWithContextInClassComponent(this.props, Radio.defaultProps, this.context);
      const props = extendPropsWithContextInClassComponent(this.props, Radio.defaultProps, contextProps, {
        skeleton: context === null || context === void 0 ? void 0 : context.skeleton
      }, pickFormElementProps(context.FormRow), pickFormElementProps(context.formElement), context.Radio);
      const {
          status,
          status_state,
          status_props,
          status_no_animation,
          globalStatus,
          suffix,
          element,
          label,
          label_sr_only,
          label_position,
          size,
          readOnly,
          skeleton,
          className,
          id: _id,
          group: _group,
          value: _value,
          checked: _checked,
          disabled: _disabled,
          children,
          on_change,
          on_state_update,
          innerRef
        } = props,
        rest = _objectWithoutProperties(props, _excluded);
      let {
        checked
      } = this.state;
      let {
        value,
        group,
        disabled
      } = props;
      const hasContext = typeof this.context.name !== 'undefined';
      if (hasContext) {
        if (typeof this.context.value !== 'undefined') {
          checked = this.context.value === value;
        }
        group = this.context.name;
        if (isTrue(this.context.disabled) && disabled !== false) {
          disabled = true;
        }
      } else if (typeof rest.name !== 'undefined') {
        group = rest.name;
      }
      const id = this._id;
      const showStatus = getStatusState(status);
      const mainParams = {
        className: classnames('dnb-radio', createSpacingClasses(props), className, status && `dnb-radio__status--${status_state}`, size && `dnb-radio--${size}`, label && `dnb-radio--label-position-${label_position || 'right'}`)
      };
      let inputParams = {
        role: hasContext || group ? 'radio' : null,
        type: hasContext || group ? 'radio' : 'checkbox'
      };
      if (!group) {
        inputParams.type = 'checkbox';
        inputParams.role = 'radio';
      }
      if (showStatus || suffix) {
        inputParams['aria-describedby'] = combineDescribedBy(inputParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
      }
      if (readOnly) {
        inputParams['aria-readonly'] = inputParams.readOnly = true;
      }
      inputParams = Object.assign(inputParams, rest);
      skeletonDOMAttributes(inputParams, skeleton, this.context);
      validateDOMAttributes(this.props, inputParams);
      const labelComp = label && React.createElement(FormLabel, {
        id: id + '-label',
        forId: id,
        text: label,
        disabled: disabled,
        skeleton: skeleton,
        srOnly: label_sr_only
      });
      const Element = element || 'input';
      return React.createElement("span", mainParams, React.createElement("span", {
        className: "dnb-radio__order"
      }, label_position === 'left' && labelComp, React.createElement("span", {
        className: "dnb-radio__inner"
      }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
        show: showStatus,
        id: id + '-form-status',
        globalStatus: globalStatus,
        label: label,
        text_id: id + '-status',
        width_selector: id + ', ' + id + '-label',
        text: status,
        state: status_state,
        no_animation: status_no_animation,
        skeleton: skeleton
      }, status_props)), React.createElement("span", {
        className: "dnb-radio__row"
      }, React.createElement("span", {
        className: "dnb-radio__shell"
      }, React.createElement(Element, _extends({
        type: "radio",
        value: value,
        id: id,
        name: group,
        className: "dnb-radio__input",
        checked: checked,
        "aria-checked": this.isPlainGroup() ? undefined : checked,
        disabled: isTrue(disabled),
        ref: this._refInput
      }, inputParams, {
        onChange: this.onChangeHandler,
        onClick: this.onClickHandler,
        onKeyDown: this.onKeyDownHandler
      })), React.createElement("span", {
        className: classnames('dnb-radio__button', createSkeletonClass('shape', skeleton, this.context)),
        "aria-hidden": true
      }), _span || (_span = React.createElement("span", {
        className: "dnb-radio__focus",
        "aria-hidden": true
      })), React.createElement("span", {
        className: classnames('dnb-radio__dot', createSkeletonClass('font', skeleton, this.context)),
        "aria-hidden": true
      })), label_position !== 'left' && labelComp, suffix && React.createElement(Suffix, {
        className: "dnb-radio__suffix",
        id: id + '-suffix',
        context: props
      }, suffix)))));
    });
  }
}
_defineProperty(Radio, "contextType", RadioGroupContext);
_defineProperty(Radio, "defaultProps", {
  label: null,
  label_sr_only: null,
  label_position: null,
  checked: null,
  disabled: null,
  id: null,
  size: null,
  element: 'input',
  group: null,
  status: null,
  status_state: 'error',
  status_props: null,
  status_no_animation: null,
  globalStatus: null,
  suffix: null,
  value: '',
  attributes: null,
  readOnly: false,
  skeleton: null,
  className: null,
  children: null,
  on_change: null,
  on_state_update: null,
  innerRef: null
});
_defineProperty(Radio, "Group", RadioGroup);
_defineProperty(Radio, "parseChecked", state => /true|on/.test(String(state)));
process.env.NODE_ENV !== "production" ? Radio.propTypes = _objectSpread(_objectSpread({
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
  label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  label_position: PropTypes.oneOf(['left', 'right']),
  checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  id: PropTypes.string,
  element: PropTypes.node,
  group: PropTypes.string,
  size: PropTypes.oneOf(['default', 'medium', 'large']),
  status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
  status_state: PropTypes.string,
  status_props: PropTypes.object,
  status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  globalStatus: PropTypes.shape({
    id: PropTypes.string,
    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
  }),
  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
  value: PropTypes.string,
  attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}, spacingPropTypes), {}, {
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  on_change: PropTypes.func,
  on_state_update: PropTypes.func
}) : void 0;
Radio._formElement = true;
Radio._supportsSpacingProps = true;
//# sourceMappingURL=Radio.js.map