@dhiraj0720/report1chart 2.5.2 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"

package/src/components/FrozenTableReport1A.jsx

@@ -2,14 +2,33 @@ import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 
 const Arrow = ({ value }) => (
-  <Text style={{ color: value >= 0 ? 'green' : 'red', fontWeight: '700' }}>
+  <Text
+    style={[
+      styles.arrow,
+      value >= 0 ? styles.up : styles.down,
+    ]}
+  >
     {value >= 0 ? '↑' : '↓'} {Math.abs(value)}%
   </Text>
 );
 
-const Cell = ({ children, bold }) => (
-  <View style={styles.cell}>
-    <Text style={[bold && styles.bold]}>{children}</Text>
+const Cell = ({ children, bold, frozen }) => (
+  <View
+    style={[
+      styles.cell,
+      frozen && styles.frozenCell,
+    ]}
+  >
+    <Text
+      numberOfLines={1}
+      ellipsizeMode="tail"
+      style={[
+        styles.text,
+        bold && styles.bold,
+      ]}
+    >
+      {children}
+    </Text>
   </View>
 );
 
@@ -18,14 +37,16 @@ const FrozenTableReport1A = ({ rows }) => {
     <View style={styles.container}>
       {/* LEFT FROZEN COLUMN */}
       <View style={styles.frozen}>
-        <Cell bold>FAALİYET</Cell>
+        <Cell bold frozen>FAALİYET</Cell>
         {rows.map((r, i) => (
-          <Cell key={i} bold>{r.name}</Cell>
+          <Cell key={i} frozen bold>
+            {r.name}
+          </Cell>
         ))}
       </View>
 
-      {/* SCROLLABLE */}
-      <ScrollView horizontal>
+      {/* SCROLLABLE COLUMNS */}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <View>
           <View style={styles.headerRow}>
             <Cell bold>2024</Cell>
@@ -51,3 +72,68 @@ const FrozenTableReport1A = ({ rows }) => {
 };
 
 export default FrozenTableReport1A;
+
+/* ======================
+   STYLES (COMPACT)
+====================== */
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+  },
+
+  frozen: {
+    width: 150,               // 👈 fixed width
+    backgroundColor: '#f5f7fa',
+  },
+
+  frozenCell: {
+    alignItems: 'flex-start',
+    paddingHorizontal: 8,
+  },
+
+  headerRow: {
+    flexDirection: 'row',
+    backgroundColor: '#f0f0f0',
+  },
+
+  row: {
+    flexDirection: 'row',
+  },
+
+  cell: {
+    width: 110,               // 👈 compact width
+    paddingVertical: 6,       // 👈 reduced height
+    paddingHorizontal: 6,
+    borderBottomWidth: 1,
+    borderColor: '#eee',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  text: {
+    fontSize: 12,             // 👈 smaller text
+    color: '#222',
+  },
+
+  bold: {
+    fontWeight: '700',
+  },
+
+  arrow: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+
+  up: {
+    color: '#2e7d32',
+  },
+
+  down: {
+    color: '#d32f2f',
+  },
+});

package/src/components/FullScreenTableModal.jsx

@@ -1,35 +1,106 @@
 import React, { useState } from 'react';
-import { Modal, View, Text, TouchableOpacity, Dimensions } from 'react-native';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+import SafeScreen from './components/SafeScreen';
 import FrozenTableReport1A from './FrozenTableReport1A';
 
 const FullScreenTableModal = ({ visible, rows, onClose }) => {
   const [landscape, setLandscape] = useState(false);
-  const { width, height } = Dimensions.get('window');
 
   return (
-    <Modal visible={visible} animationType="slide">
-      <View style={{ flex: 1, padding: 16 }}>
-        {/* TOP BAR */}
-        <View style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginBottom: 8,
-        }}>
-          <TouchableOpacity onPress={onClose}>
-            <Text style={{ fontSize: 18 }}>✕</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={() => setLandscape(!landscape)}>
-            <Text style={{ fontWeight: '700' }}>⟳ Rotate</Text>
-          </TouchableOpacity>
-        </View>
+    <Modal
+      visible={visible}
+      animationType="slide"
+      statusBarTranslucent
+    >
+      <SafeScreen>
+        <View style={styles.container}>
+          {/* TOP BAR */}
+          <View style={styles.header}>
+            <TouchableOpacity onPress={onClose}>
+              <Text style={styles.close}>✕</Text>
+            </TouchableOpacity>
+
+            <Text style={styles.title}>
+              Full Table View
+            </Text>
+
+            <TouchableOpacity
+              onPress={() => setLandscape(!landscape)}
+            >
+              <Text style={styles.rotate}>
+                ⟳ Rotate
+              </Text>
+            </TouchableOpacity>
+          </View>
 
-        <View style={{ flex: 1 }}>
-          <FrozenTableReport1A rows={rows} />
+          {/* TABLE */}
+          <View
+            style={[
+              styles.tableWrapper,
+              landscape && styles.landscape,
+            ]}
+          >
+            <FrozenTableReport1A rows={rows} />
+          </View>
         </View>
-      </View>
+      </SafeScreen>
     </Modal>
   );
 };
 
 export default FullScreenTableModal;
+
+/* ======================
+   STYLES
+====================== */
+const styles = StyleSheet.create({
+  safe: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+
+  container: {
+    flex: 1,
+    padding: 12,
+  },
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+
+  close: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+
+  rotate: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#1565c0',
+  },
+
+  tableWrapper: {
+    flex: 1,
+  },
+
+  /* LANDSCAPE MODE */
+  landscape: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});