add support to include custom element for project selector (#1281)

factorialco · Mar 3, 2025 · 4ad8477 · 4ad8477
1 parent 212f3e9
commit 4ad8477
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 21 deletions.
diff --git a/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.stories.tsx b/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.stories.tsx
@@ -126,6 +126,14 @@ export const Collapsed: Story = {
 
 export const WithNoLocationOrProject: Story = {
   args: {
+    remainingMinutes: 4 * 60 + 39,
+    data: [
+      {
+        from: new Date("2024-03-20T09:02:00"),
+        to: new Date("2024-03-20T12:23:00"),
+        variant: "clocked-in",
+      },
+    ],
     locationId: undefined,
   },
 }

diff --git a/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.tsx b/lib/experimental/Widgets/Content/ClockIn/ClockInControls/index.tsx
@@ -44,6 +44,8 @@ export interface ClockInControlsProps {
   onClockOut?: () => void
   /** Callback when Break button is clicked */
   onBreak?: () => void
+  canShowProject?: boolean
+  projectSelectorElement?: React.ReactNode
 }
 
 export function ClockInControls({
@@ -60,6 +62,8 @@ export function ClockInControls({
   canShowBreakButton = true,
   // onClickProjectSelector,
   onChangeLocationId,
+  canShowProject = true,
+  projectSelectorElement,
 }: ClockInControlsProps) {
   const { status, statusText, subtitle, statusColor } = getInfo({
     data,
@@ -180,28 +184,34 @@ export function ClockInControls({
         </div>
         <div className="mt-6 flex flex-row flex-wrap items-center justify-center gap-2 @xs:justify-start">
           {canSelectLocation ? (
-            <Select
-              value={locationId}
-              options={locationOptions}
-              onChange={onChangeLocationId}
-              open={locationPickerOpen}
-              onOpenChange={setLocationPickerOpen}
-              disabled={locationSelectorDisabled}
-            >
-              <div aria-label="Select location">
-                <Selector
-                  text={location?.name}
-                  placeholder={labels.selectLocation}
-                  icon={location?.icon}
-                />
-              </div>
-            </Select>
+            <>
+              <Select
+                value={locationId}
+                options={locationOptions}
+                onChange={onChangeLocationId}
+                open={locationPickerOpen}
+                onOpenChange={setLocationPickerOpen}
+                disabled={locationSelectorDisabled}
+              >
+                <div aria-label="Select location">
+                  <Selector
+                    text={location?.name}
+                    placeholder={labels.selectLocation}
+                    icon={location?.icon}
+                  />
+                </div>
+              </Select>
+              {canShowProject && projectSelectorElement}
+            </>
           ) : (
-            canShowLocation && (
-              <>
-                <RawTag text={location?.name} icon={location?.icon} />
-              </>
-            )
+            <>
+              {canShowLocation && location && (
+                <>
+                  <RawTag text={location.name} icon={location.icon} />
+                </>
+              )}
+              {canShowProject && projectSelectorElement}
+            </>
           )}
         </div>
       </div>