@hi-ui/hiui 2.15.11 → 2.15.12

package/es/checkbox/Checkbox.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../context"));
+
+var prefixCls = 'hi-checkbox';
+
+var Checkbox =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Checkbox, _Component);
+
+  function Checkbox(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Checkbox);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Checkbox).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (event) {
+      var onChange = _this.props.onChange;
+      onChange && onChange(event);
+      hasChecked(_this.props) || _this.setState({
+        checked: event.target.checked
+      });
+    });
+    _this.state = getChecked(props);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Checkbox, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          autoFocus = _this$props.autoFocus,
+          className = _this$props.className,
+          children = _this$props.children,
+          disabled = _this$props.disabled,
+          indeterminate = _this$props.indeterminate,
+          style = _this$props.style,
+          theme = _this$props.theme,
+          name = _this$props.name,
+          value = _this$props.value;
+      var checked = this.state.checked;
+      var checkboxCls = (0, _classnames["default"])(prefixCls, className, disabled && "".concat(prefixCls, "--disabled"), "theme__".concat(theme));
+      var inputCls = (0, _classnames["default"])("".concat(prefixCls, "__input"), checked && !indeterminate && "".concat(prefixCls, "__input--checked"), indeterminate && "".concat(prefixCls, "__input--indeterminate"));
+      return _react["default"].createElement("label", {
+        className: checkboxCls,
+        style: style
+      }, _react["default"].createElement("input", {
+        type: "checkbox",
+        autoFocus: autoFocus,
+        onChange: this.handleChange,
+        checked: checked,
+        disabled: disabled,
+        name: name,
+        value: value
+      }), _react["default"].createElement("span", {
+        className: inputCls
+      }), children !== undefined && _react["default"].createElement("span", {
+        className: "".concat(prefixCls, "__text")
+      }, children));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps) {
+      if (hasChecked(nextProps)) {
+        return getChecked(nextProps);
+      }
+
+      return null;
+    }
+  }]);
+  return Checkbox;
+}(_react.Component);
+
+Checkbox.propTypes = {
+  checked: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  defaultChecked: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  indeterminate: _propTypes["default"].bool,
+  name: _propTypes["default"].string,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  onChange: _propTypes["default"].func
+};
+Checkbox.defaultProps = {
+  defaultChecked: false
+};
+
+function hasChecked(props) {
+  var has = function has(key) {
+    return Object.prototype.hasOwnProperty.call(props, key);
+  };
+
+  return has('checked');
+}
+
+function getChecked(props) {
+  var checked = props.checked,
+      defaultChecked = props.defaultChecked;
+  return {
+    checked: hasChecked(props) ? checked || false : defaultChecked
+  };
+}
+
+var _default = (0, _context["default"])(Checkbox);
+
+exports["default"] = _default;

