Feature: support custom cellClickPrecision

remotelock · Mar 22, 2019 · 354606c · 354606c
1 parent f04728b
commit 354606c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -129,6 +129,9 @@ function App() {
     visualGridVerticalPrecision,
     setVisualGridVerticalPrecision,
   ] = useState(60);
+  const [cellClickPrecision, setCellClickPrecision] = useState(
+    visualGridVerticalPrecision,
+  );
   const [cellHeight, setCellHeight] = useState(45);
   const [cellWidth, setCellWidth] = useState(250);
   const [disabled, setDisabled] = useState(false);
@@ -212,6 +215,23 @@ function App() {
             ))}
           </select>
         </label>
+        <label htmlFor="min_cell_click_precision">
+          Min click precision:
+          <select
+            name="min_cell_click_precision"
+            id="min_cell_click_precision"
+            value={cellClickPrecision}
+            onChange={({ target: { value } }) =>
+              setCellClickPrecision(Number(value))
+            }
+          >
+            {[15, 30, 60].map(value => (
+              <option key={value} value={value}>
+                {humanizeDuration(value * 60 * 1000)}
+              </option>
+            ))}
+          </select>
+        </label>
         <label htmlFor="locale">
           Locale:
           <select
@@ -277,6 +297,7 @@ function App() {
               onChange={setSchedule}
               verticalPrecision={verticalPrecision}
               visualGridVerticalPrecision={visualGridVerticalPrecision}
+              cellClickPrecision={cellClickPrecision}
               eventRootComponent={EventRoot}
               disabled={disabled}
             />

diff --git a/src/components/TimeGridScheduler.tsx b/src/components/TimeGridScheduler.tsx
@@ -49,6 +49,7 @@ const DELETE_KEYS = ['del', 'backspace'];
 export const TimeGridScheduler = React.memo(function TimeGridScheduler({
   verticalPrecision = 30,
   visualGridVerticalPrecision = 30,
+  cellClickPrecision = visualGridVerticalPrecision,
   style,
   schedule,
   originDate: _originDate = new Date(),
@@ -75,6 +76,13 @@ export const TimeGridScheduler = React.memo(function TimeGridScheduler({
    */
   visualGridVerticalPrecision?: number;
 
+  /**
+   * The minimum number of minutes for an time block
+   * created with a single click.
+   * @default visualGridVerticalPrecision
+   */
+  cellClickPrecision?: number;
+
   /** Custom styles applied to the root of the view */
   style?: React.CSSProperties;
   schedule: ScheduleType;
@@ -357,7 +365,7 @@ export const TimeGridScheduler = React.memo(function TimeGridScheduler({
         return;
       }
 
-      const spanY = toY(60);
+      const spanY = toY(cellClickPrecision);
       const cell = {
         startX: dayIndex,
         startY: timeIndex,
@@ -374,7 +382,7 @@ export const TimeGridScheduler = React.memo(function TimeGridScheduler({
       event.stopPropagation();
       event.preventDefault();
     },
-    [grid, disabled, toY, cellInfoToDateRanges],
+    [grid, disabled, toY, cellClickPrecision, cellInfoToDateRanges],
   );
 
   return (