rax-checkbox - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

demo/index.jsx

 /* eslint-disable import/no-extraneous-dependencies */
+/** @jsx createElement */
+'use strict';
 import { createElement, render, useState } from 'rax';
@@ -10,11 +12,13 @@ import DU from 'driver-universal';
   const [checked, setChecked] = useState(false);
+  const [controlledCheckboxMsg, setControlledCheckboxMsg] = useState('');
+  const [unControlledCheckboxMsg, setUncontrolledCheckboxMsg] = useState('');
   return (
     <View>
-      <Text>Controlled:</Text>
+      <Text>Controlled: {controlledCheckboxMsg}</Text>
       <Checkbox
         checked={checked}
         onChange={hasChecked => {
-          alert(`Controlled onChange => ${hasChecked}`);
+          setControlledCheckboxMsg(`onChange => ${hasChecked}`);
         }}
-      />
+      >{(value) => <Text>{value}</Text>}</Checkbox>
       <View
@@ -36,9 +40,9 @@ style={{
       </View>
-      <Text>Uncontrolled:</Text>
+      <Text>Uncontrolled: {unControlledCheckboxMsg}</Text>
       <Checkbox
         defaultChecked
-        onChange={hasChecked => {
-          alert(`Uncontrolled onChange => ${hasChecked}`);
+        onChange={(hasChecked) => {
+          setUncontrolledCheckboxMsg(`onChange => ${hasChecked}`);
         }}
-      />
+      >{(value) => (<Text>{value}</Text>)}</Checkbox>
     </View>
@@ -45,0 +49,0 @@ );

lib/index.d.ts

@@ -1,3 +0,2 @@
-import { CSSProperties, FunctionComponent } from "rax";
-import "./index.css";
+import { CSSProperties, FunctionComponent } from 'rax';
 export interface CheckBoxProps {
@@ -7,16 +6,23 @@ /**
      */
-    checked: boolean;
-    checkedImage: string;
+    checked?: boolean;
     /**
+     * default selected state
+     */
+    defaultChecked?: boolean;
+    /**
+     * selected picture
+     */
+    checkedImage?: string;
+    /**
      * unselected picture
      */
-    uncheckedImage: string;
+    uncheckedImage?: string;
     /**
      * select box container style
      */
-    containerStyle: CSSProperties;
+    containerStyle?: CSSProperties;
     /**
      * select box picture style
      */
-    checkboxStyle: CSSProperties;
+    checkboxStyle?: CSSProperties;
     /**
@@ -26,5 +32,5 @@ * change event
      */
-    onChange: (checked?: boolean) => void;
+    onChange?: (checked?: boolean) => void;
 }
 declare const CheckBox: FunctionComponent<CheckBoxProps>;
 export default CheckBox;

lib/index.js

@@ -12,12 +12,11 @@ "use strict";
 
-require("./index.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var CHECKED_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUxpcTMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzLRwScAAAAPdFJOUwDvEI8wz69QQL/fIHCAYDHs4yUAAACoSURBVCjPfdIBDoMgDAXQ31JE1K33v60UZSJ2NjEmvvgpUIAD6aMoMMBR3YqMoBpmDDXbV1B5nApKUB3/kU9ZR1QLDcKklACPJmvCpWSSPWLbJK0e1bgNDrW4J/3iLmLbSov7oqNyjtFsM5nQUzyOc61xfKPlOOpsr4QbSb0x6uKuNqTdZovrmm+W8KDTJjhUbeGB5LS8SDcChV4GwB0bqWPzMmz/R3QHJwAPwC8jHWQAAAAASUVORK5CYII=";
-var UNCHECKED_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUxpcTMzMzMzMzMzMzMzMzMzMzMzMzMzM2vW5DoAAAAHdFJOUwCPEO9AzzBOX/xUAAAASklEQVQoz+2SMRKAQAwCIcmF///YaKl4tYU7Q8O2CwRTD5IBxJJlBSixcKPOFzkzUAmpnGppFCy/+qpqZ2rUJgCbTV/ZbGJ7T/QAwyIE71akwQMAAAAASUVORK5CYII=";
+var CHECKED_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUxpcTMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzLRwScAAAAPdFJOUwDvEI8wz69QQL/fIHCAYDHs4yUAAACoSURBVCjPfdIBDoMgDAXQ31JE1K33v60UZSJ2NjEmvvgpUIAD6aMoMMBR3YqMoBpmDDXbV1B5nApKUB3/kU9ZR1QLDcKklACPJmvCpWSSPWLbJK0e1bgNDrW4J/3iLmLbSov7oqNyjtFsM5nQUzyOc61xfKPlOOpsr4QbSb0x6uKuNqTdZovrmm+W8KDTJjhUbeGB5LS8SDcChV4GwB0bqWPzMmz/R3QHJwAPwC8jHWQAAAAASUVORK5CYII=';
+var UNCHECKED_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUxpcTMzMzMzMzMzMzMzMzMzMzMzMzMzM2vW5DoAAAAHdFJOUwCPEO9AzzBOX/xUAAAASklEQVQoz+2SMRKAQAwCIcmF///YaKl4tYU7Q8O2CwRTD5IBxJJlBSixcKPOFzkzUAmpnGppFCy/+qpqZ2rUJgCbTV/ZbGJ7T/QAwyIE71akwQMAAAAASUVORK5CYII=';
 
 var CheckBox = function CheckBox(_ref) {
-  var _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
+  var checked = _ref.checked,
+      _ref$defaultChecked = _ref.defaultChecked,
+      defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
       _ref$checkedImage = _ref.checkedImage,
@@ -31,35 +30,47 @@ checkedImage = _ref$checkedImage === void 0 ? CHECKED_ICON : _ref$checkedImage,
       checkboxStyle = _ref$checkboxStyle === void 0 ? {} : _ref$checkboxStyle,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      children = _ref.children;
 
-  var _useState = (0, _rax.useState)(checked),
+  var _useState = (0, _rax.useState)(defaultChecked),
       isChecked = _useState[0],
       setIsChecked = _useState[1];
 
-  var handleChange = function handleChange() {
-    var _checked = !isChecked;
+  var isInitialMount = (0, _rax.useRef)(false);
 
-    setIsChecked(_checked);
+  var _checked = checked !== undefined ? checked : isChecked;
 
-    if (onChange) {
-      onChange(_checked);
+  (0, _rax.useEffect)(function () {
+    if (!isInitialMount.current) {
+      isInitialMount.current = true;
+    } else {
+      if (onChange) {
+        onChange(_checked);
+      }
     }
-  };
-
-  (0, _rax.useEffect)(function () {
-    setIsChecked(Boolean(checked));
-  }, [checked]);
+  }, [_checked]);
   return (0, _rax.createElement)(_raxView.default, {
+    className: "container",
+    style: Object.assign(Object.assign({
+      flexDirection: 'row',
+      alignItems: 'center'
+    }, children ? {} : {
+      width: 40,
+      height: 40
+    }), containerStyle),
     role: "checkbox",
-    "aria-checked": isChecked,
-    onClick: handleChange,
-    className: "flexContainer"
-  }, (0, _rax.createElement)(_raxView.default, {
-    className: "container",
-    style: Object.assign({
-      flexDirection: "row",
-      alignItems: "center",
-      marginBottom: 10
-    }, containerStyle)
+    "aria-checked": _checked,
+    onClick: function onClick() {
+      if (typeof checked !== 'undefined') {
+        return;
+      }
+
+      if (onChange) {
+        onChange(!isChecked);
+      }
+
+      setIsChecked(!isChecked);
+    }
   }, (0, _rax.createElement)(_raxImage.default, {
     style: Object.assign({
+      marginRight: children ? 8 : 0,
       width: 40,
@@ -69,5 +80,5 @@ height: 40
     source: {
-      uri: isChecked ? checkedImage : uncheckedImage
+      uri: _checked ? checkedImage : uncheckedImage
     }
-  })));
+  }), typeof children === 'function' ? children(_checked) : children);
 };
@@ -74,0 +85,0 @@

package.json

 {
   "name": "rax-checkbox",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Checkbox component for Rax.",
@@ -28,3 +28,3 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "rax-image": "^1.0.3",
+    "rax-image": "^1.0.4-beta.3",
     "rax-view": "^1.0.2"
@@ -45,6 +45,7 @@ },
     "rax": "^1.0.0",
-    "rax-scripts": "^1.2.0",
+    "rax-scripts": "^1.3.12",
     "rax-test-renderer": "^1.0.0",
-    "rax-text": "^1.0.1"
+    "rax-text": "^1.0.1",
+    "typescript": "^3.6.2"
   }
 }

README.md

@@ -23,2 +23,3 @@ # CheckBox 选择框
 | :------------- | :------- | :----- | :------------- |
+| defaultChecked | Boolean  |        | 默认选中状态       |
 | checked        | Boolean  |        | 选中状态       |
@@ -35,14 +36,48 @@ | checkedImage   | String   |        | 选中图片       |
 // demo
-/* eslint-disable import/no-extraneous-dependencies */
-import { createElement, render, useRef, useEffect } from 'rax';
+/** @jsx createElement */
+'use strict';
+import { createElement, render, useState } from 'rax';
 import DU from 'driver-universal';
+import Checkbox from 'rax-checkbox';
 import View from 'rax-view';
-import CheckBox from 'rax-checkbox';
+import Text from 'rax-text';
 
 const App = () => {
-  const checkboxRef = useRef(null);
-  useEffect(() => {
-    console.log(checkboxRef);
-  });
-  return <View ><CheckBox ref={checkboxRef} /></View>;
+  const [checked, setChecked] = useState(false);
+  const [controlledCheckboxMsg, setControlledCheckboxMsg] = useState('');
+  const [unControlledCheckboxMsg, setUncontrolledCheckboxMsg] = useState('');
+  return (
+    <View>
+      <Text>Controlled: {controlledCheckboxMsg}</Text>
+      <Checkbox
+        checked={checked}
+        onChange={hasChecked => {
+          setControlledCheckboxMsg(`onChange => ${hasChecked}`);
+        }}
+      >{(value) => <Text>{value}</Text>}</Checkbox>
+      <View
+        style={{
+          paddingLeft: 15,
+          paddingRight: 15,
+          backgroundColor: '#1890FF',
+          width: 200,
+          borderRadius: 15,
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        onClick={() => {
+          setChecked(!checked);
+        }}
+      >
+        <Text style={{ color: '#fff' }}>Click Me!</Text>
+      </View>
+      <Text>Uncontrolled: {unControlledCheckboxMsg}</Text>
+      <Checkbox
+        defaultChecked
+        onChange={(hasChecked) => {
+          setUncontrolledCheckboxMsg(`onChange => ${hasChecked}`);
+        }}
+      >{(value) => (<Text>{value}</Text>)}</Checkbox>
+    </View>
+  );
 };
@@ -53,3 +88,2 @@
 });
-
 ```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

87

increased by64.15%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

14153

decreased by-13.23%

Dev dependency count

13

increased by8.33%

Number of package files

13

decreased by-56.67%

Lines of code

333

decreased by-23.27%

Dependency changes

• Updatedrax-image@^1.0.4-beta.3