правочки

This commit is contained in:
gorbenko.pavel
2026-07-29 14:43:18 +05:00
parent 2bbdcc4ef7
commit 91361c439b
16 changed files with 73 additions and 18 deletions
@@ -13,11 +13,11 @@ function DataTable(_a) {
React.createElement("thead", null,
React.createElement("tr", null, columns.map(function (col) {
var _a;
return (React.createElement("th", { key: col.key, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
return (React.createElement("th", { key: col.key, className: col.sticky ? DataTable_module_scss_1.default.stickyCell : undefined, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
}))),
React.createElement("tbody", null, rows.map(function (row) { return (React.createElement("tr", { key: keyOf(row) }, columns.map(function (col) {
var _a;
return (React.createElement("td", { key: col.key, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
return (React.createElement("td", { key: col.key, className: col.sticky ? DataTable_module_scss_1.default.stickyCell : undefined, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
}))); })))),
rows.length === 0 && React.createElement("div", { className: DataTable_module_scss_1.default.empty }, emptyMessage)));
}
@@ -1 +1 @@
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/DataTable.tsx"],"names":[],"mappings":";;;AAkBA,8BA8BC;;AAhDD,mDAA+B;AAC/B,0FAA6C;AAiB7C,SAAgB,SAAS,CAAI,EAA0D;QAAxD,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,YAAY,kBAAA;IAC/D,OAAO,CACL,6BAAK,SAAS,EAAE,+BAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,+BAAM,CAAC,MAAM;YAC3B,+BAAO,SAAS,EAAE,+BAAM,CAAC,KAAK;gBAC5B;oBACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;wBAAI,OAAA,CAClB,4BAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAC1E,GAAG,CAAC,MAAM,CACR,CACN,CAAA;qBAAA,CAAC,CACC,CACC;gBACR,mCACG,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,CACf,4BAAI,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,IAChB,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;oBAAI,OAAA,CAClB,4BAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IACxD,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CACb,CACN,CAAA;iBAAA,CAAC,CACC,CACN,EARgB,CAQhB,CAAC,CACI,CACF,CACJ;QACL,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,6BAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,IAAG,YAAY,CAAO,CACpE,CACP,CAAC;AACJ,CAAC;AAEM,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB;AAEK,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB","sourcesContent":["import * as React from 'react';\nimport styles from './DataTable.module.scss';\n\nexport interface IColumn<T> {\n key: string;\n header: string;\n render: (row: T) => React.ReactNode;\n align?: 'left' | 'right' | 'center';\n width?: string;\n}\n\nexport interface IDataTableProps<T> {\n columns: IColumn<T>[];\n rows: T[];\n keyOf: (row: T) => string | number;\n emptyMessage: string;\n}\n\nexport function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {\n return (\n <div className={styles.wrap}>\n <div className={styles.scroll}>\n <table className={styles.table}>\n <thead>\n <tr>\n {columns.map(col => (\n <th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>\n {col.header}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map(row => (\n <tr key={keyOf(row)}>\n {columns.map(col => (\n <td key={col.key} style={{ textAlign: col.align ?? 'left' }}>\n {col.render(row)}\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n {rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}\n </div>\n );\n}\n\nexport const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <span className={styles.primaryCell}>{children}</span>\n);\n\nexport const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <span className={styles.actionsCell}>{children}</span>\n);\n"]}
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/DataTable.tsx"],"names":[],"mappings":";;;AAqBA,8BAsCC;;AA3DD,mDAA+B;AAC/B,0FAA6C;AAoB7C,SAAgB,SAAS,CAAI,EAA0D;QAAxD,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,YAAY,kBAAA;IAC/D,OAAO,CACL,6BAAK,SAAS,EAAE,+BAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,+BAAM,CAAC,MAAM;YAC3B,+BAAO,SAAS,EAAE,+BAAM,CAAC,KAAK;gBAC5B;oBACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;wBAAI,OAAA,CAClB,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,+BAAM,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACrD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAE1D,GAAG,CAAC,MAAM,CACR,CACN,CAAA;qBAAA,CAAC,CACC,CACC;gBACR,mCACG,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,CACf,4BAAI,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,IAChB,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;oBAAI,OAAA,CAClB,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,+BAAM,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACrD,KAAK,EAAE,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAExC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CACb,CACN,CAAA;iBAAA,CAAC,CACC,CACN,EAZgB,CAYhB,CAAC,CACI,CACF,CACJ;QACL,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,6BAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,IAAG,YAAY,CAAO,CACpE,CACP,CAAC;AACJ,CAAC;AAEM,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB;AAEK,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB","sourcesContent":["import * as React from 'react';\nimport styles from './DataTable.module.scss';\n\nexport interface IColumn<T> {\n key: string;\n header: string;\n render: (row: T) => React.ReactNode;\n align?: 'left' | 'right' | 'center';\n width?: string;\n // Держит колонку у правого края видимой области при горизонтальной\n // прокрутке — чтобы кнопки действий не уезжали за край на узких экранах.\n sticky?: boolean;\n}\n\nexport interface IDataTableProps<T> {\n columns: IColumn<T>[];\n rows: T[];\n keyOf: (row: T) => string | number;\n emptyMessage: string;\n}\n\nexport function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {\n return (\n <div className={styles.wrap}>\n <div className={styles.scroll}>\n <table className={styles.table}>\n <thead>\n <tr>\n {columns.map(col => (\n <th\n key={col.key}\n className={col.sticky ? styles.stickyCell : undefined}\n style={{ width: col.width, textAlign: col.align ?? 'left' }}\n >\n {col.header}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map(row => (\n <tr key={keyOf(row)}>\n {columns.map(col => (\n <td\n key={col.key}\n className={col.sticky ? styles.stickyCell : undefined}\n style={{ textAlign: col.align ?? 'left' }}\n >\n {col.render(row)}\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n {rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}\n </div>\n );\n}\n\nexport const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <span className={styles.primaryCell}>{children}</span>\n);\n\nexport const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <span className={styles.actionsCell}>{children}</span>\n);\n"]}
@@ -87,6 +87,25 @@
background: #FEFBF0;
}
.stickyCell {
position: sticky;
right: 0;
}
.table thead th.stickyCell {
z-index: 2;
}
.table tbody td.stickyCell {
background: #fff;
box-shadow: -6px 0 6px -6px rgba(15, 36, 64, 0.12);
z-index: 1;
}
.table tbody tr:hover td.stickyCell {
background: #FEFBF0;
}
.primaryCell {
font-weight: 500;
color: #0F2440;