iglooform 2.5.4 → 2.5.7

package/es/search-box/style/index.less

@@ -0,0 +1,162 @@
+.igloo-search-box-modal-container {
+  .ant-modal-body {
+    .igloo-search-box-modal-options {
+      max-height: calc(100vh - 340px - 172px);
+      overflow: scroll;
+    }
+
+    .ant-input-affix-wrapper-status-error {
+      border-color: #d9d9d9 !important;
+    }
+
+    .igloo-search-box-modal-multiple-top {
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .igloo-search-box-searching {
+      margin-top: 24px;
+      display: flex;
+      align-items: center;
+
+      @keyframes rotation {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      & > .igloo-icon {
+        font-size: 24px;
+        color: #5858ff;
+        margin-right: 8px;
+        animation: rotation 3s linear infinite;
+      }
+    }
+
+    .igloo-search-box-modal-select-item {
+      padding: 8px;
+      display: flex;
+      align-items: center;
+
+      .igloo-search-box-modal-select-item-checkbox {
+        margin-right: 10px;
+
+        .ant-checkbox-checked .ant-checkbox-inner {
+          background-color: #666666;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+        background: #f9f9f9;
+      }
+    }
+
+    .igloo-search-box-active-select-item {
+      background-color: #f6f6ff;
+    }
+  }
+}
+
+.igloo-search-box-modal-container-mobile {
+  top: 0px !important;
+  margin: 0px !important;
+  width: 100vw !important;
+  max-width: 100vw !important;
+  height: 100vh !important;
+
+  .igloo-search-box-modal-mobile-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color: white;
+
+    .igloo-icon {
+      font-size: 24px;
+      margin-right: 8px;
+    }
+  }
+
+  .ant-modal-content {
+    position: relative;
+    height: 100%;
+
+    .ant-modal-body {
+      height: 100%;
+      max-height: calc(100vh - 140px - 60px);
+      padding: 24px 16px 0px 16px;
+
+      .igloo-search-box-modal-options {
+        max-height: calc(100vh - 140px - 60px - 150px);
+        overflow: scroll;
+      }
+
+      .ant-input-affix-wrapper-status-error {
+        border-color: #d9d9d9 !important;
+      }
+
+      .igloo-search-box-modal-multiple-top {
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .igloo-search-box-searching {
+        margin-top: 24px;
+        display: flex;
+        align-items: center;
+
+        @keyframes rotation {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        & > .igloo-icon {
+          font-size: 24px;
+          color: #5858ff;
+          margin-right: 8px;
+          animation: rotation 3s linear infinite;
+        }
+      }
+
+      .igloo-search-box-modal-select-item {
+        padding: 8px;
+        display: flex;
+        align-items: center;
+
+        .igloo-search-box-modal-select-item-checkbox {
+          margin-right: 10px;
+
+          .ant-checkbox-checked .ant-checkbox-inner {
+            background-color: #666666;
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+          background: #f9f9f9;
+        }
+      }
+
+      .igloo-search-box-active-select-item {
+        background-color: #f6f6ff;
+      }
+    }
+
+    .ant-modal-footer {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+    }
+  }
+}

package/es/select/attached-select.d.ts

@@ -1,21 +1,11 @@
 import { SelectProps, SelectValue } from 'antd/es/select';
 import { FC, IglooComponentProps } from '../types';
-import { FormInstance } from 'antd/es/form';
 import './style';
-import { NamePath } from 'antd/es/form/interface';
+import { ComponentProps } from '../utils/option-utils';
 export declare const Option: import("rc-select/lib/Option").OptionFC, OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
 declare type Props = SelectProps<SelectValue> & IglooComponentProps & {
-    getOptions?: (form: FormInstance) => any[];
     multiple?: boolean;
-    clearWhenOptionsUpdated?: boolean;
-    optionGroups?: {
-        parentKey: string;
-        options: Props['options'];
-    }[];
-    datasourceKey?: string;
-    datasourceApi?: string;
-    dependField?: NamePath;
-};
+} & ComponentProps;
 declare type OptionType = typeof Option;
 declare type OptGroupType = typeof OptGroup;
 interface IglooSelectType extends FC<Props> {

package/es/select/attached-select.js

@@ -1,13 +1,6 @@
 import "antd/es/select/style";
 import _Select from "antd/es/select";
-var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options"],
-    _excluded2 = ["options", "optionGroups", "getOptions", "datasourceKey", "dependField", "children", "clearWhenOptionsUpdated"];
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options", "clearWhenOptionsUpdated"];
 
 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; }
 
@@ -40,18 +33,17 @@ 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useRef } from 'react';
 import omit from 'omit.js';
 import formMethods from '../utils/form-methods';
 import { ArrowDownOutlined, ArrowUpOutlined, SearchOutlined } from 'iglooicon';
 import classnames from 'classnames';
 import Checkbox from '../checkbox';
 import LocaleContext from '../locale/locale-context';
-import FormContext from '../form-context';
 import Button from '../button';
 import Input from '../input';
 import './style';
-import invariant from 'invariant';
+import { compareOptions, optionsHOC } from '../utils/option-utils';
 var Option = _Select.Option,
     OptGroup = _Select.OptGroup;
 export { Option, OptGroup };
@@ -68,6 +60,8 @@ var IglooSelect = function IglooSelect(_ref) {
       multiple = _ref.multiple,
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
+      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = useContext(LocaleContext),
@@ -88,25 +82,33 @@ var IglooSelect = function IglooSelect(_ref) {
       displayOptions = _useState6[0],
       setDisplay = _useState6[1];
 
+  var originOptions = useRef(options);
   useEffect(function () {
     typeof rest.onChange === 'function' && valueProp !== selected && rest.onChange(selected, selectedOptions);
   }, [selected]);
   useEffect(function () {
-    setSelected(valueProp);
+    valueProp !== selected && setSelected(valueProp);
   }, [valueProp]);
-  useEffect(function () {
-    setDisplay(options);
-  }, [options]);
   useEffect(function () {
     var setFieldValue = rest.setFieldValue;
-    var foundValue = options.find(function (option) {
-      return Array.isArray(valueProp) ? valueProp.includes(option.value) : option.value === valueProp;
-    });
 
-    if (!foundValue) {
-      typeof setFieldValue === 'function' && setFieldValue();
+    if (compareOptions(options, originOptions.current)) {
+      if (clearWhenOptionsUpdated) {
+        typeof setFieldValue === 'function' && setFieldValue();
+      } else {
+        var foundValue = options.find(function (option) {
+          return Array.isArray(valueProp) ? valueProp.includes(option.value) : option.value === valueProp;
+        });
+
+        if (!foundValue && valueProp !== undefined) {
+          typeof setFieldValue === 'function' && setFieldValue();
+        }
+      }
+
+      setDisplay(options);
+      originOptions.current = options;
     }
-  }, [valueProp, options]);
+  }, [options]);
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -302,174 +304,13 @@ var IglooSelect = function IglooSelect(_ref) {
   });
 };
 
-var AttachedSelect = function AttachedSelect(_ref11) {
-  var options = _ref11.options,
-      optionGroups = _ref11.optionGroups,
-      getOptions = _ref11.getOptions,
-      datasourceKey = _ref11.datasourceKey,
-      dependField = _ref11.dependField,
-      children = _ref11.children,
-      _ref11$clearWhenOptio = _ref11.clearWhenOptionsUpdated,
-      clearWhenOptionsUpdated = _ref11$clearWhenOptio === void 0 ? false : _ref11$clearWhenOptio,
-      rest = _objectWithoutProperties(_ref11, _excluded2);
-
-  var _useState9 = useState(options || []),
-      _useState10 = _slicedToArray(_useState9, 2),
-      _options = _useState10[0],
-      setOptions = _useState10[1];
-
-  var _useContext2 = useContext(FormContext),
-      selectDatasourceApi = _useContext2.selectDatasourceApi;
-
-  var getFormInstance = rest.getFormInstance;
-  var form = typeof getFormInstance === 'function' && getFormInstance();
-  var dependFieldValue = form && dependField && form.getFieldValue(dependField);
-  var optionsFromGetOptions = typeof getOptions === 'function' && form && getOptions(form);
-  invariant(datasourceKey && selectDatasourceApi || !datasourceKey, 'Please provide selectDatasourceApi in Form props');
-  useEffect(function () {
-    var calcOptions = /*#__PURE__*/function () {
-      var _ref12 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _options2, query, api, rst, _yield$rst$json, data;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!Array.isArray(options)) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return", options);
-
-              case 2:
-                if (!(Array.isArray(children) || _typeof(children) === 'object')) {
-                  _context.next = 4;
-                  break;
-                }
-
-                return _context.abrupt("return", Array.isArray(children) ? children.map(function (child) {
-                  return {
-                    label: child.props.children,
-                    value: child.props.value
-                  };
-                }) : [{
-                  label: children.props.children,
-                  value: children.props.value
-                }]);
-
-              case 4:
-                if (!Array.isArray(optionsFromGetOptions)) {
-                  _context.next = 6;
-                  break;
-                }
-
-                return _context.abrupt("return", optionsFromGetOptions);
-
-              case 6:
-                if (!optionGroups) {
-                  _context.next = 11;
-                  break;
-                }
-
-                if (!dependFieldValue) {
-                  _context.next = 11;
-                  break;
-                }
-
-                _options2 = [];
-                optionGroups.forEach(function (_ref13) {
-                  var parentKey = _ref13.parentKey,
-                      _ref13$options = _ref13.options,
-                      options = _ref13$options === void 0 ? [] : _ref13$options;
-
-                  if (Array.isArray(dependFieldValue) ? dependFieldValue.includes(parentKey) : parentKey === dependFieldValue) {
-                    _options2.push.apply(_options2, _toConsumableArray(options));
-                  }
-                });
-                return _context.abrupt("return", _options2);
-
-              case 11:
-                if (!(selectDatasourceApi && datasourceKey)) {
-                  _context.next = 28;
-                  break;
-                }
-
-                query = Array.isArray(dependFieldValue) ? dependFieldValue.map(function (v) {
-                  return "parent=".concat(v);
-                }).join('&') : dependFieldValue ? "parent=".concat(dependFieldValue) : '';
-                api = "".concat(selectDatasourceApi, "/").concat(datasourceKey);
-                _context.prev = 14;
-                _context.next = 17;
-                return fetch(query ? "".concat(api, "?").concat(query) : api);
-
-              case 17:
-                rst = _context.sent;
-                _context.next = 20;
-                return rst.json();
-
-              case 20:
-                _yield$rst$json = _context.sent;
-                data = _yield$rst$json.data;
-                return _context.abrupt("return", data || []);
-
-              case 25:
-                _context.prev = 25;
-                _context.t0 = _context["catch"](14);
-                return _context.abrupt("return", []);
-
-              case 28:
-                return _context.abrupt("return", []);
-
-              case 29:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[14, 25]]);
-      }));
-
-      return function calcOptions() {
-        return _ref12.apply(this, arguments);
-      };
-    }();
-
-    var compareOptions = function compareOptions(newOptions) {
-      var updateOptions = _options.length !== newOptions.length;
-
-      if (!updateOptions) {
-        for (var i = 0; i < _options.length; i++) {
-          var newOption = _options[i];
-          var originOption = newOptions[i];
-
-          if (newOption.label !== originOption.label || newOption.value !== originOption.value) {
-            updateOptions = true;
-            break;
-          }
-        }
-      }
-
-      if (updateOptions) {
-        setOptions(newOptions);
-        var setFieldValue = rest.setFieldValue;
-
-        if (clearWhenOptionsUpdated) {
-          typeof setFieldValue === 'function' && setFieldValue();
-        }
-      }
-    };
-
-    calcOptions().then(compareOptions);
-  }, [options, optionGroups, dependFieldValue, optionsFromGetOptions]);
-  return _jsx(IglooSelect, _objectSpread({
-    options: _options
-  }, rest));
-};
+var AttachedSelect = Object.assign(optionsHOC(IglooSelect), {
+  Option: Option,
+  OptGroup: OptGroup
+});
 
 AttachedSelect.formItemPropsHandler = function (config) {
   return {};
 };
 
