react-numboard - npm Package Compare versions

Comparing version 1.0.1 to 1.0.3

example/app.jsx

 import React, { Component } from 'react';
-import C from '../src/index';
+import { Form, Input, Button, Row, Col } from 'antd';
+import Wrap from '../src/index';
 import './style.less';
 
-const Input = C.create('input');
+const FormItem = Form.Item;
+const NumInput = Wrap.create(Input);
 
[e-mail]()
+class CashForm extends Component {
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (err) return;
+      this.props.onSubmit(values);
+    });
+  }
+
+  render() {
+    const { total = 0, form } = this.props;
+
+    return (
+      <Form layout="horizontal" className="salelayout-common-form take-cash-form" onSubmit={ (e) => this.handleSubmit(e) }>
+        <Row>
+          <Col span={24}>当前总收入：{total}元</Col>
+        </Row>
+        <Row>
+          <Col span={6}>
+            <FormItem
+              className="form-item"
+              label="金额"
+            >
+              { form.getFieldDecorator('price', {
+                rules: [
+                  { required: true, message: '请输入金额' },
+                  {
+                    validator: (rule, value, callback) => {
+                      let result;
+                      if (value) {
+                        if (/^\d+(\.\d{0,2})?$/.test(value)) {
+                          if (value > total) {
+                            result = '不能超过当前收入';
+                          }
+                          if (value === 0) {
+                            result = '请输入大于0的数字';
+                          }
+                        } else {
+                          result = '请输入正确的数字，最多保留两位小数';
+                        }
+                      }
+                      callback(result);
+                    },
+                  },
+                  { initialValue: '' },
+                ],
+              })(<NumInput style={{ width: '120px' }} placeholder="请输入" />)
+            }
+            </FormItem>
+          </Col>
+          <Col span={18}>
+            <Button type="primary" htmlType="submit" size="small">确 认</Button>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+}
+
 class App extends Component {
@@ -20,4 +82,21 @@ constructor(props) {
       <div>
-        <button onClick={() => { this.setState({ value: '+1s', disabled: !disabled }); }}> +1s </button>
-        <Input value={value} disabled={disabled} onClick={() => { console.log('click'); }} />
+
+        <CashForm
+          total={100}
+          onSubmit={(values) => { console.log(values); }}
+        />
+
+        <Row>
+          <Col span={12}>
+            <NumInput
+              onChange={(value) => { this.setState({value}); console.log('change');}}
+              value={value}
+              disabled={disabled}
+              onClick={() => { console.log('click'); }}
+            />
+          </Col>
+          <Col span={12}>
+             <Button onClick={() => { this.setState({ value: '+1s', disabled: !disabled }); }}> disabled </Button>
+          </Col>
+        </Row>
       </div>
@@ -24,0 +103,0 @@ );

example/main.js

@@ -32,18 +32,1 @@ /* eslint-disable */
 }
-
-/* function render(App) {
-  ReactDOM.render(<App />, div)
-}
-
- if (module.hot) {
-    module.hot.accept('./component', function() {
-      const NewApp = require('./component').default
-      render(NewApp)
-    })
- }
- */
-/*
-if (module.hot) {
-  module.hot.accept('./component', () => { console.log(1111111); render(App) })
-}
-*/

lib/components/board.js

@@ -6,5 +6,30 @@ 'use strict';
 });
+exports.default = undefined;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _from = require('babel-runtime/core-js/array/from');
 
+var _from2 = _interopRequireDefault(_from);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _class, _temp;
+
 var _react = require('react');
