@zohodesk/components/lib/v1/Switch/Switch.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));

var _propTypes = _interopRequireDefault(require("./props/propTypes"));

var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));

var _utils = require("@zohodesk/utils");

var _useSwitch2 = _interopRequireDefault(require("./useSwitch"));

var _contants = require("./contants");

var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));

var _Label = _interopRequireDefault(require("../../Label/Label"));

var _Switch_v1Module = _interopRequireDefault(require("./css/Switch_v1.module.css"));

var _excluded = ["ariaDisabled", "ariaLabel"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var Switch = function Switch(props) {
  var name = props.name,
      value = props.value,
      id = props.id,
      size = props.size,
      isDisabled = props.isDisabled,
      isReadOnly = props.isReadOnly,
      hasStateIndication = props.hasStateIndication,
      label = props.label,
      labelPlacement = props.labelPlacement,
      labelSize = props.labelSize,
      title = props.title,
      customProps = props.customProps,
      tagAttributes = props.tagAttributes,
      a11yAttributes = props.a11yAttributes,
      i18nKeys = props.i18nKeys,
      customId = props.customId,
      testId = props.testId,
      customStyle = props.customStyle;
  var customProps_container = customProps.container,
      customProps_label = customProps.label;
  var tagAttributes_container = tagAttributes.container,
      tagAttributes_switch = tagAttributes["switch"];
  var a11yAttributes_container = a11yAttributes.container,
      _a11yAttributes$switc = a11yAttributes["switch"],
      a11yAttributes_switch = _a11yAttributes$switc === void 0 ? {} : _a11yAttributes$switc,
      a11yAttributes_label = a11yAttributes.label;

  var _a11yAttributes_switc = a11yAttributes_switch.ariaDisabled,
      ariaDisabled = _a11yAttributes_switc === void 0 ? isDisabled : _a11yAttributes_switc,
      ariaLabel = a11yAttributes_switch.ariaLabel,
      restA11yAttributes_switch = _objectWithoutProperties(a11yAttributes_switch, _excluded);

  var _i18nKeys$readOnlyAri = i18nKeys.readOnlyAriaLabel,
      i18n_readOnlyAriaLabel = _i18nKeys$readOnlyAri === void 0 ? 'Read Only' : _i18nKeys$readOnlyAri;
  var readOnlyAriaLabel = label ? "".concat(label, ", ").concat(i18n_readOnlyAriaLabel) : i18n_readOnlyAriaLabel;

  var _useSwitch = (0, _useSwitch2["default"])(props),
      isChecked = _useSwitch.isChecked,
      handleChange = _useSwitch.handleChange;

  var style = (0, _utils.mergeStyle)(_Switch_v1Module["default"], customStyle);

  var _cssJSLogic = (0, _cssJSLogic2["default"])({
    props: _objectSpread(_objectSpread({}, props), {}, {
      isChecked: isChecked
    }),
    style: style
  }),
      containerClass = _cssJSLogic.containerClass,
      labelClass = _cssJSLogic.labelClass,
      trackClass = _cssJSLogic.trackClass,
      trackWrapperClass = _cssJSLogic.trackWrapperClass,
      thumbClass = _cssJSLogic.thumbClass,
      labelIndicationClass = _cssJSLogic.labelIndicationClass;

  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, customProps_container, {
    $ui_displayMode: "inline",
    $ui_direction: _contants.ITEMS_DIRECTION[labelPlacement],
    $ui_alignItems: _contants.ALIGN_ITEMS[labelPlacement],
    $tagAttributes_container: _objectSpread(_objectSpread({}, tagAttributes_container), {}, {
      'data-selector-id': customId
    }),
    testId: testId,
    customId: customId,
    $ui_className: containerClass,
    $a11yAttributes_container: a11yAttributes_container
  }), label && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({}, customProps_label, {
    text: label,
    palette: isDisabled ? 'primary' : 'default',
    size: labelSize,
    htmlFor: id,
    customClass: labelClass,
    a11y: a11yAttributes_label,
    clipped: true,
    title: label
  })), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
    $flag_shrink: false,
    $ui_className: trackWrapperClass
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, tagAttributes_switch, restA11yAttributes_switch, {
    type: "checkbox",
    id: id,
    name: name,
    value: value,
    checked: isChecked,
    onChange: handleChange,
    className: trackClass,
    "data-title": title,
    role: "switch",
    "aria-disabled": ariaDisabled,
    "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
  })), /*#__PURE__*/_react["default"].createElement("svg", {
    className: thumbClass,
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/_react["default"].createElement("circle", {
    cx: "50%",
    cy: "50%",
    r: _contants.THUMB_RADIUS[size]
  })), hasStateIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
    className: labelIndicationClass,
    xmlns: "http://www.w3.org/2000/svg"
  }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
    width: "100%",
    height: "100%",
    rx: "50%"
  }) : /*#__PURE__*/_react["default"].createElement("circle", {
    cx: "50%",
    cy: "50%",
    r: _contants.OFF_LABEL_RADIUS[size]
  })) : null));
};

var _default = Switch;
exports["default"] = _default;
Switch.defaultProps = _defaultProps["default"];
Switch.propTypes = _propTypes["default"];