fix: add support for enabled tools

Author: seveibar

src/components/MainLayout/index.js

@@ -19,6 +19,13 @@ const Container = styled("div")(({ themeColors, width }) => ({
   backgroundColor: themeColors.bg,
 }))
 
+const defaultEnabledTools = [
+  "create-durations",
+  "label-durations",
+  "create-timestamps",
+  "label-timestamps",
+]
+
 export const MainLayout = ({
   curveGroups,
   timeFormat,
@@ -31,6 +38,7 @@ export const MainLayout = ({
   width = 500,
   graphHeight = 300,
   onChangeTimestamps,
+  enabledTools = defaultEnabledTools,
 }) => {
   const themeColors = useColors()
   const [activeDurationGroup, setActiveDurationGroup] = useState(null)
@@ -47,6 +55,7 @@ export const MainLayout = ({
   )
 
   const onDragDuration = useEventCallback((startTime, endTime) => {
+    if (!enabledTools.includes("create-durations")) return
     if (activeDurationGroup === null) return
     ;[startTime, endTime] =
       startTime < endTime ? [startTime, endTime] : [endTime, startTime]
@@ -66,6 +75,7 @@ export const MainLayout = ({
     )
   })
   const onDragDurationStart = useEventCallback((startTime) => {
+    if (!enabledTools.includes("create-durations")) return
     if (activeDurationGroup === null) return
     const lastIndex = durationGroups[activeDurationGroup].durations.length
     setDraggedDurationIndex(lastIndex)
@@ -77,10 +87,12 @@ export const MainLayout = ({
     )
   })
   const onDragDurationEnd = useEventCallback(() => {
+    if (!enabledTools.includes("create-durations")) return
     setSelectedDurationIndex(draggedDurationIndex)
     setDraggedDurationIndex(null)
   })
   const onCreateTimestamp = useEventCallback((time) => {
+    if (!enabledTools.includes("create-timestamps")) return
     onChangeTimestamps(
       timestamps.concat([
         {

src/components/MouseTransformHandler/index.js

@@ -3,10 +3,7 @@ import { styled } from "@material-ui/core/styles"
 import useEventCallback from "use-event-callback"
 import useToolMode from "../../hooks/use-tool-mode"
 
-const Container = styled("div")({
-  // width: 500,
-  // height: 200,
-})
+const Container = styled("div")({})
 
 export const MouseTransformHandler = ({
   children,

src/components/ReactTimeSeries/ReactTimeSeries.stories.js

@@ -96,3 +96,39 @@ export const PredefinedLabelsOnly = () => {
     />
   )
 }
+
+export const CreateTimestampsOnly = () => {
+  const [sample, setSample] = useState({
+    audioUrl:
+      "https://s3.amazonaws.com/datasets.workaround.online/voice-samples/001/voice.mp3",
+  })
+  return (
+    <ReactTimeSeries
+      interface={{
+        durationLabels: ["duration1", "duration2"],
+        timestampLabels: ["ts1", "ts2"],
+        enabledTools: ["create-timestamps"],
+      }}
+      sample={sample}
+      onModifySample={setSample}
+    />
+  )
+}
+
+export const CreateDurationsOnly = () => {
+  const [sample, setSample] = useState({
+    audioUrl:
+      "https://s3.amazonaws.com/datasets.workaround.online/voice-samples/001/voice.mp3",
+  })
+  return (
+    <ReactTimeSeries
+      interface={{
+        durationLabels: ["duration1", "duration2"],
+        timestampLabels: ["ts1", "ts2"],
+        enabledTools: ["create-durations"],
+      }}
+      sample={sample}
+      onModifySample={setSample}
+    />
+  )
+}

src/components/ReactTimeSeries/index.js

@@ -37,7 +37,6 @@ export const ReactTimeSeriesWithoutContext = ({
   const getRandomColorUsingHash = useGetRandomColorUsingHash()
   const {
     timeFormat,
-    // eslint-disable-next-line
     enabledTools = defaultEnabledTools,
     durationLabels = emptyAr,
     timestampLabels = emptyAr,
@@ -205,6 +204,7 @@ export const ReactTimeSeriesWithoutContext = ({
             timestampLabels={timestampLabels}
             durationLabels={durationLabels}
             allowCustomLabels={allowCustomLabels}
+            enabledTools={enabledTools}
           />
         </div>
       )}