@nuskin/foundation-ui-components 1.0.0-develop.6 → 1.0.0-develop.7

package/src/common/spinner/NsSpinner.styled.tsx

@@ -0,0 +1,344 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const SpinnerContainer = styled.div<{ size: number }>`
+    width: ${(prop) => prop.size}px;
+    height: ${(prop) => prop.size}px;
+    svg {
+        width: ${(prop) => prop.size}px;
+        height: ${(prop) => prop.size}px;
+    }
+    #ns-spinner-7_tr {
+        animation: ns-spinner-7_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-7_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        80% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-7 {
+        animation: ns-spinner-7_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-7_c_o {
+        0% {
+            opacity: 0;
+        }
+        77.500000% {
+            opacity: 0;
+        }
+        80% {
+            opacity: 1;
+        }
+        97.500000% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-8_tr {
+        animation: ns-spinner-8_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-8_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        77.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-8 {
+        animation: ns-spinner-8_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-8_c_o {
+        0% {
+            opacity: 0;
+        }
+        75% {
+            opacity: 0;
+        }
+        77.500000% {
+            opacity: 1;
+        }
+        97.500000% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-9_tr {
+        animation: ns-spinner-9_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-9_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        30% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.5, 0.495, 0.82, 0.11);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-9 {
+        animation: ns-spinner-9_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-9_c_o {
+        0% {
+            opacity: 0;
+        }
+        25% {
+            opacity: 0;
+        }
+        27.500000% {
+            opacity: 1;
+        }
+        47.500000% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-10_tr {
+        animation: ns-spinner-10_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-10_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        27.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-10 {
+        animation: ns-spinner-10_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-10_c_o {
+        0% {
+            opacity: 0;
+        }
+        25% {
+            opacity: 0;
+        }
+        27.500000% {
+            opacity: 1;
+        }
+        47.500000% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-11_tr {
+        animation: ns-spinner-11_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-11_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        55% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-11 {
+        animation: ns-spinner-11_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-11_c_o {
+        0% {
+            opacity: 0;
+        }
+        52.500000% {
+            opacity: 0;
+        }
+        55% {
+            opacity: 1;
+        }
+        72.500000% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-12_tr {
+        animation: ns-spinner-12_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-12_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        52.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-12 {
+        animation: ns-spinner-12_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-12_c_o {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0;
+        }
+        52.500000% {
+            opacity: 1;
+        }
+        72.500000% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-13_tr {
+        animation: ns-spinner-13_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-13_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        5% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-13 {
+        animation: ns-spinner-13_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-13_c_o {
+        0% {
+            opacity: 1;
+        }
+        5% {
+            opacity: 1;
+        }
+        25% {
+            opacity: 1;
+        }
+        27.500000% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-14_tr {
+        animation: ns-spinner-14_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-14_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        2.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-14 {
+        animation: ns-spinner-14_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-14_c_o {
+        0% {
+            opacity: 1;
+        }
+        2.500000% {
+            opacity: 1;
+        }
+        25% {
+            opacity: 1;
+        }
+        27.500000% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-15_tr {
+        animation: ns-spinner-15_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-15_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(791deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(1151deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(1511deg);
+        }
+    }
+`;

package/src/common/spinner/NsSpinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import SpinnerIcon from './icons/Spinner';
+import { SpinnerContainer } from './NsSpinner.styled';
+import { NsSpinnerProps } from './types';
+
+const NsSpinner: React.FC<NsSpinnerProps> = ({ size = 100, additionalProps }) => {
+    return (
+        <SpinnerContainer size={size} className="spinner" {...additionalProps}>
+            <SpinnerIcon />
+        </SpinnerContainer>
+    );
+};
+
+export default NsSpinner;

package/src/common/spinner/icons/Spinner.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const SpinnerIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            id="ns-spinner-1"
+            viewBox="0 0 304 304"
+            shapeRendering="geometricPrecision"
+            textRendering="geometricPrecision"
+            {...props}
+        >
+            <g id="ns-spinner-2">
+                <g id="ns-spinner-3" transform="matrix(1 0 0 1 -34 -34)">
+                    <circle
+                        id="ns-spinner-4"
+                        r="146.500000"
+                        transform="matrix(0.26045430858251 0.75641493450408 -0.75641493450408 0.26045430858251 185.99999999964032 186.00000000212532)"
+                        fill="none"
+                        fillRule="evenodd"
+                        stroke="rgb(247,247,247)"
+                        strokeWidth="10"
+                        strokeLinecap="round"
+                    />
+                </g>
+            </g>
+            <g
+                id="ns-spinner-5"
+                transform="matrix(0.56568542494924 0.56568542494924 -0.56568542494924 0.56568542494924 37.61439805970794 61.68043135401598)"
+            >
+                <g id="ns-spinner-6" transform="matrix(1 0 0 1 -53 -239)">
+                    <g id="ns-spinner-7_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-7"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(249,0,156)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-8_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-8"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(78,0,160)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-9_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-9"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(255,215,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-10_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-10"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(190,217,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-11_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-11"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(190,217,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-12_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-12"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(249,0,156)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-13_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-13"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(255,215,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-14_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-14"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(255,78,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-15_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-15"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(0,183,231)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                </g>
+            </g>
+        </SvgIcon>
+    );
+};
+
+export default SpinnerIcon;

package/src/common/spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as NsSpinner } from './NsSpinner';
+export type { NsSpinnerProps } from './types';

