@uiw/react-checkbox - npm Package Compare versions

Comparing version 4.6.10 to 4.6.11

lib/cjs/Group.js

@@ -14,6 +14,2 @@ "use strict";
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -32,12 +28,3 @@
       other = (0, _objectWithoutProperties2.default)(props, ["prefixCls", "className", "name", "value", "onChange"]);
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      values = _useState2[0],
-      setValues = _useState2[1];
-
-  if (values !== value) {
-    setValues(value || []);
-  }
-
+  var valueRef = (0, _react.useRef)([]);
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim();
@@ -47,5 +34,5 @@ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, other, {
   }), _react.default.Children.map(props.children, function (element) {
-    if (value && value.includes(element.props.value)) {
-      if (!values.includes(element.props.value)) {
-        values.push(element.props.value);
+    if (Array.isArray(value) && value.includes(element.props.value)) {
+      if (!valueRef.current.includes(element.props.value)) {
+        valueRef.current.push(element.props.value);
       }
@@ -56,12 +43,12 @@ }
       name: name,
-      checked: value.includes(element.props.value),
+      checked: valueRef.current.includes(element.props.value),
       onChange: function onChange(e) {
+        if (e.target.type && e.target.type !== 'checkbox') return;
         var checked = e.target.checked;
-        var include = values.includes(element.props.value);
-        var val = (0, _toConsumableArray2.default)(values);
+        var include = valueRef.current.includes(element.props.value);
 
         if (!include && checked) {
-          val.push(element.props.value);
+          valueRef.current.push(element.props.value);
         } else if (include && !checked) {
-          val = values.filter(function (val) {
+          valueRef.current = valueRef.current.filter(function (val) {
             return val !== element.props.value;
@@ -71,4 +58,3 @@ });
 
-        setValues(val);
-        _onChange && _onChange(e, val);
+        _onChange && _onChange(e, valueRef.current);
       }
@@ -75,0 +61,0 @@ }));

lib/cjs/index.js

@@ -16,2 +16,3 @@ "use strict";
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Checkbox[key]) return;
   Object.defineProperty(exports, key, {
@@ -30,2 +31,3 @@ enumerable: true,
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Group[key]) return;
   Object.defineProperty(exports, key, {
@@ -32,0 +34,0 @@ enumerable: true,

lib/esm/Group.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import "./style/group.css";
@@ -18,11 +16,3 @@ export function CheckboxGroup() {
 
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      values = _useState2[0],
-      setValues = _useState2[1];
-
-  if (values !== value) {
-    setValues(value || []);
-  }
-
+  var valueRef = useRef([]);
   var cls = [prefixCls, className].filter(Boolean).join(' ').trim();
@@ -32,5 +22,5 @@ return /*#__PURE__*/React.createElement("div", _extends({}, other, {
   }), React.Children.map(props.children, function (element) {
-    if (value && value.includes(element.props.value)) {
-      if (!values.includes(element.props.value)) {
-        values.push(element.props.value);
+    if (Array.isArray(value) && value.includes(element.props.value)) {
+      if (!valueRef.current.includes(element.props.value)) {
+        valueRef.current.push(element.props.value);
       }
@@ -41,13 +31,12 @@ }
       name: name,
-      checked: value.includes(element.props.value),
+      checked: valueRef.current.includes(element.props.value),
       onChange: function onChange(e) {
+        if (e.target.type && e.target.type !== 'checkbox') return;
         var checked = e.target.checked;
-        var include = values.includes(element.props.value);
+        var include = valueRef.current.includes(element.props.value);
 
-        var val = _toConsumableArray(values);
-
         if (!include && checked) {
-          val.push(element.props.value);
+          valueRef.current.push(element.props.value);
         } else if (include && !checked) {
-          val = values.filter(function (val) {
+          valueRef.current = valueRef.current.filter(function (val) {
             return val !== element.props.value;
@@ -57,4 +46,3 @@ });
 
-        setValues(val);
-        _onChange && _onChange(e, val);
+        _onChange && _onChange(e, valueRef.current);
       }
@@ -61,0 +49,0 @@ }));

package.json

 {
   "name": "@uiw/react-checkbox",
-  "version": "4.6.10",
+  "version": "4.6.11",
   "description": "Checkbox component",
@@ -45,4 +45,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/react-radio": "^4.6.10",
-    "@uiw/utils": "^4.6.10"
+    "@uiw/react-radio": "^4.6.11",
+    "@uiw/utils": "^4.6.11"
   },
@@ -53,6 +53,6 @@ "devDependencies": {
     "@types/react-dom": "16.9.8",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
-  "gitHead": "dd796bd87132b68aee9dfe1faeb73eccc378bc60"
+  "gitHead": "6e8bb3c19c9c88e34148ea73926ba228eb2d2e0b"
 }

README.md

@@ -33,3 +33,3 @@ Checkbox 多选框
 
-### 表单中使用
+### Form 中使用 Checkbox
 
@@ -44,19 +44,22 @@ <!--DemoStart,bgWhite,codePen-->
       onChange={({ initial, current }) => {
-        console.log('onChange', initial, current);
+        console.log('onChange~~~:::', initial, current);
       }}
       onSubmit={({initial, current}) => {
-        if(current.checkbox.length === 0) {
-          Notify.error({
-            title: '提交失败！',
-            description: `表单提交内容为空！`,
-          });
-        } else {
-          Notify.success({
-            title: '提交成功！',
-            description: `选项为：【${current.checkbox.toString()}】，提交完成，将自动填充初始化值！`,
-          });
-        }
+        console.log('onSubmit~~~:::', initial, current)
+        Notify.success({
+          title: '提交成功！',
+          description: `选项为：【${current.checkbox}】，提交完成，将自动填充初始化值！`,
+        });
       }}
       fields={{
         checkbox: {
+          inline: true,
+          initialValue: true,
+          label: '单选条件',
+          children: <Checkbox>四川菜</Checkbox>,
+          validator: (value) => {
+            return !value ? '必须统一服务条款' : null;
+          },
+        },
+        checkboxGroup: {
           initialValue: ['四川菜'],
@@ -88,4 +91,9 @@ label: '选择你想吃的菜',
             <Row>
+              <Col>{fields.checkboxGroup}</Col>
+            </Row>
+            <Row>
               <Col>
-                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
+                <Button disabled={!canSubmit()} type="primary" htmlType="submit">
+                  提交
+                </Button>
               </Col>
@@ -95,3 +103,3 @@ </Row>
               <Col>
-                <pre>
+                <pre style={{ padding: 10, marginTop: 10 }}>
                   {JSON.stringify(state.current, null, 2)}
@@ -115,3 +123,3 @@ </pre>
 
-<!--DemoStart,bgWhite,codePen--> 
+<!--DemoStart,bgWhite,codePen-->
 ```js
@@ -133,3 +141,3 @@ import { Checkbox } from 'uiw';
 
-<!--DemoStart,bgWhite,codePen--> 
+<!--DemoStart,bgWhite,codePen-->
 ```js
@@ -190,3 +198,3 @@ import { Checkbox, Divider } from 'uiw';
 
-<!--DemoStart,bgWhite,codePen--> 
+<!--DemoStart,bgWhite,codePen-->
 ```js
@@ -242,3 +250,3 @@ import { Checkbox, Divider, Button } from 'uiw';
 
-<!--DemoStart,bgWhite,codePen--> 
+<!--DemoStart,bgWhite,codePen-->
 ```js
@@ -245,0 +253,0 @@ import { Checkbox, Button } from 'uiw';

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

Improved metrics

Total package byte prevSize

47399

increased by0.09%

Number of lines in readme file

297

increased by2.77%

Worsened metrics

Lines of code

457

decreased by-4.19%

Dependency changes

• Updated@uiw/react-radio@^4.6.11

• Updated@uiw/utils@^4.6.11