@zgfe/business-lib 1.0.0-beta.6 → 1.0.3

package/es/select/demo/index.js

@@ -13,39 +13,67 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState } from 'react';
 import { BizSelect } from '@zgfe/business-lib';
 import { Button } from 'antd';
-var options = [{
-  label: 'test',
-  value: 'test'
+var stringOperate = [{
+  name: '是',
+  value: 'equal'
 }, {
-  label: 'test2',
-  value: 'test2'
+  name: '包含',
+  value: 'contains'
 }, {
-  label: 'test3',
-  value: 'test3',
-  disabled: true
+  name: '不是',
+  value: 'not equal'
+}, {
+  name: '不包含',
+  value: 'not contains'
+}, {
+  name: '开头是',
+  value: 'begin with'
+}, {
+  name: '结尾是',
+  value: 'end with'
+}, {
+  name: '开头不是',
+  value: 'not begin with'
+}, {
+  name: '结尾不是',
+  value: 'not end with'
+}, {
+  name: '是空值',
+  value: 'is null'
+}, {
+  name: '不是空值',
+  value: 'is not null'
+}];
+var disabledList = [{
+  value: 'not equal'
+}, {
+  value: 'not begin with'
 }];
 export default (function () {
-  var _useState = useState('test2'),
+  var _useState = useState({
+    name: '不是',
+    value: 'not equal'
+  }),
       _useState2 = _slicedToArray(_useState, 2),
       data = _useState2[0],
       setData = _useState2[1];
 
-  var handleChange = function handleChange(value) {
-    console.log('select >>', value);
+  var onChange = function onChange(value) {
     setData(function () {
       return value;
     });
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizSelect, {
-    options: options,
-    value: data,
-    onChange: handleChange
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      setData(function () {
-        return null;
-      });
-    }
-  }, "clear"));
+    options: stringOperate,
+    defaultValue: data,
+    labelField: "name",
+    keyField: "value",
+    enableSearch: true,
+    theme: "secondary",
+    popupContainer: true,
+    onChange: onChange,
+    disableItemList: disabledList,
+    dropdownExtra: /*#__PURE__*/React.createElement(Button, null, "+ \u6DFB\u52A0")
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "\u5F53\u524D\u9009\u62E9\u7684\u503C\u662F\uFF1A", JSON.stringify(data)));
 });

package/es/{multipleSelector/demo/index.js → select/demo/multiple.js}

@@ -11,25 +11,68 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { BizMultipleSelector } from '@zgfe/business-lib';
-var options = ['CHROME48', 'FIREFOX37', 'CHROME21', 'Firefox', 'FIREFOX_MOBILE', 'BOT', 'FIREFOX9', 'MOBILE_SAFARI', 'MOBILE_SAFARI2', 'MOBILE_SAFARI4'];
+import { BizSelect } from '@zgfe/business-lib';
+var stringOperate = [{
+  name: '是',
+  value: 'equal'
+}, {
+  name: '包含',
+  value: 'contains'
+}, {
+  name: '不是',
+  value: 'not equal'
+}, {
+  name: '不包含',
+  value: 'not contains'
+}, {
+  name: '开头是',
+  value: 'begin with'
+}, {
+  name: '结尾是',
+  value: 'end with'
+}, {
+  name: '开头不是',
+  value: 'not begin with'
+}, {
+  name: '结尾不是',
+  value: 'not end with'
+}, {
+  name: '是空值',
+  value: 'is null'
+}, {
+  name: '不是空值',
+  value: 'is not null'
+}];
+var disabledList = [{
+  name: '不包含',
+  value: 'not contains'
+}, {
+  name: '开头不是',
+  value: 'not begin with'
+}];
 export default (function () {
-  var _useState = useState(['CHROME48']),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      condition = _useState2[0],
-      setCondition = _useState2[1];
+      data = _useState2[0],
+      setData = _useState2[1];
 
-  var handleChange = function handleChange(data) {
-    setCondition(data);
+  var onChange = function onChange(value) {
+    setData(function () {
+      return value;
+    });
   };
 
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '400px'
     }
-  }, /*#__PURE__*/React.createElement(BizMultipleSelector, {
-    options: options,
-    defaultValue: condition,
-    onChange: handleChange
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "\u9009\u62E9\u7684\u6761\u4EF6\u503C\u662F\uFF1A", JSON.stringify(condition)));
+  }, /*#__PURE__*/React.createElement(BizSelect, {
+    options: stringOperate,
+    labelField: "name",
+    keyField: "value",
+    onChange: onChange,
+    disableItemList: disabledList,
+    multiple: true,
+    enableCreate: true
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "\u5F53\u524D\u9009\u62E9\u7684\u503C\u662F\uFF1A", JSON.stringify(data)));
 });

