iglooform 2.3.3 → 2.3.7

package/es/admin-upload/modal.js

@@ -42,7 +42,7 @@ var Import = function Import(_ref) {
       setSource = _useState2[1];
 
   useEffect(function () {
-    if (!visible) {
+    if (!visible && Array.isArray(dataSource)) {
       setSource(void 0);
     }
   }, [visible]);

package/es/card-detail/card-group.js

@@ -39,7 +39,7 @@ var IglooCardGroup = function IglooCardGroup(props) {
     style: _objectSpread({
       marginBottom: 32
     }, style),
-    className: classnames(className)
+    className: classnames('igloo-form-card-container-group', className)
   }, {
     children: [(subHeading || subStatus) && subTitle, _jsx(_Row, Object.assign({
       gutter: [32, 16]
@@ -55,4 +55,5 @@ var IglooCardGroup = function IglooCardGroup(props) {
   }), void 0);
 };
 
+IglooCardGroup.displayName = 'IglooCardGroup';
 export default IglooCardGroup;

package/es/card-detail/card-item.js

@@ -28,6 +28,13 @@ var IglooCardItem = function IglooCardItem(props) {
           children: children
         }), void 0);
 
+      case 'number':
+        return _jsx(Typography, Object.assign({
+          level: "body1"
+        }, {
+          children: children
+        }), void 0);
+
       case 'object':
         return children;
 

package/es/card-detail/card.d.ts

@@ -6,5 +6,5 @@ interface ICard {
     contentStatus?: any;
     className?: string;
 }
-declare const IglooCardGroup: FC<ICard>;
-export default IglooCardGroup;
+declare const IglooCard: FC<ICard>;
+export default IglooCard;

package/es/card-detail/card.js

@@ -14,7 +14,7 @@ import { DealWithCardItem } from './utils';
 import Typography from '../typography';
 import './style/index';
 
-var IglooCardGroup = function IglooCardGroup(props) {
+var IglooCard = function IglooCard(props) {
   var children = props.children;
 
   var title = props.title,
@@ -59,5 +59,5 @@ var IglooCardGroup = function IglooCardGroup(props) {
   }), void 0);
 };
 
-IglooCardGroup.displayName = 'IglooCardGroup';
-export default IglooCardGroup;
+IglooCard.displayName = 'IglooCard';
+export default IglooCard;

package/es/card-detail/style/index.less

@@ -26,6 +26,32 @@
       padding-top: 0px;
     }
 
+    .igloo-card-detail-top-group-no-head {
+      position: relative;
+      &::before {
+        position: absolute;
+        content: '';
+        width: calc(100% - 80px); //(24+26)*2
+        right: 40px;
+        height: 1px;
+        top: 0px;
+        background-color: #eeeeee;
+      }
+    }
+
+    .igloo-card-detail-top-group-with-head {
+      position: relative;
+      &::before {
+        position: absolute;
+        content: '';
+        width: calc(100% - 48px); //(24)*2
+        right: 24px;
+        height: 1px;
+        top: 0px;
+        background-color: #eeeeee;
+      }
+    }
+
     .igloo-card-detail-customize-content-wraper {
       margin: 0px 24px;
     }
@@ -63,10 +89,10 @@
 
           &::before {
             content: '';
-            width: calc(100% + 16px);
+            width: calc(100% - 32px);
             height: 1px;
             top: 0px;
-            right: -8px; // 24-16
+            right: 16px;
             background-color: #eeeeee;
             position: absolute;
           }

package/es/card-detail/utils.d.ts

@@ -1,5 +1,5 @@
 import { ReactComponentElement } from 'react';
 import './style/index';
 export declare function findCardItem(children?: ReactComponentElement<any>[]): any[];
