@clayui/form/lib/Toggle.js

ClayForm component

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _icon = _interopRequireDefault(require("@clayui/icon"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _excluded = ["checked", "containerProps", "disabled", "id", "label", "onChange", "onToggle", "role", "sizing", "spritemap", "symbol", "toggled", "type", "value"];
/**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
var Toggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var checked = _ref.checked,
    _ref$containerProps = _ref.containerProps,
    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
    disabled = _ref.disabled,
    id = _ref.id,
    label = _ref.label,
    _onChange = _ref.onChange,
    onToggle = _ref.onToggle,
    _ref$role = _ref.role,
    role = _ref$role === void 0 ? 'switch' : _ref$role,
    sizing = _ref.sizing,
    spritemap = _ref.spritemap,
    symbol = _ref.symbol,
    toggled = _ref.toggled,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'checkbox' : _ref$type,
    value = _ref.value,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  if (type === 'radio') {
    role = 'radio';
    toggled = checked;
  }
  return /*#__PURE__*/_react.default.createElement("label", _extends({}, containerProps, {
    className: (0, _classnames.default)('toggle-switch', 'simple-toggle-switch', containerProps.className, _defineProperty({
      disabled: disabled
    }, "toggle-switch-".concat(sizing), sizing)),
    ref: ref
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "toggle-switch-check-bar"
  }, /*#__PURE__*/_react.default.createElement("input", _extends({}, otherProps, {
    checked: toggled,
    className: "toggle-switch-check",
    disabled: disabled,
    id: id,
    onChange: function onChange(event) {
      if (_onChange) {
        _onChange(event);
      }
      if (onToggle) {
        onToggle(!toggled);
      }
    },
    role: role,
    type: type,
    value: value
  })), /*#__PURE__*/_react.default.createElement("span", {
    "aria-hidden": "true",
    className: "toggle-switch-bar"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "toggle-switch-handle"
  }, symbol && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)('button-icon', 'button-icon-on', 'toggle-switch-icon')
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    spritemap: spritemap,
    symbol: symbol.on
  })), /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)('button-icon', 'button-icon-off', 'toggle-switch-icon')
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    spritemap: spritemap,
    symbol: symbol.off
  })))))), label && /*#__PURE__*/_react.default.createElement("span", {
    className: "toggle-switch-label"
  }, label));
});
Toggle.displayName = 'ClayToggle';
var _default = exports.default = Toggle;