package/es/checkbox/Group.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var prefixCls = 'hi-checkbox-group';
+
+var Group =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Group, _Component);
+
+  function Group(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Group);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Group).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCheckboxChange", function (event) {
+      var updatedValue = event.target.value;
+      var updatedChecked = event.target.checked;
+      var onChange = _this.props.onChange;
+      var data = _this.state.data;
+      var newData = data.map(function (_ref) {
+        var value = _ref.value,
+            checked = _ref.checked,
+            rest = (0, _objectWithoutProperties2["default"])(_ref, ["value", "checked"]);
+        var isValueEquel = updatedValue === value || Number(updatedValue) === value;
+        return _objectSpread({
+          value: value,
+          checked: isValueEquel ? updatedChecked : checked
+        }, rest);
+      });
+      var checkedList = newData.filter(function (_ref2) {
+        var checked = _ref2.checked;
+        return checked;
+      }).map(function (_ref3) {
+        var value = _ref3.value;
+        return value;
+      });
+      onChange && onChange(checkedList);
+      hasValue(_this.props) || _this.setState({
+        data: newData
+      });
+    });
+    _this.state = {
+      data: getData(props),
+      originValue: props.value,
+      originData: props.data
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Group, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          className = _this$props.className,
+          name = _this$props.name,
+          disabled = _this$props.disabled,
+          style = _this$props.style,
+          placement = _this$props.placement;
+      var data = this.state.data;
+      var groupCls = (0, _classnames["default"])(prefixCls, className, placement === 'vertical' && "".concat(prefixCls, "--vertical"));
+      return _react["default"].createElement("div", {
+        className: groupCls,
+        style: _objectSpread({}, style)
+      }, data.map(function (_ref4, idx) {
+        var label = _ref4.label,
+            value = _ref4.value,
+            checked = _ref4.checked,
+            itemDisabled = _ref4.disabled;
+        return _react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
+          key: idx,
+          value: value,
+          name: name,
+          disabled: disabled || itemDisabled,
+          onChange: _this2.handleCheckboxChange
+        }, (0, _defineProperty2["default"])({}, hasValue(_this2.props) ? 'checked' : 'defaultChecked', checked)), label);
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, state) {
+      if (!(0, _isEqual["default"])(nextProps.value, state.originValue)) {
+        return {
+          data: getData(nextProps),
+          originValue: nextProps.value
+        };
+      }
+
+      if (!(0, _isEqual["default"])(nextProps.data, state.originData)) {
+        return {
+          data: getData(nextProps),
+          originData: nextProps.data
+        };
+      }
+
+      return null;
+    }
+  }]);
+  return Group;
+}(_react.Component);
+
+function hasValue(props) {
+  return props.value !== undefined;
+}
+
+function getData(props) {
+  var data = props.data,
+      value = props.value,
+      defaultValue = props.defaultValue;
+
+  var _value = hasValue(props) ? value : defaultValue;
+
+  return data.map(function (item) {
+    var isPlain = ['string', 'number'].includes((0, _typeof2["default"])(item));
+    var label = isPlain ? item : item.content;
+    var value = isPlain ? item : item.id;
+    var disabled = !isPlain && item.disabled;
+    return {
+      label: label,
+      value: value,
+      disabled: disabled,
+      checked: (_value || []).includes(value)
+    };
+  });
+}
+
+var PropTypesArrayOfStringOrNumber = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
+Group.propTypes = {
+  className: _propTypes["default"].string,
+  placement: _propTypes["default"].string,
+  data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].shape({
+    label: PropTypesArrayOfStringOrNumber,
+    value: PropTypesArrayOfStringOrNumber,
+    disabled: _propTypes["default"].bool
+  })])),
+  defaultValue: _propTypes["default"].arrayOf(PropTypesArrayOfStringOrNumber),
+  disabled: _propTypes["default"].bool,
+  name: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  style: _propTypes["default"].object,
+  value: _propTypes["default"].arrayOf(PropTypesArrayOfStringOrNumber)
+};
+Group.defaultProps = {
+  data: [],
+  placement: 'horizontal',
+  defaultValue: []
+};
+var _default = Group;
+exports["default"] = _default;

