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

package/es/select/option.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BizSelectTypes } from './types';
+declare const SelectOption: React.FC<BizSelectTypes.OverlayProps>;
+export default SelectOption;

package/es/select/option.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { classPrefix } from '.';
+import IconFont from '../components/iconFont';
+import { util } from '../utils';
+
+var SelectOption = function SelectOption(props) {
+  var option = props.option,
+      group = props.group,
+      checked = props.checked,
+      disabled = props.disabled,
+      multiple = props.multiple;
+
+  function onClick() {
+    if (disabled) return;
+    if (props.onClick) props.onClick(option);
+  }
+
+  function getLabel(label) {
+    if (!props.highlight || !props.highlight.enable || !props.highlight.text) return label;
+    var text = props.highlight.text;
+    if (text.length === label.length) return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(classPrefix, "-highlight")
+    }, label);
+    return util.setHighLight(label, props.highlight.text, function (text, key) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(classPrefix, "-highlight"),
+        key: key
+      }, text);
+    });
+  }
+
+  if (group) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-group")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-split")
+    }), /*#__PURE__*/React.createElement("span", null, group.name));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-option ").concat(multiple ? classPrefix + '-option-multiple' : '', " ").concat(checked ? 'active' : '', " ").concat(disabled ? 'disabled' : ''),
+    onClick: onClick,
+    title: option[props.labelField]
+  }, multiple && (checked ? /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-checkbox ").concat(classPrefix, "-checked"),
+    type: 'icon-a-Property1xuanzhong'
+  }) : /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-checkbox ").concat(classPrefix, "-check"),
+    type: 'icon-a-Property1moren'
+  })), (option === null || option === void 0 ? void 0 : option.icon) && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-option-icon")
+  }, option === null || option === void 0 ? void 0 : option.icon), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-option-label")
+  }, getLabel(option[props.labelField])), !disabled && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-option-btn")
+  }, props.extra && props.extra(option)));
+};
+
+export default SelectOption;

package/es/select/overlay.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BizSelectTypes } from './types';
+declare const SelectOverlay: React.FC<BizSelectTypes.Props>;
+export default SelectOverlay;

package/es/select/overlay.js

@@ -0,0 +1,154 @@
+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 React, { useEffect, useState } from 'react';
+import BizSearchInput from '../searchInput';
+import { classPrefix } from './index';
+import SelectOption from './option';
+import _ from 'lodash';
+
+var SelectOverlay = function SelectOverlay(props) {
+  var labelField = props.labelField,
+      keyField = props.keyField,
+      options = props.options,
+      extra = props.extra,
+      multiple = props.multiple,
+      disableItemList = props.disableItemList,
+      dropdownExtra = props.dropdownExtra;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      current = _useState4[0],
+      setCurrent = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showList = _useState6[0],
+      setShowList = _useState6[1];
+
+  useEffect(function () {
+    if (props.value) setCurrent(props.value);
+  }, [props.value]);
+  useEffect(function () {
+    if (props.multiple) {
+      setSearchValue(props.searchValue);
+    }
+  }, [props.searchValue]);
+  useEffect(function () {
+    var ids = [];
+
+    if (current) {
+      if (multiple) {
+        if (current) {
+          ids = current.map(function (item) {
+            return item[keyField];
+          });
+        }
+      } else {
+        ids = [current[keyField]];
+      }
+    }
+
+    setShowList(function () {
+      if (props.type === 'group') {
+        return options.map(function (group) {
+          var groupDom = /*#__PURE__*/React.createElement(SelectOption, {
+            group: group,
+            key: group.name || String(Math.random())
+          });
+          var optionArr = getOptionDom(group.children, ids);
+          optionArr.unshift(groupDom);
+          return optionArr;
+        });
+      }
+
+      return getOptionDom(options, ids);
+    });
+  }, [searchValue, options, current]);
+
+  function getOptionDom(data, ids) {
+    return data.map(function (option) {
+      if (searchValue && !new RegExp(searchValue, 'i').test(option[labelField])) return;
+      var disabled = false;
+      disableItemList === null || disableItemList === void 0 ? void 0 : disableItemList.forEach(function (item) {
+        if (item[keyField] === option[keyField] && (!current || current && ids.indexOf(option[keyField]) < 0)) {
+          disabled = true;
+        }
+      });
+      return /*#__PURE__*/React.createElement(SelectOption, {
+        option: option,
+        labelField: labelField,
+        checked: current && ids.indexOf(option[keyField]) > -1,
+        highlight: {
+          enable: props.enableSearch || !!props.multiple,
+          text: searchValue || ''
+        },
+        extra: extra,
+        multiple: multiple,
+        onClick: onClick,
+        disabled: disabled,
+        key: option[keyField] || String(Math.random())
+      });
+    });
+  }
+
+  function onClick(option) {
+    var currentOption = _.cloneDeep(current);
+
+    if (multiple) {
+      if (!currentOption) {
+        currentOption = [option];
+      } else {
+        var num = 0,
+            flag = false;
+        currentOption.forEach(function (item, i) {
+          if (item[keyField] === option[keyField]) {
+            flag = true;
+            num = i;
+            return;
+          }
+        });
+
+        if (flag) {
+          currentOption.splice(num, 1);
+        } else {
+          currentOption.push(option);
+        }
+      }
+    } else {
+      currentOption = option;
+    }
+
+    setCurrent(currentOption);
+    if (props.onChange) props.onChange(currentOption);
+  }
+
+  function onSearch(v) {
+    setSearchValue(v);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-overlay")
+  }, props.enableSearch && !props.multiple && /*#__PURE__*/React.createElement(BizSearchInput, {
+    className: "".concat(classPrefix, "-search"),
+    onChange: onSearch
+  }), dropdownExtra, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-list-panel")
+  }, showList && showList.length ? showList : /*#__PURE__*/React.createElement("span", null, "\u6682\u65E0\u6570\u636E")));
+};
+
+export default SelectOverlay;

