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

package/es/dialog/components/itemNode.js

@@ -0,0 +1,109 @@
+import { Input, Radio, Space } from 'antd';
+import React from 'react';
+import { classPrefix } from '..';
+import IconFont from '../../components/iconFont';
+import BizSelect from '../../select';
+import BizList from './list';
+import BizSelectToInput from './selectToInput';
+import BizTab from './tab';
+
+var ItemNode = function ItemNode(props) {
+  var _props$field = props.field,
+      type = _props$field.type,
+      label = _props$field.label,
+      options = _props$field.options,
+      placeholder = _props$field.placeholder,
+      extendName = _props$field.extendName,
+      direction = _props$field.direction,
+      multiple = _props$field.multiple,
+      enableSearch = _props$field.enableSearch,
+      selectType = _props$field.selectType,
+      overlayWidth = _props$field.overlayWidth,
+      extra = _props$field.extra,
+      fieldNames = props.fieldNames;
+
+  var onChange = function onChange(data) {
+    if (props.onChange) props.onChange(data);
+    if (props.field.onChange) props.field.onChange(data);
+  };
+
+  if (type === 'input') {
+    return /*#__PURE__*/React.createElement(Input, {
+      defaultValue: props.value,
+      className: "".concat(classPrefix, "-input"),
+      placeholder: placeholder || "\u8BF7\u8F93\u5165".concat(label),
+      autoComplete: "off",
+      allowClear: {
+        clearIcon: /*#__PURE__*/React.createElement(IconFont, {
+          className: "biz-icon",
+          type: 'icon-qingchu'
+        })
+      },
+      onChange: onChange
+    });
+  } else if (type === 'password') {
+    return /*#__PURE__*/React.createElement(Input.Password, {
+      className: "".concat(classPrefix, "-input"),
+      defaultValue: props.value,
+      placeholder: placeholder || "\u8BF7\u8F93\u5165".concat(label),
+      onChange: onChange
+    });
+  } else if (type === 'select') {
+    return /*#__PURE__*/React.createElement(BizSelect, {
+      className: "".concat(classPrefix, "-select"),
+      options: options || [],
+      defaultValue: props.value,
+      keyField: fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value,
+      labelField: fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label,
+      multiple: multiple,
+      enableSearch: enableSearch,
+      type: selectType,
+      overlayWidth: overlayWidth,
+      extra: extra,
+      onChange: onChange
+    });
+  } else if (type === 'selectToInput') {
+    return /*#__PURE__*/React.createElement(BizSelectToInput, {
+      value: props.value,
+      options: options || [],
+      keyField: fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value,
+      labelField: fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label,
+      onChange: onChange,
+      extendName: extendName
+    });
+  } else if (type === 'tab') {
+    return /*#__PURE__*/React.createElement(BizTab, {
+      value: props.value,
+      options: options,
+      onChange: onChange
+    });
+  } else if (type === 'radio') {
+    return /*#__PURE__*/React.createElement(Radio.Group, {
+      onChange: onChange,
+      defaultValue: props.value
+    }, /*#__PURE__*/React.createElement(Space, {
+      direction: direction || 'horizontal'
+    }, options && options.map(function (item) {
+      return /*#__PURE__*/React.createElement(Radio, {
+        key: item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value],
+        value: item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value]
+      }, item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label]);
+    })));
+  } else if (type === 'list') {
+    return /*#__PURE__*/React.createElement(BizList, {
+      value: props.value,
+      options: options && options.length > 0 ? options : undefined,
+      onChange: onChange
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u76F8\u5173\u7EC4\u4EF6");
+};
+
+ItemNode.defaultProps = {
+  fieldNames: {
+    label: 'label',
+    value: 'value'
+  }
+};
+export default ItemNode;

package/es/dialog/components/list.d.ts

@@ -1,15 +1,5 @@
 import React from 'react';
-import './style/list.less';
-interface ItemProps {
-    id: string | number;
-    title?: string;
-    content?: string;
-    icon?: string;
-}
-interface BizListProps {
-    value?: string | number;
-    options?: Array<ItemProps>;
-    onChange?: (value: string | number) => void;
-}
-declare const BizList: React.FC<BizListProps>;
+import { ListProps } from '../types';
+import './styles/list.less';
+declare const BizList: React.FC<ListProps>;
 export default BizList;

package/es/dialog/components/list.js

@@ -12,31 +12,31 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useState } from 'react';
 import IconFont from '../../components/iconFont';
-import { typeMenus } from '../data/chart';
-import './style/list.less';
+import { typeMenus } from '../data/data';
+import './styles/list.less';
 
 var BizList = function BizList(props) {
-  var _props$options = props.options,
-      options = _props$options === void 0 ? typeMenus : _props$options,
+  var options = props.options,
       value = props.value,
       onChange = props.onChange;
 
-  var _useState = useState(value || options[0].id),
+  var _useState = useState(value || options && options[0].id),
       _useState2 = _slicedToArray(_useState, 2),
       selectList = _useState2[0],
       setSelectList = _useState2[1];
 
+  var classPrefix = 'biz-list';
   useEffect(function () {
-    if (!value) {
+    if (!value && options) {
       onChange && onChange(options[0].id);
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "biz-list-container"
-  }, options.map(function (item) {
+    className: classPrefix
+  }, options && options.map(function (item) {
     return /*#__PURE__*/React.createElement("div", {
       key: item.id,
-      className: "biz-list-item ".concat(selectList === item.id ? 'active' : ''),
+      className: "".concat(classPrefix, "-item ").concat(selectList === item.id ? 'active' : ''),
       onClick: function onClick() {
         setSelectList(function () {
           return item.id;
@@ -44,14 +44,17 @@ var BizList = function BizList(props) {
         onChange && onChange(item.id);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: "biz-list-title"
+      className: "".concat(classPrefix, "-title")
     }, item.icon && /*#__PURE__*/React.createElement(IconFont, {
-      className: "biz-icon",
+      className: "".concat(classPrefix, "-icon"),
       type: item.icon
     }), item.title), /*#__PURE__*/React.createElement("div", {
-      className: "biz-list-content"
+      className: "".concat(classPrefix, "-content")
     }, item.content));
   }));
 };
 
+BizList.defaultProps = {
+  options: typeMenus
+};
 export default BizList;

package/es/dialog/components/selectToInput.d.ts

@@ -1,50 +1,6 @@
 import React from 'react';
-import { SelectProps } from 'antd';
-import '../style/index.less';
-interface ValueType {
-    [prop: string]: any;
-}
-interface fieldNamesProps {
-    label: string;
-    value: string;
-}
-interface SelectInputProps extends SelectProps {
-    fieldNames?: fieldNamesProps;
-    /**
-     * @description   下拉名称
-     * @default       false
-     */
-    name?: string;
-    /**
-     * @description   扩展名称
-     * @default       -
-     */
-    extendName?: string;
-    /**
-     * @description   创建option回调
-     * @default       false
-     */
-    createOption?: () => void;
-    /**
-     * @description   是否搜索option
-     * @default       false
-     */
-    search?: boolean;
-    /**
-     * @description   是否有创建option
-     * @default       false
-     */
-    create?: boolean;
-    /**
-     * @description  默认值
-     * @default       false
-     */
-    value?: ValueType;
-    /**
-     * @description   值改变回调
-     * @default       -
-     */
-    onChange?: (value?: ValueType) => void;
-}
-declare const BizSelectToInput: React.FC<SelectInputProps>;
+import { BizSelectTypes } from '../../select/types';
+import './styles/handle.less';
+import { SelectInputProps } from '../types';
+declare const BizSelectToInput: React.FC<BizSelectTypes.Props & SelectInputProps>;
 export default BizSelectToInput;

package/es/dialog/components/selectToInput.js

@@ -1,4 +1,4 @@
-var _excluded = ["options", "search", "create", "name", "extendName", "fieldNames", "value", "onChange"];
+var _excluded = ["options", "name", "extendName", "value", "keyField", "labelField"];
 
 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; }
 
@@ -26,35 +26,16 @@ import React, { useEffect, useState } from 'react';
 import { BizSelect } from '../..';
 import IconFont from '../../components/iconFont';
 import { Input, Radio, Space, Tooltip } from 'antd';
-import '../style/index.less';
-var inputOptions = [{
-  label: '公开',
-  value: 1
-}, {
-  label: '指定人员明显',
-  value: 2,
-  title: '通过看板的共享功能指定可见成员'
-}, {
-  label: '仅自己可见',
-  value: 3
-}];
+import './styles/handle.less';
+import { inputOptions } from '../data/data';
 
 var BizSelectToInput = function BizSelectToInput(props) {
   var options = props.options,
-      _props$search = props.search,
-      search = _props$search === void 0 ? true : _props$search,
-      _props$create = props.create,
-      create = _props$create === void 0 ? true : _props$create,
-      _props$name = props.name,
-      name = _props$name === void 0 ? '' : _props$name,
+      name = props.name,
       extendName = props.extendName,
-      _props$fieldNames = props.fieldNames,
-      fieldNames = _props$fieldNames === void 0 ? {
-    label: 'label',
-    value: 'value'
-  } : _props$fieldNames,
       value = props.value,
-      _onChange = props.onChange,
+      keyField = props.keyField,
+      labelField = props.labelField,
       res = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(true),
@@ -62,15 +43,15 @@ var BizSelectToInput = function BizSelectToInput(props) {
       isSelect = _useState2[0],
       setIsSelect = _useState2[1];
 
-  var _useState3 = useState(value),
+  var _useState3 = useState(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      selectValue = _useState4[0],
-      setSelectValue = _useState4[1];
+      isFirst = _useState4[0],
+      setIsFirst = _useState4[1];
 
-  var _useState5 = useState(true),
+  var _useState5 = useState(props.value),
       _useState6 = _slicedToArray(_useState5, 2),
-      isFirst = _useState6[0],
-      setIsFirst = _useState6[1];
+      selectValue = _useState6[0],
+      setSelectValue = _useState6[1];
 
   var _useState7 = useState(3),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -82,17 +63,14 @@ var BizSelectToInput = function BizSelectToInput(props) {
       inputData = _useState10[0],
       setInputData = _useState10[1];
 
+  var classPrefix = 'biz-select-input';
   useEffect(function () {
     if (isFirst) {
       setIsFirst(false);
       return;
     }
 
-    if (isSelect) {
-      _onChange && _onChange(selectValue);
-    } else {
-      _onChange && _onChange();
-    }
+    if (props.onChange) props.onChange(isSelect ? selectValue : undefined);
   }, [isSelect]);
   useEffect(function () {
     if (isFirst) return;
@@ -102,70 +80,81 @@ var BizSelectToInput = function BizSelectToInput(props) {
       if (extendName) {
         var _data;
 
-        data = (_data = {}, _defineProperty(_data, fieldNames.value, 0), _defineProperty(_data, fieldNames.label, inputData), _defineProperty(_data, extendName, radioData), _data);
+        data = (_data = {}, _defineProperty(_data, keyField, 0), _defineProperty(_data, labelField, inputData), _defineProperty(_data, extendName, radioData), _data);
       } else {
         var _data2;
 
-        data = (_data2 = {}, _defineProperty(_data2, fieldNames.value, 0), _defineProperty(_data2, fieldNames.label, value), _data2);
+        data = (_data2 = {}, _defineProperty(_data2, keyField, 0), _defineProperty(_data2, labelField, inputData), _data2);
       }
     }
 
-    _onChange && _onChange(data);
+    if (props.onChange) props.onChange(data);
   }, [radioData, inputData]);
-  return /*#__PURE__*/React.createElement("div", null, isSelect ? /*#__PURE__*/React.createElement(BizSelect, _objectSpread(_objectSpread({
-    options: options,
-    search: search,
-    create: create,
-    size: "middle",
-    fieldNames: fieldNames,
-    value: selectValue && selectValue[fieldNames.value],
-    name: name
-  }, res), {}, {
-    createOption: function createOption() {
-      setIsSelect(function () {
-        return false;
-      });
-    },
-    onChange: function onChange(value, data) {
-      _onChange && _onChange(data);
-      setSelectValue(function () {
-        return data;
-      });
-    }
+
+  var onChange = function onChange(data) {
+    setSelectValue(data);
+    if (props.onChange) props.onChange(data);
+  };
+
+  var onChangeRadio = function onChangeRadio(e) {
+    setRadioData(function () {
+      return e.target.value;
+    });
+  };
+
+  var onAdd = function onAdd() {
+    setIsSelect(false);
+  };
+
+  var onBlur = function onBlur(e) {
+    setInputData(function () {
+      return e.target.value;
+    });
+  };
+
+  var addNode = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-add"),
+    onClick: onAdd
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-icon-add"),
+    type: 'icon-tianjia1'
+  }), " \u6DFB\u52A0", name);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, isSelect ? /*#__PURE__*/React.createElement(BizSelect, _objectSpread(_objectSpread({}, res), {}, {
+    className: "".concat(classPrefix, "-select"),
+    options: props.options,
+    defaultValue: selectValue,
+    keyField: keyField,
+    labelField: labelField,
+    enableSearch: true,
+    dropdownExtra: addNode,
+    onChange: onChange
   })) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "biz-flex"
+    className: "".concat(classPrefix, "-input-row")
   }, /*#__PURE__*/React.createElement(Input, {
-    className: "biz-input",
-    placeholder: "\u8F93\u5165".concat(name),
+    className: "".concat(classPrefix, "-input"),
+    placeholder: "\u6DFB\u52A0".concat(name),
     autoFocus: !isSelect,
     allowClear: {
       clearIcon: /*#__PURE__*/React.createElement(IconFont, {
-        className: "biz-icon",
         type: 'icon-qingchu'
       })
     },
-    onBlur: function onBlur(e) {
-      setInputData(function () {
-        return e.target.value;
-      });
-    }
-  }), /*#__PURE__*/React.createElement(IconFont, {
-    className: "biz-icon biz-icon-switch",
+    onBlur: onBlur
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u8FD4\u56DE\u9009\u62E9\u770B\u677F\u5217\u8868"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-switch"),
     type: "icon-shurukuang_fanhui",
     onClick: function onClick() {
-      setIsSelect(function () {
-        return true;
-      });
+      return setIsSelect(true);
     }
-  })), extendName && /*#__PURE__*/React.createElement("div", {
-    className: "biz-form-radio"
+  }))), extendName && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-radio")
   }, /*#__PURE__*/React.createElement(Radio.Group, {
     value: radioData,
-    onChange: function onChange(e) {
-      setRadioData(function () {
-        return e.target.value;
-      });
-    }
+    onChange: onChangeRadio
   }, /*#__PURE__*/React.createElement(Space, {
     direction: "horizontal"
   }, inputOptions.map(function (item) {
@@ -178,4 +167,9 @@ var BizSelectToInput = function BizSelectToInput(props) {
   }))))));
 };
 
+BizSelectToInput.defaultProps = {
+  keyField: 'value',
+  labelField: 'label',
+  name: ''
+};
 export default BizSelectToInput;

package/es/dialog/components/styles/handle.less

@@ -0,0 +1,39 @@
+@import '../../../assets/styles/inner.less';
+
+.biz-select-input {
+  &-input-row {
+    display: flex;
+    align-items: center;
+  }
+
+  &-switch {
+    margin-left: 8px;
+    cursor: pointer;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  &-icon-add {
+    cursor: pointer;
+  }
+
+  &-radio {
+    margin-top: 12px;
+  }
+}
+
+.biz-select-input-add {
+  width: fit-content;
+  padding: 2px 4px;
+  border-radius: @border-radius-small;
+
+  &:hover {
+    .__default-hover();
+  }
+
+  .biz-select-input-icon-add {
+    cursor: pointer;
+  }
+}

package/es/dialog/components/styles/list.less

@@ -0,0 +1,60 @@
+@import '../../../assets/styles/inner.less';
+
+.biz-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: @padding-md;
+  padding-bottom: 1px;
+  background-color: @background-color-base;
+  border-radius: @border-radius-normal;
+
+  &-item {
+    box-sizing: border-box;
+    width: calc((100% - 45px) / 4);
+    margin-bottom: 15px;
+    padding: @padding-md @padding-lg;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-small;
+    cursor: pointer;
+
+    &:not(:nth-child(4n + 1)) {
+      margin-left: 15px;
+    }
+
+    &.active {
+      border-color: @primary-color;
+    }
+
+    &:hover {
+      border-color: @primary-1;
+    }
+
+    &.active,
+    &:hover {
+      .__default-hover();
+
+      .biz-list-content,
+      .biz-list-title,
+      .biz-list-title .biz-list-icon {
+        color: @primary-color;
+      }
+    }
+  }
+
+  &-title {
+    margin-bottom: 14px;
+    color: @text-color;
+    line-height: 20px;
+  }
+
+  &-icon {
+    margin-right: 14px;
+    color: @text-color;
+  }
+
+  &-content {
+    color: @text-color-secondary;
+    font-size: @font-size-sm;
+  }
+}

package/es/dialog/components/styles/tab.less

@@ -0,0 +1,55 @@
+@import '../../../assets/styles/inner.less';
+
+.biz-tab {
+  display: flex;
+  color: @text-color-secondary;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: @height-lg;
+    padding: 0 @padding-sm;
+    background: #fff;
+    border: 1px solid @border-color-base;
+    cursor: pointer;
+
+    &:not(:last-child) {
+      border-right-color: transparent;
+    }
+
+    &:first-child {
+      border-radius: @border-radius-small 0px 0px @border-radius-small;
+    }
+
+    &:last-child {
+      border-radius: 0px @border-radius-small @border-radius-small 0px;
+    }
+
+    &.disabled {
+      color: @disabled-color;
+      background: @background-color-base;
+      cursor: not-allowed;
+    }
+
+    &:not(.disabled):hover {
+      .__default-hover();
+      border-color: @border-color-base;
+    }
+
+    &:not(.disabled).active {
+      .__default-hover();
+    }
+  }
+
+  &-icon {
+    margin-right: 7px;
+    font-size: 18px;
+  }
+  &-radio-icon {
+    font-size: 18px;
+  }
+
+  &-drop {
+    .__select-panel();
+  }
+}

package/es/dialog/components/tab.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
-import './style/tab.less';
-interface BizTabProps {
-    value?: string | number;
-    options?: Array<string | number>;
-    onChange?: (value: string) => void;
-}
-declare const BizTab: React.FC<BizTabProps>;
+import { TabTypes } from '../types';
+import './styles/tab.less';
+declare const BizTab: React.FC<TabTypes.Props>;
 export default BizTab;