Фронтенд для сервиса #5
@@ -8,6 +8,7 @@ var DataTable_module_scss_1 = tslib_1.__importDefault(require("./DataTable.modul
|
||||
function DataTable(_a) {
|
||||
var columns = _a.columns, rows = _a.rows, keyOf = _a.keyOf, emptyMessage = _a.emptyMessage;
|
||||
return (React.createElement("div", { className: DataTable_module_scss_1.default.wrap },
|
||||
React.createElement("div", { className: DataTable_module_scss_1.default.scroll },
|
||||
React.createElement("table", { className: DataTable_module_scss_1.default.table },
|
||||
React.createElement("thead", null,
|
||||
React.createElement("tr", null, columns.map(function (col) {
|
||||
@@ -17,7 +18,7 @@ function DataTable(_a) {
|
||||
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)));
|
||||
}))); }))),
|
||||
}))); })))),
|
||||
rows.length === 0 && React.createElement("div", { className: DataTable_module_scss_1.default.empty }, emptyMessage)));
|
||||
}
|
||||
var PrimaryCell = function (_a) {
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/DataTable.tsx"],"names":[],"mappings":";;;AAkBA,8BA4BC;;AA9CD,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,+BAAO,SAAS,EAAE,+BAAM,CAAC,KAAK;YAC5B;gBACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;oBAAI,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;iBAAA,CAAC,CACC,CACC;YACR,mCACG,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,CACf,4BAAI,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,IAChB,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;gBAAI,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;aAAA,CAAC,CACC,CACN,EARgB,CAQhB,CAAC,CACI,CACF;QACP,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 <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 {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":";;;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"]}
|
||||
+5
-1
@@ -45,8 +45,12 @@
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
@@ -218,15 +218,16 @@ __webpack_require__.r(__webpack_exports__);
|
||||
// Imports
|
||||
|
||||
|
||||
_node_modules_microsoft_sp_css_loader_node_modules_microsoft_load_themed_styles_lib_es6_index_js__WEBPACK_IMPORTED_MODULE_0__.loadStyles(":root{--navy-950:#0a1b30;--navy-900:#0f2440;--navy-800:#1b3a5c;--navy-700:#244b73;--navy-600:#2d5c8a;--navy-100:#e8eef4;--navy-50:#f4f7fa;--gold-600:#b8881a;--gold-500:#d4a01e;--gold-400:#e5b635;--gold-300:#f0cc5e;--gold-100:#fdf5e0;--gold-50:#fefbf0;--gray-900:#111827;--gray-700:#374151;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--red-500:#dc2626;--red-50:#fef2f2;--green-600:#15803d;--green-50:#f0fdf4;--blue-600:#2563eb;--blue-50:#eff6ff;--amber-700:#854d0e;--sh-1:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);--sh-2:0 4px 16px rgba(15,36,64,.07);--sh-3:0 12px 32px rgba(15,36,64,.1);--sh-gold:0 4px 20px rgba(212,160,30,.18);--sh-modal:0 24px 70px rgba(10,27,48,.25);--r-sm:6px;--r-md:10px;--r-lg:14px}.wrap_c8b7af27{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);overflow:hidden}.table_c8b7af27{border-collapse:collapse;font-size:13.5px;width:100%}.table_c8b7af27 thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;color:#9ca3af;font-size:10.5px;font-weight:600;letter-spacing:1.2px;padding:13px 18px;text-align:left;text-transform:uppercase;white-space:nowrap}.table_c8b7af27 tbody td{border-bottom:1px solid #f3f4f6;color:#374151;padding:15px 18px;vertical-align:middle}.table_c8b7af27 tbody tr:last-child td{border-bottom:0}.table_c8b7af27 tbody tr{transition:.12s}.table_c8b7af27 tbody tr:hover{background:#fefbf0}.primaryCell_c8b7af27{align-items:center;color:#0f2440;display:flex;font-weight:500;gap:10px}.actionsCell_c8b7af27{align-items:center;display:flex;gap:4px;justify-content:flex-end}.empty_c8b7af27{color:#9ca3af;font-size:13px;padding:48px 20px;text-align:center}", true);
|
||||
_node_modules_microsoft_sp_css_loader_node_modules_microsoft_load_themed_styles_lib_es6_index_js__WEBPACK_IMPORTED_MODULE_0__.loadStyles(":root{--navy-950:#0a1b30;--navy-900:#0f2440;--navy-800:#1b3a5c;--navy-700:#244b73;--navy-600:#2d5c8a;--navy-100:#e8eef4;--navy-50:#f4f7fa;--gold-600:#b8881a;--gold-500:#d4a01e;--gold-400:#e5b635;--gold-300:#f0cc5e;--gold-100:#fdf5e0;--gold-50:#fefbf0;--gray-900:#111827;--gray-700:#374151;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--red-500:#dc2626;--red-50:#fef2f2;--green-600:#15803d;--green-50:#f0fdf4;--blue-600:#2563eb;--blue-50:#eff6ff;--amber-700:#854d0e;--sh-1:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);--sh-2:0 4px 16px rgba(15,36,64,.07);--sh-3:0 12px 32px rgba(15,36,64,.1);--sh-gold:0 4px 20px rgba(212,160,30,.18);--sh-modal:0 24px 70px rgba(10,27,48,.25);--r-sm:6px;--r-md:10px;--r-lg:14px}.wrap_bf1aa6ad{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);overflow:hidden}.scroll_bf1aa6ad{overflow-x:auto}.table_bf1aa6ad{border-collapse:collapse;font-size:13.5px;min-width:100%}.table_bf1aa6ad thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;color:#9ca3af;font-size:10.5px;font-weight:600;letter-spacing:1.2px;padding:13px 18px;text-align:left;text-transform:uppercase;white-space:nowrap}.table_bf1aa6ad tbody td{border-bottom:1px solid #f3f4f6;color:#374151;padding:15px 18px;vertical-align:middle}.table_bf1aa6ad tbody tr:last-child td{border-bottom:0}.table_bf1aa6ad tbody tr{transition:.12s}.table_bf1aa6ad tbody tr:hover{background:#fefbf0}.primaryCell_bf1aa6ad{align-items:center;color:#0f2440;display:flex;font-weight:500;gap:10px}.actionsCell_bf1aa6ad{align-items:center;display:flex;gap:4px;justify-content:flex-end}.empty_bf1aa6ad{color:#9ca3af;font-size:13px;padding:48px 20px;text-align:center}", true);
|
||||
|
||||
// Exports
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
|
||||
wrap: "wrap_c8b7af27",
|
||||
table: "table_c8b7af27",
|
||||
primaryCell: "primaryCell_c8b7af27",
|
||||
actionsCell: "actionsCell_c8b7af27",
|
||||
empty: "empty_c8b7af27"
|
||||
wrap: "wrap_bf1aa6ad",
|
||||
scroll: "scroll_bf1aa6ad",
|
||||
table: "table_bf1aa6ad",
|
||||
primaryCell: "primaryCell_bf1aa6ad",
|
||||
actionsCell: "actionsCell_bf1aa6ad",
|
||||
empty: "empty_bf1aa6ad"
|
||||
});
|
||||
|
||||
|
||||
@@ -1345,6 +1346,7 @@ __webpack_require__.r(__webpack_exports__);
|
||||
function DataTable(_a) {
|
||||
var columns = _a.columns, rows = _a.rows, keyOf = _a.keyOf, emptyMessage = _a.emptyMessage;
|
||||
return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].wrap },
|
||||
react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].scroll },
|
||||
react__WEBPACK_IMPORTED_MODULE_0__.createElement("table", { className: _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].table },
|
||||
react__WEBPACK_IMPORTED_MODULE_0__.createElement("thead", null,
|
||||
react__WEBPACK_IMPORTED_MODULE_0__.createElement("tr", null, columns.map(function (col) {
|
||||
@@ -1354,7 +1356,7 @@ function DataTable(_a) {
|
||||
react__WEBPACK_IMPORTED_MODULE_0__.createElement("tbody", null, rows.map(function (row) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("tr", { key: keyOf(row) }, columns.map(function (col) {
|
||||
var _a;
|
||||
return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("td", { key: col.key, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
|
||||
}))); }))),
|
||||
}))); })))),
|
||||
rows.length === 0 && react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].empty }, emptyMessage)));
|
||||
}
|
||||
var PrimaryCell = function (_a) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -8,8 +8,17 @@
|
||||
border: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
// Внутренний скролл-контейнер: если колонок больше, чем помещается в узкую
|
||||
// колонку страницы (например, в редакторе SharePoint), таблица должна
|
||||
// скроллиться по горизонтали, а не обрезаться по overflow:hidden у .wrap.
|
||||
.scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
// min-width, не width: при большом числе колонок таблица должна иметь
|
||||
// право стать шире контейнера — тогда её подхватит .scroll (overflow-x).
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ export interface IDataTableProps<T> {
|
||||
export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.scroll}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -41,6 +42,7 @@ export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableP
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user