gui-one-nutui-react-taro/dist/esm/switch.taro-bae2dca0.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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; }
import React__default, { useState, useEffect } from 'react';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  isAsync: false,
  checked: false,
  disable: false,
  activeColor: '',
  inactiveColor: '',
  activeText: '',
  inactiveText: '',
  className: ''
};
var Switch = function Switch(props) {
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    isAsync = _defaultProps$props.isAsync,
    checked = _defaultProps$props.checked,
    disable = _defaultProps$props.disable,
    activeColor = _defaultProps$props.activeColor,
    inactiveColor = _defaultProps$props.inactiveColor,
    activeText = _defaultProps$props.activeText,
    inactiveText = _defaultProps$props.inactiveText,
    onChange = _defaultProps$props.onChange,
    className = _defaultProps$props.className,
    style = _defaultProps$props.style;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var b = cn('switch');
  useEffect(function () {
    setValue(checked);
  }, [checked]);
  var classes = function classes() {
    return "".concat(b(), " ").concat(value ? 'switch-open' : 'switch-close', " ").concat(disable ? "".concat(b(), "-disable") : '', " ", "".concat(b(), "-base"), " ").concat(className);
  };
  var styles = function styles() {
    var myStyle = _objectSpread({
      backgroundColor: value ? activeColor : inactiveColor
    }, style || {});
    return myStyle;
  };
  var _onClick = function onClick(event) {
    if (disable) return;
    if (!isAsync) {
      setValue(!value);
    }
    onChange && onChange(!value, event);
  };
  return React__default.createElement("div", {
    className: classes(),
    onClick: function onClick(e) {
      return _onClick(e);
    },
    style: styles()
  }, React__default.createElement("div", {
    className: "switch-button"
  }, !value && React__default.createElement("div", {
    className: "close-line"
  }), activeText && React__default.createElement(React__default.Fragment, null, value ? React__default.createElement("div", {
    className: "".concat(b('label'), " open")
  }, activeText) : React__default.createElement("div", {
    className: "".concat(b('label'), " close")
  }, inactiveText))));
};
Switch.defaultProps = defaultProps;
Switch.displayName = 'NutSwitch';
export { Switch as S };