@@ -24,8 +49,2 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var nill = function nill() {
@@ -35,9 +54,9 @@ return false;
 
-var NumBoard = function (_Component) {
-  _inherits(NumBoard, _Component);
+var NumBoard = (_temp = _class = function (_Component) {
+  (0, _inherits3.default)(NumBoard, _Component);
 
   function NumBoard(props) {
-    _classCallCheck(this, NumBoard);
+    (0, _classCallCheck3.default)(this, NumBoard);
 
-    var _this = _possibleConstructorReturn(this, (NumBoard.__proto__ || Object.getPrototypeOf(NumBoard)).call(this, props));
+    var _this = (0, _possibleConstructorReturn3.default)(this, (NumBoard.__proto__ || (0, _getPrototypeOf2.default)(NumBoard)).call(this, props));
 
@@ -48,3 +67,3 @@ _this.handleClick = _this.handleClick.bind(_this);
 
-  _createClass(NumBoard, [{
+  (0, _createClass3.default)(NumBoard, [{
     key: 'componentWillMount',
@@ -94,3 +113,3 @@ value: function componentWillMount() {
 
-      var inputKeys = Array.from({ length: 9 }, function (v, k) {
+      var inputKeys = (0, _from2.default)({ length: 9 }, function (v, k) {
         return (k + 1).toString();
@@ -129,3 +148,3 @@ }).concat(['0', '00', '.']);
             },
-            value: '<',
+            icon: 'icon-delete',
             className: 'nb-key__delete'
@@ -151,7 +170,4 @@ }),
   }]);
-
   return NumBoard;
-}(_react.Component);
-
-NumBoard.defaultProps = {
+}(_react.Component), _class.defaultProps = {
   style: {},
@@ -162,4 +178,3 @@ onClearNum: nill,
   onClose: nill
-};
-NumBoard.propTypes = {
+}, _class.propTypes = {
   style: _propTypes2.default.object,
@@ -170,3 +185,3 @@ onClearNum: _propTypes2.default.func,
   onClose: _propTypes2.default.func
-};
+}, _temp);
 exports.default = NumBoard;

lib/components/button.js

@@ -25,2 +25,3 @@ 'use strict';
       style = _ref$style === undefined ? {} : _ref$style,
+      icon = _ref.icon,
       _ref$disabled = _ref.disabled,
@@ -32,3 +33,13 @@ disabled = _ref$disabled === undefined ? false : _ref$disabled,
       onClick = _ref$onClick === undefined ? nill : _ref$onClick;
-  return _react2.default.createElement('input', {
+  return icon ? _react2.default.createElement(
+    'button',
+    {
+      className: className ? 'nb-key ' + className : 'nb-key',
+      value: value,
+      style: style,
+      onClick: onClick,
+      disabled: disabled
+    },
+    _react2.default.createElement('i', { className: 'icon ' + icon })
+  ) : _react2.default.createElement('input', {
     type: 'button',
@@ -46,2 +57,3 @@ className: className ? 'nb-key ' + className : 'nb-key',
   style: {},
+  icon: '',
   disabled: false,
@@ -55,2 +67,3 @@ className: '',
   style: _propTypes2.default.object,
+  icon: _propTypes2.default.string,
   disabled: _propTypes2.default.bool,
@@ -57,0 +70,0 @@ className: _propTypes2.default.string,

lib/components/index.js

 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _react = require('react');
@@ -25,8 +45,2 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var nill = function nill() {
@@ -36,3 +50,3 @@ return false;
 
-function showNumBoard() {
+function show() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -45,8 +59,14 @@
     var unmountResult = _reactDom2.default.unmountComponentAtNode(div);
+    var _props$onClose = props.onClose,
+        onClose = _props$onClose === undefined ? nill : _props$onClose;
+
+
     if (unmountResult && div.parentNode) {
       div.parentNode.removeChild(div);
     }
+
+    onClose();
   }
 
-  _reactDom2.default.render(_react2.default.createElement(_board2.default, _extends({}, props, { onClose: function onClose() {
+  _reactDom2.default.render(_react2.default.createElement(_board2.default, (0, _extends3.default)({}, props, { onClose: function onClose() {
       return remove();
@@ -104,9 +124,41 @@ } })), div);
   return _temp = _class = function (_Component) {
-    _inherits(Wrapper, _Component);
+    (0, _inherits3.default)(Wrapper, _Component);
 
     function Wrapper(props) {
-      _classCallCheck(this, Wrapper);
+      (0, _classCallCheck3.default)(this, Wrapper);
 
-      var _this = _possibleConstructorReturn(this, (Wrapper.__proto__ || Object.getPrototypeOf(Wrapper)).call(this, props));
+      var _this = (0, _possibleConstructorReturn3.default)(this, (Wrapper.__proto__ || (0, _getPrototypeOf2.default)(Wrapper)).call(this, props));
 
+      _this.triggerChange = function (changedValue) {
+        var onChange = _this.props.onChange;
+        if (onChange) {
+          onChange(changedValue);
+        }
+      };
+
+      _this.onInputNum = function (num) {
+        var _this$state$value = _this.state.value,
+            value = _this$state$value === undefined ? '' : _this$state$value;
+
+        var newValue = value + num;
+        _this.setState({ value: newValue });
+        _this.triggerChange(newValue);
+      };
+
+      _this.onDeleteNum = function () {
+        var _this$state$value2 = _this.state.value,
+            value = _this$state$value2 === undefined ? '' : _this$state$value2;
+
+        if (value.length > 0) {
+          var newValue = value.slice(0, value.length - 1);
+          _this.setState({ value: newValue });
+          _this.triggerChange(newValue);
+        }
+      };
+
+      _this.onClearNum = function () {
+        _this.setState({ value: '' });
+        _this.triggerChange('');
+      };
+
       _this.state = {
@@ -118,8 +170,9 @@ value: props.value
 
-    _createClass(Wrapper, [{
+    (0, _createClass3.default)(Wrapper, [{
       key: 'componentWillReceiveProps',
       value: function componentWillReceiveProps(nextProps) {
-        var value = nextProps.value;
-
-        this.setState({ value: value });
+        if ('value' in nextProps) {
+          var value = nextProps.value;
+          this.setState({ value: value });
+        }
       }
@@ -139,3 +192,3 @@ }, {
         if (!this.props.disabled) {
-          showNumBoard({
+          show({
             style: {
@@ -145,5 +198,2 @@ top: top, left: left
             value: this.state.value,
-            onInput: function onInput(value) {
-              _this2.onInput(value);
-            },
             onInputNum: function onInputNum(value) {
@@ -164,41 +214,10 @@ _this2.onInputNum(value);
     }, {
-      key: 'onInput',
-      value: function onInput(value) {
-        this.props.onChange({
-          target: { value: value }
-        });
-      }
-    }, {
-      key: 'onInputNum',
-      value: function onInputNum(num) {
-        var _state$value = this.state.value,
-            value = _state$value === undefined ? '' : _state$value;
-
-        var newValue = value + num;
-        this.setState({ value: newValue });
-        this.onInput(newValue);
-      }
-    }, {
-      key: 'onDeleteNum',
-      value: function onDeleteNum() {
-        var _state$value2 = this.state.value,
-            value = _state$value2 === undefined ? '' : _state$value2;
-
-        if (value.length > 0) {
-          var newValue = value.slice(0, value.length - 1);
-          this.setState({ value: newValue });
-          this.onInput(newValue);
-        }
-      }
-    }, {
-      key: 'onClearNum',
-      value: function onClearNum() {
-        this.setState({ value: '' });
-        this.onInput('');
-      }
-    }, {
       key: 'onChange',
       value: function onChange(e) {
-        this.setState({ value: e.target.value });
-        this.props.onChange(e);
+        var value = e.target ? e.target.value : e;
+        if (!('value' in this.props)) {
+          this.setState({ value: value });
+        }
+
+        this.props.onChange(value);
       }
@@ -210,3 +229,3 @@ }, {
 
-        return _react2.default.createElement(Input, _extends({}, this.props, {
+        return _react2.default.createElement(Input, (0, _extends3.default)({}, this.props, {
           onClick: function onClick() {
@@ -225,3 +244,2 @@ return _this3.onClick();
     }]);
-
     return Wrapper;
@@ -231,3 +249,2 @@ }(_react.Component), _class.defaultProps = {
     onChange: nill,
-    value: '',
     disabled: false
@@ -237,3 +254,2 @@ }, _class.propTypes = {
     onChange: _propTypes2.default.func,
-    value: _propTypes2.default.string,
     disabled: _propTypes2.default.bool
@@ -244,5 +260,5 @@ }, _temp;
 module.exports = {
-  showNumBoard: showNumBoard,
   NumBoard: _board2.default,
+  show: show,
   create: create
 };

package.json

 {
   "name": "react-numboard",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
@@ -12,2 +12,3 @@ "main": "./lib/index.js",
   "devDependencies": {
+    "antd": "^3.1.0",
     "babel-cli": "^6.26.0",
@@ -17,2 +18,5 @@ "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-import": "^1.6.3",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
@@ -39,3 +43,3 @@ "babel-preset-react": "^6.24.1",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel ./src --out-dir ./lib && lessc src/style.less lib/style.css",
+    "build": "babel ./src --out-dir ./lib && lessc src/style.less lib/style.css && node_modules/.bin/webpack",
     "dev": "BABEL_ENV=development webpack-dev-server --devtool eval --progress --colors",
@@ -42,0 +46,0 @@ "lint": "eslint src example --ext '.js,.jsx' --cache"

src/components/index.jsx

@@ -8,3 +8,3 @@ import React, { Component } from 'react';
 
-function showNumBoard(props = {}) {
+function show(props = {}) {
   const div = document.createElement('div');
@@ -15,5 +15,9 @@ document.body.appendChild(div);
     const unmountResult = ReactDOM.unmountComponentAtNode(div);
+    const { onClose = nill } = props;
+
     if (unmountResult && div.parentNode) {
       div.parentNode.removeChild(div);
     }
+
+    onClose();
   }
@@ -71,3 +75,2 @@
     onChange: nill,
-    value: '',
     disabled: false,
@@ -79,3 +82,2 @@ }
     onChange: PropTypes.func,
-    value: PropTypes.string,
     disabled: PropTypes.bool,
@@ -92,6 +94,15 @@ }
   componentWillReceiveProps(nextProps) {
-    const { value } = nextProps;
-    this.setState({ value });
+    if ('value' in nextProps) {
+      const value = nextProps.value;
+      this.setState({ value });
+    }
   }
 
+  triggerChange = (changedValue) => {
+    const onChange = this.props.onChange;
+    if (onChange) {
+      onChange(changedValue);
+    }
+  }
+
   onClick() {
@@ -103,3 +114,3 @@ const domNode = ReactDOM.findDOMNode(this.numInput);
     if (!this.props.disabled) {
-      showNumBoard({
+      show({
         style: {
@@ -109,3 +120,2 @@ top, left,
         value: this.state.value,
-        onInput: (value) => { this.onInput(value); },
         onInputNum: (value) => { this.onInputNum(value); },
@@ -120,16 +130,10 @@ onDeleteNum: () => { this.onDeleteNum(); },
 
-  onInput(value) {
-    this.props.onChange({
-      target: { value },
-    });
-  }
-
-  onInputNum(num) {
+  onInputNum = (num) => {
     const { value = '' } = this.state;
     const newValue = value + num;
     this.setState({ value: newValue });
-    this.onInput(newValue);
+    this.triggerChange(newValue);
   }
 
-  onDeleteNum() {
+  onDeleteNum = () => {
     const { value = '' } = this.state;
@@ -139,14 +143,18 @@ if (value.length > 0) {
       this.setState({ value: newValue });
-      this.onInput(newValue);
+      this.triggerChange(newValue);
     }
   }
 
-  onClearNum() {
+  onClearNum = () => {
     this.setState({ value: '' });
-    this.onInput('');
+    this.triggerChange('');
   }
 
   onChange(e) {
-    this.setState({ value: e.target.value });
-    this.props.onChange(e);
+    const value = e.target ? e.target.value : e;
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+
+    this.props.onChange(value);
   }
@@ -168,5 +176,5 @@
 module.exports = {
-  showNumBoard,
   NumBoard,
+  show,
   create,
 };

webpack.config.js

@@ -11,3 +11,3 @@ const path = require('path');
   ],
-  output: { path: path.join(__dirname, 'example'), filename: 'bundle.js' },
+  output: { path: path.join(__dirname, './'), filename: 'bundle.js' },
   devtool: 'inline-source-map',
@@ -25,3 +25,3 @@ devServer: {
         presets: [['es2015', { modules: false }], 'stage-0', 'react'],
-        plugins: ['react-hot-loader/babel'],
+        plugins: ['transform-decorators-legacy', 'react-hot-loader/babel'],
       },
@@ -28,0 +28,0 @@ }, {

New alerts

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

Improved metrics

Total package byte prevSize

4042142

increased by52.89%

Lines of code

36814

increased by35.58%

Worsened metrics

Dev dependency count

26

increased by18.18%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes