rox-tag - npm Package Compare versions

Comparing version 0.0.7 to 0.0.11

lib/styles/index.js

@@ -34,3 +34,6 @@ 'use strict';
     fontSize: variables['tagitem-font-size'],
-    borderWidth: 1
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    marginBottom: variables['tagitem-margin-bottom']
   };
@@ -37,0 +40,0 @@

lib/styles/variable.js

@@ -23,2 +23,3 @@ 'use strict';
     'tagitem-padding': (0, _nukeCore.vLoader)(Core.s2),
+    'tagitem-margin-bottom': (0, _nukeCore.vLoader)(Core.s2),
     'tagitem-font-size': (0, _nukeCore.vLoader)(Core['font-size-subhead']),
@@ -25,0 +26,0 @@ 'tagitem-normal-background-color': (0, _nukeCore.vLoader)(Core['color-white']),

lib/view/tag-selector.js

@@ -14,2 +14,4 @@ 'use strict';
 
+var _roxTheme = require('rox-theme');
+
 var _roxView = require('rox-view');
@@ -23,2 +25,6 @@
 
+var _roxIcon = require('rox-icon');
+
+var _roxIcon2 = _interopRequireDefault(_roxIcon);
+
 var _styles = require('../styles');
@@ -30,2 +36,4 @@
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -37,2 +45,9 @@
 
+var tagItemIconStyle = {
+  position: 'absolute',
+  right: -3,
+  bottom: -6,
+  color: _roxTheme.Core['color-brand1-6']
+};
+
 var TagItem = function (_PureComponent) {
@@ -42,5 +57,37 @@ _inherits(TagItem, _PureComponent);
   function TagItem() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, TagItem);
 
