ps-frame-father/es/components/Switch/index.js

An enterprise-class UI design language and React components implementation

import React from "react";
import { useState } from 'react';
import classnames from 'classnames';
import "./index.css";
/**
 * switch
 * @param {onClick} func 对外暴露的点击事件
 * @param {checked} bool 是否被选中
 * @param {disabled} bool 是否被禁用
 * @param {onText} string 开启状态的文本
 * @param {offText} string 关闭状态的文本
 * @param {onChange} func 状态切换时的文本
 * @param {size} string 组件的尺寸
 */

export default function Switch(props) {
  var _props$color = props.color,
      color = _props$color === void 0 ? '#09f' : _props$color,
      className = props.className,
      checked = props.checked,
      disabled = props.disabled,
      onText = props.onText,
      offText = props.offText,
      onChange = props.onChange,
      size = props.size;

  var handleChange = function handleChange(e) {
    e.persist();
    onChange && onChange(e.target.checked);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classnames('xSwitch', className)
  }, /*#__PURE__*/React.createElement("label", {
    className: classnames('xSwitchInner', size),
    style: {
      pointerEvents: disabled ? 'none' : 'default',
      cursor: disabled ? 'not-allowed' : 'pointer'
    }
  }, /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    checked: checked,
    onChange: handleChange
  }), /*#__PURE__*/React.createElement("span", {
    className: "xSwitchAnimatingNode",
    style: {
      backgroundColor: color
    },
    "data-onText": onText
  }), /*#__PURE__*/React.createElement("span", {
    className: "offText"
  }, offText)));
}