package/es/select/handle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './styles/handle.less';
+import { HandlerTypes } from './types';
+declare const SelectHandle: React.ForwardRefExoticComponent<HandlerTypes & React.RefAttributes<any>>;
+export default SelectHandle;

package/es/select/handle.js

@@ -0,0 +1,119 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Input, Tag, Tooltip } from 'antd';
+import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
+import IconFont from '../components/iconFont';
+import './styles/handle.less';
+var SelectHandle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var placeholder = props.placeholder,
+      labelField = props.labelField,
+      keyField = props.keyField,
+      _props$border = props.border,
+      border = _props$border === void 0 ? true : _props$border;
+  var classPrefix = 'biz-select-handle';
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      focus = _useState2[0],
+      setFocus = _useState2[1];
+
+  var handleRef = useRef(null);
+  var inputRef = useRef(null);
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchValue = _useState4[0],
+      setSearchValue = _useState4[1];
+
+  useImperativeHandle(ref, function () {
+    return {
+      create: function create(flag) {
+        if (props.disable) return;
+        setFocus(flag);
+        if (!props.multiple) return;
+
+        if (flag) {
+          inputRef.current.focus();
+        }
+
+        setSearchValue('');
+
+        if (props.enableCreate && searchValue && !flag) {
+          if (props.onCreate) props.onCreate(searchValue);
+        }
+      },
+      width: handleRef.current.clientWidth
+    };
+  });
+  var searchInputWidth = useMemo(function () {
+    return searchValue.length * 14 || 3;
+  }, [searchValue]);
+
+  var onDelete = function onDelete(data) {
+    if (props.onDelete) props.onDelete(data);
+  };
+
+  var onSearch = function onSearch(e) {
+    var value = e.target.value;
+    setSearchValue(value);
+    if (props.onSearch) props.onSearch(value);
+  };
+
+  if (props.multiple) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: handleRef,
+      className: "".concat(classPrefix, "-input ").concat(classPrefix, "-input-multiple\n        ").concat(props.theme ? props.theme : '', " ").concat(props.disable ? 'disable' : '', " \n        ").concat(focus ? 'active' : '', " ").concat(border ? '' : 'borderless', " ").concat(props.size ? props.size : '')
+    }, props.value && props.value.length > 0 ? props.value.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: item[labelField],
+        key: item[keyField] || index,
+        overlayClassName: "".concat(classPrefix, "-tooltip"),
+        color: "#fff"
+      }, /*#__PURE__*/React.createElement(Tag, {
+        closable: true,
+        className: "".concat(classPrefix, "-tag"),
+        onClose: function onClose() {
+          onDelete(item);
+        }
+      }, item[labelField]));
+    }) : !focus ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(classPrefix, "-holder")
+    }, placeholder || '请选择') : '', /*#__PURE__*/React.createElement(Input, {
+      ref: inputRef,
+      autoFocus: focus,
+      disabled: props.disable,
+      className: "".concat(classPrefix, "-search"),
+      style: {
+        width: "".concat(searchInputWidth, "px")
+      },
+      value: searchValue,
+      onChange: onSearch
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: handleRef,
+    className: "".concat(classPrefix, "-input ").concat(classPrefix, "-single-input ").concat(props.theme ? props.theme : '', "\n      ").concat(props.disable ? 'disable' : '', " ").concat(focus ? 'active' : '', " \n      ").concat(border ? '' : 'borderless', " ").concat(props.size ? props.size : ''),
+    title: props.label || props.value && props.value[labelField]
+  }, props.label || props.value && props.value[labelField] || /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-holder")
+  }, placeholder || '请选择'), /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-expand-icon"),
+    type: 'icon-xiangxia'
+  }));
+});
+SelectHandle.defaultProps = {
+  labelField: 'label',
+  keyField: 'id'
+};
+export default SelectHandle;

