fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: prettier

Browse Source
This commit is contained in:
admin
2024-09-27 04:47:04 +03:00
parent c5f839d9ef
commit de4fe450ab
253 changed files with 11322 additions and 10004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/test.tsx
View File

@@ -1,59 +1,75 @@
import cx from 'clsx';
import {Text} from '@mantine/core';
import {useListState} from '@mantine/hooks';
import {DragDropContext, Droppable, Draggable} from '@hello-pangea/dnd';
import classes from './DndList.module.css';
import cx from "clsx";
import { Text } from "@mantine/core";
import { useListState } from "@mantine/hooks";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
import classes from "./DndList.module.css";
const data = [
{position: 6, mass: 12.011, symbol: 'C', name: 'Carbon'},
{position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen'},
{position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium'},
{position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium'},
{position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium'},
{ position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
{ position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
{ position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
{ position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
{ position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
];
export function DndList() {
const [state, handlers] = useListState(data);
const items = (listIndex: number) => state.map((item, index) => (
<Draggable key={item.symbol + `${listIndex}`} index={index} draggableId={item.symbol + `${listIndex}`}>
{(provided, snapshot) => (
<div
className={cx(classes.item, {[classes.itemDragging]: snapshot.isDragging})}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<Text className={classes.symbol}>{item.symbol}</Text>
<div>
<Text>{item.name}</Text>
<Text c="dimmed" size="sm">
Position: {item.position} • Mass: {item.mass}
</Text>
const items = (listIndex: number) =>
state.map((item, index) => (
<Draggable
key={item.symbol + `${listIndex}`}
index={index}
draggableId={item.symbol + `${listIndex}`}>
{(provided, snapshot) => (
<div
className={cx(classes.item, {
[classes.itemDragging]: snapshot.isDragging,
})}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}>
<Text className={classes.symbol}>{item.symbol}</Text>
<div>
<Text>{item.name}</Text>
<Text
c="dimmed"
size="sm">
Position: {item.position} • Mass: {item.mass}
</Text>
</div>
</div>
</div>
)}
</Draggable>
));
)}
</Draggable>
));
return (
<DragDropContext
onDragEnd={({destination, source}) =>
handlers.reorder({from: source.index, to: destination?.index || 0})
}
>
<Droppable droppableId="dnd-list" direction="vertical">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
onDragEnd={({ destination, source }) =>
handlers.reorder({
from: source.index,
to: destination?.index || 0,
})
}>
<Droppable
droppableId="dnd-list"
direction="vertical">
{provided => (
<div
{...provided.droppableProps}
ref={provided.innerRef}>
{items(1)}
{provided.placeholder}
</div>
)}
</Droppable>
<Droppable droppableId="dnd-list-2" direction="vertical">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
<Droppable
droppableId="dnd-list-2"
direction="vertical">
{provided => (
<div
{...provided.droppableProps}
ref={provided.innerRef}>
{items(2)}
{provided.placeholder}
</div>
@@ -61,4 +77,4 @@ export function DndList() {
</Droppable>
</DragDropContext>
);
}
}