@hi-ui/hiui 2.15.10 → 2.15.11

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

@@ -0,0 +1,429 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ = _interopRequireDefault(require("../"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var wrapper;
+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;
+  });
+});
+var options = [{
+  name: '手机',
+  id: '2'
+}, {
+  name: '电视',
+  id: '3'
+}, {
+  name: '笔记本',
+  id: '4',
+  disabled: true
+}, {
+  name: '生活周边',
+  id: '5'
+}, {
+  name: '办公',
+  id: '6'
+}];
+var multiOptions = [{
+  name: '手机',
+  id: '2'
+}, {
+  name: '小米2',
+  id: '2-1'
+}, {
+  name: '小米3',
+  id: '2-2'
+}, {
+  name: '小米4',
+  id: '2-3'
+}, {
+  name: '小米5',
+  id: '2-4'
+}, {
+  name: '电脑',
+  id: '3'
+}, {
+  name: '笔记本',
+  id: '4'
+}, {
+  name: '生活周边',
+  id: '5'
+}, {
+  name: '其它',
+  id: '6'
+}];
+describe('Select', function () {
+  beforeEach(function () {
+    jest.useFakeTimers();
+    jest.setTimeout(10000);
+  });
+  afterEach(function () {
+    wrapper && wrapper.unmount();
+    changeCallback.mockClear();
+    jest.useRealTimers();
+  });
+  it('禁止状态', function () {
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      mode: "single",
+      list: options,
+      placeholder: "\u8BF7\u9009\u62E9\u54C1\u7C7B",
+      style: {
+        width: '200px'
+      },
+      onChange: function onChange(item) {},
+      disabled: true
+    }));
+    wrapper.find('SelectInput').simulate('click');
+    expect(document.querySelectorAll('.hi-select__popper')).toHaveLength(0);
+  });
+  it('单选', function () {
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      mode: "single",
+      clearable: false,
+      style: {
+        width: '200px'
+      },
+      list: options,
+      value: "3",
+      onChange: changeCallback
+    }));
+    wrapper.find('SelectInput').simulate('click'); // 展开
+
+    expect(document.querySelectorAll('.hi-select__popper')).toHaveLength(1);
+    expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('3');
+    document.querySelectorAll('.hi-select__dropdown--item')[2].click(); // 测试disabled
+
+    expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('3');
+    expect(changeCallback.mock.results.length).toBe(0);
+    document.querySelectorAll('.hi-select__dropdown--item')[0].click(); // 测试点击选项
+
+    expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('2');
+    expect(document.querySelectorAll('.hi-popper__container--hide')).toHaveLength(1); // 选项面板是否隐藏
+
+    expect(changeCallback.mock.results[0].value[0].id).toEqual('2'); // onChange
+  });
+  it('自定义模板', function () {
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      value: '3',
+      list: options,
+      searchable: true,
+      onChange: changeCallback,
+      dropdownRender: function dropdownRender(item, isSelected) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+          className: "option-left",
+          style: {
+            "float": 'left'
+          }
+        }, item.name), /*#__PURE__*/_react["default"].createElement("span", {
+          className: "option-right",
+          style: {
+            "float": 'right',
+            color: '#999',
+            fontSize: 14
+          }
+        }, item.id));
+      }
+    }));
+    wrapper.find('SelectInput').simulate('click'); // 展开
+
+    expect(document.querySelectorAll('.option-left')).toHaveLength(5); // 测试自定义模板
+
+    expect(document.querySelectorAll('.option-right')).toHaveLength(5);
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '1'
+      }
+    }); // 测试搜索
+
+    expect(document.querySelectorAll('.option-right')).toHaveLength(0); // 无搜索结果
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '2'
+      }
+    });
+    expect(document.querySelectorAll('.option-right')).toHaveLength(1);
+    document.querySelectorAll('.hi-select__dropdown--item')[0].click();
+    expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('2');
+    expect(changeCallback.mock.results[0].value[0].id).toEqual('2');
+  });
+  it('异步单选', function (done) {
+    var _document = document;
+    var mockSuccessResponse = {
+      'success': true,
+      'code': 200,
+      'data': [{
+        'name': '1-0',
+        'id': '0'
+      }, {
+        'name': '1-1',
+        'id': '1'
+      }, {
+        'name': '1-2',
+        'id': '2'
+      }, {
+        'name': '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;
+    });
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      mode: "single",
+      origin: {
+        type: 'GET',
+        headers: {
+          token: 'tokenXXXXXXX'
+        },
+        mode: 'cors',
+        credentials: 'same-origin',
+        url: 'https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options',
+        func: successCallback
+      },
+      placeholder: "\u8BF7\u9009\u62E9\u79CD\u7C7B",
+      style: {
+        width: '200px'
+      },
+      onChange: changeCallback
+    }));
+    wrapper.find('SelectInput').simulate('click'); // 展开
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '1'
+      }
+    }); // 测试搜索
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options?keyword=1', {
+      'credentials': 'same-origin',
+      'headers': {
+        'token': 'tokenXXXXXXX'
+      },
+      'method': 'GET',
+      'mode': 'cors'
+    });
+    process.nextTick(function () {
+      expect(_document.querySelectorAll('.hi-select__dropdown--item')).toHaveLength(4);
+
+      _document.querySelectorAll('.hi-select__dropdown--item')[0].click();
+
+      expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('0');
+      expect(changeCallback.mock.results[0].value[0].id).toEqual('0');
+      global.fetch.mockClear();
+      done();
+    });
+  });
+  it('多选', function () {
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      mode: "multiple",
+      style: {
+        width: '300px'
+      },
+      optionWidth: 400,
+      multipleMode: "nowrap",
+      list: multiOptions,
+      value: ['4', '5', '2', '3'],
+      searchable: true,
+      showCheckAll: true,
+      placeholder: "\u8BF7\u9009\u62E9...",
+      noFoundTip: "\u65E0\u5339\u914D\u6570\u636E",
+      onChange: changeCallback
+    })); // expect(wrapper.find('.hi-select__input-items--left-count').text()).toEqual('1')
+
+    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);
+    expect(changeCallback.mock.results[0].value).toHaveLength(3);
+    wrapper.find('SelectInput').simulate('click'); // 展开
+
+    document.querySelectorAll('.hi-select__dropdown--item')[1].click(); // 选择第二项
+
+    expect(changeCallback.mock.results[1].value).toHaveLength(4);
+    wrapper.find('SelectInput').simulate('click'); // 展开
+
+    document.querySelectorAll('.hi-select__dropdown--item')[1].click(); // 取消选择第二项
+
+    expect(changeCallback.mock.results[2].value).toHaveLength(3);
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '0'
+      }
+    }); // 测试搜索
+
+    expect(document.querySelectorAll('.hi-select__dropdown-item--empty')).toHaveLength(1); // 无搜索结果
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '1'
+      }
+    });
+    expect(document.querySelectorAll('.hi-select__dropdown--item')).toHaveLength(1);
+    document.querySelectorAll('.hi-select__dropdown--item')[0].click();
+    expect(changeCallback.mock.results[3].value).toHaveLength(4);
+  });
+  it('异步多选首次加载数据', function (done) {
+    var _document = document;
+    var mockSuccessResponse = {
+      'success': true,
+      'code': 200,
+      'data': [{
+        'name': '1-0',
+        'id': '0'
+      }, {
+        'name': '1-1',
+        'id': '1'
+      }, {
+        'name': '1-2',
+        'id': '2'
+      }, {
+        'name': '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;
+    });
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      mode: "multiple",
+      autoload: true,
+      style: {
+        width: '300px'
+      },
+      multipleMode: "nowrap",
+      value: "1",
+      origin: {
+        type: 'get',
+        key: 'text',
+        keyword: 'xiaomi',
+        url: 'https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options',
+        func: successCallback
+      },
+      onChange: changeCallback
+    }));
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options?text=xiaomi', {
+      'keyword': 'xiaomi',
+      'method': 'get'
+    });
+    process.nextTick(function () {
+      // 首次加载数据
+      wrapper.find('SelectInput').simulate('click'); // 展开
+
+      expect(_document.querySelectorAll('.hi-select__dropdown--item')).toHaveLength(4);
+      expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('1'); // 默认选择项
+
+      global.fetch.mockClear();
+      done();
+    });
+  });
+  it('异步多选', function (done) {
+    var _document = document;
+    var mockSuccessResponse = {
+      'success': true,
+      'code': 200,
+      'data': [{
+        'name': '1-0',
+        'id': '0'
+      }, {
+        'name': '1-1',
+        'id': '1'
+      }, {
+        'name': '1-2',
+        'id': '2'
+      }, {
+        'name': '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;
+    });
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      mode: "multiple",
+      autoload: false,
+      style: {
+        width: '300px'
+      },
+      multipleMode: "nowrap",
+      origin: {
+        type: 'get',
+        key: 'text',
+        url: 'https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options',
+        func: successCallback
+      },
+      onChange: changeCallback
+    }));
+    wrapper.find('SelectInput').simulate('click'); // 展开
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '1'
+      }
+    }); // 测试搜索
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options?text=1', {
+      'method': 'get'
+    });
+    process.nextTick(function () {
+      wrapper.find('SelectInput').simulate('click'); // 展开
+
+      expect(_document.querySelectorAll('.hi-select__dropdown--item')).toHaveLength(4);
+
+      _document.querySelectorAll('.hi-select__dropdown--item')[0].click(); // 选择第一项
+
+
+      expect(wrapper.find('Select').state('selectedItems')[0].id).toEqual('0');
+      expect(changeCallback.mock.results[0].value[0].id).toEqual('0');
+      global.fetch.mockClear();
+      done();
+    });
+  });
+});

