rc-switch - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

es/index.d.ts

 import * as React from 'react';
-export declare type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
+export declare type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
 export declare type SwitchClickEventHandler = SwitchChangeEventHandler;
-interface SwitchProps {
+interface SwitchProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick'> {
     className?: string;
@@ -11,3 +11,3 @@ prefixCls?: string;
     onChange?: SwitchChangeEventHandler;
-    onMouseUp: React.MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     onClick?: SwitchClickEventHandler;
@@ -17,3 +17,2 @@ tabIndex?: number;
     defaultChecked?: boolean;
-    autoFocus?: boolean;
     loadingIcon: React.ReactNode;
@@ -20,0 +19,0 @@ style?: React.CSSProperties;

es/index.js

 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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -19,113 +15,78 @@
 
+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; }
+
 import * as React from 'react';
 import classNames from 'classnames';
-var Switch = React.forwardRef(function (props, ref) {
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import KeyCode from "rc-util/es/KeyCode";
+var Switch = React.forwardRef(function (_ref, ref) {
   var _classNames;
 
-  var mergedRef = ref || React.createRef();
-  var initChecked = false;
+  var _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? 'rc-switch' : _ref$prefixCls,
+      className = _ref.className,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
+      disabled = _ref.disabled,
+      loadingIcon = _ref.loadingIcon,
+      checkedChildren = _ref.checkedChildren,
+      unCheckedChildren = _ref.unCheckedChildren,
+      onClick = _ref.onClick,
+      onChange = _ref.onChange,
+      onKeyDown = _ref.onKeyDown,
+      restProps = _objectWithoutProperties(_ref, ["prefixCls", "className", "checked", "defaultChecked", "disabled", "loadingIcon", "checkedChildren", "unCheckedChildren", "onClick", "onChange", "onKeyDown"]);
 
-  if ('checked' in props) {
-    initChecked = !!props.checked;
-  } else {
-    initChecked = !!props.defaultChecked;
-  }
+  var _useMergedState = useMergedState(false, {
+    value: checked,
+    defaultValue: defaultChecked
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      innerChecked = _useMergedState2[0],
+      setInnerChecked = _useMergedState2[1];
 
-  var _React$useState = React.useState(initChecked),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      checked = _React$useState2[0],
-      setChecked = _React$useState2[1];
+  function triggerChange(newChecked, event) {
+    var mergedChecked = innerChecked;
 
-  React.useEffect(function () {
-    var autoFocus = props.autoFocus,
-        disabled = props.disabled;
-
-    if (autoFocus && !disabled) {
-      mergedRef.current.focus();
+    if (!disabled) {
+      mergedChecked = newChecked;
+      setInnerChecked(mergedChecked);
+      onChange === null || onChange === void 0 ? void 0 : onChange(mergedChecked, event);
     }
-  }, [props.autoFocus]);
-  React.useEffect(function () {
-    if ('checked' in props) {
-      setChecked(!!props.checked);
-    }
-  }, [props.checked]);
 
-  var setInternalChecked = function setInternalChecked(checked, e) {
-    var disabled = props.disabled,
-        onChange = props.onChange;
+    return mergedChecked;
+  }
 
-    if (disabled) {
-      return;
+  function onInternalKeyDown(e) {
+    if (e.which === KeyCode.LEFT) {
+      triggerChange(false, e);
+    } else if (e.which === KeyCode.RIGHT) {
+      triggerChange(true, e);
     }
 
-    if (!('checked' in props)) {
-      setChecked(checked);
-    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+  }
 
-    if (onChange) {
-      onChange(checked, e);
-    }
-  };
+  function onInternalClick(e) {
+    var ret = triggerChange(!innerChecked, e); // [Legacy] trigger onClick with value
 
-  var handleClick = function handleClick(e) {
-    var onClick = props.onClick;
-    var newChecked = !checked;
-    setInternalChecked(newChecked, e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(ret, e);
+  }
 
-    if (onClick) {
-      onClick(newChecked, e);
-    }
-  };
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 37) {
-      // Left
-      setInternalChecked(false, e);
-    } else if (e.keyCode === 39) {
-      // Right
-      setInternalChecked(true, e);
-    }
-  }; // Handle auto focus when click switch in Chrome
-
-
-  var handleMouseUp = function handleMouseUp(e) {
-    mergedRef.current.blur();
-
-    if (props.onMouseUp) {
-      props.onMouseUp(e);
-    }
-  };
-
-  var className = props.className,
-      prefixCls = props.prefixCls,
-      disabled = props.disabled,
-      loadingIcon = props.loadingIcon,
-      checkedChildren = props.checkedChildren,
-      unCheckedChildren = props.unCheckedChildren,
-      onChange = props.onChange,
-      restProps = _objectWithoutProperties(props, ["className", "prefixCls", "disabled", "loadingIcon", "checkedChildren", "unCheckedChildren", "onChange"]);
-
-  var switchClassName = classNames((_classNames = {}, _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "-checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
+  var switchClassName = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checked"), innerChecked), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
   return React.createElement("button", Object.assign({}, restProps, {
     type: "button",
     role: "switch",
-    "aria-checked": checked,
+    "aria-checked": innerChecked,
     disabled: disabled,
     className: switchClassName,
-    ref: mergedRef,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    onMouseUp: handleMouseUp
+    ref: ref,
+    onKeyDown: onInternalKeyDown,
+    onClick: onInternalClick
   }), loadingIcon, React.createElement("span", {
     className: "".concat(prefixCls, "-inner")
-  }, checked ? checkedChildren : unCheckedChildren));
+  }, innerChecked ? checkedChildren : unCheckedChildren));
 });
 Switch.displayName = 'Switch';
-Switch.defaultProps = {
-  prefixCls: 'rc-switch',
-  checkedChildren: null,
-  unCheckedChildren: null,
-  className: '',
-  defaultChecked: false
-};
 export default Switch;

lib/index.d.ts

 import * as React from 'react';
-export declare type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
+export declare type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
 export declare type SwitchClickEventHandler = SwitchChangeEventHandler;
-interface SwitchProps {
+interface SwitchProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick'> {
     className?: string;
@@ -11,3 +11,3 @@ prefixCls?: string;
     onChange?: SwitchChangeEventHandler;
-    onMouseUp: React.MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     onClick?: SwitchClickEventHandler;
@@ -17,3 +17,2 @@ tabIndex?: number;
     defaultChecked?: boolean;
-    autoFocus?: boolean;
     loadingIcon: React.ReactNode;
@@ -20,0 +19,0 @@ style?: React.CSSProperties;

lib/index.js

@@ -14,2 +14,6 @@ "use strict";
 
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,6 +27,2 @@
 
-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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -40,112 +40,75 @@
 
-var Switch = React.forwardRef(function (props, ref) {
-  var _classNames;
+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; }
 
-  var mergedRef = ref || React.createRef();
-  var initChecked = false;
+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; }
 
-  if ('checked' in props) {
-    initChecked = !!props.checked;
-  } else {
-    initChecked = !!props.defaultChecked;
-  }
+var Switch = React.forwardRef(function (_ref, ref) {
+  var _classNames;
 
-  var _React$useState = React.useState(initChecked),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      checked = _React$useState2[0],
-      setChecked = _React$useState2[1];
+  var _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? 'rc-switch' : _ref$prefixCls,
+      className = _ref.className,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
+      disabled = _ref.disabled,
+      loadingIcon = _ref.loadingIcon,
+      checkedChildren = _ref.checkedChildren,
+      unCheckedChildren = _ref.unCheckedChildren,
+      onClick = _ref.onClick,
+      onChange = _ref.onChange,
+      onKeyDown = _ref.onKeyDown,
+      restProps = _objectWithoutProperties(_ref, ["prefixCls", "className", "checked", "defaultChecked", "disabled", "loadingIcon", "checkedChildren", "unCheckedChildren", "onClick", "onChange", "onKeyDown"]);
 
-  React.useEffect(function () {
-    var autoFocus = props.autoFocus,
-        disabled = props.disabled;
+  var _useMergedState = (0, _useMergedState3.default)(false, {
+    value: checked,
+    defaultValue: defaultChecked
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      innerChecked = _useMergedState2[0],
+      setInnerChecked = _useMergedState2[1];
 
-    if (autoFocus && !disabled) {
-      mergedRef.current.focus();
-    }
-  }, [props.autoFocus]);
-  React.useEffect(function () {
-    if ('checked' in props) {
-      setChecked(!!props.checked);
-    }
-  }, [props.checked]);
+  function triggerChange(newChecked, event) {
+    var mergedChecked = innerChecked;
 
-  var setInternalChecked = function setInternalChecked(checked, e) {
-    var disabled = props.disabled,
-        onChange = props.onChange;
-
-    if (disabled) {
-      return;
+    if (!disabled) {
+      mergedChecked = newChecked;
+      setInnerChecked(mergedChecked);
+      onChange === null || onChange === void 0 ? void 0 : onChange(mergedChecked, event);
     }
 
-    if (!('checked' in props)) {
-      setChecked(checked);
-    }
+    return mergedChecked;
+  }
 
-    if (onChange) {
-      onChange(checked, e);
+  function onInternalKeyDown(e) {
+    if (e.which === _KeyCode.default.LEFT) {
+      triggerChange(false, e);
+    } else if (e.which === _KeyCode.default.RIGHT) {
+      triggerChange(true, e);
     }
-  };
 
-  var handleClick = function handleClick(e) {
-    var onClick = props.onClick;
-    var newChecked = !checked;
-    setInternalChecked(newChecked, e);
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+  }
 
-    if (onClick) {
-      onClick(newChecked, e);
-    }
-  };
+  function onInternalClick(e) {
+    var ret = triggerChange(!innerChecked, e); // [Legacy] trigger onClick with value
 
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 37) {
-      // Left
-      setInternalChecked(false, e);
-    } else if (e.keyCode === 39) {
-      // Right
-      setInternalChecked(true, e);
-    }
-  }; // Handle auto focus when click switch in Chrome
+    onClick === null || onClick === void 0 ? void 0 : onClick(ret, e);
+  }
 
-
-  var handleMouseUp = function handleMouseUp(e) {
-    mergedRef.current.blur();
-
-    if (props.onMouseUp) {
-      props.onMouseUp(e);
-    }
-  };
-
-  var className = props.className,
-      prefixCls = props.prefixCls,
-      disabled = props.disabled,
-      loadingIcon = props.loadingIcon,
-      checkedChildren = props.checkedChildren,
-      unCheckedChildren = props.unCheckedChildren,
-      onChange = props.onChange,
-      restProps = _objectWithoutProperties(props, ["className", "prefixCls", "disabled", "loadingIcon", "checkedChildren", "unCheckedChildren", "onChange"]);
-
-  var switchClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "-checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
+  var switchClassName = (0, _classnames.default)(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checked"), innerChecked), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
   return React.createElement("button", Object.assign({}, restProps, {
     type: "button",
     role: "switch",
-    "aria-checked": checked,
+    "aria-checked": innerChecked,
     disabled: disabled,
     className: switchClassName,
-    ref: mergedRef,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    onMouseUp: handleMouseUp
+    ref: ref,
+    onKeyDown: onInternalKeyDown,
+    onClick: onInternalClick
   }), loadingIcon, React.createElement("span", {
     className: "".concat(prefixCls, "-inner")
-  }, checked ? checkedChildren : unCheckedChildren));
+  }, innerChecked ? checkedChildren : unCheckedChildren));
 });
 Switch.displayName = 'Switch';
-Switch.defaultProps = {
-  prefixCls: 'rc-switch',
-  checkedChildren: null,
-  unCheckedChildren: null,
-  className: '',
-  defaultChecked: false
-};
 var _default = Switch;
 exports.default = _default;

package.json

 {
   "name": "rc-switch",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "switch ui component for react",
@@ -38,2 +38,4 @@ "keywords": [
   "devDependencies": {
+    "@types/classnames": "^2.2.10",
+    "@types/jest": "^25.2.2",
     "coveralls": "^3.0.6",
@@ -56,4 +58,5 @@ "enzyme": "^3.0.0",
   "dependencies": {
-    "classnames": "^2.2.1"
+    "classnames": "^2.2.1",
+    "rc-util": "^4.20.5"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23453

decreased by-2.45%

Dependency count

4

increased by33.33%

Dev dependency count

13

increased by18.18%

Lines of code

305

decreased by-18.23%

Dependency changes

• + Addedrc-util@^4.20.5

• + Addedadd-dom-event-listener@1.1.0(transitive)

• + Addedrc-util@4.21.1(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedshallowequal@1.1.0(transitive)