consolidate loose ends (#298)

fold-dev · Oct 3, 2024 · 808536f · 808536f
1 parent de870b6
commit 808536f
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 88 deletions.
diff --git a/packages/core/src/drag/drag-element-area.tsx b/packages/core/src/drag/drag-element-area.tsx
@@ -13,18 +13,20 @@ import {
 } from '../'
 
 export type DragElementAreaProps = {
+    disabled?: boolean
     indent?: boolean
     areaId?: string
     group?: string
     variant?: DragVariant
     targetVariant?: any
-    direction?: 'vertical'
+    direction?: 'vertical' | 'horizontal'
     startDelay?: number
     footer?: any
 } & CoreViewProps
 
 export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) => {
     const {
+        disabled,
         indent,
         areaId,
         group = 'default',
@@ -73,29 +75,37 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
         const placeholder: any = {
             visible: (isAnimated || isLined || isLinedFocus) && isTargetArea && !isTargetFocus,
             className: isAnimated ? 'f-drag-area__placeholder' : 'f-drag-area__placeholder-lined',
-            marginLeft: indent ? (target.indent ? `calc(var(--f-drag-indent) * ${target.indent})` : 0) : 0,
-            width: target.indent ? `calc(100% - var(--f-drag-indent) * ${target.indent})` : '100%',
-            // this needs to be considered at some point:
-            // width: isVertical ? target.width || origin.width : origin.width,
+            marginLeft: isVertical  
+                ? indent 
+                    ? (target.indent ? `calc(var(--f-drag-indent) * ${target.indent})` : 0) 
+                    : 0
+                : 0,
+            width: isVertical 
+                ? target.indent 
+                    ? `calc(100% - var(--f-drag-indent) * ${target.indent})` 
+                    : '100%'
+                : (isLined || isLinedFocus ? '5px !important' : (target.width || origin.width)),
+            height: isVertical 
+                ? (isLined || isLinedFocus ? undefined : origin.height) 
+                : '100%',
             position: noChildren ? 'relative' : 'absolute',
-            height: isVertical ? (isLined || isLinedFocus ? undefined : origin.height) : target.height || origin.height,
             transform: noChildren
                 ? null
                 : isVertical
-                ? `translateY(${
-                      target.moveDirection == 'down'
-                          ? target.top + target.height
-                          : target.moveDirection == 'up'
-                          ? target.top
-                          : 0
-                  }px)`
-                : `translateX(${
-                      target.moveDirection == 'right'
-                          ? target.left + target.width
-                          : target.moveDirection == 'left'
-                          ? target.left
-                          : 0
-                  }px)`,
+                    ? `translateY(${
+                        target.moveDirection == 'down'
+                            ? target.top + target.height
+                            : target.moveDirection == 'up'
+                                ? target.top
+                                : 0
+                    }px)`
+                    : `translateX(${
+                        target.moveDirection == 'right'
+                            ? target.left + target.width
+                                : target.moveDirection == 'left'
+                                ? target.left
+                                    : 0
+                    }px)`,
         }
 
         return {
@@ -110,7 +120,7 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
             isFocus,
             isAnimated,
         }
-    }, [id, origin, target, direction, targetVariant, variant])
+    }, [id, origin, target, direction, targetVariant, variant, disabled])
     const className = classNames(
         {
             'f-drag-area': true,
@@ -145,6 +155,8 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
     // --------------------------------------------------------------------------
 
     useLayoutEffect(() => {
+        if (disabled) return
+
         // always set this to off when the component mounts
         // or if children change
         bufferRef.current.style.display = 'none'
@@ -211,7 +223,7 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
                 node.dataset.areaid = id
             }
         })
-    }, [props.children, id, origin, target])
+    }, [props.children, id, origin, target, disabled])
 
     /* 
 
@@ -252,7 +264,7 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
             data-targetvariant={finalTargetVariant}>
             {props.children}
 
-            {placeholder.visible && (
+            {(!disabled && placeholder.visible) && (
                 <div
                     className={placeholder.className}
                     data-placeholder={true}
@@ -266,11 +278,13 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
                 />
             )}
 
-            <div
-                ref={bufferRef}
-                data-buffer={true}
-                className="f-drag-area__buffer"
-            />
+            {!disabled && (
+                <div
+                    ref={bufferRef}
+                    data-buffer={true}
+                    className="f-drag-area__buffer"
+                />
+            )}
 
             {footer}
         </View>

diff --git a/packages/core/src/drag/drag-element.tsx b/packages/core/src/drag/drag-element.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo, useRef } from 'react'
-import { classNames, CoreViewProps, useDrag, View } from '../'
+import React, { forwardRef, useMemo, useRef } from 'react'
+import { classNames, CoreViewProps, mergeRefs, useDrag, View } from '../'
 
 export type DragElementProps = {
     id?: string
@@ -10,7 +10,7 @@ export type DragElementProps = {
     noIndent?: boolean
 } & Omit<CoreViewProps, 'indent'>
 
-export const DragElement = (props: DragElementProps) => {
+export const DragElement = forwardRef((props: DragElementProps, ref) => {
     const { id, indent = 0, noIndent, noDrop, noDrag, noFocus, style = {}, ...rest } = props
     const fallbackDisplay = useMemo(() => style.display, [style])
     const { onMouseDown, onMouseUp } = useDrag()
@@ -54,9 +54,9 @@ export const DragElement = (props: DragElementProps) => {
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             style={styles}
-            ref={elementRef}
+            ref={mergeRefs([ref, elementRef])}
             className={className}>
             {props.children}
         </View>
     )
-}
+})
diff --git a/packages/core/src/helpers/array.ts b/packages/core/src/helpers/array.ts
@@ -10,16 +10,20 @@ export const removeElementFromArray = (array, index) => {
     return arr
 }
 
-export const moveElementInArray = (array, origin, target) => {
-    const targetIndex =
-        target.moveDirection == 'up'
-            ? target.index > origin.index
-                ? target.index - 1
-                : target.index
-            : target.index > origin.index
+export const getTargetIndex = (origin, target) => {
+    return target.moveDirection == 'up'
+        ? target.index > origin.index
             ? target.index - 1
             : target.index
-    return [...arrayMove(array, origin.index, targetIndex)]
+        : target.moveDirection == 'down'
+            ? target.index > origin.index
+                ? target.index
+                : target.index - 1
+            : target.index
+}
+
+export const moveElementInArray = (array, origin, target) => {
+    return [...arrayMove(array, origin.index, getTargetIndex(origin, target))]
 }
 
 export const arrayMove = (array, from, to) => {

diff --git a/packages/core/src/helpers/date.ts b/packages/core/src/helpers/date.ts
@@ -1,6 +1,13 @@
 import { plural } from './util'
 
 export const FDate = (date: Date) => {
+
+    const toISOWithTimezone = () => {
+        const offset = date.getTimezoneOffset()
+        const adjustedDate = new Date(date.getTime() - (offset * 60000))
+        return adjustedDate.toISOString()
+    }
+
     const isBefore = (beforeDate: Date) => {
         return beforeDate > date
     }
@@ -192,6 +199,7 @@ export const FDate = (date: Date) => {
     }
 
     return {
+        toISOWithTimezone,
         isBefore,
         isAfter,
         isSame,

diff --git a/packages/core/src/menu/menu.css b/packages/core/src/menu/menu.css
@@ -69,7 +69,7 @@
     --f-menu-item-color-active: var(--f-color-accent);
     --f-menu-item-color-system-active: var(--f-color-surface-stronger);
     --f-menu-item-color-disabled: var(--f-color-text-weakest);
-    --f-menu-item-padding: var(--f-space-2) var(--f-space-5);
+    --f-menu-item-padding: 0.4rem 0.75rem;
     --f-menu-item-margin: 0 var(--f-space-1);
     --f-menu-item-height: fit-content;
 }
@@ -210,7 +210,7 @@
 /* ************************************************************** */
 
 :root {
-    --f-menu-heading-padding: var(--f-space-2) var(--f-space-6);
+    --f-menu-heading-padding: 0.4rem 0.75rem;
     --f-menu-heading-color: var(--f-color-text-weakest);
 }
 

