@true-engineering/true-react-common-ui-kit 2.1.0 → 2.1.1

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,86 +1,84 @@
-import { ComponentStory } from '@storybook/react';
-import { FC } from 'react';
-import { FlexibleTable } from './FlexibleTable';
-import { FlexibleTableConfigType } from './types';
-import content from './fixture-test';
-
-export default {
-  title: 'Table/FlexibleTable',
-  component: FlexibleTable,
-};
-
-interface ITableContent {
-  contractCode: string;
-  validFrom: Date;
-  validTo: Date;
-  title: string;
-  signDate: Date;
-  partner: string;
-  partnerDescription: string;
-  parentContract: string;
-  currency: string;
-  status: string;
-}
-
-const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
-const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
-
-const config: FlexibleTableConfigType<ITableContent> = {
-  contractCode: {
-    title: 'Contract Code',
-  },
-  title: {
-    component: Temp,
-    title: 'Title',
-    minWidth: 320,
-  },
-  validFrom: {
-    title: 'Valid From',
-  },
-  validTo: {
-    title: 'Valid From',
-  },
-  signDate: {
-    title: 'Sign Date',
-  },
-  partner: {
-    component: Temp1,
-    title: 'Partner',
-  },
-};
-
-const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (
-  args,
-) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    content={content}
-    config={config}
-  />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isHorizontallyScrollable: true,
-  isFirstColumnSticky: true,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'onHeadClick',
-      'onRowClick',
-      'onRowHover',
-      'expandableRowComponent',
-    ],
-  },
-};
+import { FC } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { FlexibleTable } from './FlexibleTable';
+import content from './fixture-test';
+import { FlexibleTableConfigType } from './types';
+
+export default {
+  title: 'Table/FlexibleTable',
+  component: FlexibleTable,
+};
+
+interface ITableContent {
+  contractCode: string;
+  validFrom: Date;
+  validTo: Date;
+  title: string;
+  signDate: Date;
+  partner: string;
+  partnerDescription: string;
+  parentContract: string;
+  currency: string;
+  status: string;
+}
+
+const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
+const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
+
+const config: FlexibleTableConfigType<ITableContent> = {
+  contractCode: {
+    title: 'Contract Code',
+  },
+  title: {
+    component: Temp,
+    title: 'Title',
+    minWidth: 320,
+  },
+  validFrom: {
+    title: 'Valid From',
+  },
+  validTo: {
+    title: 'Valid From',
+  },
+  signDate: {
+    title: 'Sign Date',
+  },
+  partner: {
+    component: Temp1,
+    title: 'Partner',
+  },
+};
+
+const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
+  <FlexibleTable<ITableContent>
+    {...args}
+    uniqueField="contractCode"
+    expandableRowComponent={(item, _, close) =>
+      item.contractCode === 'OB_UT_M119' ? (
+        <div onClick={close}>всем привет :) {item.contractCode}</div>
+      ) : null
+    }
+    content={content}
+    config={config}
+  />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isHorizontallyScrollable: true,
+  isFirstColumnSticky: true,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'onHeadClick',
+      'onRowClick',
+      'onRowHover',
+      'expandableRowComponent',
+    ],
+  },
+};

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

@@ -1,131 +1,131 @@
-import { colors } from '../../theme';
-import { rgba } from '../../helpers';
-import { ComponentStyles } from '../../types';
-
-const STICKY_SHADOW_PADDING = 12;
-
-export const styles = {
-  root: {
-    position: 'relative',
-    width: '100%',
-    borderCollapse: 'separate',
-    borderSpacing: 0,
-  },
-
-  row: {
-    position: 'relative',
-  },
-
-  scroll: {
-    overflow: 'auto',
-    /*
-      Чтобы сделать таблицу на всю высоту проставьте
-      height у родителя таблицы у себя в проекте.
-      Например: height: calc(100vh -{высота шапки}px)
-    */
-    maxHeight: '100%',
-  },
-
-  horizontallyScrolled: {
-    '& $cellSticky': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-
-    '& $headerSticky::before': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
-  loader: {
-    position: 'sticky',
-    left: 0,
-    maxWidth: '100vw',
-    height: 48,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  headerRow: {
-    verticalAlign: 'bottom',
-  },
-
-  activeRow: {},
-
-  cell: {
-    position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7, 14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  cellSticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    transition: ['box-shadow', '0.25s', 'ease-in-out'],
-  },
-
-  cellSecond: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  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'],
-    },
-
-    '&::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,
-  },
-
-  editableRow: {
-    cursor: 'pointer',
-  },
-};
-
-export type FlexibleTableStyles = ComponentStyles<typeof styles>;
+import { rgba } from '../../helpers';
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+const STICKY_SHADOW_PADDING = 12;
+
+export const styles = {
+  root: {
+    position: 'relative',
+    width: '100%',
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+  },
+
+  row: {
+    position: 'relative',
+  },
+
+  scroll: {
+    overflow: 'auto',
+    /*
+      Чтобы сделать таблицу на всю высоту проставьте
+      height у родителя таблицы у себя в проекте.
+      Например: height: calc(100vh -{высота шапки}px)
+    */
+    maxHeight: '100%',
+  },
+
+  horizontallyScrolled: {
+    '& $cellSticky': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+
+    '& $headerSticky::before': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+  },
+
+  loader: {
+    position: 'sticky',
+    left: 0,
+    maxWidth: '100vw',
+    height: 48,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  headerRow: {
+    verticalAlign: 'bottom',
+  },
+
+  activeRow: {},
+
+  cell: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7, 14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  cellSticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    transition: ['box-shadow', '0.25s', 'ease-in-out'],
+  },
+
+  cellSecond: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  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'],
+    },
+
+    '&::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,
+  },
+
+  editableRow: {
+    cursor: 'pointer',
+  },
+};
+
+export type FlexibleTableStyles = ComponentStyles<typeof styles>;