dtable-ui-component 0.1.75-beta1 → 0.1.75-beta10

package/README.md

@@ -11,8 +11,21 @@ When using dtable-ui-component component library, you need to import dtable-font
 
 ```js
   import { CollaboratorEditor } from 'dtable-ui-component';
-
   import 'dtable-ui-component/assets/dtable-font.css';
 
   ...
-```
+```
+
+## load demand
+
+If you want to use on-demand loading, add the following content to the ` .babelrc` file of your project 
+
+```js
+"plugins": [
+    ["on-demand-loading", {"library": "dtable-ui-component"}]
+ ]
+```
+
+## Long text formatter
+
+If your project does not require complex formatted display of long text, you can just introduce the ` SimpleLongTextFormatter` component

package/lib/AutoNumberFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/auto-number-formatter.js → lib/AutoNumberFormatter/index.js}

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
+import './index.css';
 
 var AutoNumberFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(AutoNumberFormatter, _React$Component);

package/lib/ButtonFormatter/index.css

@@ -0,0 +1,13 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.button-formatter {
+  height: 26px;
+  width: 80px;
+  padding: 5px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/{es/components/cell-formatter/button-formatter.js → lib/ButtonFormatter/index.js}

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
+import './index.css';
 
 var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(ButtonFormatter, _React$Component);

package/lib/CTimeFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/ctime-formatter.js → lib/CTimeFormatter/index.js}

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
 import moment from 'moment';
+import './index.css';
 
 var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(CTimeFormatter, _React$Component);

package/lib/CheckboxFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/checkbox-formatter.js → lib/CheckboxFormatter/index.js}

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
+import './index.css';
 
 var CheckboxFormatter = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(CheckboxFormatter, _React$PureComponent);

package/lib/CollaboratorEditor/index.css

@@ -0,0 +1,48 @@
+.dtable-ui-collaborator-editor {
+  position: relative;
+}
+
+.dtable-ui-collaborator-editor-container .collaborators-container {
+  margin-top: 8px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-search-container {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-search-container input {
+  height: 28px;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  padding: 0 10px;
+  overflow: auto;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding-left: 12px;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-checked {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-collaborator-editor-popover .collaborator-checked .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}

package/{es/components/cell-editor/collaborator-editor.js → lib/CollaboratorEditor/index.js}

@@ -4,11 +4,12 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
-import { getLocale } from '../../lang';
-import CollaboratorItem from '../common/collaborator-item';
-import EditEditorButton from '../common/edit-editor-button';
-import PCCollaboratorEditorPopover from '../cell-editor-popover/pc-collaborator-editor-popover';
-import MBCollaboratorEditorPopover from '../cell-editor-popover/mb-collaborator-editor-popover';
+import { getLocale } from '../lang';
+import CollaboratorItem from '../CollaboratorItem';
+import EditEditorButton from '../EditEditorButton';
+import PCCollaboratorEditorPopover from './pc-collaborator-editor-popover';
+import MBCollaboratorEditorPopover from './mb-collaborator-editor-popover';
+import './index.css';
 
 var CollaboratorEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(CollaboratorEditor, _React$Component);

package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.css

@@ -0,0 +1,86 @@
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items {
+    padding: 8px 16px;
+    margin-top: 20px;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items > input {
+    outline: none;
+    height: 30px;
+    padding: 0;
+    line-height: 30px;
+    border: none;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items > input:focus,
+  .dtable-ui-mb-collaborator-editor-body .mb-search-collaborator-items > input:active {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborators-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    min-height: 0;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborators-container .title {
+    padding: 6px 16px;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborators-container .content {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .search-result-none {
+    padding: 16px 0 16px 16px;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px 10px 10px 16px;
+    font-size: 13px;
+    background-color: #fff;
+    color: #202428;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item {
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .mb-collaborator-info {
+    display: flex;
+    align-items: center;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .collaborator-avatar img {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .collaborator-name {
+    padding: 0 10px;
+    overflow: hidden;
+  }
+
+  .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item .dtable-font {
+    font-size: 12px;
+    color: #798d99;
+  }
+}

package/{es/components/cell-editor-popover/mb-collaborator-editor-popover.js → lib/CollaboratorEditor/mb-collaborator-editor-popover/index.js}

@@ -5,7 +5,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { getLocale } from '../../lang';
-import MBEditorHeader from '../common/mobile/mb-editor-header';
+import MBEditorHeader from '../../MBEditorHeader';
+import './index.css';
 
 var MBCollaboratorEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(MBCollaboratorEditorPopover, _React$Component);

package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.css

@@ -0,0 +1 @@
+@import url('../../css/cell-editor.css');

package/{es/components/cell-editor-popover/pc-collaborator-editor-popover.js → lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js}

@@ -5,7 +5,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { getLocale } from '../../lang';
-import CollaboratorItem from '../common/collaborator-item';
+import CollaboratorItem from '../../CollaboratorItem';
+import './index.css';
 
 var PCCollaboratorEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(PCCollaboratorEditorPopover, _React$Component);

package/lib/CollaboratorFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/collaborator-formatter.js → lib/CollaboratorFormatter/index.js}

@@ -4,8 +4,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import CollaboratorItem from '../common/collaborator-item';
-import DefaultAvatar from '../../assets/images/avatar/default_avatar.png';
+import CollaboratorItem from '../CollaboratorItem';
+import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
+import './index.css';
 
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0

package/lib/CollaboratorItem/index.css

@@ -0,0 +1,49 @@
+.dtable-ui.collaborator-item {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  height: 20px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.dtable-ui.collaborator-item .collaborator-avatar,
+.dtable-ui.collaborator-item .collaborator-name,
+.dtable-ui.collaborator-item .collaborator-remove {
+  height: 20px;
+  line-height: 20px;
+}
+
+.dtable-ui.collaborator-item .collaborator-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 4px 0 2px;
+}
+
+.dtable-ui.collaborator-item .collaborator-avatar img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.dtable-ui.collaborator-item .collaborator-remove {
+  display: inline-block;
+  width: 14px;
+  margin: 0 -2px 0 2px;
+}
+
+.dtable-ui.collaborator-item .collaborator-remove .dtable-font {
+  display: inline-block;
+  font-size: 12px;
+  color: #909090;
+  transform: scale(.8);
+  cursor: pointer;
+}
+
+.dtable-ui.collaborator-item .collaborator-remove .dtable-font:hover {
+  color: #666666;
+  cursor: pointer;
+}

package/{es/components/common/collaborator-item.js → lib/CollaboratorItem/index.js}

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
+import './index.css';
 
 var CollaboratorItem = /*#__PURE__*/function (_React$Component) {
   _inherits(CollaboratorItem, _React$Component);

package/lib/CreatorFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/creator-formatter.js → lib/CreatorFormatter/index.js}

@@ -4,8 +4,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import CollaboratorItem from '../common/collaborator-item';
-import DefaultAvatar from '../../assets/images/avatar/default_avatar.png';
+import CollaboratorItem from '../CollaboratorItem';
+import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
+import './index.css';
 
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0

package/lib/DateEditor/index.css

@@ -0,0 +1,4 @@
+.dtable-ui-date-editor .dtable-ui-date-editor-container {
+  display: flex;
+  width: 400px;
+}

package/{es/components/cell-editor/date-editor.js → lib/DateEditor/index.js}

@@ -5,9 +5,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import moment from 'moment';
-import { getDateDisplayString } from '../../utils/value-format-utils';
-import PCDateEditorPopover from '../cell-editor-popover/pc-date-editor-popover';
-import MBDateEditorPopover from '../cell-editor-popover/mb-date-editor-popover';
+import { getDateDisplayString } from '../utils/value-format-utils';
+import PCDateEditorPopover from './pc-date-editor-popover';
+import MBDateEditorPopover from './mb-date-editor-popover';
+import './index.css';
 
 var DateEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(DateEditor, _React$Component);
@@ -96,7 +97,7 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           className: "cell-editor date-editor"
         }, /*#__PURE__*/React.createElement("div", {
-          className: "date-editor-conteinr"
+          className: "date-editor-container"
         }, /*#__PURE__*/React.createElement("div", {
           className: "control-form"
         })));

package/lib/DateEditor/mb-date-editor-popover/index.css

@@ -0,0 +1,45 @@
+@import url('./custom-rc-calendar.css');
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input {
+    display: flex;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input {
+    flex: 1;
+    background-color: #fff;
+  }
+  
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input .date-input-day {
+    background-color: #f5f5f5;
+    border: 1px solid #e9e9e9;
+    margin: 10px;
+    padding: 3px 5px;
+    border-radius: 3px;
+  }
+
+  .dtable-ui-mb-date-editor-body .dtable-ui.mb-date-editor-picker {
+    display: block;
+    position: relative;
+    margin-top: 20px;
+    line-height: 1.5;
+    box-sizing: border-box;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-clear {
+    padding: 10px 0;
+    margin-top: 20px;
+    border-bottom: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+    text-align: center;
+    color: #d27053;
+    background-color: #fff;
+  }
+
+  .dtable-ui .am-picker-popup-header .am-picker-popup-item {
+    color: #E5A252;
+  }
+}

package/{es/components/cell-editor-popover/mb-date-editor-popover.js → lib/DateEditor/mb-date-editor-popover/index.js}

@@ -9,19 +9,19 @@ import Calendar from '@seafile/seafile-calendar';
 import * as SeaDatePicker from '@seafile/seafile-calendar/lib/Picker';
 import { getLocale } from '../../lang';
 import { initDateEditorLanguage } from '../../utils/editor-utils';
-import MBEditorHeader from '../common/mobile/mb-editor-header';
+import MBEditorHeader from '../../MBEditorHeader';
 import '@seafile/seafile-calendar/assets/index.css';
-import '../../css/custom-rc-calendar.css';
+import './index.css';
 
-var DateEidtorPopover = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(DateEidtorPopover, _React$PureComponent);
+var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DateEditorPopover, _React$PureComponent);
 
-  var _super = _createSuper(DateEidtorPopover);
+  var _super = _createSuper(DateEditorPopover);
 
-  function DateEidtorPopover(props) {
+  function DateEditorPopover(props) {
     var _this;
 
-    _classCallCheck(this, DateEidtorPopover);
+    _classCallCheck(this, DateEditorPopover);
 
     _this = _super.call(this, props);
 
@@ -171,7 +171,7 @@ var DateEidtorPopover = /*#__PURE__*/function (_React$PureComponent) {
     return _this;
   }
 
-  _createClass(DateEidtorPopover, [{
+  _createClass(DateEditorPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       history.pushState(null, null, '#'); // eslint-disable-line
@@ -239,7 +239,7 @@ var DateEidtorPopover = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 
-  return DateEidtorPopover;
+  return DateEditorPopover;
 }(React.PureComponent);
 
-export default DateEidtorPopover;
+export default DateEditorPopover;

package/{es/components/cell-editor-popover → lib/DateEditor}/pc-date-editor-popover.js

@@ -6,9 +6,9 @@ import React from 'react';
 import moment from 'moment';
 import DatePicker from '@seafile/seafile-calendar/lib/Picker';
 import Calendar from '@seafile/seafile-calendar';
-import { initDateEditorLanguage } from '../../utils/editor-utils';
+import { initDateEditorLanguage } from '../utils/editor-utils';
 import '@seafile/seafile-calendar/assets/index.css';
-import { getLocale } from '../../lang';
+import { getLocale } from '../lang';
 
 var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
   _inherits(PCDateEditorPopover, _React$Component);

package/lib/DateFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/date-formatter.js → lib/DateFormatter/index.js}

@@ -4,7 +4,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import { getDateDisplayString } from '../../utils/value-format-utils';
+import { getDateDisplayString } from '../utils/value-format-utils';
+import './index.css';
 
 var DateFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(DateFormatter, _React$Component);

package/lib/DurationFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/{es/components/cell-formatter/duration-formatter.js → lib/DurationFormatter/index.js}

@@ -4,7 +4,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import { getDurationDisplayString } from '../../utils/value-format-utils';
+import { getDurationDisplayString } from '../utils/value-format-utils';
+import './index.css';
 
 var DurationFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(DurationFormatter, _React$Component);

package/lib/EmailFormatter/index.css

@@ -0,0 +1,5 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.email-formatter {
+  text-decoration: underline;
+}

package/{es/components/cell-formatter/email-formatter.js → lib/EmailFormatter/index.js}

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
+import './index.css';
 
 var EmailFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(EmailFormatter, _React$Component);

package/{es/components/cell-editor-dialog/pc-file-editor-dialog.js → lib/FileEditor/index.js}

@@ -4,24 +4,24 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { getLocale } from '../../lang';
+import { getLocale } from '../lang';
 
-var FileEditorDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(FileEditorDialog, _React$Component);
+var FileEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(FileEditor, _React$Component);
 
-  var _super = _createSuper(FileEditorDialog);
+  var _super = _createSuper(FileEditor);
 
-  function FileEditorDialog(props) {
+  function FileEditor(props) {
     var _this;
 
-    _classCallCheck(this, FileEditorDialog);
+    _classCallCheck(this, FileEditor);
 
     _this = _super.call(this, props);
     _this.state = {};
     return _this;
   }
 
-  _createClass(FileEditorDialog, [{
+  _createClass(FileEditor, [{
     key: "render",
     value: function render() {
       var closeEditor = this.props.closeEditor;
@@ -36,11 +36,11 @@ var FileEditorDialog = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return FileEditorDialog;
+  return FileEditor;
 }(React.Component);
 
-FileEditorDialog.defaultProps = {
+FileEditor.defaultProps = {
   isCheckRepeat: false,
   columnType: 'file'
 };
-export default FileEditorDialog;
+export default FileEditor;

package/lib/FileFormatter/index.css

@@ -0,0 +1,29 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.file-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.file-formatter .file-item-icon {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  border: 1px solid #f0f0f0;
+}
+
+.dtable-ui.file-formatter .file-item-count {
+  display: inline-block;
+  padding: 0 3px;
+  min-width: 14px;
+  line-height: 14px;
+  font-size: 12px;
+  border-radius: 6px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  background-color: #999;
+  -webkit-transform: translate(-50%, 8px) scale(.8);
+  transform: translate(-50%, 8px) scale(.8);
+}

package/{es/components/cell-formatter/file-formatter.js → lib/FileFormatter/index.js}

@@ -4,7 +4,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import FileItemFormatter from './widgets/file-item-formatter';
+import FileItemFormatter from '../FileItemFormatter';
+import './index.css';
 
 var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(FileFormatter, _React$PureComponent);