proje-react-panel 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",

package/src/__tests__/components/list/CellField.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * @jest-environment jsdom
+ */
+import { TextDecoder, TextEncoder } from 'util';
+// react-router reads TextEncoder at import time and jsdom has none — set it up before the
+// imports below pull the router in.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import 'reflect-metadata';
+import React from 'react';
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { CellField } from '../../../components/list/CellField';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+
+// Tablo `table-layout: fixed` kullaniyor: kolon genisligi sabit ve tasan metin
+// ellipsis'e dusuyor. Kesilen degeri okumanin tek yolu hucrenin tooltip'i.
+const cell = (over: Partial<CellConfiguration> = {}): CellConfiguration => ({
+  name: 'description',
+  type: 'string',
+  ...over,
+});
+
+const titleOf = (configuration: CellConfiguration, item: Record<string, unknown>) =>
+  render(
+    // Link hucresi react-router'in <Link>'ini basiyor, o da router context'i istiyor.
+    <MemoryRouter>
+      <table>
+        <tbody>
+          <tr>
+            <CellField configuration={configuration} item={item} />
+          </tr>
+        </tbody>
+      </table>
+    </MemoryRouter>
+  )
+    .container.querySelector('td')
+    ?.getAttribute('title');
+
+describe("CellField — hucre tooltip'u", () => {
+  it('metin hucresinde tam degeri title olarak verir', () => {
+    const uzun = 'a'.repeat(400);
+
+    expect(titleOf(cell(), { description: uzun })).toBe(uzun);
+  });
+
+  it('metin olmayan degerleri yaziya cevirir', () => {
+    expect(titleOf(cell({ type: 'number' }), { description: 42 })).toBe('42');
+  });
+
+  // Bu hucreler metin degil element basiyor; ham url'i tooltip yapmak
+  // kullaniciya bir sey anlatmiyor, yalnizca gurultu olurdu.
+  it.each(['image', 'download', 'link'] as const)('%s hucresinde title vermez', type => {
+    expect(titleOf(cell({ type, name: 'thumbnailUrl' }), { thumbnailUrl: '/uploads/x.png' })).toBe(
+      null
+    );
+  });
+
+  it.each([
+    ['null', null],
+    ['undefined', undefined],
+    ['nesne', { a: 1 }],
+  ])('%s degerde title vermez', (_ad, value) => {
+    expect(titleOf(cell(), { description: value })).toBe(null);
+  });
+});

package/src/components/list/CellField.tsx