-    return _possibleConstructorReturn(this, (TagItem.__proto__ || Object.getPrototypeOf(TagItem)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TagItem.__proto__ || Object.getPrototypeOf(TagItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleTouchStart = function () {
+      var _this$props = _this.props,
+          themeStyle = _this$props.themeStyle,
+          selected = _this$props.selected;
+
+
+      if (!selected) {
+        (0, _rax.setNativeProps)(_this.itemRef, {
+          style: themeStyle.press
+        });
+      }
+    }, _this.handleTouchEnd = function () {
+      var _this$props2 = _this.props,
+          themeStyle = _this$props2.themeStyle,
+          selected = _this$props2.selected;
+
+
+      if (!selected) {
+        (0, _rax.setNativeProps)(_this.itemRef, {
+          style: {
+            backgroundColor: themeStyle.normal.backgroundColor
+          }
+        });
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -51,2 +98,4 @@
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
@@ -56,14 +105,20 @@ themeStyle = _props.themeStyle,
           style = _props$style === undefined ? {} : _props$style,
-          children = _props.children;
+          selected = _props.selected,
+          children = _props.children,
+          onClick = _props.onClick,
+          needSelectedIcon = _props.needSelectedIcon;
 
-      var tagStyle = Object.assign({}, themeStyle, style);
+      var tagStyle = Object.assign({}, selected ? themeStyle.selected : themeStyle.normal, style);
 
       return (0, _rax.createElement)(
         _roxView2.default,
-        { style: tagStyle },
+        { ref: function ref(item) {
+            _this2.itemRef = item;
+          }, style: tagStyle, onClick: onClick, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd },
         typeof children === 'string' ? (0, _rax.createElement)(
           _roxText2.default,
-          { style: { color: tagStyle.color, fontSize: tagStyle.fontSize } },
+          { numberOfLines: 1, style: { color: tagStyle.color, fontSize: tagStyle.fontSize, textOverflow: 'ellipsis' } },
           children
-        ) : children
+        ) : children,
+        selected && needSelectedIcon ? (0, _rax.createElement)(_roxIcon2.default, { style: tagItemIconStyle, size: 'small', name: 'tag_check' }) : null
       );
@@ -77,5 +132,9 @@ }
 TagItem.propTypes = {
-  selected: _rax.PropTypes.bool
+  selected: _rax.PropTypes.bool,
+  needSelectedIcon: _rax.PropTypes.bool
 };
-TagItem.defaultProps = {};
+TagItem.defaultProps = {
+  selected: false,
+  needSelectedIcon: false
+};
 
@@ -86,3 +145,7 @@
 var selectorStyles = {
-  paddingLeft: 0
+  paddingLeft: _roxTheme.Core.s4,
+  paddingRight: _roxTheme.Core.s4,
+  flex: 1,
+  flexDirection: 'row',
+  flexWrap: 'wrap'
 };
@@ -93,11 +156,71 @@
 
-  function TagSelector() {
+  function TagSelector(props, context) {
     _classCallCheck(this, TagSelector);
 
-    return _possibleConstructorReturn(this, (TagSelector.__proto__ || Object.getPrototypeOf(TagSelector)).apply(this, arguments));
+    var _this3 = _possibleConstructorReturn(this, (TagSelector.__proto__ || Object.getPrototypeOf(TagSelector)).call(this, props, context));
+
+    _this3.handleClick = function (val) {
+      return function (e) {
+        var _this3$props = _this3.props,
+            onChange = _this3$props.onChange,
+            multiple = _this3$props.multiple;
+
+        var finalValue = val;
+
+        if (multiple) {
+          var values = _this3.getMultipleValue();
+
+          if (values.indexOf(val) > -1) {
+            values.splice(values.indexOf(val), 1);
+          } else {
+            values.push(val);
+          }
+
+          finalValue = [].concat(_toConsumableArray(values));
+        } else {
+          if (_this3.state.value === val) {
+            finalValue = null;
+          }
+        }
+
+        onChange(finalValue);
+
+        if (typeof _this3.props.value === 'undefined') {
+          _this3.setState({
+            value: finalValue
+          });
+        }
+      };
+    };
+
+    _this3.getMultipleValue = function () {
+      var val = _this3.state.value;
+
+      if (!Array.isArray(val)) {
+        return [val];
+      }
+
+      return val;
+    };
+
+    _this3.state = {
+      value: typeof props.value === 'undefined' ? props.defaultValue : props.value
+    };
+    return _this3;
   }
 
   _createClass(TagSelector, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (typeof this.props.defaultValue === 'undefined' && nextProps.value !== this.props.value) {
+        this.setState({
+          value: nextProps.value
+        });
+      }
+    }
+  }, {
     key: 'render',
     value: function render() {
+      var _this4 = this;
+
       var baseStyle = {
@@ -111,13 +234,19 @@ flexDirection: 'row'
           dataSource = _props2$dataSource === undefined ? [] : _props2$dataSource,
-          type = _props2.type;
+          type = _props2.type,
+          multiple = _props2.multiple;
 
+      var value = this.getMultipleValue();
 
       return (0, _rax.createElement)(
         _roxView2.default,
-        { style: selectorStyles },
+        { style: Object.assign({}, selectorStyles, style) },
         dataSource.map(function (val, i) {
+          var label = val.label;
+          var selected = value.indexOf(val.value) >= 0;
+
           return (0, _rax.createElement)(
             StyledTagItem,
-            { style: { marginRight: i === dataSource.length - 1 ? 0 : 4 }, type: type },
-            val
+            { onClick: _this4.handleClick(val.value), style: { marginRight: i === dataSource.length - 1 ? 0 : _roxTheme.Core.s2 },
+              type: type, selected: selected, needSelectedIcon: multiple },
+            label
           );
@@ -136,4 +265,13 @@ })
     value: _rax.PropTypes.any
-  }))
+  })),
+  multiple: _rax.PropTypes.bool,
+  defaultValue: _rax.PropTypes.any,
+  value: _rax.PropTypes.any,
+  onChange: _rax.PropTypes.func,
+  flex: _rax.PropTypes.bool
 };
+TagSelector.defaultProps = {
+  onChange: function onChange() {},
+  multiple: false
+};
 exports.default = TagSelector;

package.json

 {
   "name": "rox-tag",
-  "version": "0.0.7",
+  "version": "0.0.11",
   "description": "",
@@ -16,3 +16,5 @@ "main": "lib/index.js",
     "nuke-theme-provider": "^1.0.7",
+    "rox-icon": "^0.0.11",
     "rox-text": "^0.0.3",
+    "rox-theme": "^0.0.2",
     "rox-view": "^0.0.3"
@@ -19,0 +21,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

18615

increased by30.93%

Lines of code

409

increased by39.59%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Addedrox-icon@^0.0.11

• + Addedrox-theme@^0.0.2

• + Addednuke-icon@1.0.6(transitive)

• + Addednuke-iconfont@1.0.0(transitive)

• + Addednuke-image@1.0.6(transitive)

• + Addednuke-text@0.0.14(transitive)

• + Addednuke-touchable@1.0.0(transitive)

• + Addedrox-icon@0.0.11(transitive)

• + Addedrox-theme@0.0.2(transitive)

• + Addedstyle-equal@1.0.0(transitive)