iglooform 2.3.3 → 2.3.7

package/es/typography/index.js

@@ -24,7 +24,7 @@ var IglooTypography = function IglooTypography(_ref) {
 
   if (wrapElement === 'div') {
     return _jsx("div", Object.assign({
-      className: classNames(classNameObj, className),
+      className: classNames(classNameObj, 'word-wrap', className),
       style: style,
       title: title,
       onClick: onClick
@@ -34,7 +34,7 @@ var IglooTypography = function IglooTypography(_ref) {
   }
 
   return _jsx("span", Object.assign({
-    className: classNames(classNameObj, className),
+    className: classNames(classNameObj, 'word-wrap', className),
     style: style,
     title: title,
     onClick: onClick

package/es/typography/style/index.less

@@ -1,7 +1,10 @@
+.word-wrap {
+  word-wrap: break-word;
+}
+
 .igloo-typography {
   &-h1 {
     font-size: 30px;
-
     font-weight: 500;
     letter-spacing: 0px;
     line-height: 38px;

package/es/upload/index.d.ts

@@ -4,11 +4,11 @@ import './style/index.less';
 export interface IglooUploadProps extends UploadProps, IglooComponentProps {
     placeholder?: string;
     handleUpload(file: RcFile): PromiseLike<string>;
-    value: string[];
-    onChange(value: any): void;
+    value?: string[];
+    onChange?: (value: any) => void;
     limit?: number;
     limitErrorMessage?: Function | string;
-    containerRef: any;
+    containerRef?: any;
     descriptions?: any;
 }
 declare const IglooUpload: FC<IglooUploadProps>;

package/es/upload/index.js

@@ -195,7 +195,7 @@ var IglooUpload = function IglooUpload(_ref) {
                     return f;
                   });
                 });
-                onChange(urls);
+                onChange && onChange(urls);
               }, function (errorMsg) {
                 var fileList = [];
                 setFiles(function (files) {
@@ -398,7 +398,7 @@ var IglooUpload = function IglooUpload(_ref) {
 
                 return url;
               });
-              onChange(fileListWithError);
+              onChange && onChange(fileListWithError);
               _context4.next = 23;
               break;
 

package/es/upload-photo/index.d.ts

@@ -2,12 +2,12 @@ import { FC, IglooComponentProps } from '../types';
 import './style/index.less';
 export interface Props extends IglooComponentProps {
     handleUpload(file: File): PromiseLike<string>;
-    value: (string | {
+    value?: (string | {
         name: string;
         status: 'failed';
         errorMsg: string;
     })[];
-    onChange(value: any): void;
+    onChange?: (value: any) => void;
     limit?: number;
     limitErrorMessage?: Function | string;
     descriptions?: any;

package/es/upload-photo/index.js

@@ -269,7 +269,7 @@ var UploadPhoto = function UploadPhoto(_ref) {
                     return f;
                   });
                 });
-                onChange(urls);
+                onChange && onChange(urls);
               }, function (errorMsg) {
                 var fileList = [];
                 setFiles(function (files) {
@@ -479,7 +479,7 @@ var UploadPhoto = function UploadPhoto(_ref) {
 
                 return url;
               });
-              onChange(fileListWithError);
+              onChange && onChange(fileListWithError);
               _context4.next = 23;
               break;
 

package/es/upload-photo/media.js

@@ -24,7 +24,6 @@ var MediaItem = function MediaItem(_ref) {
       }, {
         children: _jsx(PDF, {
           file: src,
-          withCredentials: true,
           scale: 0.1,
           style: {
             maxWidth: 96,

package/es/upload-preview/media.js

@@ -47,7 +47,6 @@ var PDF = function PDF(_ref) {
   for (var i = 1; i <= pageSize; i++) {
     pages.push(_jsx(PDFPreview, {
       file: src,
-      // withCredentials
       page: i,
       onDocumentLoadSuccess: handlePageInit,
       scale: md ? 1 : 0.5

package/lib/admin-upload/modal.js

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

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

@@ -52,7 +52,7 @@ var IglooCardGroup = function IglooCardGroup(props) {
     style: _objectSpread({
       marginBottom: 32
     }, style),
-    className: (0, _classnames.default)(className)
+    className: (0, _classnames.default)('igloo-form-card-container-group', className)
   }, {
     children: [(subHeading || subStatus) && subTitle, (0, _jsxRuntime.jsx)(_row.default, Object.assign({
       gutter: [32, 16]
@@ -68,5 +68,6 @@ var IglooCardGroup = function IglooCardGroup(props) {
   }), void 0);
 };
 
+IglooCardGroup.displayName = 'IglooCardGroup';
 var _default = IglooCardGroup;
 exports.default = _default;

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

@@ -41,6 +41,13 @@ var IglooCardItem = function IglooCardItem(props) {
           children: children
         }), void 0);
 
+      case 'number':
+        return (0, _jsxRuntime.jsx)(_index2.default, Object.assign({
+          level: "body1"
+        }, {
+          children: children
+        }), void 0);
+
       case 'object':
         return children;
 

package/lib/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/lib/card-detail/card.js

@@ -31,7 +31,7 @@ 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; }
 
-var IglooCardGroup = function IglooCardGroup(props) {
+var IglooCard = function IglooCard(props) {
   var children = props.children;
 
   var title = props.title,
@@ -74,6 +74,6 @@ var IglooCardGroup = function IglooCardGroup(props) {
   }), void 0);
 };
 
-IglooCardGroup.displayName = 'IglooCardGroup';
-var _default = IglooCardGroup;
+IglooCard.displayName = 'IglooCard';
+var _default = IglooCard;
 exports.default = _default;

package/lib/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/lib/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/lib/card-detail/utils.js

@@ -31,9 +31,9 @@ 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;
     }
@@ -62,16 +62,16 @@ function findCardItem() {
 
     return finalDom;
   }, []);
-} //hasCustomizeWrappr 存在的情况都是针对 page中出现 cardItem来处理的
+} //hasCustomizeWrap 存在的情况都是针对 page中出现 cardItem来处理的
 
 
 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' ? (0, _jsxRuntime.jsx)(_cardGroup.default, Object.assign({
         style: {
           padding: padding
@@ -79,11 +79,24 @@ function wrapCardItem() {
       }, {
         children: item
       }), index) : item;
-    } // 不是card 或者 cardItem 包裹一层div 用来对齐样式 （用来处理 messageBar的）
-
+    } // 对齐样式
+
+
+    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.default.cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
+          key: index,
+          style: {
+            padding: '32px 24px',
+            marginBottom: 0
+          },
+          className: (0, _classnames.default)(className, subHeading ? 'igloo-card-detail-top-group-with-head' : 'igloo-card-detail-top-group-no-head')
+        }));
+      }
 
-    if (item.type.displayName !== 'IglooCardGroup' && hasCustomizeWrappr) {
-      var className = item.props.className;
       return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
         key: index,
         className: (0, _classnames.default)(className, 'igloo-card-detail-customize-content-wraper')
@@ -94,6 +107,6 @@ function wrapCardItem() {
   });
 }
 
-function DealWithCardItem(children, hasCustomizeWrappr) {
-  return wrapCardItem(findCardItem(children), hasCustomizeWrappr);
+function DealWithCardItem(children, hasCustomizeWrap) {
+  return wrapCardItem(findCardItem(children), hasCustomizeWrap);
 }

package/lib/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/lib/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/lib/filter/customize.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/divider/style");
+
+var _divider = _interopRequireDefault(require("antd/es/divider"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CustomizeFilter = function CustomizeFilter(props) {
+  var optionKey = props.optionKey,
+      value = props.value,
+      onChange = props.onChange,
+      render = props.render;
+  return (0, _jsxRuntime.jsxs)("div", Object.assign({
+    className: "igloo-form-filter-drop-down-container-content-group"
+  }, {
+    children: [render(value, onChange), (0, _jsxRuntime.jsx)(_divider.default, {
+      style: {
+        margin: '16px 0px'
+      }
+    }, void 0)]
+  }), optionKey);
+};
+
+var _default = CustomizeFilter;
+exports.default = _default;

package/lib/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/lib/filter/index.js

@@ -51,6 +51,8 @@ var _checkBox = _interopRequireDefault(require("./checkBox"));
 
 var _radioBox = _interopRequireDefault(require("./radioBox"));
 
+var _customize = _interopRequireDefault(require("./customize"));
+
 var _typography = _interopRequireDefault(require("../typography"));
 
 var _select = _interopRequireDefault(require("../select"));
@@ -127,8 +129,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,
@@ -136,7 +138,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: '',
@@ -146,6 +149,15 @@ function getChoosedTags(parmas, choosed) {
 
     if (choosed[key]) {
       switch (type) {
+        case 'customize':
+          (0, _invariant.default)(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 = (0, _moment.default)(choosed[key][0]).format(format);
           var endTime = (0, _moment.default)(choosed[key][1]).format(format);
@@ -159,6 +171,7 @@ function getChoosedTags(parmas, choosed) {
           }
 
           res.push(choosedOption);
+          break;
 
         case 'mult':
           options === null || options === void 0 ? void 0 : options.map(function (item) {
@@ -175,14 +188,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) {
@@ -193,7 +203,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;
@@ -202,6 +212,7 @@ function getChoosedTags(parmas, choosed) {
               res.push(choosedOption);
             }
           });
+          break;
 
         default:
           break;
@@ -283,6 +294,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;
@@ -388,10 +403,10 @@ var FilterComponent = function FilterComponent(props) {
       idName = _useState2[0],
       setIdName = _useState2[1];
 
-  (0, _invariant.default)(!showIdSelect || showIdSelect === true && idKeyTypes.length !== 0, 'must set idKeyTypes while showIdSelect is true');
+  (0, _invariant.default)(!showIdSelect || idKeyTypes.length !== 0, 'must set idKeyTypes while showIdSelect is true');
   (0, _invariant.default)(typeof onFilter === 'function', 'filterCallBack must be a function'); // option controller
 
-  var dropDwonContainerRef = (0, _react.useRef)(); // 处理antd日期组件选择完还有高亮问题
+  var dropDownContainerRef = (0, _react.useRef)(); // 处理antd日期组件选择完还有高亮问题
 
   var invisibleRef = (0, _react.useRef)(); // 控制 展开框的关闭
 
@@ -413,11 +428,10 @@ var FilterComponent = function FilterComponent(props) {
       _useState6 = _slicedToArray(_useState5, 1),
       defaultOptions = _useState6[0];
 
-  var _useState7 = (0, _react.useState)(function () {
-    return getCheckBoxSelectedAll(filterItems);
-  }),
-      _useState8 = _slicedToArray(_useState7, 1),
-      optionsAllSelected = _useState8[0];
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      optionsAllSelected = _useState8[0],
+      setOptionsAllSelected = _useState8[1];
 
   var _useReducer = (0, _react.useReducer)(optionsChange, initValue ? _objectSpread({}, initValue) : _objectSpread({}, defaultOptions)),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -521,8 +535,12 @@ var FilterComponent = function FilterComponent(props) {
   var _useState39 = (0, _react.useState)(searchInputDefault !== undefined ? true : false),
       _useState40 = _slicedToArray(_useState39, 2),
       showSearchInputDefault = _useState40[0],
-      setShowSearchInputDefault = _useState40[1]; // 设置tag框 高度改变动效
+      setShowSearchInputDefault = _useState40[1]; // 处理options 中 data?.map data 初始化为[] 没有数据的情况
+
 
+  (0, _react.useEffect)(function () {
+    setOptionsAllSelected(getCheckBoxSelectedAll(filterItems));
+  }, [JSON.stringify(filterItems)]); // 设置tag框 高度改变动效
 
   (0, _react.useLayoutEffect)(function () {
     setTimeout(function () {
@@ -646,31 +664,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 (0, _jsxRuntime.jsx)(_rangePicker.default, {
-              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);
-          }
-
-          (0, _invariant.default)(Array.isArray(options), 'options is required');
+              dateRangeConfig = item.dateRangeConfig,
+              render = item.render,
+              tagTitle = item.tagTitle;
 
           switch (type) {
+            case 'customize':
+              (0, _invariant.default)(typeof render === 'function', 'render is required of customize filter option');
+              (0, _invariant.default)(typeof tagTitle === 'function', 'tagTitle is required of customize filter option');
+
+              var onChange = function onChange(value) {
+                return dispatchOptionsChange({
+                  type: key,
+                  value: value
+                });
+              };
+
+              return (0, _jsxRuntime.jsx)(_customize.default, {
+                optionKey: key,
+                value: optionsChanged[key],
+                onChange: onChange,
+                render: render
+              }, key);
+
+            case 'date':
+              return (0, _jsxRuntime.jsx)(_rangePicker.default, {
+                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':
+              (0, _invariant.default)(Array.isArray(options), 'options is required');
               return (0, _jsxRuntime.jsx)(_checkBox.default, {
                 title: filterItemTitle,
                 configList: options,
@@ -682,6 +718,7 @@ var FilterComponent = function FilterComponent(props) {
               }, key);
 
             case 'single':
+              (0, _invariant.default)(Array.isArray(options), 'options is required');
               return (0, _jsxRuntime.jsx)(_radioBox.default, {
                 title: filterItemTitle,
                 configList: options,
@@ -1047,9 +1084,13 @@ var FilterComponent = function FilterComponent(props) {
       }
     }, void 0), (0, _jsxRuntime.jsx)(_dropdown.default, Object.assign({
       getPopupContainer: function getPopupContainer() {
-        return dropDwonContainerRef.current;
+        return dropDownContainerRef.current;
       },
-      overlay: menu,
+      overlay: dropVisible ? menu : (0, _jsxRuntime.jsx)(_menu.default, {
+        style: {
+          display: 'none'
+        }
+      }, void 0),
       placement: 'bottomLeft',
       overlayClassName: "igloo-form-filter-drop-down-container",
       visible: dropVisible,
@@ -1099,7 +1140,7 @@ var FilterComponent = function FilterComponent(props) {
       }), void 0)
     }), void 0), (0, _jsxRuntime.jsx)("div", {
       className: "igloo-form-filter-drop-down",
-      ref: dropDwonContainerRef
+      ref: dropDownContainerRef
     }, void 0)]
   }), void 0);
 };