@xaypay/tui 0.0.109 → 0.0.111

package/src/components/table/th.js

@@ -9,31 +9,36 @@ const TH = ({
     item,
     tHeadFamily,
     tHeadPadding,
+    tHeadFontSize,
     tHeadFontWeight,
     handleCheckedHeader,
     borderTopLeftRadius,
     borderTopRightRadius,
     handleHeaderItemClick,
+    handleCheckArrowActionHeader,
 }) => {
     return (
         <th
             style={{
+                width: 'auto',
+                cursor: 'pointer',
+                whiteSpace: 'nowrap',
                 position: 'relative',
                 padding: tHeadPadding,
+                fontSize: tHeadFontSize,
                 fontFamily: tHeadFamily,
                 fontWeight: tHeadFontWeight,
                 borderTopLeftRadius: borderTopLeftRadius,
                 borderTopRightRadius: borderTopRightRadius,
-                cursor: handleHeaderItemClick ? 'pointer' : 'normal',
             }}
-            onClick={handleHeaderItemClick ? handleHeaderItemClick : (_) => _}
+            onClick={handleHeaderItemClick}
             className={`${item.sortingArrows && styles['sorting-arrows']}`}
         >
             <div
                 style={{
                     display: 'flex',
                     alignItems: 'flex-start',
-                    justifyContent: item.hasOwnProperty('checkBox') ? 'space-between' : 'center',
+                    justifyContent: Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center',
                 }}
             >
                 {item.hasOwnProperty('checkBox') ? (
@@ -42,14 +47,31 @@ const TH = ({
                         float="left"
                         checked={item.checkBox.checked}
                         disabled={item.checkBox.disabled}
-                        handleChecked={handleCheckedHeader ? handleCheckedHeader : (_) => _}
+                        handleChecked={!item.checkBox.disabled ? handleCheckedHeader : (_) => _}
                         checkedColor={item.checkBox.checkedColor ? item.checkBox.checkedColor : ''}
                         unCheckedColor={item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''}
                     />
                 ) : (
                     ''
                 )}
-                {item.type === 'show' ? item.content : ''}
+                <p
+                    style={{
+                        margin: '0px',
+                    }}
+                    onClick={
+                        Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
+                            ? (e) => handleCheckArrowActionHeader(e, item)
+                            : (_) => _
+                    }
+                >
+                    {item.type === 'show'
+                        ? item.content
+                        : Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
+                        ? item.status === 'close'
+                            ? item.closeArrow
+                            : item.openArrow
+                        : ''}
+                </p>
             </div>
         </th>
     )

package/src/components/typography/index.js

@@ -116,7 +116,7 @@ Typography.propTypes = {
     textDecoration: PropTypes.string,
     backgroundColor: PropTypes.string,
     variant: PropTypes.oneOf(Object.values(TypographyType)),
-    size: PropTypes.oneOf(PropTypes.string, PropTypes.number),
+    size: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
 }
 
 Typography.defaultProps = {

package/src/stories/configuration.stories.mdx

@@ -619,3 +619,27 @@ import StackAlt from './assets/stackalt.svg';
   unCheckedColor: '#D1D1D1',                            // for checkbox border color
 }
 ```
+
+### TABLE
+```
+{
+  tHeadFontSize: '16px',                                // for table header font size
+  tHeadFontWeight: 600,                                 // for table header font weight
+  tHeadColor: '#FBFBFB',                                // for table header color
+  tHeadPadding: '11px 20px',                            // for table header padding
+  tHeadBorderRadius: '14px',                            // for table header border radius
+  tHeadBackgroundColor: '#00236A',                      // for table header background color
+  tHeadFamily: 'Noto Sans Armenia',                     // for table header font family
+
+  tBodyColor: '#3C393E',                                // for table body color
+  tBodyFontSize: '16px',                                // for table body font size
+  tBodyFontWeight: 500,                                 // for table body font weight
+  tBodyTextAlign: 'center',                             // for table body text align
+  tBodyPadding: '11px 20px',                            // for table body padding
+  tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
+
+  tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
+
+  openListColor: '#A3A5A9'                              // for table body opened list color
+}
+```

package/src/stories/usage.stories.mdx

@@ -19,8 +19,13 @@ import tooltipImage from './static/tooltip-usage.png';
 import textareaImage from './static/textarea-usage.png';
 import buttonImageIcon from './static/button-usage-icon.png';
 import fileSingleImage from './static/file-single-usage.png';
+import tableComponent from './static/table-component-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
 import autocompleteImage from './static/autocomplete-usage.png';
+import tableHeaderStructure from './static/table-header-data-structure-usage.png';
+import tableBodyStructureFirst from './static/table-body-data-structure-first-part-usage.png';
+import tableBodyStructureThird from './static/table-body-data-structure-third-part-usage.png';
+import tableBodyStructureSecond from './static/table-body-data-structure-second-part-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -174,3 +179,10 @@ import autocompleteImage from './static/autocomplete-usage.png';
 
 ### Modal
 <img src={modalImage} alt="file image" />
+
+### Table
+<img src={tableComponent} alt="file image" />
+<img src={tableHeaderStructure} alt="file image" />
+<img src={tableBodyStructureFirst} alt="file image" />
+<img src={tableBodyStructureSecond} alt="file image" />
+<img src={tableBodyStructureThird} alt="file image" />

package/tui.config.js

@@ -413,21 +413,23 @@ module.exports = {
     },
     // default properties for <Table /> component
     TABLE: {
-        tHeadFontWeight: 600,
-        tHeadColor: '#FBFBFB',
-        tHeadPadding: '11px 20px',
-        tHeadBorderRadius: '14px',
-        tHeadBackgroundColor: '#00236A',
-        tHeadFamily: 'Noto Sans Armenia',
+        tHeadFontSize: '16px',                                // for table header font size
+        tHeadFontWeight: 600,                                 // for table header font weight
+        tHeadColor: '#FBFBFB',                                // for table header color
+        tHeadPadding: '11px 20px',                            // for table header padding
+        tHeadBorderRadius: '14px',                            // for table header border radius
+        tHeadBackgroundColor: '#00236A',                      // for table header background color
+        tHeadFamily: 'Noto Sans Armenia',                     // for table header font family
 
-        tBodyColor: '#3C393E',
-        tBodyFontSize: '16px',
-        tBodyFontWeight: 500,
-        tBodyTextAlign: 'center',
-        tBodyPadding: '11px 20px',
-        tBodyFontFamily: 'Noto Sans Armenia',
+        tBodyColor: '#3C393E',                                // for table body color
+        tBodyFontSize: '16px',                                // for table body font size
+        tBodyFontWeight: 500,                                 // for table body font weight
+        tBodyTextAlign: 'center',                             // for table body text align
+        tBodyPadding: '11px 20px',                            // for table body padding
+        tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
 
-        tBodyRowBorder: '1px solid #eeeeee',
-        tBodyMarginTop: '20px',
+        tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
+
+        openListColor: '#A3A5A9'                              // for table body opened list color
     },
 }