package/es/select/index.d.ts

@@ -1,51 +1,6 @@
 import React from 'react';
-import { SelectProps } from 'antd/lib/select';
-import './index.less';
-interface fieldNamesProps {
-    label: string;
-    value: string;
-}
-interface BizSelectProps {
-    /**
-     * @description   自定义节点
-     * @default       { label: 'label', value: 'value' }
-     */
-    fieldNames?: fieldNamesProps;
-    /**
-     * @description   默认值
-     * @default       -
-     */
-    defaultValue?: string | number;
-    /**
-     * @description   下拉名称
-     * @default       '''
-     */
-    name?: string;
-    /**
-     * @description   创建option回调
-     * @default       false
-     */
-    createOption?: () => void;
-    /**
-     * @description   是否搜索option
-     * @default       false
-     */
-    search?: boolean;
-    /**
-     * @description   是否有创建option
-     * @default       false
-     */
-    create?: boolean;
-    /**
-     * @description   文本框类
-     * @default       small
-     */
-    dropdownSize?: string;
-    /**
-     * @description   弹窗样式
-     * @default       false
-     */
-    isDialog?: boolean;
-}
-declare const BizSelect: React.FC<BizSelectProps & SelectProps>;
+import './styles/index.less';
+import { BizSelectTypes } from './types';
+export declare const classPrefix = "biz-select";
+declare const BizSelect: React.FC<BizSelectTypes.Props>;
 export default BizSelect;

