图片路径测试

Bin

2025-12-17 d616898802dfe7e5dd648bcf53c6d1f86b6d3642

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { useContext } from "react";
 
import type { InputItem, NewColumnData } from "./createData";
import Item from "./Item";
import { CollapsedContext } from "./Ranker";
import { StrictModeDroppable } from "./StrictModeDroppable";
 
import styles from "./Ranker.module.scss";
import { Button } from "@humansignal/ui";
 
interface ColumnProps {
  column: NewColumnData;
  items: InputItem[];
  readonly?: boolean;
}
 
/**
 * Separate component to incapsulate all the logic related to collapsible column titles.
 */
const CollapsibleColumnTitle = ({ items, title }: { items: InputItem[]; title: string }) => {
  const [, collapsedMap, toggleCollapsed] = useContext(CollapsedContext);
  const collapsed = items.every((item) => collapsedMap[item.id]);
  const toggle = () =>
    toggleCollapsed(
      items.map((item) => item.id),
      !collapsed,
    );
 
  return (
    <h1 className={[styles.columnTitle, collapsed ? styles.collapsed : styles.expanded].join(" ")}>
      {title}
      <Button type="button" onClick={toggle} aria-label="Toggle column">
        <span />
      </Button>
    </h1>
  );
};
 
/**
 * Defines a column component used by the DragDropBoard component. Each column contains items
 * that can be reordered by dragging.
 */
const Column = (props: ColumnProps) => {
  const { column, items, readonly } = props;
  const [collapsible] = useContext(CollapsedContext);
 
  const title = collapsible ? (
    <CollapsibleColumnTitle items={items} title={column.title} />
  ) : (
    <h1 className={styles.columnTitle}>{column.title}</h1>
  );
 
  return (
    <div className={[styles.column, "htx-ranker-column"].join(" ")}>
      {title}
      <StrictModeDroppable droppableId={column.id}>
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps} className={styles.dropArea}>
            {items.map((item, index) => (
              <Item key={item.id} item={item} index={index} readonly={readonly} />
            ))}
            {provided.placeholder}
          </div>
        )}
      </StrictModeDroppable>
    </div>
  );
};
 
export default Column;