package/es/select/styles/handle.less

@@ -0,0 +1,111 @@
+@import '../../assets/styles/inner.less';
+
+.biz-select-handle {
+  &-input {
+    position: relative;
+    flex: 1;
+    padding: 0px 8px;
+
+    &.disable {
+      .__disable();
+    }
+
+    .__select-default();
+
+    &.secondary {
+      .__select-normal-secondary();
+    }
+
+    &.borderless {
+      border: none;
+    }
+
+    &.lg {
+      height: @height-lg;
+      line-height: @height-lg;
+    }
+
+    &.sm {
+      height: @height-sm;
+      line-height: @height-sm;
+    }
+
+    &.base {
+      height: @height-base;
+      line-height: @height-base;
+    }
+  }
+
+  &-input-multiple {
+    display: flex;
+    flex: auto;
+    flex-wrap: wrap;
+    align-items: center;
+    height: auto;
+    min-height: @height-lg;
+    overflow: visible;
+
+    &.sm {
+      height: auto;
+      min-height: @height-sm;
+    }
+
+    &.base {
+      height: auto;
+      min-height: @height-base;
+    }
+  }
+
+  &-search.ant-input {
+    width: auto;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+
+    &:focus,
+    &.active {
+      box-shadow: none;
+    }
+  }
+
+  &-single-input {
+    .__default-overflow();
+  }
+
+  &-holder {
+    color: @input-placeholder-color;
+  }
+
+  &-expand-icon {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    flex: none;
+    font-size: @font-size-lg;
+    transform: translateY(-50%);
+  }
+
+  &-tag {
+    display: flex;
+    align-items: center;
+    margin: 2px 4px 2px 0;
+    background: none;
+    border-color: #cacdd4;
+
+    &:hover {
+      .__default-hover();
+
+      .anticon {
+        color: @primary-color;
+      }
+    }
+  }
+
+  &-tooltip {
+    .ant-tooltip-inner {
+      color: @black;
+      background-color: @white;
+    }
+  }
+}

package/es/select/styles/index.less