@@ -48,6 +48,7 @@ export function CellField<T extends AnyClass>({
   return (
     <td
       key={configuration.name}
+      title={cellTitle(configuration, item)}
       style={{
         minWidth,
         width,
@@ -57,3 +58,26 @@ export function CellField<T extends AnyClass>({
     </td>
   );
 }
+
+/**
+ * Sabit kolon genisliginde uzun metin ellipsis'e dusuyor ve tam degeri okumanin
+ * tek yolu hover kaliyor. Gorsel/indirme/link hucrelerinde metin degil element
+ * basildigi icin ham degeri tooltip yapmak yalnizca gurultu olurdu.
+ */
+function cellTitle<T extends AnyClass>(
+  configuration: CellConfiguration,
+  item: T
+): string | undefined {
+  if (
+    configuration.type === 'image' ||
+    configuration.type === 'download' ||
+    configuration.type === 'link'
+  ) {
+    return undefined;
+  }
+  const value = item[configuration.name];
+  if (value === null || value === undefined || typeof value === 'object') {
+    return undefined;
+  }
+  return String(value);
+}

package/src/components/list/Datagrid.tsx

@@ -11,6 +11,13 @@ import { CellField } from './CellField';
 import { CellConfiguration } from '../../decorators/list/Cell';
 import { useAppStore } from '../../store/store';
 
+/**
+ * Otomatik duzende bu deger yalnizca bir ipucuydu; tarayici "Actions" etiketi
+ * sigsin diye kolonu kendisi buyutuyordu. `table-layout: fixed` ile genislik
+ * birebir uygulaniyor, dolayisiyla eski 30px etiketi kirpiyor.
+ */
+const ACTIONS_COLUMN_WIDTH = '120px';
+
 interface DatagridProps<T extends AnyClass> {
   data: T[];
   listPageMeta: ListPageMeta<T>;
@@ -49,7 +56,9 @@ export function Datagrid<T extends AnyClass>({
               {(listActions?.details ||
                 listActions?.edit ||
                 listActions?.delete ||
-                listActions?.customActions?.length) && <th style={{ width: '30px' }}>Actions</th>}
+                listActions?.customActions?.length) && (
+                <th style={{ width: ACTIONS_COLUMN_WIDTH }}>Actions</th>
+              )}
             </tr>
           </thead>
           <tbody>
@@ -80,7 +89,7 @@ export function Datagrid<T extends AnyClass>({
                     );
                   })}
                   {(listCells?.details || listCells?.edit || listCells?.delete) && (
-                    <td style={{ width: '30px' }}>
+                    <td className="util-cell-actions-cell" style={{ width: ACTIONS_COLUMN_WIDTH }}>
                       <div className="util-cell-actions">
                         <p className="util-cell-actions-label">
                           Actions <DownArrowIcon className="icon icon-down" />

package/src/components/list/cells/ImageCell.tsx

@@ -14,11 +14,14 @@ export function ImageCell({ item, configuration }: ImageCellProps) {
   if (!value) return <>-</>;
 
   return (
+    // maxWidth sart: sabit tablo duzeninde kolon 100px'ten dar kalabiliyor ve
+    // hucre tasmayi kirptigi icin gorsel sessizce yarim gorunurdu. Kucultmek
+    // kirpmaktan iyi; objectFit: contain oranı koruyor.
     <img
       width={100}
       height={100}
       src={imageConfiguration.baseUrl + value}
-      style={{ objectFit: 'contain' }}
+      style={{ objectFit: 'contain', maxWidth: '100%' }}
       alt=""
     />
   );

package/src/decorators/list/Cell.ts

@@ -23,7 +23,16 @@ export interface CellOptions {
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
   style?: {
+    /**
+     * @deprecated Tablo `table-layout: fixed` kullaniyor; sabit duzende hucre
+     * `min-width`'i kolon genisligini etkilemiyor (CSS 2.1 17.5.2.1). Bunun
+     * yerine `width` verin.
+     */
     minWidth?: string;
+    /**
+     * Kolon genisligi. Sabit duzende birebir uygulanir; yuzde vermek tabloyu
+     * konteynere sigdirir, px vermek toplam konteyneri asarsa yatay scroll acar.
+     */
     width?: string;
   };
 }

package/src/styles/list.scss

@@ -86,8 +86,17 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     @include custom-scrollbar;
   }
 
+  // `width` sart: `table-layout: fixed`, genislik `auto` kaldigi surece devreye
+  // girmiyor (CSS 2.1 17.5.2.1) ve tarayici otomatik duzene doner. Burada eskiden
+  // sadece `min-width: 100%` vardi, yani sabit duzen hic calismiyordu: nowrap
+  // hucreler kolonu icerik kadar sisiriyor, tablo konteyneri asiyor ve uzun
+  // metin tasiyan her liste yatay scroll aciyordu.
+  //
+  // Kolonlarina px genislik veren tuketiciler genis tabloyu kaybetmiyor: sabit
+  // duzende kullanilan tablo genisligi, belirtilen kolon genisliklerinin toplami
+  // ile bu %100 degerinin buyugudur.
   .datagrid-table {
-    min-width: 100%;
+    width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
     position: relative;
@@ -97,10 +106,19 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid var(--prp-border-primary);
+      // `text-overflow` yalnizca tasma kirpildiginda is goruyor; `overflow`
+      // olmadan ellipsis hicbir zaman cizilmiyordu.
+      overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    // Actions hucresindeki acilir liste `position: absolute`; kirpilirsa menu
+    // gorunmez oluyor. Kirpma sadece metin kolonlari icin gerekli.
+    .util-cell-actions-cell {
+      overflow: visible;
+    }
+
     th {
       color: var(--prp-text-primary);
       background-color: var(--prp-bg-tertiary);