package/es/checkbox/__tests__/index.test.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _sinon = require("sinon");
+
+var _index = _interopRequireDefault(require("../index"));
+
+/* eslint-env jest */
+var list = ['手机', '电脑', '智能'];
+var nList = [{
+  content: '手机',
+  id: 'Phone',
+  disabled: true
+}, {
+  content: '电脑',
+  id: 'Computer'
+}, {
+  content: '智能',
+  id: 'Intelli'
+}];
+describe('Checkbox', function () {
+  it('normal', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], null, "Checkbox1"), _react["default"].createElement(_index["default"], null, "Checkbox2")));
+    expect(wrapper.find('.hi-checkbox')).toHaveLength(2);
+  });
+  describe('PropTypes', function () {
+    it('defaultChecked', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        defaultChecked: true
+      }, "Checkbox")));
+      var inputEl = wrapper.find('input');
+      expect(inputEl).toHaveLength(1);
+      expect(inputEl.prop('checked')).toBeTruthy();
+      expect(wrapper.find('.hi-checkbox__input--checked')).toHaveLength(1);
+    });
+    it('autoFocus', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
+        autoFocus: true
+      }, "Checkbox")));
+      var inputEl = wrapper.find('input:focus');
+      expect(inputEl).toHaveLength(1);
+    });
+    it('checked', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        checked: true
+      }, "Checkbox"));
+      var inputEl = wrapper.find('input');
+      expect(inputEl).toHaveLength(1);
+      expect(inputEl.prop('checked')).toBeTruthy();
+      expect(wrapper.find('.hi-checkbox__input--checked')).toHaveLength(1);
+      wrapper.setProps({
+        checked: false
+      });
+      expect(inputEl).toHaveLength(1);
+      expect(inputEl.prop('checked')).toBeTruthy();
+      expect(wrapper.find('.hi-checkbox__input--checked')).toHaveLength(0);
+    });
+    it('className', function () {
+      var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
+        className: "customer"
+      }, "Checkbox"));
+      expect(wrapper.find('.customer')).toHaveLength(1);
+    });
+    it('disabled', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        disabled: true
+      }, "Checkbox"));
+      expect(wrapper.find('label').hasClass('hi-checkbox--disabled')).toBeTruthy();
+      expect(wrapper.find('input').prop('disabled')).toBeTruthy();
+      wrapper.setProps({
+        disabled: false
+      });
+      expect(wrapper.find('label').hasClass('hi-checkbox--disabled')).toBeFalsy();
+      expect(wrapper.find('input').prop('disabled')).toBeFalsy();
+    });
+    it('indeterminate', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        indeterminate: true,
+        checked: false
+      }, "Checkbox"));
+      expect(wrapper.find('.hi-checkbox__input--indeterminate')).toHaveLength(1);
+      wrapper.setProps({
+        indeterminate: false
+      });
+      expect(wrapper.find('.hi-checkbox__input--indeterminate')).toHaveLength(0);
+    });
+    it('onChange', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        onChange: callback
+      }));
+      wrapper.find('input').simulate('change');
+      expect(callback.callCount).toEqual(1);
+      wrapper.find('label').simulate('change');
+      expect(callback.callCount).toEqual(1);
+    });
+  }); // it('onClick', () => {
+  //   const callback = fake()
+  //   const wrapper = mount(
+  //     <div>
+  //       <Breadcrumb onClick={callback} data={data} />
+  //       <Breadcrumb data={data} />
+  //     </div>
+  //   )
+  //   wrapper.find('.hi-breadcrumb__content').at(0).simulate('click')
+  //   wrapper.find('.hi-breadcrumb__content').at(5).simulate('click')
+  //   expect(callback.callCount).toEqual(1)
+  // })
+});
+describe('Checkbox.Goup', function () {
+  it('normal1', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: list
+    }));
+    expect(wrapper.find('.hi-checkbox')).toHaveLength(3);
+    wrapper.setProps({
+      data: ['手机', '电脑']
+    });
+    expect(wrapper.find('.hi-checkbox')).toHaveLength(2);
+  });
+  it('normal2', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: nList
+    }));
+    expect(wrapper.find('.hi-checkbox')).toHaveLength(3);
+    expect(wrapper.find('.hi-checkbox--disabled')).toHaveLength(1);
+    wrapper.setProps({
+      data: ['手机', '电脑']
+    });
+    expect(wrapper.find('.hi-checkbox')).toHaveLength(2);
+  });
+  it('defaultValue', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: list,
+      defaultValue: ['手机']
+    }));
+    expect(wrapper.find('.hi-checkbox__input').at(0).hasClass('hi-checkbox__input--checked')).toBeTruthy();
+    wrapper.setProps({
+      defaultValue: ['电脑']
+    });
+    expect(wrapper.find('.hi-checkbox__input').at(1).hasClass('hi-checkbox__input--checked')).toBeFalsy();
+  });
+  it('value', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: list,
+      value: ['手机']
+    }));
+    expect(wrapper.find('.hi-checkbox__input').at(0).hasClass('hi-checkbox__input--checked')).toBeTruthy();
+    wrapper.setProps({
+      value: ['手机', '电脑']
+    });
+    expect(wrapper.find('.hi-checkbox__input').at(0).hasClass('hi-checkbox__input--checked')).toBeTruthy();
+    expect(wrapper.find('.hi-checkbox__input').at(1).hasClass('hi-checkbox__input--checked')).toBeTruthy();
+  });
+  it('disabled', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: list,
+      value: ['手机'],
+      disabled: true
+    }));
+    expect(wrapper.find('.hi-checkbox--disabled')).toHaveLength(3);
+    expect(wrapper.find('input').map(function (node) {
+      return node.prop('disabled');
+    })).toEqual([true, true, true]);
+    wrapper.setProps({
+      disabled: false
+    });
+    expect(wrapper.find('.hi-checkbox--disabled')).toHaveLength(0);
+    expect(wrapper.find('input').map(function (node) {
+      return node.prop('disabled');
+    })).toEqual([false, false, false]);
+  });
+  it('name', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: list,
+      name: "test",
+      value: []
+    }));
+    expect(wrapper.find('input').first().prop('name')).toEqual('test');
+  });
+  it('onChange', function () {
+    var callback = (0, _sinon.fake)();
+    var callback2 = (0, _sinon.fake)();
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"].Group, {
+      onChange: callback,
+      data: nList
+    }), _react["default"].createElement(_index["default"].Group, {
+      onChange: callback2,
+      data: nList,
+      value: ['手机']
+    })));
+    wrapper.find('input').first().simulate('change');
+    expect(callback.callCount).toEqual(1);
+    wrapper.find('input').at(4).simulate('change');
+    expect(callback2.callCount).toEqual(1);
+  });
+  it('style', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"].Group, {
+      data: list,
+      style: {
+        width: 100
+      },
+      value: []
+    }));
+    expect(wrapper.find('.hi-checkbox-group').prop('style')).toEqual(expect.objectContaining({
+      width: 100
+    }));
+  });
+  describe('Checkbox.Goup.funs', function () {
+    it('onChange', function () {
+      var callback = (0, _sinon.fake)();
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement("div", null, _react["default"].createElement(_index["default"].Group, {
+        onChange: callback,
+        data: nList,
+        value: ['Phone']
+      }))); // wrapper.setProps({value: ['Computer']})
+
+      wrapper.find('input').at(1).simulate('change'); // expect(callback2.callCount).toEqual(1)
+    });
+  });
+});