@true-engineering/true-react-common-ui-kit 3.1.1 → 3.2.0

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,103 +1,117 @@
-import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import type { IFlexibleTableRowStyles } from './components';
-
-export const STICKY_SHADOW_PADDING = 12;
-
-export const useStyles = createThemedStyles('FlexibleTable', {
-  root: {
-    position: 'relative',
-    width: '100%',
-    borderCollapse: 'separate',
-    borderSpacing: 0,
-  },
-
-  scroll: {
-    overflow: 'auto',
-    /*
-      Чтобы сделать таблицу на всю высоту проставьте
-      height у родителя таблицы у себя в проекте.
-      Например: height: calc(100vh -{высота шапки}px)
-    */
-    maxHeight: '100%',
-  },
-
-  loader: {
-    position: 'sticky',
-    left: 0,
-    maxWidth: '100vw',
-    height: 48,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  headerRow: {
-    position: 'relative',
-    verticalAlign: 'bottom',
-  },
-
-  header: {
-    position: 'sticky',
-    boxSizing: 'content-box',
-    top: 0,
-    zIndex: 10,
-    fontSize: 12,
-    fontWeight: 'normal',
-    padding: [0, 7, 16, 7],
-  },
-
-  headerSticky: {
-    zIndex: 20,
-    left: 0,
-    paddingLeft: 24,
-    paddingRight: 12,
-
-    '&::before': {
-      content: '""',
-      display: 'block',
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      background: 'transparent',
-      pointerEvents: 'none',
-      zIndex: 1,
-      transition: ['box-shadow', '0.25s', 'ease-in-out'],
-
-      '[data-scrolled] &': {
-        boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-      },
-    },
-
-    '&::after': {
-      content: '""',
-      display: 'block',
-      width: STICKY_SHADOW_PADDING,
-      height: '100%',
-      position: 'absolute',
-      left: '100%',
-      top: 0,
-      background: `linear-gradient(90deg, ${colors.CLASSIC_WHITE}, ${rgba(
-        colors.CLASSIC_WHITE,
-        0,
-      )})`,
-      zIndex: 0,
-    },
-  },
-
-  headerSecond: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  skeleton: {
-    height: 21,
-    padding: [14, 7],
-  },
-});
-
-export type IFlexibleTableStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakTableRow: IFlexibleTableRowStyles }
->;
+import { rgba } from '../../helpers';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import type { IFlexibleTableRowStyles } from './components';
+
+export const STICKY_SHADOW_PADDING = 12;
+
+export const useStyles = createThemedStyles('FlexibleTable', {
+  root: {
+    position: 'relative',
+    width: '100%',
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+  },
+
+  scroll: {
+    overflow: 'auto',
+    /*
+      Чтобы сделать таблицу на всю высоту проставьте
+      height у родителя таблицы у себя в проекте.
+      Например: height: calc(100vh -{высота шапки}px)
+    */
+    maxHeight: '100%',
+  },
+
+  head: {},
+
+  body: {},
+
+  loaderRow: {},
+
+  loaderCell: {},
+
+  loader: {
+    position: 'sticky',
+    left: 0,
+    maxWidth: '100vw',
+    height: 48,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  headerRow: {
+    position: 'relative',
+    verticalAlign: 'bottom',
+  },
+
+  header: {
+    position: 'sticky',
+    boxSizing: 'content-box',
+    top: 0,
+    zIndex: 10,
+    fontSize: 12,
+    fontWeight: 'normal',
+    padding: [0, 7, 16, 7],
+  },
+
+  headerSticky: {
+    zIndex: 20,
+    left: 0,
+    paddingLeft: 24,
+    paddingRight: 12,
+
+    '&::before': {
+      content: '""',
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      background: 'transparent',
+      pointerEvents: 'none',
+      zIndex: 1,
+      transition: ['box-shadow', '0.25s', 'ease-in-out'],
+
+      '[data-scrolled] &': {
+        boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+      },
+    },
+
+    '&::after': {
+      content: '""',
+      display: 'block',
+      width: STICKY_SHADOW_PADDING,
+      height: '100%',
+      position: 'absolute',
+      left: '100%',
+      top: 0,
+      background: `linear-gradient(90deg, ${colors.CLASSIC_WHITE}, ${rgba(
+        colors.CLASSIC_WHITE,
+        0,
+      )})`,
+      zIndex: 0,
+    },
+  },
+
+  headerSecond: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  nothingFoundRow: {},
+
+  nothingFound: {},
+
+  skeletonRow: {},
+
+  skeleton: {
+    height: 21,
+    padding: [14, 7],
+  },
+});
+
+export type IFlexibleTableStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableRow: IFlexibleTableRowStyles }
+>;