@s-ui/react-atom-checkbox - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

@@ -5,2 +5,16 @@ # Change Log
 
+# 2.2.0 (2020-02-24)
+
+
+### Bug Fixes
+
+* remove isRequired from custom checked icon ([4f4e137](https://github.com/SUI-Components/sui-components/commit/4f4e137e5b22f2202de9cd38953476ea39cef06c))
+
+
+### Features
+
+* add native style option ([3f7b38e](https://github.com/SUI-Components/sui-components/commit/3f7b38e9395f639421e1f1859e700cb2a71d09e9))
+
+
+
 # 2.1.0 (2020-02-18)
@@ -7,0 +21,0 @@

lib/index.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -8,16 +8,33 @@ import cx from 'classnames';
 var AtomCheckbox = function AtomCheckbox(_ref) {
-  var id = _ref.id,
-      name = _ref.name,
+  var _cx;
+
+  var _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      CheckedIcon = _ref.checkedIcon,
       disabled = _ref.disabled,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
+      id = _ref.id,
       _ref$intermediate = _ref.intermediate,
       intermediate = _ref$intermediate === void 0 ? false : _ref$intermediate,
-      CheckedIcon = _ref.checkedIcon,
       IntermediateIcon = _ref.intermediateIcon,
+      _ref$isNative = _ref.isNative,
+      isNativeProp = _ref$isNative === void 0 ? false : _ref$isNative,
+      name = _ref.name,
       _ref$onChange = _ref.onChange,
       onChangeFromProps = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "name", "disabled", "checked", "intermediate", "checkedIcon", "intermediateIcon", "onChange"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["checked", "checkedIcon", "disabled", "id", "intermediate", "intermediateIcon", "isNative", "name", "onChange"]);
 
+  var inputRef = useRef();
+  var hasNotCustomIcons = !CheckedIcon && !IntermediateIcon;
+  var isNative = isNativeProp || hasNotCustomIcons;
+  var isIntermediate = intermediate && !checked;
+
+  var updateNativeIndeterminate = function updateNativeIndeterminate() {
+    inputRef.current && (inputRef.current.indeterminate = isIntermediate);
+  };
+
   var handleChange = function handleChange(ev) {
+    // Handler doesn't necessarily trigger render, but browser could still set
+    // native indeterminate property which may end up in a mismatch between it
+    // and the component's prop, so native value should be kept updated here.
+    updateNativeIndeterminate();
     var _ev$target = ev.target,
@@ -32,9 +49,12 @@ checked = _ev$target.checked,
 
-  var className = cx(BASE_CLASS, {
+  var className = cx(BASE_CLASS, (_cx = {
     'is-checked': checked,
     'is-disabled': disabled
-  });
+  }, _cx[BASE_CLASS + "--native"] = isNative, _cx)); // Keep native indeterminate property updated every render
+
+  updateNativeIndeterminate();
   return React.createElement("label", {
     className: className
-  }, checked && React.createElement(CheckedIcon, null), intermediate && !checked && React.createElement(IntermediateIcon, null), React.createElement("input", Object.assign({
+  }, !isNative && checked && React.createElement(CheckedIcon, null), !isNative && isIntermediate && React.createElement(IntermediateIcon, null), React.createElement("input", Object.assign({
+    ref: inputRef,
     type: "checkbox",
@@ -45,3 +65,3 @@ id: id,
     checked: checked,
-    intermediate: intermediate ? 'intermediate' : '',
+    intermediate: isIntermediate ? 'intermediate' : '',
     onChange: handleChange
@@ -48,0 +68,0 @@ }, props)));

package.json

 {
   "name": "@s-ui/react-atom-checkbox",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

16521

increased by9.98%

Lines of code

60

increased by36.36%

No dependency changes