package/es/select/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "defaultValue", "isDialog", "placeholder", "fieldNames", "dropdownSize", "size", "createOption", "search", "create", "options", "name", "bordered", "className", "onChange"];
+var _excluded = ["overlayWidth", "labelField", "keyField"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -22,145 +22,191 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import { Input, Select } from 'antd';
-import React, { useEffect, useState } from 'react';
-import IconFont from '../components/iconFont';
-import { util } from '../utils';
-import './index.less';
-var Option = Select.Option;
+import { Dropdown } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import SelectHandle from './handle';
+import SelectOverlay from './overlay';
+import './styles/index.less';
+import _ from 'lodash';
+export var classPrefix = 'biz-select';
 
 var BizSelect = function BizSelect(props) {
-  var value = props.value,
-      defaultValue = props.defaultValue,
-      _props$isDialog = props.isDialog,
-      isDialog = _props$isDialog === void 0 ? false : _props$isDialog,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
-      _props$fieldNames = props.fieldNames,
-      fieldNames = _props$fieldNames === void 0 ? {
-    label: 'label',
-    value: 'value'
-  } : _props$fieldNames,
-      dropdownSize = props.dropdownSize,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'small' : _props$size,
-      createOption = props.createOption,
-      _props$search = props.search,
-      search = _props$search === void 0 ? false : _props$search,
-      _props$create = props.create,
-      create = _props$create === void 0 ? false : _props$create,
-      options = props.options,
-      _props$name = props.name,
-      name = _props$name === void 0 ? '' : _props$name,
-      _props$bordered = props.bordered,
-      bordered = _props$bordered === void 0 ? true : _props$bordered,
-      className = props.className,
-      _onChange = props.onChange,
+  var overlayWidth = props.overlayWidth,
+      labelField = props.labelField,
+      keyField = props.keyField,
       res = _objectWithoutProperties(props, _excluded);
 
-  var _useState = useState(''),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
+      current = _useState2[0],
+      setCurrent = _useState2[1];
 
-  var _useState3 = useState(options || []),
+  var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      originalOption = _useState4[0],
-      setOriginalOption = _useState4[1];
+      searchValue = _useState4[0],
+      setSearchValue = _useState4[1];
 
-  var _useState5 = useState(options || []),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      currentOption = _useState6[0],
-      setCurrentOption = _useState6[1];
+      visible = _useState6[0],
+      setVisible = _useState6[1];
 
-  var _useState7 = useState(),
+  var selectRef = useRef(null);
+  var boxRef = useRef(null);
+  var selectId = Math.random().toString();
+
+  var _useState7 = useState(200),
       _useState8 = _slicedToArray(_useState7, 2),
-      selectValue = _useState8[0],
-      setSelectValue = _useState8[1];
+      width = _useState8[0],
+      setWidth = _useState8[1];
 
   useEffect(function () {
-    var data = defaultValue || value;
+    setWidth(boxRef.current.width || 200);
 
-    if (data !== selectValue) {
-      setSelectValue(function () {
-        return data;
-      });
+    if (props.defaultValue) {
+      setCurrent(getValue(props.defaultValue));
     }
-  }, [defaultValue, value]);
-  return /*#__PURE__*/React.createElement(Select, _objectSpread(_objectSpread({
-    className: "".concat(size, " ").concat(className),
-    value: selectValue,
-    dropdownClassName: "biz-single-select-dropdown ".concat(dropdownSize ? dropdownSize : ''),
-    placeholder: placeholder || "\u8BF7\u9009\u62E9".concat(name || '')
-  }, res), {}, {
-    bordered: bordered,
-    suffixIcon: /*#__PURE__*/React.createElement(IconFont, {
-      className: "biz-icon1",
-      type: 'icon-xiangxia'
-    }),
-    dropdownRender: function dropdownRender(menu) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, search && /*#__PURE__*/React.createElement(Input, {
-        className: "biz-search-box",
-        prefix: /*#__PURE__*/React.createElement(IconFont, {
-          className: "biz-icon biz-input-icon",
-          type: 'icon-sousuo'
-        }),
-        allowClear: {
-          clearIcon: /*#__PURE__*/React.createElement(IconFont, {
-            className: "biz-icon",
-            type: 'icon-qingchu'
-          })
-        },
-        value: searchValue,
-        placeholder: "\u641C\u7D22".concat(name),
-        onChange: function onChange(e) {
-          var value = e.target.value;
-          setSearchValue(function () {
-            return value;
-          });
-          var reg = new RegExp(value);
-          setCurrentOption(function () {
-            return originalOption.filter(function (item) {
-              return reg.test(item[fieldNames.label] || item);
-            });
-          });
-        }
-      }), create && /*#__PURE__*/React.createElement("div", {
-        className: "biz-icon-add mb-12",
-        onClick: function onClick() {
-          return createOption && createOption();
-        }
-      }, /*#__PURE__*/React.createElement(IconFont, {
-        className: "biz-icon",
-        type: 'icon-tianjia1'
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "biz-icon-text"
-      }, "\u6DFB\u52A0".concat(name))), menu);
-    },
-    onChange: function onChange(value, option) {
-      setSelectValue(function () {
-        return value;
+
+    var handleClick = function handleClick(e) {
+      var clicked = selectRef.current.contains(e.target);
+      boxRef.current.create(clicked);
+
+      if (!clicked && !props.enableCreate) {
+        setSearchValue('');
+      }
+    };
+
+    window.addEventListener('click', handleClick);
+    return function () {
+      window.removeEventListener('click', handleClick);
+    };
+  }, []);
+  useEffect(function () {
+    if (!props.value) return;
+    setCurrent(getValue(props.value));
+  }, [props.value]);
+
+  var getValue = function getValue(data) {
+    if (props.multiple) {
+      var result = [];
+      data.forEach(function (item) {
+        result === null || result === void 0 ? void 0 : result.push(getCheckedData(item));
       });
-      _onChange && _onChange(value, option.data);
+      return result;
+    } else {
+      return getCheckedData(data);
     }
-  }), currentOption.map(function (item) {
-    return /*#__PURE__*/React.createElement(Option, {
-      value: item[fieldNames.value] || item,
-      key: item[fieldNames.value] || item,
-      disabled: item.disabled,
-      data: item
-    }, item.icon && /*#__PURE__*/React.createElement(IconFont, {
-      style: {
-        marginRight: '7px',
-        fontSize: '16px'
-      },
-      type: item.icon
-    }), /*#__PURE__*/React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: util.setHighLight(item[fieldNames.label] || item, searchValue)
+  };
+
+  var getCheckedData = function getCheckedData(data) {
+    var result = data;
+    props.options.forEach(function (option) {
+      if (props.type === 'group') {
+        option.children.forEach(function (child) {
+          if (data[keyField] === child[keyField]) {
+            result = child;
+          }
+        });
+      } else if (data[keyField] === option[keyField]) {
+        result = option;
       }
-    }));
-  }));
+    });
+    return result;
+  };
+
+  var onDelete = function onDelete(option) {
+    var data = _.cloneDeep(current);
+
+    data.forEach(function (item, index) {
+      if (item[keyField] === option[keyField]) {
+        data.splice(index, 1);
+        return;
+      }
+    });
+    setCurrent(data);
+    if (props.onChange) props.onChange(data);
+  };
+
+  var onCreate = function onCreate(val) {
+    var _newItem;
+
+    var data = _.cloneDeep(current) || [];
+    var newItem = (_newItem = {}, _defineProperty(_newItem, keyField, val), _defineProperty(_newItem, labelField, val), _newItem);
+    var flag = false;
+    current === null || current === void 0 ? void 0 : current.forEach(function (item) {
+      if (item[labelField] === val) {
+        flag = true;
+        return;
+      }
+    });
+    setSearchValue('');
+
+    if (!flag) {
+      newItem = getCheckedData(newItem);
+      data.push(newItem);
+      setCurrent(data);
+      if (props.onChange) props.onChange(data);
+    }
+  };
+
+  var onChange = function onChange(option) {
+    setCurrent(option);
+    setSearchValue('');
+
+    if (!props.multiple) {
+      setVisible(false);
+    }
+
+    if (props.onChange) props.onChange(option);
+  };
+
+  var onVisibleChange = function onVisibleChange(flag) {
+    setVisible(flag);
+  };
+
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(SelectOverlay, _objectSpread(_objectSpread({}, res), {}, {
+      value: current,
+      labelField: labelField,
+      keyField: keyField,
+      searchValue: searchValue,
+      onChange: onChange
+    })),
+    disabled: props.disable,
+    destroyPopupOnHide: true,
+    overlayStyle: {
+      minWidth: 0,
+      width: overlayWidth || width
+    },
+    trigger: ['click'],
+    getPopupContainer: props.popupContainer || props.multiple ? function () {
+      return document.getElementById(selectId);
+    } : undefined,
+    visible: visible,
+    onVisibleChange: onVisibleChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-handle ").concat(props.className ? props.className : ''),
+    ref: selectRef,
+    id: selectId
+  }, /*#__PURE__*/React.createElement(SelectHandle, {
+    ref: boxRef,
+    value: current,
+    labelField: labelField,
+    keyField: keyField,
+    disable: props.disable,
+    multiple: props.multiple,
+    enableCreate: props.enableCreate,
+    theme: props.theme,
+    size: props.size,
+    border: props.border,
+    onDelete: onDelete,
+    onSearch: setSearchValue,
+    onCreate: onCreate
+  })));
 };
 
+BizSelect.defaultProps = {
+  labelField: 'label',
+  keyField: 'id'
+};
 export default BizSelect;