@@ -0,0 +1,99 @@
+@import '../../assets/styles/inner.less';
+
+.biz-select {
+  &-handle {
+    position: relative;
+  }
+
+  &-overlay {
+    display: flex;
+    flex-direction: column;
+    .__select-panel();
+  }
+
+  &-list-panel {
+    flex: 1;
+    max-height: 400px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-search {
+    flex: none;
+    margin-bottom: @margin-xs;
+    &.ant-input-affix-wrapper {
+      border-radius: @border-radius-normal;
+    }
+  }
+
+  &-nodata {
+    .__select-nodata();
+  }
+
+  &-group {
+    position: relative;
+    height: 32px;
+    padding: 0 @padding-sm;
+    color: @text-color-secondary;
+    line-height: 32px;
+
+    &::before {
+      position: absolute;
+      top: 9px;
+      left: 5px;
+      width: 3px;
+      height: 14px;
+      background-color: @primary-color;
+      border-radius: 10px;
+      content: '';
+    }
+
+    & > span {
+      position: relative;
+      padding-right: @padding-xss;
+      background: #fff;
+    }
+  }
+
+  &-split {
+    position: absolute;
+    top: 18px;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid @border-color-base;
+  }
+
+  &-option {
+    display: flex;
+    .__select-option();
+
+    &.biz-select-option-multiple {
+      &:hover:not(.disabled) {
+        color: @primary-color;
+        background-color: @primary-1;
+      }
+
+      &.active:not(.disabled) {
+        color: @primary-color;
+        background: #fff;
+      }
+    }
+
+    &:not(.active, :hover, .disabled) .biz-select-highlight {
+      color: @primary-color;
+    }
+
+    &-label {
+      flex: 1;
+      .__default-overflow();
+    }
+  }
+
+  &-checkbox {
+    margin-right: 8px;
+  }
+
+  &-option-icon {
+    margin-right: @margin-xs;
+  }
+}

package/es/select/types.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+export declare namespace BizSelectTypes {
+    interface Group {
+        children: Option[];
+        name: string;
+    }
+    interface Option {
+        icon?: ReactNode;
+        [otherProp: string]: any;
+    }
+    interface Props {
+        disable?: boolean;
+        defaultValue?: Option | Option[];
+        value?: Option | Option[];
+        className?: string;
+        type?: 'group' | 'normal';
+        theme?: string;
+        size?: 'lg' | 'base' | 'sm';
+        border?: boolean;
+        multiple?: boolean;
+        options: Group[] | Option[];
+        extra?: (option: Option) => ReactNode;
+        dropdownExtra?: ReactNode;
+        enableSearch?: boolean;
+        enableCreate?: boolean;
+        popupContainer?: boolean;
+        overlayWidth?: number;
+        labelField?: string;
+        keyField?: string;
+        disableItemList?: Option[];
+        searchValue?: string;
+        onChange?: (val: Option) => void;
+    }
+    interface OverlayProps {
+        option?: Option;
+        group?: Group;
+        disabled?: boolean;
+        multiple?: boolean;
+        highlight?: {
+            enable: boolean;
+            text: string;
+            color?: string;
+        };
+        checked?: boolean;
+        labelField?: string;
+        extra?: (option: Option) => ReactNode;
+        onClick?: (option: Option) => void;
+    }
+}
+export interface HandlerTypes {
+    label?: string;
+    placeholder?: string;
+    value?: BizSelectTypes.Option | BizSelectTypes.Option[];
+    multiple?: boolean;
+    enableCreate?: boolean;
+    labelField?: string;
+    keyField?: string | number;
+    disable?: boolean;
+    theme?: string;
+    size?: 'lg' | 'base' | 'sm';
+    border?: boolean;
+    onDelete?: (data: BizSelectTypes.Option) => void;
+    onSearch?: (val: string) => void;
+    onCreate?: (val: string) => void;
+}

package/es/select/types.js

@@ -0,0 +1 @@
+export {};

package/es/table/demo/data/table.js

@@ -19,7 +19,7 @@ export var columns = [{
 }, {
   title: '操作',
   dataIndex: 'operation',
-  render: function render(_, record) {
+  render: function render(_) {
     return 'Delete';
   }
 }];

package/es/table/demo/index.d.ts

@@ -1,3 +1,3 @@
-import './index.less';
+import '@zgfe/business-lib/es/assets/styles/resetAntd.less';
 declare const _default: () => JSX.Element;
 export default _default;

package/es/table/demo/index.js

@@ -31,7 +31,7 @@ import { BizTable } from '@zgfe/business-lib';
 import util from '../../utils/util';
 import chartData from './data/data';
 import { chartColors as color } from './data/color';
-import './index.less';
+import '@zgfe/business-lib/es/assets/styles/resetAntd.less';
 
 var getColumn = function getColumn(columnData) {
   var data = [{
@@ -41,13 +41,17 @@ var getColumn = function getColumn(columnData) {
     key: 'icon',
     align: 'center',
     fixed: 'left',
-    render: function render(text, record, index) {
+    render: function render() {
+      for (var _len = arguments.length, res = new Array(_len), _key = 0; _key < _len; _key++) {
+        res[_key] = arguments[_key];
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         style: {
           width: '12px',
           height: '12px',
           borderRadius: '50%',
-          background: color[index]
+          background: color[res[2]]
         }
       });
     }
@@ -59,16 +63,13 @@ var getColumn = function getColumn(columnData) {
     ellipsis: true,
     fixed: 'left'
   }];
-  console.log(data);
 
   for (var i = 0; i < columnData.length; i++) {
     var value = columnData[i];
 
     if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
-      // 处理日期
       value = value.replace(/\d{4}-/, '');
     } else if (/^\d{4}-\d{2}-\d{2}\|\d{4}-\d{2}-\d{2}$/.test(value)) {
-      // 周、月日期
       var dates = value.match(/\d{4}-\d{2}-\d{2}/g);
       value = dates ? dates[0].replace(/\d{4}-/, '') + '~' + dates[1].replace(/\d{4}-/, '') : value;
     } else {
@@ -87,7 +88,7 @@ var getColumn = function getColumn(columnData) {
       align: 'center',
       ellipsis: true,
       dataIndex: "field".concat(i),
-      render: function render(text, record, index) {
+      render: function render(text) {
         return /*#__PURE__*/React.createElement("span", {
           className: "biz-table-link"
         }, text);
@@ -101,7 +102,7 @@ var getColumn = function getColumn(columnData) {
     fixed: 'right',
     width: 150,
     align: 'right',
-    render: function render(_, record) {
+    render: function render(_) {
       return /*#__PURE__*/React.createElement("a", null, "Delete");
     }
   });

package/es/table/demo/index3.js

@@ -139,8 +139,7 @@ export default (function () {
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       tableData = _useState2[0],
-      setTableData = _useState2[1]; // 排序
-
+      setTableData = _useState2[1];
 
   var sortData = function sortData(data) {
     var compare = function compare(a, b) {
@@ -154,35 +153,28 @@ export default (function () {
     };
 
     data.sort(compare);
-    console.log('sort after>>', data);
     return data;
-  }; // 获取合并行数
-
+  };
 
   var mergeRow = function mergeRow(source, field, field2, field3) {
     var count = 0,
         scount = 0,
-        tcount = 0; //重复项的第一项,第二项,第三项
-
-    var indexCount = 1; //下一项
-
+        tcount = 0;
+    var indexCount = 1;
     var data = JSON.parse(JSON.stringify(source));
 
     while (indexCount < data.length) {
-      var item = data.slice(count, count + 1)[0]; //获取没有比较的第一个对象
+      var item = data.slice(count, count + 1)[0];
 
       if (!item["".concat(field, "RowSpan")]) {
-        item["".concat(field, "RowSpan")] = 1; //初始化为1
-
-        item["".concat(field2, "RowSpan")] = 1; //初始化为1
-
-        item["".concat(field3, "RowSpan")] = 1; //初始化为1
+        item["".concat(field, "RowSpan")] = 1;
+        item["".concat(field2, "RowSpan")] = 1;
+        item["".concat(field3, "RowSpan")] = 1;
       }
 
       if (item[field] === data[indexCount][field]) {
-        //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
         item["".concat(field, "RowSpan")]++;
-        data[indexCount]["".concat(field, "RowSpan")] = 0; // 第二项比较
+        data[indexCount]["".concat(field, "RowSpan")] = 0;
 
         if (data[scount][field2] === data[indexCount][field2]) {
           data[scount]["".concat(field2, "RowSpan")]++;
@@ -210,7 +202,6 @@ export default (function () {
       indexCount++;
     }
 
-    console.log('for>>', data);
     return data;
   };
 

package/es/table/index.d.ts

@@ -1,32 +1,6 @@
 import React from 'react';
-import { ColumnGroupType, ColumnType, TableProps } from 'antd/lib/table';
-import './index.less';
-interface BizTableProps {
-    /**
-     * @description     数据
-     * @default         -
-     */
-    dataSource: object[];
-    /**
-     * @description     表头
-     * @default         line
-     */
-    columns: (ColumnGroupType<object> | ColumnType<object>)[];
-    /**
-     * @description     数据总数
-     * @default         dataSource.length
-     */
-    total?: number;
-    /**
-     * @description     每页行数
-     * @default         10
-     */
-    pageSize?: number;
-    /**
-     * @description     是否分页
-     * @default         true
-     */
-    pagination?: boolean;
-}
-declare const BizTable: React.FC<BizTableProps & TableProps<any>>;
+import { TableProps } from 'antd/lib/table';
+import { BizTableTypes } from './type';
+import './styles/index.less';
+declare const BizTable: React.FC<BizTableTypes.Props & TableProps<any>>;
 export default BizTable;