-export declare function wrapCardItem(children?: ReactComponentElement<any>[], hasCustomizeWrappr?: boolean): (JSX.Element | null)[];
-export declare function DealWithCardItem(children: any, hasCustomizeWrappr?: boolean): (JSX.Element | null)[];
+export declare function wrapCardItem(children?: ReactComponentElement<any>[], hasCustomizeWrap?: boolean): (JSX.Element | null)[];
+export declare function DealWithCardItem(children: any, hasCustomizeWrap?: boolean): (JSX.Element | null)[];

package/es/card-detail/utils.js

@@ -15,9 +15,9 @@ export function findCardItem() {
   var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var tempArr = [];
   var tempIndex = -1;
-  var childrendArr = [];
-  Array.isArray(children) ? childrendArr = children : childrendArr = [children];
-  var filterBoolean = childrendArr.filter(function (dom) {
+  var childrenArr = [];
+  Array.isArray(children) ? childrenArr = children : childrenArr = [children];
+  var filterBoolean = childrenArr.filter(function (dom) {
     if (_typeof(dom) === 'object') {
       return dom;
     }
@@ -46,15 +46,15 @@ export function findCardItem() {
 
     return finalDom;
   }, []);
-} //hasCustomizeWrappr 存在的情况都是针对 page中出现 cardItem来处理的
+} //hasCustomizeWrap 存在的情况都是针对 page中出现 cardItem来处理的
 
 export function wrapCardItem() {
   var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var hasCustomizeWrappr = arguments.length > 1 ? arguments[1] : undefined;
+  var hasCustomizeWrap = arguments.length > 1 ? arguments[1] : undefined;
   return children.map(function (item, index) {
     if (Array.isArray(item)) {
       if (!item.length) return null;
-      var padding = hasCustomizeWrappr ? "24px 24px 32px 24px" : "".concat(index ? 24 : 0, "px 0px 24px 0px");
+      var padding = hasCustomizeWrap ? "24px 24px 32px 24px" : "".concat(index ? 24 : 0, "px 0px 24px 0px");
       return item[0].type.displayName === 'IglooCardItem' ? _jsx(CardGroup, Object.assign({
         style: {
           padding: padding
@@ -62,11 +62,24 @@ export function wrapCardItem() {
       }, {
         children: item
       }), index) : item;
-    } // 不是card 或者 cardItem 包裹一层div 用来对齐样式 （用来处理 messageBar的）
+    } // 对齐样式
 
 
-    if (item.type.displayName !== 'IglooCardGroup' && hasCustomizeWrappr) {
-      var className = item.props.className;
+    if (item.type.displayName !== 'IglooCard' && hasCustomizeWrap) {
+      var className = item.props.className; // 因为group的样式也分了两种这里统一处理
+
+      if (item.type.displayName === 'IglooCardGroup') {
+        var subHeading = item.props.subHeading;
+        return /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
+          key: index,
+          style: {
+            padding: '32px 24px',
+            marginBottom: 0
+          },
+          className: classnames(className, subHeading ? 'igloo-card-detail-top-group-with-head' : 'igloo-card-detail-top-group-no-head')
+        }));
+      }
+
       return /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
         key: index,
         className: classnames(className, 'igloo-card-detail-customize-content-wraper')
@@ -76,6 +89,6 @@ export function wrapCardItem() {
     return item;
   });
 }
-export function DealWithCardItem(children, hasCustomizeWrappr) {
-  return wrapCardItem(findCardItem(children), hasCustomizeWrappr);
+export function DealWithCardItem(children, hasCustomizeWrap) {
+  return wrapCardItem(findCardItem(children), hasCustomizeWrap);
 }

package/es/detail-panel/style/index.less

@@ -49,14 +49,13 @@
 .igloo-detail-panel-mobile {
   position: fixed;
   width: 100vw;
-  max-height: 100%;
+  max-height: 100vh;
   bottom: 0;
   left: 0;
   background: #fff;
   transition: height 0.3s ease;
   box-shadow: inset 0px 3px 0px #5858ff;
   z-index: 999;
-  overflow: auto;
 
   .igloo-detail-panel-title {
     position: relative;
@@ -76,6 +75,8 @@
     padding: 16px;
     box-shadow: none;
     border-top: 1px solid #eeeeee;
+    overflow: auto;
+    max-height: calc(100vh - 48px);
 
     .igloo-detail-panel-sub-title {
       padding-bottom: 16px;

package/es/filter/customize.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+declare type IRadioBoxProps = {
+    value: any;
+    onChange: any;
+    optionKey: string;
+    render: (value: any, onChange: any) => ReactNode;
+};
+declare const CustomizeFilter: (props: IRadioBoxProps) => JSX.Element;
+export default CustomizeFilter;

package/es/filter/customize.js

@@ -0,0 +1,21 @@
+import "antd/es/divider/style";
+import _Divider from "antd/es/divider";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+var CustomizeFilter = function CustomizeFilter(props) {
+  var optionKey = props.optionKey,
+      value = props.value,
+      onChange = props.onChange,
+      render = props.render;
+  return _jsxs("div", Object.assign({
+    className: "igloo-form-filter-drop-down-container-content-group"
+  }, {
+    children: [render(value, onChange), _jsx(_Divider, {
+      style: {
+        margin: '16px 0px'
+      }
+    }, void 0)]
+  }), optionKey);
+};
+
+export default CustomizeFilter;

package/es/filter/index.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import './style/index';
 export interface IFrameConfig {
-    type: 'date' | 'mult' | 'single';
-    filterItemTitle: ReactNode;
-    default?: any[] | string;
+    type: 'date' | 'mult' | 'single' | 'customize';
+    filterItemTitle?: ReactNode;
+    default?: any[] | any;
     key: string;
     disabled?: string[];
     disabledDate?: (p: any) => any;
     format?: string;
-    options?: string[] | number[] | {
+    options?: {
         label: any;
         value: any;
         span?: 8 | 12 | 16 | 24;
@@ -21,6 +21,8 @@ export interface IFrameConfig {
         thisMonth?: any[];
     };
     canNotDelete?: boolean;
+    tagTitle?: (value?: any) => string;
+    render?: (value: any, onChange: any) => ReactNode;
 }
 export interface IFilterProps {
     initValue?: {

package/es/filter/index.js

@@ -50,6 +50,7 @@ import { LocaleContext } from '../locale';
 import RangePicker from './rangePicker';
 import CreateCheckBoxFilter from './checkBox';
 import CreteRadioBoxFilter from './radioBox';
+import CustomizeFilter from './customize';
 import Typography from '../typography';
 import Select from '../select';
 var defaultFormat = 'DD / MM / YYYY';
@@ -94,8 +95,8 @@ function getDefaultOptions(params) {
 } // 在getDefaultOptions之后执行 就不用再判断 默认时间不合法的问题了
 
 
-function getChoosedTags(parmas, choosed) {
-  return parmas.reduce(function (res, item) {
+function getChoosedTags(params, choosed) {
+  return params.reduce(function (res, item) {
     var key = item.key,
         type = item.type,
         _item$format = item.format,
@@ -103,7 +104,8 @@ function getChoosedTags(parmas, choosed) {
         options = item.options,
         _item$canNotDelete = item.canNotDelete,
         canNotDelete = _item$canNotDelete === void 0 ? false : _item$canNotDelete,
-        filterItemTitle = item.filterItemTitle;
+        filterItemTitle = item.filterItemTitle,
+        tagTitle = item.tagTitle;
     var choosedOption = {
       label: '',
       key: '',
@@ -113,6 +115,15 @@ function getChoosedTags(parmas, choosed) {
 
     if (choosed[key]) {
       switch (type) {
+        case 'customize':
+          invariant(typeof tagTitle === 'function', 'customize option must has a tagTitle function');
+          choosedOption.label = tagTitle(choosed[key]);
+          choosedOption.optionValue = choosed[key];
+          choosedOption.key = key;
+          choosedOption.type = type;
+          res.push(choosedOption);
+          break;
+
         case 'date':
           var beginTime = moment(choosed[key][0]).format(format);
           var endTime = moment(choosed[key][1]).format(format);
@@ -126,6 +137,7 @@ function getChoosedTags(parmas, choosed) {
           }
 
           res.push(choosedOption);
+          break;
 
         case 'mult':
           options === null || options === void 0 ? void 0 : options.map(function (item) {
@@ -142,14 +154,11 @@ function getChoosedTags(parmas, choosed) {
               multChoosed.key = key;
               multChoosed.label = label;
               multChoosed.type = type;
-              multChoosed.optionValue = value; // 多选就现在的交互而言没法支持
-              // if (canNotDelete) {
-              //   choosedOption.canNotDelete = canNotDelete;
-              // }
-
+              multChoosed.optionValue = value;
               res.push(multChoosed);
             }
           });
+          break;
 
         case 'single':
           options === null || options === void 0 ? void 0 : options.map(function (item) {
@@ -160,7 +169,7 @@ function getChoosedTags(parmas, choosed) {
               choosedOption.key = key;
               choosedOption.label = label;
               choosedOption.type = type;
-              choosedOption.optionValue = value; // 暂时保留 文档上没有写 支持单选
+              choosedOption.optionValue = value;
 
               if (canNotDelete) {
                 choosedOption.canNotDelete = canNotDelete;
@@ -169,6 +178,7 @@ function getChoosedTags(parmas, choosed) {
               res.push(choosedOption);
             }
           });
+          break;
 
         default:
           break;
@@ -250,6 +260,10 @@ function deleteSomeOne(optionsConfirmed, optionItem, cbFucs) {
     case 'single':
       delete optionsConfirmed[key];
       break;
+
+    case 'customize':
+      delete optionsConfirmed[key];
+      break;
   }
 
   var cbArr = typeof cbFucs === 'function' ? [cbFucs] : cbFucs;
@@ -355,10 +369,10 @@ var FilterComponent = function FilterComponent(props) {
       idName = _useState2[0],
       setIdName = _useState2[1];
 
-  invariant(!showIdSelect || showIdSelect === true && idKeyTypes.length !== 0, 'must set idKeyTypes while showIdSelect is true');
+  invariant(!showIdSelect || idKeyTypes.length !== 0, 'must set idKeyTypes while showIdSelect is true');
   invariant(typeof onFilter === 'function', 'filterCallBack must be a function'); // option controller
 
-  var dropDwonContainerRef = useRef(); // 处理antd日期组件选择完还有高亮问题
+  var dropDownContainerRef = useRef(); // 处理antd日期组件选择完还有高亮问题
 
   var invisibleRef = useRef(); // 控制 展开框的关闭
 
@@ -380,11 +394,10 @@ var FilterComponent = function FilterComponent(props) {
       _useState6 = _slicedToArray(_useState5, 1),
       defaultOptions = _useState6[0];
 
-  var _useState7 = useState(function () {
-    return getCheckBoxSelectedAll(filterItems);
-  }),
-      _useState8 = _slicedToArray(_useState7, 1),
-      optionsAllSelected = _useState8[0];
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      optionsAllSelected = _useState8[0],
+      setOptionsAllSelected = _useState8[1];
 
   var _useReducer = useReducer(optionsChange, initValue ? _objectSpread({}, initValue) : _objectSpread({}, defaultOptions)),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -488,8 +501,12 @@ var FilterComponent = function FilterComponent(props) {
   var _useState39 = useState(searchInputDefault !== undefined ? true : false),
       _useState40 = _slicedToArray(_useState39, 2),
       showSearchInputDefault = _useState40[0],
-      setShowSearchInputDefault = _useState40[1]; // 设置tag框 高度改变动效
+      setShowSearchInputDefault = _useState40[1]; // 处理options 中 data?.map data 初始化为[] 没有数据的情况
+
 
+  useEffect(function () {
+    setOptionsAllSelected(getCheckBoxSelectedAll(filterItems));
+  }, [JSON.stringify(filterItems)]); // 设置tag框 高度改变动效
 
   useLayoutEffect(function () {
     setTimeout(function () {
@@ -614,31 +631,49 @@ var FilterComponent = function FilterComponent(props) {
               disabledDate = item.disabledDate,
               _item$format2 = item.format,
               format = _item$format2 === void 0 ? defaultFormat : _item$format2,
-              dateRangeConfig = item.dateRangeConfig;
-
-          if (type === 'date') {
-            return _jsx(RangePicker, {
-              title: filterItemTitle || formatMessage({
-                id: 'Date'
-              }),
-              optionKey: key,
-              format: format,
-              choosed: optionsChanged[key],
-              disabledDate: disabledDate,
-              valueConfirm: dispatchOptionsChange,
-              setRangeType: setTimeRangeType,
-              tiemRange: timeRangeType,
-              onFocus: invisibleRef.current,
-              dateRangeConfig: dateRangeConfig,
-              pickerOpenStatus: dataPickerOpenStatus[key],
-              setPickerOpenStatus: setPickerOpenStatus
-            }, key);
-          }
-
-          invariant(Array.isArray(options), 'options is required');
+              dateRangeConfig = item.dateRangeConfig,
+              render = item.render,
+              tagTitle = item.tagTitle;
 
           switch (type) {
+            case 'customize':
+              invariant(typeof render === 'function', 'render is required of customize filter option');
+              invariant(typeof tagTitle === 'function', 'tagTitle is required of customize filter option');
+
+              var onChange = function onChange(value) {
+                return dispatchOptionsChange({
+                  type: key,
+                  value: value
+                });
+              };
+
+              return _jsx(CustomizeFilter, {
+                optionKey: key,
+                value: optionsChanged[key],
+                onChange: onChange,
+                render: render
+              }, key);
+
+            case 'date':
+              return _jsx(RangePicker, {
+                title: filterItemTitle || formatMessage({
+                  id: 'Date'
+                }),
+                optionKey: key,
+                format: format,
+                choosed: optionsChanged[key],
+                disabledDate: disabledDate,
+                valueConfirm: dispatchOptionsChange,
+                setRangeType: setTimeRangeType,
+                tiemRange: timeRangeType,
+                onFocus: invisibleRef.current,
+                dateRangeConfig: dateRangeConfig,
+                pickerOpenStatus: dataPickerOpenStatus[key],
+                setPickerOpenStatus: setPickerOpenStatus
+              }, key);
+
             case 'mult':
+              invariant(Array.isArray(options), 'options is required');
               return _jsx(CreateCheckBoxFilter, {
                 title: filterItemTitle,
                 configList: options,
@@ -650,6 +685,7 @@ var FilterComponent = function FilterComponent(props) {
               }, key);
 
             case 'single':
+              invariant(Array.isArray(options), 'options is required');
               return _jsx(CreteRadioBoxFilter, {
                 title: filterItemTitle,
                 configList: options,
@@ -1016,9 +1052,13 @@ var FilterComponent = function FilterComponent(props) {
       }
     }, void 0), _jsx(_Dropdown, Object.assign({
       getPopupContainer: function getPopupContainer() {
-        return dropDwonContainerRef.current;
+        return dropDownContainerRef.current;
       },
-      overlay: menu,
+      overlay: dropVisible ? menu : _jsx(_Menu, {
+        style: {
+          display: 'none'
+        }
+      }, void 0),
       placement: 'bottomLeft',
       overlayClassName: "igloo-form-filter-drop-down-container",
       visible: dropVisible,
@@ -1068,7 +1108,7 @@ var FilterComponent = function FilterComponent(props) {
       }), void 0)
     }), void 0), _jsx("div", {
       className: "igloo-form-filter-drop-down",
-      ref: dropDwonContainerRef
+      ref: dropDownContainerRef
     }, void 0)]
   }), void 0);
 };