@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/agent-helper/weekdays-select/index.tsx

@@ -1,230 +1,230 @@
-import { useState, useCallback } from 'react';
-import type { repeatByWeekDetail } from '@baishuyun/types';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
-import { SquareChecker } from '../../square-checker';
-import { ClearAllIcon } from '../../icons/clear-all-icon';
-import { usePortalContainer } from '../../../hooks/use-portal-container';
-
-export interface WeekdaysOption {
-  value: repeatByWeekDetail;
-  label: string;
-}
-
-export const WeekdaysOptions: WeekdaysOption[] = [
-  { value: 'mon', label: '星期一' },
-  { value: 'tue', label: '星期二' },
-  { value: 'wed', label: '星期三' },
-  { value: 'thu', label: '星期四' },
-  { value: 'fri', label: '星期五' },
-  { value: 'sat', label: '星期六' },
-  { value: 'sun', label: '星期日' },
-];
-
-export interface WeekdaysSelectProps {
-  value?: repeatByWeekDetail[];
-  onChange?: (value: repeatByWeekDetail[]) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-const CloseIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
-    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
-  </svg>
-);
-
-const DropdownChevron = ({ open }: { open: boolean }) => (
-  <svg
-    width="16" height="16" viewBox="0 0 16 16" fill="none"
-    className={cn('shrink-0', transCls)}
-    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
-  >
-    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-export const WeekdaysSelect = ({
-  value = [],
-  onChange,
-  placeholder = '请选择工作日',
-  disabled = false,
-  className,
-}: WeekdaysSelectProps) => {
-  const [open, setOpen] = useState(false);
-  const [isHovering, setIsHovering] = useState(false);
-
-  const allSelected = value.length === WeekdaysOptions.length;
-  const someSelected = value.length > 0 && value.length < WeekdaysOptions.length;
-
-  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-weekdays-select-portal');
-
-  const handleToggle = useCallback(
-    (weekday: repeatByWeekDetail) => {
-      const next = value.includes(weekday)
-        ? value.filter((v) => v !== weekday)
-        : [...value, weekday];
-      onChange?.(next);
-    },
-    [value, onChange]
-  );
-
-  const handleSelectAll = useCallback(() => {
-    if (allSelected) {
-      onChange?.([]);
-    } else {
-      onChange?.(WeekdaysOptions.map((opt) => opt.value));
-    }
-  }, [allSelected, onChange]);
-
-  const handleClearAll = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      onChange?.([]);
-    },
-    [onChange]
-  );
-
-  const handleRemove = useCallback(
-    (weekday: repeatByWeekDetail, e: React.MouseEvent) => {
-      e.stopPropagation();
-      onChange?.(value.filter((v) => v !== weekday));
-    },
-    [value, onChange]
-  );
-
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (disabled) return;
-      setOpen(nextOpen);
-    },
-    [disabled]
-  );
-
-  const hasSelection = value.length > 0;
-  const showClear = hasSelection && isHovering;
-
-  return (
-    <div className={cn('relative', className)}>
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            disabled={disabled}
-            onMouseEnter={() => setIsHovering(true)}
-            onMouseLeave={() => setIsHovering(false)}
-            ref={setTriggerRef}
-            className={cn(
-              'flex items-center justify-between w-full h-[34px] gap-2.5',
-              'bg-white border border-[#E0E0E0] rounded-[4px]',
-              'py-[7px]',
-              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
-              'text-left cursor-pointer',
-              'hover:border-[#0265FF]',
-              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
-              open && 'border-[#0265FF]',
-              transCls
-            )}
-          >
-            {hasSelection ? (
-              <>
-                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
-                  {value.map((weekday) => {
-                    const opt = WeekdaysOptions.find((o) => o.value === weekday);
-                    return (
-                      <span
-                        key={weekday}
-                        className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
-                      >
-                        <span className="text-[14px] text-[#030303] leading-[normal]">
-                          {opt?.label}
-                        </span>
-                        <span
-                          className="cursor-pointer flex items-center shrink-0"
-                          onClick={(e) => handleRemove(weekday, e)}
-                        >
-                          <CloseIcon />
-                        </span>
-                      </span>
-                    );
-                  })}
-                </div>
-                {showClear ? (
-                  <span
-                    className="cursor-pointer flex items-center shrink-0"
-                    onClick={handleClearAll}
-                  >
-                    <ClearAllIcon />
-                  </span>
-                ) : (
-                  <DropdownChevron open={open} />
-                )}
-              </>
-            ) : (
-              <>
-                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
-                  {placeholder}
-                </span>
-                <DropdownChevron open={open} />
-              </>
-            )}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          sideOffset={4}
-          className="!border-0 rounded-[8px] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] p-[4px]"
-          portalContainer={portalContainer}
-        >
-          <div className="flex flex-col">
-            <button
-              type="button"
-              onClick={handleSelectAll}
-              className={cn(
-                'flex items-center gap-[6px] h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
-                'hover:bg-[#EFF0F6]',
-                transCls
-              )}
-            >
-              <SquareChecker
-                checked={allSelected}
-                intermediate={someSelected}
-                onCheckedChange={handleSelectAll}
-                className="shrink-0"
-              />
-              <span className="text-[14px] font-bold text-[#0265FF] leading-[normal]">
-                全选
-              </span>
-            </button>
-            {WeekdaysOptions.map((option) => {
-              const isSelected = value.includes(option.value);
-              return (
-                <button
-                  key={option.value}
-                  type="button"
-                  onClick={() => handleToggle(option.value)}
-                  className={cn(
-                    'flex items-center gap-[6px] h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
-                    'hover:bg-[#EFF0F6]',
-                    transCls
-                  )}
-                >
-                  <SquareChecker
-                    checked={isSelected}
-                    onCheckedChange={() => handleToggle(option.value)}
-                    className="shrink-0"
-                  />
-                  <span className="text-[14px] text-[#030303] leading-[normal]">
-                    {option.label}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
+import { useState, useCallback } from 'react';
+import type { repeatByWeekDetail } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { SquareChecker } from '../../square-checker';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { usePortalContainer } from '../../../hooks/use-portal-container';
+
+export interface WeekdaysOption {
+  value: repeatByWeekDetail;
+  label: string;
+}
+
+export const WeekdaysOptions: WeekdaysOption[] = [
+  { value: 'mon', label: '星期一' },
+  { value: 'tue', label: '星期二' },
+  { value: 'wed', label: '星期三' },
+  { value: 'thu', label: '星期四' },
+  { value: 'fri', label: '星期五' },
+  { value: 'sat', label: '星期六' },
+  { value: 'sun', label: '星期日' },
+];
+
+export interface WeekdaysSelectProps {
+  value?: repeatByWeekDetail[];
+  onChange?: (value: repeatByWeekDetail[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const WeekdaysSelect = ({
+  value = [],
+  onChange,
+  placeholder = '请选择工作日',
+  disabled = false,
+  className,
+}: WeekdaysSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const allSelected = value.length === WeekdaysOptions.length;
+  const someSelected = value.length > 0 && value.length < WeekdaysOptions.length;
+
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-weekdays-select-portal');
+
+  const handleToggle = useCallback(
+    (weekday: repeatByWeekDetail) => {
+      const next = value.includes(weekday)
+        ? value.filter((v) => v !== weekday)
+        : [...value, weekday];
+      onChange?.(next);
+    },
+    [value, onChange]
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (allSelected) {
+      onChange?.([]);
+    } else {
+      onChange?.(WeekdaysOptions.map((opt) => opt.value));
+    }
+  }, [allSelected, onChange]);
+
+  const handleClearAll = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+
+  const handleRemove = useCallback(
+    (weekday: repeatByWeekDetail, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(value.filter((v) => v !== weekday));
+    },
+    [value, onChange]
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      setOpen(nextOpen);
+    },
+    [disabled]
+  );
+
+  const hasSelection = value.length > 0;
+  const showClear = hasSelection && isHovering;
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            ref={setTriggerRef}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'py-[7px]',
+              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+          >
+            {hasSelection ? (
+              <>
+                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                  {value.map((weekday) => {
+                    const opt = WeekdaysOptions.find((o) => o.value === weekday);
+                    return (
+                      <span
+                        key={weekday}
+                        className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                      >
+                        <span className="text-[14px] text-[#030303] leading-[normal]">
+                          {opt?.label}
+                        </span>
+                        <span
+                          className="cursor-pointer flex items-center shrink-0"
+                          onClick={(e) => handleRemove(weekday, e)}
+                        >
+                          <CloseIcon />
+                        </span>
+                      </span>
+                    );
+                  })}
+                </div>
+                {showClear ? (
+                  <span
+                    className="cursor-pointer flex items-center shrink-0"
+                    onClick={handleClearAll}
+                  >
+                    <ClearAllIcon />
+                  </span>
+                ) : (
+                  <DropdownChevron open={open} />
+                )}
+              </>
+            ) : (
+              <>
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {placeholder}
+                </span>
+                <DropdownChevron open={open} />
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          className="!border-0 rounded-[8px] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] p-[4px]"
+          portalContainer={portalContainer}
+        >
+          <div className="flex flex-col">
+            <button
+              type="button"
+              onClick={handleSelectAll}
+              className={cn(
+                'flex items-center gap-[6px] h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
+                'hover:bg-[#EFF0F6]',
+                transCls
+              )}
+            >
+              <SquareChecker
+                checked={allSelected}
+                intermediate={someSelected}
+                onCheckedChange={handleSelectAll}
+                className="shrink-0"
+              />
+              <span className="text-[14px] font-bold text-[#0265FF] leading-[normal]">
+                全选
+              </span>
+            </button>
+            {WeekdaysOptions.map((option) => {
+              const isSelected = value.includes(option.value);
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => handleToggle(option.value)}
+                  className={cn(
+                    'flex items-center gap-[6px] h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
+                    'hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  <SquareChecker
+                    checked={isSelected}
+                    onCheckedChange={() => handleToggle(option.value)}
+                    className="shrink-0"
+                  />
+                  <span className="text-[14px] text-[#030303] leading-[normal]">
+                    {option.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};