rax-checkbox - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.1.0-0

lib/index.d.ts

 import { CSSProperties, FunctionComponent } from 'rax';
+import './index.css';
 export interface CheckBoxProps {
@@ -11,2 +12,3 @@ /**
     defaultChecked?: boolean;
+    disabled?: boolean;
     /**
@@ -33,4 +35,5 @@ * selected picture
     onChange?: (checked?: boolean) => void;
+    onClick?: (checked?: boolean) => void;
 }
 declare const CheckBox: FunctionComponent<CheckBoxProps>;
 export default CheckBox;

lib/index.js

@@ -6,2 +6,4 @@ "use strict";
 
+var _babelRuntimeJsxPlus = require("babel-runtime-jsx-plus");
+
 var _rax = require("rax");
@@ -13,11 +15,81 @@
 
+var _index = _interopRequireDefault(require("./index.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _styleSheet = _index.default;
+
+function _getClassName() {
+  var className = [];
+  var args = arguments[0];
+  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
+
+  if (type === 'string') {
+    args = args.trim();
+    args && className.push(args);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } else if (type === 'object') {
+    for (var k in args) {
+      k = k.trim();
+
+      if (k && args.hasOwnProperty(k) && args[k]) {
+        className.push(k);
+      }
+    }
+  }
+
+  return className.join(' ').trim();
+}
+
+function _getStyle(classNameExpression) {
+  var cache = _styleSheet.__cache || (_styleSheet.__cache = {});
+
+  var className = _getClassName(classNameExpression);
+
+  var classNameArr = className.split(/\s+/);
+  var style = cache[className];
+
+  if (!style) {
+    style = {};
+
+    if (classNameArr.length === 1) {
+      style = _styleSheet[classNameArr[0].trim()];
+    } else {
+      classNameArr.forEach(function (cls) {
+        style = Object.assign(style, _styleSheet[cls.trim()]);
+      });
+    }
+
+    cache[className] = style;
+  }
+
+  return style;
+}
+
 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 wrapCls = 'rax-checkbox';
 
+function useDidUpdate(effect, deps) {
+  var isInitialMount = (0, _rax.useRef)(false);
+  (0, _rax.useEffect)(function () {
+    if (!isInitialMount.current) {
+      isInitialMount.current = true;
+    } else {
+      effect();
+    }
+  }, deps);
+}
+
 var CheckBox = function CheckBox(_ref) {
+  var _ref2;
+
   var checked = _ref.checked,
       _ref$defaultChecked = _ref.defaultChecked,
       defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
+      disabled = _ref.disabled,
       _ref$checkedImage = _ref.checkedImage,
@@ -32,2 +104,3 @@ checkedImage = _ref$checkedImage === void 0 ? CHECKED_ICON : _ref$checkedImage,
       onChange = _ref.onChange,
+      onClick = _ref.onClick,
       children = _ref.children;
@@ -39,21 +112,23 @@
 
-  var isInitialMount = (0, _rax.useRef)(false);
-
   var _checked = checked !== undefined ? checked : isChecked;
 
-  (0, _rax.useEffect)(function () {
-    if (!isInitialMount.current) {
-      isInitialMount.current = true;
-    } else {
-      if (onChange) {
-        onChange(_checked);
-      }
+  useDidUpdate(function () {
+    if (onChange) {
+      onChange(_checked);
     }
   }, [_checked]);
+
+  var handleClick = function handleClick() {
+    if (onClick) {
+      onClick(_checked);
+    } // uncontrolled
+
+
+    if (typeof checked === 'undefined') {
+      setIsChecked(!isChecked);
+    }
+  };
+
   return (0, _rax.createElement)(_raxView.default, {
-    className: "container",
-    style: Object.assign(Object.assign({
-      flexDirection: 'row',
-      alignItems: 'center'
-    }, children ? {} : {
+    style: Object.assign(Object.assign({}, children ? {} : {
       width: 40,
@@ -64,19 +139,9 @@ height: 40
     "aria-checked": _checked,
-    onClick: function onClick() {
-      if (typeof checked !== 'undefined') {
-        return;
-      }
-
-      if (onChange) {
-        onChange(!isChecked);
-      }
-
-      setIsChecked(!isChecked);
-    }
+    onClick: handleClick,
+    className: (0, _babelRuntimeJsxPlus.classnames)([wrapCls, (_ref2 = {}, _ref2[wrapCls + "-disabled"] = disabled, _ref2)])
   }, (0, _rax.createElement)(_raxImage.default, {
-    style: Object.assign({
-      marginRight: children ? 8 : 0,
-      width: 40,
-      height: 40
-    }, checkboxStyle),
+    className: wrapCls + "-icon",
+    style: Object.assign({}, _getStyle(wrapCls + "-icon"), Object.assign({
+      marginRight: children ? 8 : 0
+    }, checkboxStyle)),
     source: {
@@ -83,0 +148,0 @@ uri: _checked ? checkedImage : uncheckedImage

package.json

 {
   "name": "rax-checkbox",
-  "version": "1.0.0-beta.2",
+  "version": "1.1.0-0",
   "description": "Checkbox component for Rax.",
@@ -10,5 +10,4 @@ "license": "BSD-3-Clause",
     "clean": "rm -rf ./lib && rm -rf ./package-lock.json && rm -rf ./yarn.lock",
-    "build": "npm run clean && rax-scripts build --type 'component'",
-    "start": "rax-scripts start --type 'component' -p 8000",
-    "miniapp": "rax-scripts start --type 'component-miniapp'",
+    "build": "npm run clean && rax-scripts build ",
+    "start": "rax-scripts start",
     "prepublishOnly": "npm run build",
@@ -29,4 +28,4 @@ "test": "npm run build && rax-scripts test",
   "dependencies": {
-    "rax-image": "^1.0.4-beta.3",
-    "rax-view": "^1.0.2"
+    "rax-image": "^1.1.1",
+    "rax-view": "^1.1.0-0"
   },
@@ -46,7 +45,8 @@ "peerDependencies": {
     "rax": "^1.0.0",
-    "rax-scripts": "^1.3.12",
+    "rax-plugin-component": "^0.1.10",
+    "rax-scripts": "^2.0.0",
     "rax-test-renderer": "^1.0.0",
-    "rax-text": "^1.0.1",
-    "typescript": "^3.6.2"
+    "rax-text": "^1.0.2",
+    "typescript": "^3.5.3"
   }
 }

README.md

@@ -1,3 +0,3 @@
-# CheckBox 选择框
-
+[![npm](https://img.shields.io/npm/v/rax-checkbox.svg)](https://www.npmjs.com/package/rax-checkbox)
+**描述：**
 CheckBox 是基础的选择框，选择框用图片实现，支持用户使用自己的图片进行替换
@@ -21,12 +21,15 @@
 
-| 名称           | 类型     | 默认值 | 描述           |
-| :------------- | :------- | :----- | :------------- |
-| defaultChecked | Boolean  |        | 默认选中状态       |
-| checked        | Boolean  |        | 选中状态       |
-| checkedImage   | String   |        | 选中图片       |
-| uncheckedImage | String   |        | 非选中图片     |
-| containerStyle | Object   |        | 选择框容器样式 |
-| checkboxStyle  | Object   |        | 选择框图片样式 |
-| onChange       | Function |        | 选择事件       |
+注：
+1、**支持**列表中的 <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />代表 h5 <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />代表 weex <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />代表小程序
 
+| **属性**       | **类型**                     | **默认值** | **必填** | **描述**       | **支持**                                                                                                                                                                                                                                       |
+| -------------- | ---------------------------- | ---------- | -------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultChecked | `boolean`                    | false      |          | 默认选中状态   | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| checked        | `boolean`                    | -          |          | 选中状态       | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| checkedImage   | `string`                     |            |          | 选中图片       | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| uncheckedImage | `string`                     |            |          | 非选中图片     | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| containerStyle | `CSSProperties`              | -          |          | 选择框容器样式 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| checkboxStyle  | `CSSProperties`              | -          |          | 选择框图片样式 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+| onChange       | `(checked: boolean) => void` | -          |          | 选择事件       | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> |
+
 ## 基本示例
@@ -37,13 +40,13 @@
 /** @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 Text from 'rax-text';
+"use strict";
+import { createElement, render, useState } from "rax";
+import DU from "driver-universal";
+import Checkbox from "rax-checkbox";
+import View from "rax-view";
+import Text from "rax-text";
 
 const App = () => {
   const [checked, setChecked] = useState(false);
-  const [controlledCheckboxMsg, setControlledCheckboxMsg] = useState('');
-  const [unControlledCheckboxMsg, setUncontrolledCheckboxMsg] = useState('');
+  const [controlledCheckboxMsg, setControlledCheckboxMsg] = useState("");
+  const [unControlledCheckboxMsg, setUncontrolledCheckboxMsg] = useState("");
   return (
@@ -57,3 +60,5 @@ <View>
         }}
-      >{(value) => <Text>{value}</Text>}</Checkbox>
+      >
+        {value => <Text>{value}</Text>}
+      </Checkbox>
       <View
@@ -63,7 +68,7 @@ style={{
           paddingRight: 15,
-          backgroundColor: '#1890FF',
+          backgroundColor: "#1890FF",
           width: 200,
           borderRadius: 15,
-          alignItems: 'center',
-          justifyContent: 'center'
+          alignItems: "center",
+          justifyContent: "center"
         }}
@@ -74,3 +79,3 @@ onClick={() => {
       >
-        <Text style={{ color: '#fff' }}>Click Me!</Text>
+        <Text style={{ color: "#fff" }}>Click Me!</Text>
       </View>
@@ -80,6 +85,8 @@ <Text>Uncontrolled: {unControlledCheckboxMsg}</Text>
         defaultChecked
-        onChange={(hasChecked) => {
+        onChange={hasChecked => {
           setUncontrolledCheckboxMsg(`onChange => ${hasChecked}`);
         }}
-      >{(value) => (<Text>{value}</Text>)}</Checkbox>
+      >
+        {value => <Text>{value}</Text>}
+      </Checkbox>
     </View>
@@ -86,0 +93,0 @@ );

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30114

increased by112.77%

Lines of code

353

increased by6.01%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

94

increased by8.05%

Worsened metrics

Dev dependency count

14

increased by7.69%

Number of package files

12

decreased by-7.69%

Number of low quality alerts

3

increased by50%

Dependency changes

• Updatedrax-image@^1.1.1

• Updatedrax-view@^1.1.0-0