@manuscripts/style-guide 1.8.3 → 1.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,10 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.FileManager = exports.PermissionsContext = void 0;
27
27
  const react_1 = __importStar(require("react"));
28
28
  const index_1 = require("../../index");
29
- const DragLayer_1 = require("../DragLayer");
30
29
  const Inspector_1 = require("../Inspector");
31
30
  const InspectorSection_1 = require("../InspectorSection");
32
31
  const Tooltip_1 = require("../Tooltip");
32
+ const FileManagerDragLayer_1 = require("./FileManagerDragLayer");
33
33
  const FileManagerProvider_1 = require("./FileManagerProvider");
34
34
  const InlineFilesSection_1 = require("./InlineFilesSection");
35
35
  const OtherFilesSection_1 = require("./OtherFilesSection");
@@ -38,7 +38,7 @@ exports.PermissionsContext = (0, react_1.createContext)(null);
38
38
  const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
39
39
  const { inlineFiles, supplements, otherFiles } = (0, index_1.useFiles)(modelMap, files);
40
40
  return (react_1.default.createElement(FileManagerProvider_1.FileManagerProvider, { saveModel: saveModel, deleteModel: deleteModel, modelMap: modelMap, fileManagement: fileManagement },
41
- react_1.default.createElement(DragLayer_1.DragLayer, null),
41
+ react_1.default.createElement(FileManagerDragLayer_1.FileManagerDragLayer, null),
42
42
  react_1.default.createElement(exports.PermissionsContext.Provider, { value: can },
43
43
  react_1.default.createElement(InspectorSection_1.InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
44
44
  react_1.default.createElement(Inspector_1.InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },
@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DragLayer = void 0;
6
+ exports.FileManagerDragLayer = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const react_dnd_1 = require("react-dnd");
9
9
  const styled_components_1 = __importDefault(require("styled-components"));
10
- const FileContainer_1 = require("./FileManager/FileContainer");
11
- const FileCreatedDate_1 = require("./FileManager/FileCreatedDate");
12
- const FileName_1 = require("./FileManager/FileName");
10
+ const FileContainer_1 = require("./FileContainer");
11
+ const FileCreatedDate_1 = require("./FileCreatedDate");
12
+ const FileName_1 = require("./FileName");
13
13
  const Container = styled_components_1.default.div `
14
14
  position: fixed;
15
15
  pointer-events: none;
@@ -38,26 +38,18 @@ const getItemStyles = (currentOffset) => {
38
38
  WebkitTransform: transform,
39
39
  };
40
40
  };
41
- const DragLayer = () => {
41
+ const FileManagerDragLayer = () => {
42
42
  const { itemType, isDragging, item, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
43
43
  item: monitor.getItem(),
44
44
  itemType: monitor.getItemType(),
45
45
  currentOffset: monitor.getSourceClientOffset(),
46
46
  isDragging: monitor.isDragging(),
47
47
  }));
48
- const renderItem = () => {
49
- switch (itemType) {
50
- case 'file':
51
- return (react_1.default.createElement(DraggableFileContainer, null,
52
- react_1.default.createElement(FileName_1.FileName, { file: item.file }),
53
- item.file.createdDate && react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: item.file })));
54
- default:
55
- return null;
56
- }
57
- };
58
48
  if (!isDragging) {
59
49
  return null;
60
50
  }
61
- return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
51
+ return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, itemType === 'file' && (react_1.default.createElement(DraggableFileContainer, null,
52
+ react_1.default.createElement(FileName_1.FileName, { file: item.file }),
53
+ item.file.createdDate && react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: item.file })))));
62
54
  };
63
- exports.DragLayer = DragLayer;
55
+ exports.FileManagerDragLayer = FileManagerDragLayer;
@@ -22,44 +22,30 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
- return new (P || (P = Promise))(function (resolve, reject) {
28
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
- step((generator = generator.apply(thisArg, _arguments || [])).next());
32
- });
33
- };
34
25
  Object.defineProperty(exports, "__esModule", { value: true });
35
26
  exports.FileUploader = void 0;
36
27
  const react_1 = __importStar(require("react"));
37
28
  const react_dnd_1 = require("react-dnd");
38
29
  const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
39
30
  const styled_components_1 = __importStar(require("styled-components"));
40
- const FileUploader = ({ handler }) => {
31
+ const FileUploader = ({ onUpload }) => {
41
32
  const fileInputRef = (0, react_1.useRef)(null);
42
33
  const openFileDialog = () => {
43
34
  if (fileInputRef && fileInputRef.current) {
44
35
  fileInputRef.current.click();
45
36
  }
46
37
  };
47
- const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
38
+ const handleChange = (event) => {
48
39
  if (event && event.target && event.target.files) {
49
40
  const file = event.target.files[0];
50
- yield handler(file);
41
+ onUpload(file);
51
42
  }
52
- });
53
- const handleFileDrop = (0, react_1.useCallback)((monitor) => __awaiter(void 0, void 0, void 0, function* () {
54
- if (monitor) {
55
- const file = monitor.getItem().files[0];
56
- yield handler(file);
57
- }
58
- }), [handler]);
43
+ };
59
44
  const [{ canDrop, isOver }, dropRef] = (0, react_dnd_1.useDrop)({
60
45
  accept: [react_dnd_html5_backend_1.NativeTypes.FILE],
61
- drop(item, monitor) {
62
- handleFileDrop(monitor);
46
+ drop: (item) => {
47
+ const file = item.files[0];
48
+ onUpload(file);
63
49
  },
64
50
  collect: (monitor) => ({
65
51
  isOver: monitor.isOver(),
@@ -68,7 +54,7 @@ const FileUploader = ({ handler }) => {
68
54
  });
69
55
  const isActive = canDrop && isOver;
70
56
  return (react_1.default.createElement(Container, { ref: dropRef, "data-cy": "file-uploader", active: isActive, onClick: openFileDialog },
71
- react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' }),
57
+ react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleChange, value: '' }),
72
58
  "Drag or click to upload a new file"));
73
59
  };
74
60
  exports.FileUploader = FileUploader;
@@ -53,7 +53,7 @@ const OtherFilesSection = ({ files }) => {
53
53
  type: FileSectionAlert_1.FileSectionAlertType.NONE,
54
54
  message: '',
55
55
  });
56
- const upload = (file) => __awaiter(void 0, void 0, void 0, function* () {
56
+ const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
57
57
  setAlert({
58
58
  type: FileSectionAlert_1.FileSectionAlertType.UPLOAD_IN_PROGRESS,
59
59
  message: file.name,
@@ -73,16 +73,16 @@ const OtherFilesSection = ({ files }) => {
73
73
  });
74
74
  });
75
75
  return (react_1.default.createElement("div", null,
76
- (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { handler: upload }),
76
+ (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { onUpload: handleUpload }),
77
77
  react_1.default.createElement(FileSectionAlert_1.FileSectionAlert, { alert: alert }),
78
78
  files.map((file) => (react_1.default.createElement(OtherFile, { key: file.id, file: file, handleDownload: () => fileManagement.download(file), handleMoveToSupplements: () => __awaiter(void 0, void 0, void 0, function* () { return yield moveToSupplements(file); }) })))));
79
79
  };
80
80
  exports.OtherFilesSection = OtherFilesSection;
81
81
  const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
82
- const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)({
82
+ const [{ isDragging }, dragRef, preview] = (0, react_dnd_1.useDrag)({
83
+ type: 'file',
83
84
  item: {
84
85
  file,
85
- type: 'file',
86
86
  },
87
87
  collect: (monitor) => ({
88
88
  isDragging: monitor.isDragging(),
@@ -91,7 +91,7 @@ const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
91
91
  (0, react_1.useEffect)(() => {
92
92
  preview((0, react_dnd_html5_backend_1.getEmptyImage)());
93
93
  }, [preview]);
94
- return (react_1.default.createElement(FileContainer_1.FileContainer, { key: file.id, "data-cy": "file-container", ref: drag, className: isDragging ? 'dragging' : '' },
94
+ return (react_1.default.createElement(FileContainer_1.FileContainer, { key: file.id, "data-cy": "file-container", ref: dragRef, className: isDragging ? 'dragging' : '' },
95
95
  react_1.default.createElement(FileName_1.FileName, { file: file }),
96
96
  react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: file, className: "show-on-hover" }),
97
97
  react_1.default.createElement(FileActions_1.FileActions, { sectionType: util_1.FileSectionType.OtherFile, handleDownload: handleDownload, move: {
@@ -84,20 +84,20 @@ const SupplementsSection = ({ supplements }) => {
84
84
  });
85
85
  });
86
86
  return (react_1.default.createElement(react_1.default.Fragment, null,
87
- (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { handler: handleUpload }),
87
+ (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { onUpload: handleUpload }),
88
88
  react_1.default.createElement(FileSectionAlert_1.FileSectionAlert, { alert: alert }),
89
89
  supplements.map((supplement) => (react_1.default.createElement(SupplementFile, { key: supplement.modelId, file: supplement, handleDownload: () => fileManagement.download(supplement), handleReplace: (f) => __awaiter(void 0, void 0, void 0, function* () { return yield handleReplace(supplement.modelId, f); }), handleDetach: () => __awaiter(void 0, void 0, void 0, function* () { return yield handleMoveToOtherFiles(supplement.modelId); }) })))));
90
90
  };
91
91
  exports.SupplementsSection = SupplementsSection;
92
92
  const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) => {
93
- const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)({
93
+ const [{ isDragging }, dragRef, preview] = (0, react_dnd_1.useDrag)({
94
+ type: 'file',
94
95
  item: {
95
96
  file,
96
97
  model: {
97
98
  _id: file.modelId,
98
99
  objectType: json_schema_1.ObjectTypes.Supplement,
99
100
  },
100
- type: 'file',
101
101
  },
102
102
  collect: (monitor) => ({
103
103
  isDragging: monitor.isDragging(),
@@ -106,7 +106,7 @@ const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) =
106
106
  (0, react_1.useEffect)(() => {
107
107
  preview((0, react_dnd_html5_backend_1.getEmptyImage)());
108
108
  }, [preview]);
109
- return (react_1.default.createElement(FileContainer_1.FileContainer, { "data-cy": "file-container", key: file.id, ref: drag, className: isDragging ? 'dragging' : '' },
109
+ return (react_1.default.createElement(FileContainer_1.FileContainer, { "data-cy": "file-container", key: file.id, ref: dragRef, className: isDragging ? 'dragging' : '' },
110
110
  react_1.default.createElement(FileName_1.FileName, { file: file }),
111
111
  react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: file, className: "show-on-hover" }),
112
112
  react_1.default.createElement(FileActions_1.FileActions, { "data-cy": "file-actions", sectionType: util_1.FileSectionType.Supplements, handleDownload: file.id ? handleDownload : undefined, handleReplace: handleReplace, move: file.id
package/dist/cjs/index.js CHANGED
@@ -49,7 +49,6 @@ __exportStar(require("./components/SaveStatus"), exports);
49
49
  __exportStar(require("./components/StyledModal"), exports);
50
50
  __exportStar(require("./components/TableFootnotesSelector"), exports);
51
51
  __exportStar(require("./components/Sidebar"), exports);
52
- __exportStar(require("./components/DragLayer"), exports);
53
52
  __exportStar(require("./components/TextField"), exports);
54
53
  __exportStar(require("./components/TextFieldContainer"), exports);
55
54
  __exportStar(require("./components/TextFieldError"), exports);
@@ -1,9 +1,9 @@
1
1
  import React, { createContext } from 'react';
2
2
  import { useFiles } from '../../index';
3
- import { DragLayer } from '../DragLayer';
4
3
  import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
5
4
  import { InspectorSection } from '../InspectorSection';
6
5
  import { Tooltip } from '../Tooltip';
6
+ import { FileManagerDragLayer } from './FileManagerDragLayer';
7
7
  import { FileManagerProvider } from './FileManagerProvider';
8
8
  import { InlineFilesSection } from './InlineFilesSection';
9
9
  import { OtherFilesSection } from './OtherFilesSection';
@@ -12,7 +12,7 @@ export const PermissionsContext = createContext(null);
12
12
  export const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
13
13
  const { inlineFiles, supplements, otherFiles } = useFiles(modelMap, files);
14
14
  return (React.createElement(FileManagerProvider, { saveModel: saveModel, deleteModel: deleteModel, modelMap: modelMap, fileManagement: fileManagement },
15
- React.createElement(DragLayer, null),
15
+ React.createElement(FileManagerDragLayer, null),
16
16
  React.createElement(PermissionsContext.Provider, { value: can },
17
17
  React.createElement(InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
18
18
  React.createElement(InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import { useDragLayer } from 'react-dnd';
3
3
  import styled from 'styled-components';
4
- import { FileContainer } from './FileManager/FileContainer';
5
- import { FileCreatedDate } from './FileManager/FileCreatedDate';
6
- import { FileName } from './FileManager/FileName';
4
+ import { FileContainer } from './FileContainer';
5
+ import { FileCreatedDate } from './FileCreatedDate';
6
+ import { FileName } from './FileName';
7
7
  const Container = styled.div `
8
8
  position: fixed;
9
9
  pointer-events: none;
@@ -32,25 +32,17 @@ const getItemStyles = (currentOffset) => {
32
32
  WebkitTransform: transform,
33
33
  };
34
34
  };
35
- export const DragLayer = () => {
35
+ export const FileManagerDragLayer = () => {
36
36
  const { itemType, isDragging, item, currentOffset } = useDragLayer((monitor) => ({
37
37
  item: monitor.getItem(),
38
38
  itemType: monitor.getItemType(),
39
39
  currentOffset: monitor.getSourceClientOffset(),
40
40
  isDragging: monitor.isDragging(),
41
41
  }));
42
- const renderItem = () => {
43
- switch (itemType) {
44
- case 'file':
45
- return (React.createElement(DraggableFileContainer, null,
46
- React.createElement(FileName, { file: item.file }),
47
- item.file.createdDate && React.createElement(FileCreatedDate, { file: item.file })));
48
- default:
49
- return null;
50
- }
51
- };
52
42
  if (!isDragging) {
53
43
  return null;
54
44
  }
55
- return (React.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
45
+ return (React.createElement(Container, { style: getItemStyles(currentOffset) }, itemType === 'file' && (React.createElement(DraggableFileContainer, null,
46
+ React.createElement(FileName, { file: item.file }),
47
+ item.file.createdDate && React.createElement(FileCreatedDate, { file: item.file })))));
56
48
  };
@@ -1,39 +1,25 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import React, { useCallback, useRef } from 'react';
1
+ import React, { useRef } from 'react';
11
2
  import { useDrop } from 'react-dnd';
12
3
  import { NativeTypes } from 'react-dnd-html5-backend';
13
4
  import styled, { css } from 'styled-components';
14
- export const FileUploader = ({ handler }) => {
5
+ export const FileUploader = ({ onUpload }) => {
15
6
  const fileInputRef = useRef(null);
16
7
  const openFileDialog = () => {
17
8
  if (fileInputRef && fileInputRef.current) {
18
9
  fileInputRef.current.click();
19
10
  }
20
11
  };
21
- const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
12
+ const handleChange = (event) => {
22
13
  if (event && event.target && event.target.files) {
23
14
  const file = event.target.files[0];
24
- yield handler(file);
15
+ onUpload(file);
25
16
  }
26
- });
27
- const handleFileDrop = useCallback((monitor) => __awaiter(void 0, void 0, void 0, function* () {
28
- if (monitor) {
29
- const file = monitor.getItem().files[0];
30
- yield handler(file);
31
- }
32
- }), [handler]);
17
+ };
33
18
  const [{ canDrop, isOver }, dropRef] = useDrop({
34
19
  accept: [NativeTypes.FILE],
35
- drop(item, monitor) {
36
- handleFileDrop(monitor);
20
+ drop: (item) => {
21
+ const file = item.files[0];
22
+ onUpload(file);
37
23
  },
38
24
  collect: (monitor) => ({
39
25
  isOver: monitor.isOver(),
@@ -42,7 +28,7 @@ export const FileUploader = ({ handler }) => {
42
28
  });
43
29
  const isActive = canDrop && isOver;
44
30
  return (React.createElement(Container, { ref: dropRef, "data-cy": "file-uploader", active: isActive, onClick: openFileDialog },
45
- React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' }),
31
+ React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleChange, value: '' }),
46
32
  "Drag or click to upload a new file"));
47
33
  };
48
34
  const activeBoxStyle = css `
@@ -27,7 +27,7 @@ export const OtherFilesSection = ({ files }) => {
27
27
  type: FileSectionAlertType.NONE,
28
28
  message: '',
29
29
  });
30
- const upload = (file) => __awaiter(void 0, void 0, void 0, function* () {
30
+ const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
31
31
  setAlert({
32
32
  type: FileSectionAlertType.UPLOAD_IN_PROGRESS,
33
33
  message: file.name,
@@ -47,15 +47,15 @@ export const OtherFilesSection = ({ files }) => {
47
47
  });
48
48
  });
49
49
  return (React.createElement("div", null,
50
- (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { handler: upload }),
50
+ (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { onUpload: handleUpload }),
51
51
  React.createElement(FileSectionAlert, { alert: alert }),
52
52
  files.map((file) => (React.createElement(OtherFile, { key: file.id, file: file, handleDownload: () => fileManagement.download(file), handleMoveToSupplements: () => __awaiter(void 0, void 0, void 0, function* () { return yield moveToSupplements(file); }) })))));
53
53
  };
54
54
  const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
55
- const [{ isDragging }, drag, preview] = useDrag({
55
+ const [{ isDragging }, dragRef, preview] = useDrag({
56
+ type: 'file',
56
57
  item: {
57
58
  file,
58
- type: 'file',
59
59
  },
60
60
  collect: (monitor) => ({
61
61
  isDragging: monitor.isDragging(),
@@ -64,7 +64,7 @@ const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
64
64
  useEffect(() => {
65
65
  preview(getEmptyImage());
66
66
  }, [preview]);
67
- return (React.createElement(FileContainer, { key: file.id, "data-cy": "file-container", ref: drag, className: isDragging ? 'dragging' : '' },
67
+ return (React.createElement(FileContainer, { key: file.id, "data-cy": "file-container", ref: dragRef, className: isDragging ? 'dragging' : '' },
68
68
  React.createElement(FileName, { file: file }),
69
69
  React.createElement(FileCreatedDate, { file: file, className: "show-on-hover" }),
70
70
  React.createElement(FileActions, { sectionType: FileSectionType.OtherFile, handleDownload: handleDownload, move: {
@@ -58,19 +58,19 @@ export const SupplementsSection = ({ supplements }) => {
58
58
  });
59
59
  });
60
60
  return (React.createElement(React.Fragment, null,
61
- (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { handler: handleUpload }),
61
+ (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { onUpload: handleUpload }),
62
62
  React.createElement(FileSectionAlert, { alert: alert }),
63
63
  supplements.map((supplement) => (React.createElement(SupplementFile, { key: supplement.modelId, file: supplement, handleDownload: () => fileManagement.download(supplement), handleReplace: (f) => __awaiter(void 0, void 0, void 0, function* () { return yield handleReplace(supplement.modelId, f); }), handleDetach: () => __awaiter(void 0, void 0, void 0, function* () { return yield handleMoveToOtherFiles(supplement.modelId); }) })))));
64
64
  };
65
65
  const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) => {
66
- const [{ isDragging }, drag, preview] = useDrag({
66
+ const [{ isDragging }, dragRef, preview] = useDrag({
67
+ type: 'file',
67
68
  item: {
68
69
  file,
69
70
  model: {
70
71
  _id: file.modelId,
71
72
  objectType: ObjectTypes.Supplement,
72
73
  },
73
- type: 'file',
74
74
  },
75
75
  collect: (monitor) => ({
76
76
  isDragging: monitor.isDragging(),
@@ -79,7 +79,7 @@ const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) =
79
79
  useEffect(() => {
80
80
  preview(getEmptyImage());
81
81
  }, [preview]);
82
- return (React.createElement(FileContainer, { "data-cy": "file-container", key: file.id, ref: drag, className: isDragging ? 'dragging' : '' },
82
+ return (React.createElement(FileContainer, { "data-cy": "file-container", key: file.id, ref: dragRef, className: isDragging ? 'dragging' : '' },
83
83
  React.createElement(FileName, { file: file }),
84
84
  React.createElement(FileCreatedDate, { file: file, className: "show-on-hover" }),
85
85
  React.createElement(FileActions, { "data-cy": "file-actions", sectionType: FileSectionType.Supplements, handleDownload: file.id ? handleDownload : undefined, handleReplace: handleReplace, move: file.id
package/dist/es/index.js CHANGED
@@ -29,7 +29,6 @@ export * from './components/SaveStatus';
29
29
  export * from './components/StyledModal';
30
30
  export * from './components/TableFootnotesSelector';
31
31
  export * from './components/Sidebar';
32
- export * from './components/DragLayer';
33
32
  export * from './components/TextField';
34
33
  export * from './components/TextFieldContainer';
35
34
  export * from './components/TextFieldError';
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const FileManagerDragLayer: React.FC;
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
- export declare const FileUploader: React.FC<{
3
- handler: (file: File) => Promise<void>;
4
- }>;
2
+ export interface FileUploaderProps {
3
+ onUpload: (file: File) => void;
4
+ }
5
+ export declare const FileUploader: React.FC<FileUploaderProps>;
@@ -30,7 +30,6 @@ export * from './components/SaveStatus';
30
30
  export * from './components/StyledModal';
31
31
  export * from './components/TableFootnotesSelector';
32
32
  export * from './components/Sidebar';
33
- export * from './components/DragLayer';
34
33
  export * from './components/TextField';
35
34
  export * from './components/TextFieldContainer';
36
35
  export * from './components/TextFieldError';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.8.3",
4
+ "version": "1.8.4",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -41,8 +41,8 @@
41
41
  "fuzzysort": "^2.0.4",
42
42
  "lodash": "^4.17.21",
43
43
  "react": "^17.0.2",
44
- "react-dnd": "^11.1.3",
45
- "react-dnd-html5-backend": "^11.1.3",
44
+ "react-dnd": "^16.0.1",
45
+ "react-dnd-html5-backend": "^16.0.1",
46
46
  "react-dom": "^17.0.2",
47
47
  "react-is": "^17.0.2",
48
48
  "react-modal": "^3.16.1",
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const DragLayer: React.FC;