sense-react-timeline-editor 1.0.11 → 1.0.12

package/dist/components/edit_area/edit_area.d.ts

@@ -27,6 +27,8 @@ export declare type EditAreaProps = CommonProp & {
     /** time-editor-container的ref引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
     engineRef?: React.MutableRefObject<ITimelineEngine>;
+    /** 最小高度 */
+    minHeight?: number;
 };
 /** edit area ref数据 */
 export interface EditAreaState {
@@ -54,4 +56,6 @@ export declare const EditArea: React.MemoExoticComponent<React.ForwardRefExoticC
     /** time-editor-container的ref引用 */
     containerRef?: React.MutableRefObject<HTMLDivElement>;
     engineRef?: React.MutableRefObject<ITimelineEngine>;
+    /** 最小高度 */
+    minHeight?: number;
 } & React.RefAttributes<EditAreaState>>>;

package/dist/index.esm.js

@@ -1971,6 +1971,7 @@ var css_248z = ".timeline-editor-cursor {\n  cursor: ew-resize;\n  position: abs
 styleInject(css_248z);
 
 var Cursor = function Cursor(_ref) {
+  var _document$querySelect;
   var theme = _ref.theme,
     disableDrag = _ref.disableDrag,
     cursorTime = _ref.cursorTime,
@@ -1999,9 +2000,11 @@ var Cursor = function Cursor(_ref) {
       }) - scrollLeft);
     }
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft]);
+  var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React.createElement(RowDnd, {
     top: theme === 'light' ? 16 : 0,
     start: startLeft,
+    height: clientHeight,
     ref: rowRnd,
     parentRef: areaRef,
     bounds: {
@@ -3688,11 +3691,17 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$allowCreateTra = props.allowCreateTrack,
     allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
     containerRef = props.containerRef,
-    engineRef = props.engineRef;
-  // 支持mp3\wav格式上传
+    engineRef = props.engineRef,
+    minHeight = props.minHeight;
+  // 支持 mp3\wav 格式上传
   var onBeforeUpload = function onBeforeUpload(file) {
-    if (file.type !== 'audio/mp3' && file.type !== 'audio/wav') {
-      message.error('只能上传mp3wav格式的音频');
+    if (file.type !== 'audio/mp3' && file.type !== 'audio/wav' && file.type !== 'audio/mpeg') {
+      message.error('只能上传 mp3wav 格式的音频');
+      return false;
+    }
+    var maxSize = 100 * 1024 * 1024;
+    if (file.size > maxSize) {
+      message.error('文件大小不能超过 100MB');
       return false;
     }
     return true;
@@ -4035,6 +4044,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _totalHeight = editorData.reduce(function (prev, cur) {
     return prev + (cur.rowHeight || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
+  if (minHeight) {
+    _totalHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+  }
   return /*#__PURE__*/React.createElement("div", {
     ref: editAreaRef,
     className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
@@ -4042,7 +4054,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       height: isMulti ? _totalHeight : 'unset',
       maxHeight: isMulti ? _totalHeight : 'unset',
       width: isMulti ? Math.max(scaleCount * scaleWidth + startLeft, 0) : 'unset',
-      minWidth: isMulti ? '100%' : 'unset'
+      minWidth: isMulti ? '100%' : 'unset',
+      minHeight: minHeight
     }
   }, /*#__PURE__*/React.createElement(AutoSizer, {
     style: {
@@ -4159,7 +4172,8 @@ var TimeArea = function TimeArea(_ref) {
     startLeft = _ref.startLeft,
     scrollLeft = _ref.scrollLeft,
     onClickTimeArea = _ref.onClickTimeArea,
-    getScaleRender = _ref.getScaleRender;
+    getScaleRender = _ref.getScaleRender,
+    timelineWidth = _ref.timelineWidth;
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
@@ -4208,7 +4222,8 @@ var TimeArea = function TimeArea(_ref) {
       estimatedColumnSize: estColumnWidth,
       rowCount: 1,
       rowHeight: height,
-      width: width,
+      width: timelineWidth,
+      // width={width}
       height: height,
       overscanRowCount: 0,
       overscanColumnCount: 10,
@@ -4216,7 +4231,7 @@ var TimeArea = function TimeArea(_ref) {
       scrollLeft: scrollLeft
     }), /*#__PURE__*/React.createElement("div", {
       style: {
-        width: width,
+        width: timelineWidth,
         height: height
       },
       onClick: function onClick(e) {
@@ -4496,9 +4511,12 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         _onScroll(params);
         onScrollVertical && onScrollVertical(params);
       }
-    }))) : null, areaCount > 1 ? /*#__PURE__*/React.createElement("div", {
-      id: 'time-editor-container',
-      ref: containerRef
+    }))) : null, areaCount > 1 ? (/*#__PURE__*/React.createElement("div", {
+      id: "time-editor-container",
+      ref: containerRef,
+      style: {
+        height: '100%'
+      }
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4516,6 +4534,11 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
           autoReRender && engineRef.current.reRender();
         }
       };
+      var tEditorData = groupedData[Object.keys(groupedData)[0]];
+      var _totalHeight = tEditorData.reduce(function (prev, cur) {
+        var _tEditorData$;
+        return prev + (cur.rowHeight || ((_tEditorData$ = tEditorData[0]) === null || _tEditorData$ === void 0 ? void 0 : _tEditorData$.rowHeight));
+      }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
       return /*#__PURE__*/React.createElement(EditArea, _objectSpread2(_objectSpread2({
         key: key,
         isMulti: areaCount > 1
@@ -4535,6 +4558,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
         setEditorData: handleGroupDataChange,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
+        minHeight: index === 0 ? undefined : _totalHeight,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
         engineRef: engineRef,
@@ -4543,7 +4567,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
           onScrollVertical && onScrollVertical(params);
         }
       }));
-    })) : null, !hideCursor && (/*#__PURE__*/React.createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
+    }))) : null, !hideCursor && (/*#__PURE__*/React.createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       disableDrag: isPlaying,
       scrollLeft: scrollLeft,

package/dist/index.js

@@ -1980,6 +1980,7 @@ var css_248z = ".timeline-editor-cursor {\n  cursor: ew-resize;\n  position: abs
 styleInject(css_248z);
 
 var Cursor = function Cursor(_ref) {
+  var _document$querySelect;
   var theme = _ref.theme,
     disableDrag = _ref.disableDrag,
     cursorTime = _ref.cursorTime,
@@ -2008,9 +2009,11 @@ var Cursor = function Cursor(_ref) {
       }) - scrollLeft);
     }
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft]);
+  var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
     top: theme === 'light' ? 16 : 0,
     start: startLeft,
+    height: clientHeight,
     ref: rowRnd,
     parentRef: areaRef,
     bounds: {
@@ -3697,11 +3700,17 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     _props$allowCreateTra = props.allowCreateTrack,
     allowCreateTrack = _props$allowCreateTra === void 0 ? true : _props$allowCreateTra,
     containerRef = props.containerRef,
-    engineRef = props.engineRef;
-  // 支持mp3\wav格式上传
+    engineRef = props.engineRef,
+    minHeight = props.minHeight;
+  // 支持 mp3\wav 格式上传
   var onBeforeUpload = function onBeforeUpload(file) {
-    if (file.type !== 'audio/mp3' && file.type !== 'audio/wav') {
-      es.message.error('只能上传mp3wav格式的音频');
+    if (file.type !== 'audio/mp3' && file.type !== 'audio/wav' && file.type !== 'audio/mpeg') {
+      es.message.error('只能上传 mp3wav 格式的音频');
+      return false;
+    }
+    var maxSize = 100 * 1024 * 1024;
+    if (file.size > maxSize) {
+      es.message.error('文件大小不能超过 100MB');
       return false;
     }
     return true;
@@ -4044,6 +4053,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
   var _totalHeight = editorData.reduce(function (prev, cur) {
     return prev + (cur.rowHeight || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
+  if (minHeight) {
+    _totalHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+  }
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: editAreaRef,
     className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
@@ -4051,7 +4063,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       height: isMulti ? _totalHeight : 'unset',
       maxHeight: isMulti ? _totalHeight : 'unset',
       width: isMulti ? Math.max(scaleCount * scaleWidth + startLeft, 0) : 'unset',
-      minWidth: isMulti ? '100%' : 'unset'
+      minWidth: isMulti ? '100%' : 'unset',
+      minHeight: minHeight
     }
   }, /*#__PURE__*/React__default['default'].createElement(reactVirtualized.AutoSizer, {
     style: {
@@ -4168,7 +4181,8 @@ var TimeArea = function TimeArea(_ref) {
     startLeft = _ref.startLeft,
     scrollLeft = _ref.scrollLeft,
     onClickTimeArea = _ref.onClickTimeArea,
-    getScaleRender = _ref.getScaleRender;
+    getScaleRender = _ref.getScaleRender,
+    timelineWidth = _ref.timelineWidth;
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
@@ -4217,7 +4231,8 @@ var TimeArea = function TimeArea(_ref) {
       estimatedColumnSize: estColumnWidth,
       rowCount: 1,
       rowHeight: height,
-      width: width,
+      width: timelineWidth,
+      // width={width}
       height: height,
       overscanRowCount: 0,
       overscanColumnCount: 10,
@@ -4225,7 +4240,7 @@ var TimeArea = function TimeArea(_ref) {
       scrollLeft: scrollLeft
     }), /*#__PURE__*/React__default['default'].createElement("div", {
       style: {
-        width: width,
+        width: timelineWidth,
         height: height
       },
       onClick: function onClick(e) {
@@ -4505,9 +4520,12 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
         _onScroll(params);
         onScrollVertical && onScrollVertical(params);
       }
-    }))) : null, areaCount > 1 ? /*#__PURE__*/React__default['default'].createElement("div", {
-      id: 'time-editor-container',
-      ref: containerRef
+    }))) : null, areaCount > 1 ? (/*#__PURE__*/React__default['default'].createElement("div", {
+      id: "time-editor-container",
+      ref: containerRef,
+      style: {
+        height: '100%'
+      }
     }, Object.keys(groupedData).map(function (key, index) {
       var handleGroupDataChange = function handleGroupDataChange(updatedData) {
         var mergedData = editorData.filter(function (item) {
@@ -4525,6 +4543,11 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
           autoReRender && engineRef.current.reRender();
         }
       };
+      var tEditorData = groupedData[Object.keys(groupedData)[0]];
+      var _totalHeight = tEditorData.reduce(function (prev, cur) {
+        var _tEditorData$;
+        return prev + (cur.rowHeight || ((_tEditorData$ = tEditorData[0]) === null || _tEditorData$ === void 0 ? void 0 : _tEditorData$.rowHeight));
+      }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
       return /*#__PURE__*/React__default['default'].createElement(EditArea, _objectSpread2(_objectSpread2({
         key: key,
         isMulti: areaCount > 1
@@ -4544,6 +4567,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
         setEditorData: handleGroupDataChange,
         deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
         allowCreateTrack: allowCreateTrack,
+        minHeight: index === 0 ? undefined : _totalHeight,
         containerRef: containerRef,
         onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
         engineRef: engineRef,
@@ -4552,7 +4576,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
           onScrollVertical && onScrollVertical(params);
         }
       }));
-    })) : null, !hideCursor && (/*#__PURE__*/React__default['default'].createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
+    }))) : null, !hideCursor && (/*#__PURE__*/React__default['default'].createElement(Cursor, _objectSpread2(_objectSpread2({}, checkedProps), {}, {
       timelineWidth: width,
       disableDrag: isPlaying,
       scrollLeft: scrollLeft,

package/dist/interface/timeline.d.ts

@@ -306,4 +306,5 @@ export interface TimelineEditor extends EditData {
      */
     onChange?: (editorData: TimelineRow[]) => void | boolean;
     onMutiSelectChange?: (ids: string[]) => void;
+    minHeight?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [