codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix table sort icon

This commit is contained in:
Arnaud 2024-11-06 20:20:53 +01:00
parent 8894bce406
commit ef4b0810cc
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
9 changed files with 62 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.38",
"version": "0.0.39",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.38",
"version": "0.0.39",
"license": "MIT",
"dependencies": {
"lucide-react": "^0.453.0"

2
package.json
View File

@ -5,7 +5,7 @@
"type": "git",
"url": "https://github.com/codex-storage/codex-marketplace-ui-components"
},
"version": "0.0.38",
"version": "0.0.39",
"type": "module",
"scripts": {
"prepack": "npm run build",

19
src/assets/icons/asc.svg Normal file
View File

@ -0,0 +1,19 @@
<svg
width="20"
height="10"
viewBox="0 0 20 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_326_785)">
<path
d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
fill="#969696"
/>
</g>
<defs>
<clipPath id="clip0_326_785">
<rect width="20" height="10" fill="white" />
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

19
src/assets/icons/desc.svg Normal file
View File

@ -0,0 +1,19 @@
<svg
width="20"
height="10"
viewBox="0 0 20 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_326_787)">
<path
d="M14.1666 -2.08333L9.99992 -6.25L5.83325 -2.08333H14.1666ZM14.1666 2.08333L9.99992 6.25L5.83325 2.08333H14.1666Z"
fill="#969696"
/>
</g>
<defs>
<clipPath id="clip0_326_787">
<rect width="20" height="10" fill="white" />
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

5
src/components/Table/SortIcon.css
View File

@ -1,5 +0,0 @@
.sort-icon {
display: flex;
flex-direction: column;
gap: 0;
}

46
src/components/Table/SortIcon.tsx
View File

@ -1,46 +0,0 @@
import "./SortIcon.css";
export function SortIcon() {
return (
<span className="sort-icon">
<svg
width="20"
height="10"
viewBox="0 0 20 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_326_785)">
<path
d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
fill="#969696"
/>
</g>
<defs>
<clipPath id="clip0_326_785">
<rect width="20" height="10" fill="white" />
</clipPath>
</defs>
</svg>
<svg
width="20"
height="10"
viewBox="0 0 20 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_326_787)">
<path
d="M14.1666 -2.08333L9.99992 -6.25L5.83325 -2.08333H14.1666ZM14.1666 2.08333L9.99992 6.25L5.83325 2.08333H14.1666Z"
fill="#969696"
/>
</g>
<defs>
<clipPath id="clip0_326_787">
<rect width="20" height="10" fill="white" />
</clipPath>
</defs>
</svg>
</span>
);
}

27
src/components/Table/Table.tsx
View File

@ -1,14 +1,9 @@
import "./table.css";
import {
ComponentType,
Fragment,
ReactElement,
ReactNode,
useEffect,
useState,
} from "react";
import { Fragment, ReactElement, ReactNode, useEffect, useState } from "react";
import { classnames } from "../utils/classnames";
import { attributes } from "../utils/attributes";
import AscIcon from "../../assets/icons/asc.svg?react";
import DescIcon from "../../assets/icons/desc.svg?react";
export type TabSortState = "asc" | "desc" | null;
@ -29,8 +24,6 @@ type Props = {
className?: string;
rows: ReactElement<RowProps, typeof Row>[];
SortIcon: ComponentType;
};
const nextState = (state: "asc" | "desc" | null) =>
@ -39,7 +32,6 @@ const nextState = (state: "asc" | "desc" | null) =>
export function Table({
headers,
rows,
SortIcon,
defaultSortIndex = -1,
className = "",
}: Props) {
@ -92,7 +84,11 @@ export function Table({
? {
role: "button",
"aria-sort":
state === "asc" ? "ascending" : "descending",
state === "asc"
? "ascending"
: state == null
? ""
: "descending",
}
: {}
)}
@ -104,7 +100,12 @@ export function Table({
>
<div>
<span>{name}</span>
{sort && <SortIcon />}
{sort && (
<span className="sort-icon">
<AscIcon />
<DescIcon />
</span>
)}
</div>
</th>
);

6
src/components/Table/table.css
View File

@ -22,6 +22,12 @@
box-sizing: border-box;
background-color: #232323;
.sort-icon {
display: flex;
flex-direction: column;
gap: 0;
}
&[role="button"] {
cursor: pointer;
}

2
stories/Table.stories.tsx
View File

@ -70,7 +70,7 @@ export const Sort: Story = {
]}
></Row>,
],
headers: [["id"], ["title"], ["other", () => {}], ["actions"]],
headers: [["id"], ["title", () => {}], ["other", () => {}], ["actions"]],
defaultSortIndex: 2,
},
};