package/es/select/index.js

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

package/es/select/style/select-dropdown.css

@@ -1 +1 @@
-.hi-select__dropdown{width:100%;font-size:12px;color:#333;overflow-x:hidden;overflow-y:auto;background-color:#fff;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.2);box-shadow:0 1px 6px rgba(0,0,0,0.2);border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left}.hi-select__dropdown--loading{height:50px}.hi-select__dropdown--items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;max-height:250px;list-style:none;margin:0;padding:0}.hi-select__dropdown-check-all{padding:8px 12px;font-size:12px;color:#4284f5;cursor:pointer;border-top:1px solid #e6e7e8}.hi-select__dropdown--item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;height:36px;line-height:36px;padding:0 12px;margin:0;font-weight:400;cursor:pointer;list-style:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-select__dropdown--item.hi-select__dropdown--item-default{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-select__dropdown--item .hi-select__dropdown--item__name{padding-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.hi-select__dropdown--item .hi-select__dropdown--item__name-hightlight{color:#f63}.hi-select__dropdown--item .hi-select__dropdown--item__checkbox{-webkit-box-flex:0;-ms-flex:none;flex:none;position:relative}.hi-select__dropdown--item .hi-checkbox-label{padding:0;margin-right:10px}.hi-select__dropdown--item.is-active{color:#4284f5}.hi-select__dropdown--item.is-disabled{cursor:not-allowed;opacity:0.4}.hi-select__dropdown--item[data-focused='true']{background-color:rgba(66,132,245,0.08)}.hi-select__dropdown--item.disabled{opacity:0.4;cursor:not-allowed}.hi-select__dropdown--item__name{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.hi-select__dropdown--item__check-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__dropdown__searchbar{background-color:#fff;width:100%;padding:0 12px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__dropdown__searchbar--input{width:100%;height:100%;border:none;outline:none;padding:0 10px}.hi-select__dropdown__searchbar .icon-close-circle{color:#999}.hi-select__dropdown__searchbar--content{height:36px;border-bottom:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-select__dropdown__searchbar--content .hi-input__inner{border:none}.theme__orange.hi-select__dropdown-check-all{color:#f63}.theme__orange.hi-select__dropdown--item.is-active{color:#f63}.theme__orange.hi-select__dropdown--item[data-focused='true']{background-color:rgba(255,102,51,0.08)}.theme__cyan.hi-select__dropdown-check-all{color:#46bc99}.theme__cyan.hi-select__dropdown--item.is-active{color:#46bc99}.theme__cyan.hi-select__dropdown--item[data-focused='true']{background-color:rgba(70,188,153,0.08)}.theme__magenta.hi-select__dropdown-check-all{color:#ff5975}.theme__magenta.hi-select__dropdown--item.is-active{color:#ff5975}.theme__magenta.hi-select__dropdown--item[data-focused='true']{background-color:rgba(255,89,117,0.08)}.theme__lavender.hi-select__dropdown-check-all{color:#b450de}.theme__lavender.hi-select__dropdown--item.is-active{color:#b450de}.theme__lavender.hi-select__dropdown--item[data-focused='true']{background-color:rgba(180,80,222,0.08)}.theme__blue.hi-select__dropdown-check-all{color:#3da8f5}.theme__blue.hi-select__dropdown--item.is-active{color:#3da8f5}.theme__blue.hi-select__dropdown--item[data-focused='true']{background-color:rgba(61,168,245,0.08)}.theme__purple.hi-select__dropdown-check-all{color:#8a8acb}.theme__purple.hi-select__dropdown--item.is-active{color:#8a8acb}.theme__purple.hi-select__dropdown--item[data-focused='true']{background-color:rgba(138,138,203,0.08)}
+.hi-select__dropdown{width:100%;max-height:300px;font-size:12px;color:#333;overflow-x:hidden;overflow-y:auto;background-color:#fff;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.2);box-shadow:0 1px 6px rgba(0,0,0,0.2);border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left}.hi-select__dropdown--loading{height:50px}.hi-select__dropdown--items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;max-height:250px;list-style:none;margin:0;padding:0}.hi-select__dropdown-check-all{padding:8px 12px;font-size:12px;color:#4284f5;cursor:pointer}.hi-select__dropdown--item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;height:36px;line-height:36px;padding:0 12px;margin:0;font-weight:400;cursor:pointer;list-style:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-select__dropdown--item.hi-select__dropdown--item-default{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-select__dropdown--item .hi-select__dropdown--item__name{padding-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-select__dropdown--item .hi-select__dropdown--item__checkbox{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__dropdown--item .hi-checkbox-label{padding:0;margin-right:10px}.hi-select__dropdown--item.is-active{color:#4284f5}.hi-select__dropdown--item.is-disabled{cursor:not-allowed;opacity:0.4}.hi-select__dropdown--item[data-focused='true']{background-color:rgba(66,132,245,0.08)}.hi-select__dropdown--item.disabled{opacity:0.4;cursor:not-allowed}.hi-select__dropdown--item__name{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.hi-select__dropdown--item__check-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}

package/es/select/style/select-input.css

@@ -1 +1 @@
-.hi-select__input{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background-color:#fff;color:#333;line-height:1;border-radius:2px;border:1px solid #d8d8d8;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;height:32px}.hi-select__input.disabled{cursor:not-allowed;background-color:#f2f2f2;color:#ccc}.hi-select__input.disabled .hi-select__input--icon{background-color:#f2f2f2;color:#ccc;margin-left:0 !important}.hi-select__input.disabled .hi-select__input--icon,.hi-select__input.disabled input{cursor:not-allowed}.hi-select__input .hi-icon{margin-left:0 !important}.hi-select__input.active,.hi-select__input:not(.disabled):hover{border-color:#4284f5}.hi-select__input:not(.disabled):hover .hi-select__input--icon__expand.clearable{display:none}.hi-select__input:not(.disabled):hover .hi-select__input--icon__close{display:block;color:#bbb}.hi-select__input .hi-select__input--icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__input--search input{position:relative;max-width:100%;width:100%;height:100%;padding:0;line-height:1;border-radius:2px;font-size:14px;cursor:pointer;background:transparent;border-width:0;outline:0;z-index:10}.hi-select__input--search input[data-visbility='false']{width:1px}.hi-select__input--search input::-webkit-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input::-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-ms-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--search--value input{color:#333}.hi-select__input--icon{position:relative;-webkit-box-flex:0;-ms-flex:none;flex:none;display:inline-block;padding-right:8px;cursor:pointer;font-size:24px;color:#434343;background-color:#fff;-webkit-transform:scale(0.66667) rotate(0deg);transform:scale(0.66667) rotate(0deg);-webkit-transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);zoom:1;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"}.hi-select__input--icon .hi-select__input--icon__close{display:none}.hi-select__input.single-value{height:32px;line-height:32px}.hi-select__input.single-value .hi-select__input--item,.hi-select__input.single-value .hi-select__input--search{-webkit-box-flex:1;-ms-flex:auto;flex:auto;padding:0 0 0 12px}.hi-select__input.single-value .hi-select__input--item{height:32px;line-height:32px;overflow:hidden;-webkit-transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);text-align:left}.hi-select__input.single-value .hi-select__input--item__name{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;-webkit-transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)}.hi-select__input.multiple-values{padding:4px 4px 0 4px}.hi-select__input.multiple-values .hi-select__input--icon{margin-top:-4px;margin-right:-4px}.hi-select__input.multiple-values .hi-select__input--search{padding-left:3px}.hi-select__input.multiple-values .hi-select__input--placeholder{position:absolute;top:3px;left:13px;right:30px;height:24px;line-height:24px;color:#ccc;z-index:1}.hi-select__input.multiple-values .hi-select__input--placeholder ~ .hi-select__input-items .hi-select__input--search{padding:0 20px 0 11px}.hi-select__input.multiple-values .hi-select__input-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;overflow:hidden}.hi-select__input.multiple-values .hi-select__input-items.hi-select__input-items--all{-ms-flex-wrap:wrap;flex-wrap:wrap}.hi-select__input.multiple-values .hi-select__input-items--left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px;height:22px;line-height:22px;font-size:12px;color:#333;background-color:#f2f2f2;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__input.multiple-values .hi-select__input-items--left.disabled{color:#ccc}.hi-select__input.multiple-values .hi-select__input--item{-webkit-box-flex:0;-ms-flex:none;flex:none;position:relative;max-width:60%;height:22px;line-height:22px;padding:0 20px 0 10px;margin:0 4px 4px 0;overflow:hidden;vertical-align:middle;background-color:#f2f2f2;border-radius:2px;text-align:left}.hi-select__input.multiple-values .hi-select__input--item__name{font-size:13px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hi-select__input.multiple-values .hi-select__input--item__remove{cursor:pointer;display:inline-block;font-size:12px;position:absolute;top:0;right:4px;padding:0 0 0 8px}.hi-select__input.multiple-values .hi-select__input--item__remove.disabled{cursor:not-allowed}.hi-select__input.multiple-values .hi-select__input--search{height:22px;line-height:22px;margin-bottom:4px}.theme__orange.hi-select__input.active,.theme__orange.hi-select__input:not(.disabled):hover{border-color:#f63}.theme__cyan.hi-select__input.active,.theme__cyan.hi-select__input:not(.disabled):hover{border-color:#46bc99}.theme__magenta.hi-select__input.active,.theme__magenta.hi-select__input:not(.disabled):hover{border-color:#ff5975}.theme__lavender.hi-select__input.active,.theme__lavender.hi-select__input:not(.disabled):hover{border-color:#b450de}.theme__blue.hi-select__input.active,.theme__blue.hi-select__input:not(.disabled):hover{border-color:#3da8f5}.theme__purple.hi-select__input.active,.theme__purple.hi-select__input:not(.disabled):hover{border-color:#8a8acb}
+.hi-select__input{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background-color:#fff;color:#333;line-height:1;border-radius:2px;border:1px solid #d9d9d9;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__input.disabled{cursor:not-allowed;opacity:0.4}.hi-select__input.disabled .hi-select__input--icon,.hi-select__input.disabled input{cursor:not-allowed}.hi-select__input .hi-icon{margin-left:0 !important}.hi-select__input.active,.hi-select__input:not(.disabled):hover{border-color:#4284f5}.hi-select__input:not(.disabled):hover .hi-select__input--icon__expand.clearable{display:none}.hi-select__input:not(.disabled):hover .hi-select__input--icon__close{display:block;color:#999}.hi-select__input .hi-select__input--icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__input--search input{position:relative;max-width:100%;width:100%;height:100%;padding:0;line-height:1;border-radius:2px;font-size:14px;cursor:pointer;background:transparent;border-width:0;outline:0;z-index:10}.hi-select__input--search input[data-visbility='false']{width:1px}.hi-select__input--search input::-webkit-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input::-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-ms-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--icon{position:relative;-webkit-box-flex:0;-ms-flex:none;flex:none;display:inline-block;padding:0 0 0 8px;cursor:pointer;font-size:24px;color:#434343;background-color:#fff;-webkit-transform:scale(0.66667) rotate(0deg);transform:scale(0.66667) rotate(0deg);-webkit-transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);zoom:1;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"}.hi-select__input--icon .hi-select__input--icon__close{display:none}.hi-select__input.single-value{height:32px;line-height:32px}.hi-select__input.single-value .hi-select__input--item,.hi-select__input.single-value .hi-select__input--search{-webkit-box-flex:1;-ms-flex:auto;flex:auto;padding:0 0 0 13px}.hi-select__input.single-value .hi-select__input--item{height:32px;line-height:32px;overflow:hidden;-webkit-transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);text-align:left}.hi-select__input.single-value .hi-select__input--item__name{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;-webkit-transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)}.hi-select__input.multiple-values{padding:4px 4px 0 4px}.hi-select__input.multiple-values .hi-select__input--icon{margin-top:-4px}.hi-select__input.multiple-values .hi-select__input--search{padding-left:3px}.hi-select__input.multiple-values .hi-select__input--placeholder{position:absolute;top:3px;left:15px;right:30px;height:24px;line-height:24px;color:#ccc;z-index:1}.hi-select__input.multiple-values .hi-select__input--placeholder ~ .hi-select__input-items .hi-select__input--search{padding:0 20px 0 11px}.hi-select__input.multiple-values .hi-select__input-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;overflow:hidden}.hi-select__input.multiple-values .hi-select__input-items.hi-select__input-items--all{-ms-flex-wrap:wrap;flex-wrap:wrap}.hi-select__input.multiple-values .hi-select__input-items--left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px;height:22px;line-height:22px;font-size:12px;color:#333;background-color:#f2f2f2;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__input.multiple-values .hi-select__input--item{-webkit-box-flex:0;-ms-flex:none;flex:none;position:relative;max-width:80%;height:22px;line-height:22px;padding:0 20px 0 10px;margin:0 4px 4px 0;overflow:hidden;vertical-align:middle;background-color:#f2f2f2;border-radius:2px;text-align:left}.hi-select__input.multiple-values .hi-select__input--item__name{font-size:13px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hi-select__input.multiple-values .hi-select__input--item__remove{cursor:pointer;display:inline-block;font-size:12px;position:absolute;top:0;right:4px;padding:0 0 0 8px}.hi-select__input.multiple-values .hi-select__input--search{height:22px;line-height:22px;margin-bottom:4px}

package/es/stepper/index.js

@@ -1,33 +1,139 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _Stepper = _interopRequireDefault(require("./Stepper"));
+var _react = _interopRequireDefault(require("react"));
+
+var _context = _interopRequireDefault(require("../context"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./style/index");
 
-var _util = require("../_util");
-
-var _default = (0, _util.depreactedPropsCompat)([['data', 'list', function (data) {
-  return data.map(function (_ref) {
-    var title = _ref.title,
-        text = _ref.text,
-        icon = _ref.icon;
-    return {
-      title: title,
-      content: text,
-      icon: icon
-    };
-  });
-}], ['itemLayout', 'up', function (data) {
-  return data === true ? 'vertical' : 'horizontal';
-}], ['placement', 'vertical', function (data) {
-  return data === true ? 'vertical' : 'horizontal';
-}]])(_Stepper["default"]);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/**
+ * Props
+ * @prop  id         {string}            id
+ * @prop  className  {string}            className
+ * @prop  list       {array}             显示步骤的信息
+ * [
+ *   {
+ *      src   {string}  sign图标地址（可选）
+ *      title {string}  步骤名称
+ *      text  {string}  步骤描述
+ *   }
+ * ]
+ * @prop  current    {string | number}   当前步骤位置
+ * @prop  vertical   {boolean}           是否竖直显示
+ * @prop  up         {string}            sign显示位置
+ */
+var Stepper = /*#__PURE__*/function (_React$Component) {
+  _inherits(Stepper, _React$Component);
+
+  var _super = _createSuper(Stepper);
+
+  function Stepper() {
+    _classCallCheck(this, Stepper);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Stepper, [{
+    key: "renderNode",
+    value: function renderNode(arg, info) {
+      var _this$props = this.props,
+          up = _this$props.up,
+          current = _this$props.current;
+
+      var _c = (0, _classnames["default"])('hi-stepper__item', arg === 'h' && up && 'hi-stepper__item--up', info.key <= +current && 'hi-stepper__item--active', info.key < +current && 'hi-stepper__item--done');
+
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        className: _c,
+        key: info.key
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "hi-stepper__item-content"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "hi-stepper__icon"
+      }, info.icon ? info.icon : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "hi-stepper__num"
+      }, info.key + 1)), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "hi-stepper__title"
+      }, " ", info.title), (arg === 'v' || up) && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "hi-stepper__text"
+      }, info.text)));
+    }
+  }, {
+    key: "renderStepperBar",
+    value: function renderStepperBar() {
+      var _this = this;
+
+      var _this$props2 = this.props,
+          current = _this$props2.current,
+          list = _this$props2.list,
+          vertical = _this$props2.vertical;
+      var len = list.length;
+      return /*#__PURE__*/_react["default"].createElement("ul", {
+        className: "hi-stepper__list"
+      }, list.map(function (v, i) {
+        var info = Object.assign({
+          key: i,
+          current: current
+        }, v);
+
+        if (i === len - 1) {
+          info.last = true;
+        }
+
+        return _this.renderNode(vertical ? 'v' : 'h', info);
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          className = _this$props3.className,
+          vertical = _this$props3.vertical,
+          theme = _this$props3.theme;
+
+      var _className = (0, _classnames["default"])('hi-stepper', vertical ? 'hi-stepper--vertical' : 'hi-stepper--horizontal', className, theme && 'theme__' + theme);
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        id: id || '',
+        className: _className
+      }, this.renderStepperBar());
+    }
+  }]);
+
+  return Stepper;
+}(_react["default"].Component);
+
+var _default = (0, _context["default"])(Stepper);
 
 exports["default"] = _default;