package/src/common/spinner/types.ts

@@ -0,0 +1,5 @@
+import {AdditionalProps} from '../common.types';
+
+export type NsSpinnerProps = {
+    size?: number;
+} & Omit<AdditionalProps, 'darkModeEnabled'>;

package/src/common/table/NsTable.stories.tsx

@@ -106,7 +106,7 @@ const items = [
 ];
 
 export default {
-    title: 'Components/NsTable',
+    title: 'Components/Data Display/NsTable',
     component: NsTable,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/table/NsTable.tsx

@@ -1,25 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { 
-    TableBody,
-    TableCell,
-    TableRow
-} from '@mui/material';
+import { TableBody, TableCell, TableRow } from '@mui/material';
 import {
     StyledTable,
     StyledTableContainer,
     StyledEmptyRow,
     StyledProgressCell,
-    StyledLinearProgress
-} from './NsTable.styled'
-import type {
-    NsTableProps,
-    Item,
-    OrderType,
-} from './types'
-import {stableSort, getComparator} from './helper'
+    StyledLinearProgress,
+} from './NsTable.styled';
+import type { NsTableProps, Item, OrderType } from './types';
+import { stableSort, getComparator } from './helper';
 import NsTableHeader from './NsTableHeader';
-import NsTablePagination from './NsTablePagination'
-import ExpandableRow from './NsExpandableRow'
+import NsTablePagination from './NsTablePagination';
+import ExpandableRow from './NsExpandableRow';
 import Grid from '@mui/material/Grid';
 
 export default function NsTable({
@@ -37,13 +29,11 @@ export default function NsTable({
 }: NsTableProps) {
     const [order, setOrder] = useState<OrderType>('asc');
     const [orderBy, setOrderBy] = useState<keyof Item>(itemKey);
-    const [expandList, setExpandList] = useState<number[]>([]);
+    const [expandMap, setExpandMap] = useState<{ [key: number]: boolean }>({});
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(rows);
-    const [itemKeyList, setItemKeyList] = useState<string[]>([]);
-
-    useEffect(() => {
-        if (items.length) setItemKeyList(Object.keys(items[0]));
+    const itemKeyList = React.useMemo(() => {
+        return items.length ? Object.keys(items[0]) : [];
     }, [items]);
 
     useEffect(() => {
@@ -58,27 +48,18 @@ export default function NsTable({
     };
 
     const handleClick = (index: number) => {
-        if(isExpandableAll) {
-            let newList = expandList;
-            if(newList.includes(index)) {
-                let num = newList.indexOf(index);
-                if (num > -1) newList.splice(num, 1);
-            } else {
-                newList.push(index);
-            }
-            setExpandList([...newList]);
+        if (isExpandableAll) {
+            setExpandMap((prevState) => ({ ...prevState, [index]: !prevState[index] }));
         } else {
-            if(expandList.includes(index)) setExpandList([])
-            else setExpandList([index])
+            setExpandMap({ [index]: !expandMap[index] });
         }
     };
 
     const handleChangePage = (newPage: number) => {
-        setPage(newPage-1);
+        setPage(newPage - 1);
     };
-    
-    const emptyRows =
-        page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
+
+    const emptyRows = getEmptyRows();
 
     const visibleRows = React.useMemo(
         () =>
@@ -101,25 +82,23 @@ export default function NsTable({
                         rowCount={items.length}
                     />
                     <TableBody>
-                        {
-                            loading ? (
-                                <TableRow>
-                                    <StyledProgressCell colSpan={itemKeyList.length}>
-                                        <Grid container>
-                                            <Grid item xs={12}>
-                                                <StyledLinearProgress />
-                                            </Grid>
+                        {loading ? (
+                            <TableRow>
+                                <StyledProgressCell colSpan={itemKeyList.length}>
+                                    <Grid container>
+                                        <Grid item xs={12}>
+                                            <StyledLinearProgress />
                                         </Grid>
-                                    </StyledProgressCell>
-                                </TableRow>
-                            ) : null
-                        }
+                                    </Grid>
+                                </StyledProgressCell>
+                            </TableRow>
+                        ) : null}
                         {visibleRows.map((row, index) => {
                             return (
                                 <ExpandableRow
                                     key={index}
                                     expandableContent={expandableContent}
-                                    isExpand={expandList.includes(index)}
+                                    isExpand={expandMap[index]}
                                     handleClick={handleClick}
                                     row={row}
                                     index={index}
@@ -142,9 +121,13 @@ export default function NsTable({
                 rowsPerPageOptions={rowsPerPageOptions}
                 count={items.length}
                 rowsPerPage={rowsPerPage}
-                page={page+1}
+                page={page + 1}
                 onPageChange={handleChangePage}
             />
         </div>
     );
+
+    function getEmptyRows() {
+        return page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
+    }
 }