@hi-ui/hiui 2.15.11 → 2.15.12

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

@@ -0,0 +1,505 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _testUtils = require("react-dom/test-utils");
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _ = _interopRequireDefault(require("../"));
+
+/* eslint-env jest */
+var changeCallback = jest.fn(function (items) {
+  return items;
+});
+var successCallback = jest.fn(function (res) {
+  return res.data;
+});
+var errorCallback = jest.fn(function (err) {
+  return err;
+});
+jest.mock('lodash/debounce', function () {
+  return jest.fn(function (fn) {
+    return fn;
+  });
+});
+
+function trigger(elem, event, code) {
+  var myEvent = document.createEvent('Event'); // 初始化这个事件对象，为它提高需要的“特性”
+
+  if (code) {
+    myEvent.which = code;
+    myEvent.keyCode = code; // Ctrl
+  }
+
+  myEvent.initEvent(event, true, true); //执行事件
+
+  elem.dispatchEvent(myEvent);
+}
+
+var options = [{
+  title: '电视',
+  id: '3'
+}, {
+  title: '手机',
+  id: '2'
+}, {
+  title: '笔记本',
+  id: '4'
+}, {
+  title: '生活周边',
+  id: '5'
+}, {
+  title: '办公',
+  id: '6'
+}];
+var multiOptions = [{
+  title: '手机',
+  id: '2'
+}, {
+  title: '小米2',
+  id: '2-1'
+}, {
+  title: '小米3',
+  id: '2-2'
+}, {
+  title: '小米4',
+  id: '2-3'
+}, {
+  title: '小米5',
+  id: '2-4'
+}, {
+  title: '电脑',
+  id: '3'
+}, {
+  title: '笔记本',
+  id: '4'
+}, {
+  title: '生活周边',
+  id: '5'
+}, {
+  title: '其它',
+  id: '6'
+}];
+var types = ['single', 'multiple'];
+describe('Select', function () {
+  beforeEach(function () {
+    jest.useFakeTimers();
+  });
+  afterEach(function () {
+    jest.useRealTimers();
+  });
+  it('should disabled', function () {
+    types.forEach(function (type) {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+        type: type,
+        disabled: true,
+        style: {
+          width: 200
+        },
+        data: options
+      }));
+      expect(wrapper.find('.hi-select__input').hasClass('disabled')).toEqual(true);
+      wrapper.find('.hi-select__input').simulate('click');
+      expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(false);
+      wrapper.unmount();
+    });
+  });
+  it('should have default value', function () {
+    types.forEach(function (type) {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+        type: type,
+        style: {
+          width: 200
+        },
+        data: type === 'single' ? options : multiOptions,
+        defaultValue: type === 'single' ? '3' : ['2', '3']
+      }));
+
+      if (type === 'single') {
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('电视');
+        wrapper.find('.hi-select__input').simulate('click');
+        expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+        document.querySelectorAll('.hi-select__dropdown--item')[2].click();
+        wrapper.update();
+        expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(false);
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('笔记本');
+      }
+
+      if (type === 'multiple') {
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item').map(function (val) {
+          return val.find('.hi-select__input--item__name').text();
+        })).toEqual(['手机', '电脑']);
+        wrapper.find('.hi-select__input').simulate('click');
+        expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+        document.querySelectorAll('.hi-select__dropdown')[0].querySelectorAll('.hi-select__dropdown--item')[2].click();
+        wrapper.update();
+        expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item').map(function (val) {
+          return val.find('.hi-select__input--item__name').text();
+        })).toEqual(['手机', '电脑', '小米3']);
+      }
+
+      wrapper.unmount();
+    });
+  });
+  it('should control by value', function () {
+    types.forEach(function (type) {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+        type: type,
+        style: {
+          width: 200
+        },
+        data: type === 'single' ? options : multiOptions,
+        value: type === 'single' ? '2' : ['2', '4'],
+        defaultValue: type === 'single' ? '3' : ['2', '3']
+      }));
+
+      if (type === 'single') {
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('手机');
+        wrapper.find('.hi-select__input').simulate('click');
+        expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+        document.querySelectorAll('.hi-select__dropdown--item')[2].click();
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('手机');
+        wrapper.setProps({
+          value: '6'
+        });
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('办公');
+      }
+
+      if (type === 'multiple') {
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item').map(function (val) {
+          return val.find('.hi-select__input--item__name').text();
+        })).toEqual(['手机', '笔记本']);
+        wrapper.find('.hi-select__input').simulate('click');
+        expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+        document.querySelectorAll('.hi-select__dropdown')[0].querySelectorAll('.hi-select__dropdown--item')[2].click();
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item').map(function (val) {
+          return val.find('.hi-select__input--item__name').text();
+        })).toEqual(['手机', '笔记本']);
+        wrapper.setProps({
+          value: ['4', '5', '6']
+        });
+        expect(wrapper.find('.hi-select__input').find('.hi-select__input--item').map(function (val) {
+          return val.find('.hi-select__input--item__name').text();
+        })).toEqual(['笔记本', '生活周边', '其它']);
+      }
+
+      wrapper.unmount();
+    });
+  });
+  it('should can delete one in multiple select', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "multiple",
+      style: {
+        width: '300px'
+      },
+      optionWidth: 400,
+      data: multiOptions,
+      defaultValue: ['4', '5', '2', '3'],
+      searchable: true,
+      placeholder: "\u8BF7\u9009\u62E9...",
+      noFoundTip: "\u65E0\u5339\u914D\u6570\u636E",
+      onChange: changeCallback
+    }));
+    expect(wrapper.find('.hi-select__input--item')).toHaveLength(4);
+    wrapper.find('.hi-select__input--item__remove').at(0).simulate('click'); // 删除第一个
+
+    expect(wrapper.find('.hi-select__input--item')).toHaveLength(3);
+    wrapper.unmount();
+  });
+  it('should can delete all in multiple select', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "multiple",
+      style: {
+        width: '300px'
+      },
+      optionWidth: 400,
+      data: multiOptions,
+      defaultValue: ['4', '5', '2', '3'],
+      searchable: true,
+      placeholder: "\u8BF7\u9009\u62E9...",
+      noFoundTip: "\u65E0\u5339\u914D\u6570\u636E",
+      onChange: changeCallback
+    }));
+    expect(wrapper.find('.hi-select__input--item')).toHaveLength(4);
+    wrapper.find('.hi-select__input').simulate('focus');
+    wrapper.find('.hi-select__input--icon__close').simulate('click');
+    expect(wrapper.find('.hi-select__input--item')).toHaveLength(0);
+    wrapper.unmount();
+  });
+  it('should can check all in multiple select', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "multiple",
+      style: {
+        width: '300px'
+      },
+      optionWidth: 400,
+      data: multiOptions,
+      defaultValue: ['4', '5', '2', '3'],
+      searchable: true,
+      showCheckAll: true,
+      placeholder: "\u8BF7\u9009\u62E9...",
+      noFoundTip: "\u65E0\u5339\u914D\u6570\u636E"
+    }));
+    wrapper.find('.hi-select__input').simulate('click');
+    expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+    document.querySelector('.hi-select__dropdown__searchbar--input').value = '米';
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'input');
+    document.querySelectorAll('.hi-select__dropdown-check-all')[0].click();
+    expect(document.querySelectorAll('.hi-checkbox__input--checked')).toHaveLength(4);
+    wrapper.unmount();
+  });
+  it('should custom render dropdown list', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      value: '3',
+      data: options,
+      searchable: true,
+      render: function render(item, isSelected) {
+        return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("span", {
+          className: "option-left",
+          style: {
+            "float": 'left'
+          }
+        }, item.name), _react["default"].createElement("span", {
+          className: "option-right",
+          style: {
+            "float": 'right',
+            color: '#999',
+            fontSize: 14
+          }
+        }, item.id));
+      }
+    }));
+    wrapper.find('.hi-select__input').simulate('click'); // 展开
+
+    expect(document.querySelectorAll('.option-left')).toHaveLength(5); // 测试自定义模板
+
+    expect(document.querySelectorAll('.option-right')).toHaveLength(5);
+    wrapper.unmount();
+  });
+  it('should handle keydown', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "single",
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      defaultValue: '3',
+      data: options
+    }));
+    wrapper.find('.hi-select__input').simulate('click');
+
+    _testUtils.Simulate.mouseEnter(document.querySelectorAll('.hi-select__dropdown--item')[1]);
+
+    expect(document.querySelectorAll('.hi-select__dropdown--item')[1].getAttribute('data-focused')).toEqual('true');
+    wrapper.unmount();
+  });
+  it('should handle mouseEnter', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "single",
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      defaultValue: '3',
+      data: options
+    }));
+    wrapper.find('.hi-select__input').simulate('click');
+    expect(document.querySelectorAll('.hi-select__dropdown--item')[0].getAttribute('data-focused')).toEqual('true');
+    wrapper.find('.hi-select__input--search').find('input').simulate('keydown', {
+      keyCode: 40
+    });
+    expect(document.querySelectorAll('.hi-select__dropdown--item')[0].getAttribute('data-focused')).toEqual('false');
+    wrapper.find('.hi-select__input--search').find('input').simulate('keydown', {
+      keyCode: 13
+    });
+    expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('手机');
+    wrapper.find('.hi-select__input').simulate('click');
+    wrapper.find('.hi-select__input--search').find('input').simulate('keydown', {
+      keyCode: 38
+    });
+    wrapper.find('.hi-select__input--search').find('input').simulate('keydown', {
+      keyCode: 13
+    });
+    expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('电视');
+    wrapper.unmount();
+  });
+  it('should handle mouseEnter when searchable', function () {
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "single",
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      searchable: true,
+      defaultValue: '2',
+      data: options
+    }));
+    wrapper.find('.hi-select__input').simulate('click');
+    expect(document.querySelectorAll('.hi-select__dropdown__searchbar--input')).toHaveLength(1);
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'focus');
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'keydown', 40);
+    expect(document.querySelectorAll('.hi-select__dropdown--item')[1].getAttribute('data-focused')).toEqual('true');
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'keydown', 13);
+    expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('手机');
+    wrapper.find('.hi-select__input').simulate('click');
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'focus');
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'keydown', 38);
+    expect(document.querySelectorAll('.hi-select__dropdown--item')[0].getAttribute('data-focused')).toEqual('true');
+    trigger(document.querySelector('.hi-select__dropdown__searchbar--input'), 'keydown', 13);
+    expect(wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text()).toEqual('电视');
+    wrapper.unmount();
+  });
+  it('should close when click outside', function () {
+    var outsideDom = document.createElement('div');
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      type: "single",
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      defaultValue: '3',
+      data: options
+    }));
+    document.body.appendChild(outsideDom);
+    wrapper.find('.hi-select__input').simulate('click');
+    expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true);
+    outsideDom.click();
+    wrapper.update();
+    expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(false);
+    outsideDom.remove();
+    wrapper.unmount();
+  });
+  it('异步单选', function (done) {
+    var _document = document;
+    var mockSuccessResponse = {
+      success: true,
+      code: 200,
+      data: [{
+        title: '1-0',
+        id: '0'
+      }, {
+        title: '1-1',
+        id: '1'
+      }, {
+        title: '1-2',
+        id: '2'
+      }, {
+        title: '1-3',
+        id: '3'
+      }]
+    };
+    var mockJsonPromise = Promise.resolve(mockSuccessResponse);
+    var mockFetchPromise = Promise.resolve({
+      json: function json() {
+        return mockJsonPromise;
+      }
+    });
+    jest.spyOn(global, 'fetch').mockImplementation(function () {
+      return mockFetchPromise;
+    });
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      mode: "single",
+      dataSource: {
+        type: 'GET',
+        key: 'id',
+        url: 'http://yapi.demo.qunar.com/mock/26534/hiui/select',
+        transformResponse: function transformResponse(res) {
+          return res.data;
+        }
+      },
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      onChange: changeCallback
+    }));
+    wrapper.find('.hi-select__input').simulate('click'); // 展开
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '1'
+      }
+    }); // 测试搜索
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('http://yapi.demo.qunar.com/mock/26534/hiui/select?id=1', {
+      method: 'GET'
+    });
+    process.nextTick(function () {
+      expect(_document.querySelectorAll('.hi-select__dropdown--item')).toHaveLength(4);
+      global.fetch.mockClear();
+      done();
+      wrapper.unmount();
+    });
+  });
+  it('异步多选首次加载数据', function (done) {
+    var _document = document;
+    var mockSuccessResponse = {
+      success: true,
+      code: 200,
+      data: [{
+        title: '1-0',
+        id: '0'
+      }, {
+        title: '1-1',
+        id: '1'
+      }, {
+        title: '1-2',
+        id: '2'
+      }, {
+        title: '1-3',
+        id: '3'
+      }]
+    };
+    var mockJsonPromise = Promise.resolve(mockSuccessResponse); // 2
+
+    var mockFetchPromise = Promise.resolve({
+      // 3
+      json: function json() {
+        return mockJsonPromise;
+      }
+    });
+    jest.spyOn(global, 'fetch').mockImplementation(function () {
+      return mockFetchPromise;
+    });
+    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_["default"], {
+      mode: "single",
+      dataSource: {
+        type: 'GET',
+        key: 'id',
+        url: 'http://yapi.demo.qunar.com/mock/26534/hiui/select',
+        transformResponse: function transformResponse(res) {
+          return res.data;
+        }
+      },
+      autoload: true,
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      onChange: changeCallback
+    }));
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('http://yapi.demo.qunar.com/mock/26534/hiui/select', {
+      method: 'GET'
+    });
+    process.nextTick(function () {
+      // 首次加载数据
+      wrapper.find('.hi-select__input').simulate('click'); // 展开
+
+      expect(_document.querySelectorAll('.hi-select__dropdown--item')).toHaveLength(1);
+      global.fetch.mockClear();
+      done();
+    });
+  });
+});

