pixel-react-excel-sheet 1.0.27 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.esm.js +33 -21
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +33 -21
- package/lib/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +26 -6
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +5 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +5 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +16 -16
package/lib/index.esm.js
CHANGED
|
@@ -31577,15 +31577,7 @@ const ColumnIndicator = ({
|
|
|
31577
31577
|
onClick: handleClick,
|
|
31578
31578
|
onContextMenu: contextClick,
|
|
31579
31579
|
tabIndex: 0,
|
|
31580
|
-
children: [jsx("div", {
|
|
31581
|
-
onClick: handleClick,
|
|
31582
|
-
onContextMenu: contextClick,
|
|
31583
|
-
tabIndex: 0,
|
|
31584
|
-
children: jsx(Typography, {
|
|
31585
|
-
fontWeight: "medium",
|
|
31586
|
-
children: label !== undefined ? label : columnIndexToLabel(column)
|
|
31587
|
-
})
|
|
31588
|
-
}), jsx("div", {
|
|
31580
|
+
children: [label !== undefined ? label : columnIndexToLabel(column), jsx("div", {
|
|
31589
31581
|
onMouseDown: onMouseDown,
|
|
31590
31582
|
onClick: () => activate$1({
|
|
31591
31583
|
row: -1,
|
|
@@ -31601,7 +31593,32 @@ const ColumnIndicator = ({
|
|
|
31601
31593
|
cursor: 'ew-resize'
|
|
31602
31594
|
}
|
|
31603
31595
|
})]
|
|
31604
|
-
})
|
|
31596
|
+
})
|
|
31597
|
+
// <th
|
|
31598
|
+
// style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
|
|
31599
|
+
// className={classNames('ff-spreadsheet-header', {
|
|
31600
|
+
// 'ff-spreadsheet-header--selected': selected,
|
|
31601
|
+
// })}
|
|
31602
|
+
// onClick={handleClick}
|
|
31603
|
+
// onContextMenu={contextClick}
|
|
31604
|
+
// tabIndex={0}
|
|
31605
|
+
// >
|
|
31606
|
+
// {label !== undefined ? label : columnIndexToLabel(column)}
|
|
31607
|
+
// <div
|
|
31608
|
+
// onMouseDown={onMouseDown}
|
|
31609
|
+
// onClick={() => activate({ row: -1, column })}
|
|
31610
|
+
// style={{
|
|
31611
|
+
// zIndex: 'inherit',
|
|
31612
|
+
// width: '2px',
|
|
31613
|
+
// position: 'absolute',
|
|
31614
|
+
// right: 0,
|
|
31615
|
+
// top: 0,
|
|
31616
|
+
// height: '100%',
|
|
31617
|
+
// cursor: 'ew-resize',
|
|
31618
|
+
// }}
|
|
31619
|
+
// />
|
|
31620
|
+
// </th>
|
|
31621
|
+
;
|
|
31605
31622
|
};
|
|
31606
31623
|
const enhance$2 = ColumnIndicatorComponent => {
|
|
31607
31624
|
return function ColumnIndicatorWrapper(props) {
|
|
@@ -31691,7 +31708,8 @@ const RowIndicator = ({
|
|
|
31691
31708
|
return jsxs("th", {
|
|
31692
31709
|
style: {
|
|
31693
31710
|
height: `${rowHeight}px`,
|
|
31694
|
-
minWidth: '60px'
|
|
31711
|
+
minWidth: '60px',
|
|
31712
|
+
position: 'relative'
|
|
31695
31713
|
},
|
|
31696
31714
|
className: classNames('ff-spreadsheet-header', {
|
|
31697
31715
|
'ff-spreadsheet-header--selected': selected
|
|
@@ -31699,15 +31717,9 @@ const RowIndicator = ({
|
|
|
31699
31717
|
onClick: handleClick,
|
|
31700
31718
|
onContextMenu: contextClick,
|
|
31701
31719
|
tabIndex: 0,
|
|
31702
|
-
children: [jsx(
|
|
31703
|
-
|
|
31704
|
-
|
|
31705
|
-
zIndex: 2000
|
|
31706
|
-
},
|
|
31707
|
-
children: jsx(Typography, {
|
|
31708
|
-
fontWeight: "medium",
|
|
31709
|
-
children: label !== undefined ? label : row + 1
|
|
31710
|
-
})
|
|
31720
|
+
children: [jsx(Typography, {
|
|
31721
|
+
fontWeight: "medium",
|
|
31722
|
+
children: label !== undefined ? label : row + 1
|
|
31711
31723
|
}), jsx("div", {
|
|
31712
31724
|
onMouseDown: onMouseDown,
|
|
31713
31725
|
onClick: () => activate$1({
|
|
@@ -32108,7 +32120,7 @@ const Copied = () => {
|
|
|
32108
32120
|
});
|
|
32109
32121
|
};
|
|
32110
32122
|
|
|
32111
|
-
var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n position: relative;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\n margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--excel-header-bg);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n background: var(--background-color);\n color: var(--text-color);\n scrollbar-width: none;\n display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n overflow: scroll;\n position: relative;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n position: fixed;\n z-index:
|
|
32123
|
+
var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n position: relative;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\n margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--excel-header-bg);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n background: var(--background-color);\n color: var(--text-color);\n scrollbar-width: none;\n display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n overflow: scroll;\n top: 0;\n left: 0;\n margin: 0;\n position: relative;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n z-index: 1000;\n position: sticky;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n position: fixed;\n z-index: 2000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n height: 34px;\n}\n.ff-excel .corner-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1100;\n top: -1px;\n width: 60px;\n height: 34px;\n left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
|
|
32112
32124
|
styleInject(css_248z$n);
|
|
32113
32125
|
|
|
32114
32126
|
var css_248z$m = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
|