fix: sort selector conflict (#607)

* fix: sort select same field conflict * feat: optimise hidden interaction * feat: filter field select add value icon -m feat: unify toolbar select display * fix: correct error world
teableio · May 17, 2024 · 6a85eb7 · 6a85eb7
1 parent 7543a1f
commit 6a85eb7
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 12 deletions.
diff --git a/packages/sdk/src/components/field/FieldCommand.tsx b/packages/sdk/src/components/field/FieldCommand.tsx
@@ -43,7 +43,13 @@ export function FieldCommand(props: IFieldCommand) {
           {mergeFields?.map((field) => {
             const { Icon } = fieldStaticGetter(field.type, field.isLookup);
             return (
-              <CommandItem key={field.id} onSelect={() => onSelect?.(field.id)} className="flex">
+              <CommandItem
+                key={field.id}
+                onSelect={() => {
+                  onSelect?.(field.id);
+                }}
+                className="flex"
+              >
                 <Icon className="shrink-0"></Icon>
                 <span className="truncate pl-3">{field.name}</span>
               </CommandItem>

diff --git a/packages/sdk/src/components/field/FieldSelector.tsx b/packages/sdk/src/components/field/FieldSelector.tsx
@@ -20,7 +20,7 @@ interface IFieldSelector {
 export function FieldSelector(props: IFieldSelector) {
   const {
     value,
-    className: className,
+    className,
     excludedIds: selectedIds,
     placeholder,
     emptyHolder,
@@ -40,8 +40,13 @@ export function FieldSelector(props: IFieldSelector) {
     selectedField?.isLookup
   );
 
+  const selectHandler = (value: string) => {
+    setOpen(false);
+    onSelect?.(value);
+  };
+
   return (
-    <Popover open={open} onOpenChange={setOpen} modal>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         {children ? (
           children
@@ -53,8 +58,10 @@ export function FieldSelector(props: IFieldSelector) {
             aria-expanded={open}
             className={cn('h-8 w-[200px] flex items-center', className)}
           >
-            <Icon className="size-4 shrink-0 p-0.5 opacity-50" />
-            <span className="min-w-8 truncate">{selectedField?.name}</span>
+            <div className="flex flex-1 items-center truncate">
+              <Icon className="size-4 shrink-0 p-0.5 opacity-50" />
+              <span className="min-w-8 truncate pl-1 text-left">{selectedField?.name}</span>
+            </div>
             <ChevronsUpDown className="size-4 shrink-0 p-0.5 opacity-50" />
           </Button>
         )}
@@ -65,7 +72,7 @@ export function FieldSelector(props: IFieldSelector) {
           selectedIds={selectedIds}
           placeholder={placeholder}
           emptyHolder={emptyHolder}
-          onSelect={onSelect}
+          onSelect={selectHandler}
         />
       </PopoverContent>
     </Popover>

diff --git a/packages/sdk/src/components/filter/FilterMain.tsx b/packages/sdk/src/components/filter/FilterMain.tsx
@@ -66,9 +66,9 @@ export const FilterMain = (props: IFilterMainProps) => {
   // use the primary to be default metadata
   const defaultIFilterItem = useMemo<IFilterItem>(() => {
     const defaultField = fields.find((field) => field.isPrimary);
-    const defaultOpertor = defaultField && getValidFilterOperators(defaultField);
+    const defaultOperator = defaultField && getValidFilterOperators(defaultField);
     return {
-      operator: defaultOpertor?.[0],
+      operator: defaultOperator?.[0],
       value: null,
       fieldId: defaultField?.id,
     } as IFilterItem;

diff --git a/packages/sdk/src/components/filter/component/base/BaseSingleSelect.tsx b/packages/sdk/src/components/filter/component/base/BaseSingleSelect.tsx
@@ -87,7 +87,7 @@ function BaseSingleSelect<V extends string, O extends IOption<V> = IOption<V>>(
                 <span className="truncate">{label}</span>
               )
             : 'Select'}
-          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="ml-2 size-3 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className={cn('p-1', popoverClassName)}>

diff --git a/packages/sdk/src/components/filter/condition/FieldSelect.tsx b/packages/sdk/src/components/filter/condition/FieldSelect.tsx
@@ -42,6 +42,16 @@ function FieldSelect(props: IFieldSelectProps) {
       className="w-40 shrink-0"
       popoverClassName="w-fit"
       optionRender={optionRender}
+      displayRender={(selectedField) => {
+        const { type, isLookup, label } = selectedField;
+        const { Icon } = fieldStaticGetter(type, isLookup);
+        return (
+          <div className="flex flex-1 items-center truncate">
+            <Icon className="shrink-0" />
+            <span className="truncate pl-1">{label}</span>
+          </div>
+        );
+      }}
     />
   );
 }

diff --git a/packages/sdk/src/components/hide-fields/HideFieldsBase.tsx b/packages/sdk/src/components/hide-fields/HideFieldsBase.tsx
@@ -226,7 +226,7 @@ export const HideFieldsBase = (props: IHideFieldsBaseProps) => {
   );
 
   return (
-    <Popover>
+    <Popover modal>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent side="bottom" align="start" className="p-0">
         {content()}

diff --git a/packages/sdk/src/components/sort/SortItem.tsx b/packages/sdk/src/components/sort/SortItem.tsx
@@ -15,7 +15,7 @@ enum ISortKey {
 }
 
 function SortItem(props: ISortItemProps) {
-  const { index, value, onSelect, ...restProps } = props;
+  const { index, value, onSelect, selectedFields, ...restProps } = props;
 
   const { fieldId, order } = value;
 
@@ -28,6 +28,7 @@ function SortItem(props: ISortItemProps) {
       <FieldSelector
         value={fieldId}
         onSelect={(value) => selectHandler(ISortKey.FieldId, value)}
+        excludedIds={selectedFields}
         {...restProps}
       />
 

diff --git a/packages/ui-lib/src/base/dnd-kit/index.tsx b/packages/ui-lib/src/base/dnd-kit/index.tsx
@@ -110,7 +110,7 @@ const Draggable = (props: IDraggableContainerProps) => {
   return <>{children(provided)}</>;
 };
 
-export { DndKitContext as DndKitContext, Droppable, Draggable };
+export { DndKitContext, Droppable, Draggable };
 
 export * from '@dnd-kit/core';