-AttachedSelect.Option = Option;
-AttachedSelect.OptGroup = OptGroup;
 export default AttachedSelect;

package/es/select/style/index.less

@@ -237,6 +237,7 @@
     position: absolute;
     top: 0;
     right: 0;
+    margin-inline-end: 0;
   }
 
   .igloo-select-arrow-active {

package/es/upload-photo/index.js

@@ -112,6 +112,7 @@ var UploadPhoto = function UploadPhoto(props) {
 
   var limitNumError = useRef();
   var DomRef = useRef();
+  var dataUrlRef = useRef([]);
 
   var _useContext = useContext(FormContext),
       uploadApi = _useContext.uploadApi;
@@ -244,12 +245,11 @@ var UploadPhoto = function UploadPhoto(props) {
   var uploadIndex = useRef((value === null || value === void 0 ? void 0 : value.length) ? value.length : 0);
   useEffect(function () {
     return function () {
-      files.forEach(function (_ref4) {
-        var dataUrl = _ref4.dataUrl;
+      dataUrlRef.current.forEach(function (dataUrl) {
         URL.revokeObjectURL(dataUrl);
       });
     };
-  }, [files]);
+  }, []);
   useEffect(function () {
     var removeLimitMsg = function removeLimitMsg(e) {
       if (DomRef.current && !DomRef.current.contains(e.target) && limitNumError.current) {
@@ -315,7 +315,7 @@ var UploadPhoto = function UploadPhoto(props) {
   };
 
   var uploadFile = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(file, currentIndex) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(file, currentIndex) {
       var uid, dataUrl, name, size, mimeType, type, errorMsg, _errorMsg;
 
       return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -324,11 +324,12 @@ var UploadPhoto = function UploadPhoto(props) {
             case 0:
               uid = ++uploadIndex.current;
               dataUrl = URL.createObjectURL(file);
+              dataUrlRef.current.push(dataUrl);
               name = file.name, size = file.size, mimeType = file.type;
               type = classifyType(mimeType);
 
               if (!(type === 'unknown')) {
-                _context4.next = 9;
+                _context4.next = 10;
                 break;
               }
 
@@ -339,9 +340,9 @@ var UploadPhoto = function UploadPhoto(props) {
               setFieldError && setFieldError(errorMsg);
               return _context4.abrupt("return", Promise.reject(errorMsg));
 
-            case 9:
+            case 10:
               if (!(limit && currentIndex > limit)) {
-                _context4.next = 14;
+                _context4.next = 15;
                 break;
               }
 
@@ -355,7 +356,7 @@ var UploadPhoto = function UploadPhoto(props) {
               setFieldError && setFieldError(_errorMsg);
               return _context4.abrupt("return", Promise.reject(_errorMsg));
 
-            case 14:
+            case 15:
               limitNumError.current = undefined;
               setFiles(function (files) {
                 return [].concat(_toConsumableArray(files), [{
@@ -429,7 +430,7 @@ var UploadPhoto = function UploadPhoto(props) {
                 typeof onChange === 'function' && onChange(fileListWithError);
               }));
 
-            case 17:
+            case 18:
             case "end":
               return _context4.stop();
           }
@@ -438,12 +439,12 @@ var UploadPhoto = function UploadPhoto(props) {
     }));
 
     return function uploadFile(_x5, _x6) {
-      return _ref5.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
   var handleUploadPromise = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(file, onSuccess, onFailed) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(file, onSuccess, onFailed) {
       var rst, errorMsg;
       return regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
@@ -474,12 +475,12 @@ var UploadPhoto = function UploadPhoto(props) {
     }));
 
     return function handleUploadPromise(_x7, _x8, _x9) {
-      return _ref6.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
 
   var handleDelete = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(index) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(index) {
       var arr, hasError, rst;
       return regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
@@ -527,8 +528,8 @@ var UploadPhoto = function UploadPhoto(props) {
               return _context6.abrupt("return", typeof onChange === 'function' && onChange(rst));
 
             case 10:
-              typeof onChange === 'function' && onChange(arr.map(function (_ref8) {
-                var url = _ref8.url;
+              typeof onChange === 'function' && onChange(arr.map(function (_ref7) {
+                var url = _ref7.url;
                 return url;
               }));
 
@@ -541,12 +542,12 @@ var UploadPhoto = function UploadPhoto(props) {
     }));
 
     return function handleDelete(_x10) {
-      return _ref7.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
 
   var handleReUpload = /*#__PURE__*/function () {
-    var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(index) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(index) {
       var _files$index, originFile, reUpUid, rst, latestFiles, fileListWithError, newList, _rst;
 
       return regeneratorRuntime.wrap(function _callee7$(_context7) {
@@ -657,7 +658,7 @@ var UploadPhoto = function UploadPhoto(props) {
     }));
 
     return function handleReUpload(_x11) {
-      return _ref9.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
 
@@ -669,7 +670,7 @@ var UploadPhoto = function UploadPhoto(props) {
     Modal.noFooter({
       content: _jsx(Preview, {
         src: dataUrl,
-        type: type
+        type: classifyType(type)
       }),
       title: name,
       className: 'igloo-upload-photo-preview-modal',
@@ -750,12 +751,12 @@ var UploadPhoto = function UploadPhoto(props) {
       children: _jsxs(_Row, {
         gutter: [isMobile ? 16 : 32, 16],
         wrap: true,
-        children: [Boolean(samples === null || samples === void 0 ? void 0 : samples.length) && samples.map(function (_ref10, index) {
+        children: [Boolean(samples === null || samples === void 0 ? void 0 : samples.length) && samples.map(function (_ref9, index) {
           var _classnames, _classnames2;
 
-          var src = _ref10.src,
-              label = _ref10.label,
-              type = _ref10.type;
+          var src = _ref9.src,
+              label = _ref9.label,
+              type = _ref9.type;
           return _jsxs(_Col, {
             span: sampleSpan,
             children: [_jsx("img", {
@@ -815,13 +816,13 @@ var UploadPhoto = function UploadPhoto(props) {
             children: buttonText || 'Upload'
           })
         })]
-      }), files.map(function (_ref11, index) {
+      }), files.map(function (_ref10, index) {
         var _classnames5;
 
-        var dataUrl = _ref11.dataUrl,
-            status = _ref11.status,
-            type = _ref11.type,
-            uid = _ref11.uid;
+        var dataUrl = _ref10.dataUrl,
+            status = _ref10.status,
+            type = _ref10.type,
+            uid = _ref10.uid;
         return _jsx(_Badge, {
           count: getBadge(status, index, limit),
           children: _jsxs("div", {
@@ -889,10 +890,10 @@ function checkFileList(value) {
   return Promise.resolve();
 }
 
-UploadPhoto.formItemPropsHandler = function (_ref12) {
-  var limit = _ref12.limit,
-      previewFormater = _ref12.previewFormater,
-      label = _ref12.label;
+UploadPhoto.formItemPropsHandler = function (_ref11) {
+  var limit = _ref11.limit,
+      previewFormater = _ref11.previewFormater,
+      label = _ref11.label;
   return {
     previewFormater: previewFormater || function (value) {
       return _jsx(UploadPreview, {

package/es/upload-photo/media.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PDF from '@mikecousins/react-pdf';
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 
 var MediaItem = function MediaItem(_ref) {
   var type = _ref.type,
@@ -21,13 +21,12 @@ var MediaItem = function MediaItem(_ref) {
     case 'pdf':
       return _jsx("div", {
         className: className,
-        children: _jsx(PDF, {
+        children: _jsx(Document, {
           file: src,
-          scale: 0.1,
-          style: {
-            maxWidth: 96,
-            maxHeight: 96
-          }
+          children: _jsx(Page, {
+            pageNumber: 1,
+            height: 96
+          })
         })
       });