From 7f92b654de208e85287c30b0dfa47df127f434f8 Mon Sep 17 00:00:00 2001
From: ProFIT <santiago.farias@yandex.ru>
Date: Fri, 11 Apr 2025 13:52:36 +0700
Subject: [PATCH] steroids/dev#771 added sortable icons to Grid

---
 src/icons/index.ts                     |  2 ++
 src/icons/svgs/long-arrow-alt-down.svg |  3 ++
 src/icons/svgs/long-arrow-alt-up.svg   |  3 ++
 src/list/Grid/GridView.scss            | 46 ++++++++++++++++++++++++++
 src/list/Grid/GridView.tsx             |  4 +--
 5 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/icons/svgs/long-arrow-alt-down.svg
 create mode 100644 src/icons/svgs/long-arrow-alt-up.svg

diff --git a/src/icons/index.ts b/src/icons/index.ts
index 2c826e66..7e1e999b 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -17,6 +17,8 @@ export default (customIcons: Record<string, any>) => {
         'arrow_right_24x24',
         'arrow_up_18x18',
         'arrow_up_24x24',
+        'long-arrow-alt-down',
+        'long-arrow-alt-up',
         'blank',
         'calendar_check',
         'chart',
diff --git a/src/icons/svgs/long-arrow-alt-down.svg b/src/icons/svgs/long-arrow-alt-down.svg
new file mode 100644
index 00000000..85792512
--- /dev/null
+++ b/src/icons/svgs/long-arrow-alt-down.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9.44916L5 13.4492M5 13.4492L9 9.44916M5 13.4492L5 1.44916" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/icons/svgs/long-arrow-alt-up.svg b/src/icons/svgs/long-arrow-alt-up.svg
new file mode 100644
index 00000000..243459cd
--- /dev/null
+++ b/src/icons/svgs/long-arrow-alt-up.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 5.44916L5 1.44916M5 1.44916L1 5.44916M5 1.44916L5 13.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/list/Grid/GridView.scss b/src/list/Grid/GridView.scss
index 1fdc6b27..d3243921 100644
--- a/src/list/Grid/GridView.scss
+++ b/src/list/Grid/GridView.scss
@@ -6,6 +6,9 @@
 
     --grid-td-background-color: #FFFFFF;
     --grid-td-alternating-color: var(--additional-light-gray);
+
+    --sort-button-color: var(--graphite);
+    --sort-button-color-active: var(--graphite-dark);
 }
 
 html[data-theme="dark"] {
@@ -14,6 +17,10 @@ html[data-theme="dark"] {
 
     --grid-td-background-color: var(--graphite);
     --grid-td-alternating-color: var(--graphite-dark);
+
+
+    --sort-button-color: var(--secondary-dark);
+    --sort-button-color-active: var(--secondary);
 }
 
 $grid-header-background-color: var(--grid-header-background-color);
@@ -97,6 +104,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 24px 16px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 24px 30px 24px 16px;
+                }
+            }
         }
 
         &_md {
@@ -109,6 +123,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 21px 12px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 21px 30px 21px 12px;
+                }
+            }
         }
 
         &_sm {
@@ -121,6 +142,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 16px 8px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 16px 30px 16px 8px;
+                }
+            }
         }
     }
 
@@ -171,4 +199,22 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             width: 100%;
         }
     }
+
+    &__sort-buttons {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    &__sort-button {
+        path {
+            stroke: var(--sort-button-color);
+        }
+        &_is-active {
+            path {
+                stroke: var(--sort-button-color-active);
+                stroke-width: 2px;
+            }
+        }
+    }
 }
diff --git a/src/list/Grid/GridView.tsx b/src/list/Grid/GridView.tsx
index 3db2466f..d57424ee 100644
--- a/src/list/Grid/GridView.tsx
+++ b/src/list/Grid/GridView.tsx
@@ -44,7 +44,7 @@ export default function GridView(props: IGridViewProps) {
 
     const renderSortButton = useCallback((attribute, direction) => {
         const sortKey = (direction === 'desc' ? '-' : '') + attribute;
-        const isActive = [].concat(props.list?.sort || []).includes(sortKey);
+        const isActive = [].concat(props?.sort || []).includes(sortKey);
         return (
             <Button
                 icon={direction === 'asc' ? 'long-arrow-alt-up' : 'long-arrow-alt-down'}
@@ -87,7 +87,7 @@ export default function GridView(props: IGridViewProps) {
                             >
                                 {column.label}
                                 {column.sortable && column.attribute && (
-                                    <span>
+                                    <span className={bem.element('sort-buttons')}>
                                         {column.label && <span>&nbsp;</span>}
                                         {renderSortButton(column.attribute, 'asc')}
                                         {renderSortButton(column.attribute, 'desc')}