package/es/select/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,12 +9,12 @@ exports["default"] = void 0;
 
 var _Select = _interopRequireDefault(require("./Select"));
 
-var _Option = _interopRequireDefault(require("./Option"));
+var _selectLegacy = _interopRequireDefault(require("./select-legacy"));
 
 require("./style/index");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _SwitchVersion = _interopRequireDefault(require("../_util/SwitchVersion"));
+
+var _default = (0, _SwitchVersion["default"])(_Select["default"], _selectLegacy["default"]);
 
-_Select["default"].Option = _Option["default"];
-var _default = _Select["default"];
 exports["default"] = _default;

package/es/select/select-legacy/Option.js

@@ -0,0 +1,78 @@
+"use strict";
+
+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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/* @flow */
+var Option =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Option, _Component);
+
+  function Option() {
+    (0, _classCallCheck2["default"])(this, Option);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Option).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(Option, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _this$props = this.props,
+          name = _this$props.name,
+          id = _this$props.id,
+          disabled = _this$props.disabled,
+          children = _this$props.children;
+      this.parent().addOption({
+        name: name,
+        id: id,
+        disabled: disabled,
+        children: children
+      });
+    }
+  }, {
+    key: "parent",
+    value: function parent() {
+      return this.context.component;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+  return Option;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Option, "propTypes", {
+  disabled: _propTypes["default"].bool,
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  name: _propTypes["default"].string
+});
+(0, _defineProperty2["default"])(Option, "defaultProps", {
+  disabled: false
+});
+Option.contextTypes = {
+  component: _propTypes["default"].any
+};
+var _default = Option;
+exports["default"] = _default;