diff --git a/packages/core/src/menu/menu.tsx b/packages/core/src/menu/menu.tsx
@@ -15,6 +15,7 @@ import {
     HeadingProps,
     Popover,
     PopoverProps,
+    Portal,
     Text,
     usePreventScrolling,
     useVisibility,
@@ -533,6 +534,7 @@ export const MenuProvider = (props: MenuProviderProps) => {
         <Popover
             {...popoverProps}
             border="none"
+            portal={Portal}
             width="fit-content"
             isVisible={isVisible}
             fixPosition={{ left: position.x, top: position.y }}

diff --git a/packages/core/src/popover/popover.css b/packages/core/src/popover/popover.css
@@ -27,6 +27,10 @@
     visibility: hidden;
 }
 
+.f-popover.is-fixed {
+    position: fixed;
+}
+
 @keyframes f-popover-fadein {
     from { opacity: 0; }
     to { opacity: 1; }

diff --git a/packages/core/src/popover/popover.tsx b/packages/core/src/popover/popover.tsx
@@ -86,6 +86,7 @@ export const Popover = forwardRef((props: PopoverProps, ref) => {
             'f-popover': true,
             'has-arrow': arrow,
             'is-ready': ready,
+            'is-fixed': isFixed,
         },
         [props.className, getPopoutClass(finalAnchor)]
     )

diff --git a/packages/core/src/select/select.tsx b/packages/core/src/select/select.tsx
@@ -124,6 +124,7 @@ export const Select = (props: SelectProps) => {
     const [offscreen, setOffscreen] = useState(false)
     const [cursor, setCursor] = useState(-1)
     const [text, setText] = useState('')
+    const filterTimeout = useRef(null)
     const filteredOptions = useMemo(() => {
         return options.filter((option: SelectOption) => {
             if (option.sticky) {
@@ -307,10 +308,11 @@ export const Select = (props: SelectProps) => {
 
     // manages the onFilter
     useEffect(() => {
-        setTimer(() => {
-            if (onFilter && !!text) onFilter(text)
+        clearTimeout(filterTimeout.current)
+        filterTimeout.current = setTimeout(() => {
+            if (onFilter && visible) onFilter(text)
         }, filterDelay)
-    }, [text, onFilter, filterDelay])
+    }, [text, filterDelay])
 
     // resets the cursor
     useEffect(() => {