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.js
CHANGED
|
@@ -31597,15 +31597,7 @@ const ColumnIndicator = ({
|
|
|
31597
31597
|
onClick: handleClick,
|
|
31598
31598
|
onContextMenu: contextClick,
|
|
31599
31599
|
tabIndex: 0,
|
|
31600
|
-
children: [jsxRuntime.jsx("div", {
|
|
31601
|
-
onClick: handleClick,
|
|
31602
|
-
onContextMenu: contextClick,
|
|
31603
|
-
tabIndex: 0,
|
|
31604
|
-
children: jsxRuntime.jsx(Typography, {
|
|
31605
|
-
fontWeight: "medium",
|
|
31606
|
-
children: label !== undefined ? label : columnIndexToLabel(column)
|
|
31607
|
-
})
|
|
31608
|
-
}), jsxRuntime.jsx("div", {
|
|
31600
|
+
children: [label !== undefined ? label : columnIndexToLabel(column), jsxRuntime.jsx("div", {
|
|
31609
31601
|
onMouseDown: onMouseDown,
|
|
31610
31602
|
onClick: () => activate$1({
|
|
31611
31603
|
row: -1,
|
|
@@ -31621,7 +31613,32 @@ const ColumnIndicator = ({
|
|
|
31621
31613
|
cursor: 'ew-resize'
|
|
31622
31614
|
}
|
|
31623
31615
|
})]
|
|
31624
|
-
})
|
|
31616
|
+
})
|
|
31617
|
+
// <th
|
|
31618
|
+
// style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
|
|
31619
|
+
// className={classNames('ff-spreadsheet-header', {
|
|
31620
|
+
// 'ff-spreadsheet-header--selected': selected,
|
|
31621
|
+
// })}
|
|
31622
|
+
// onClick={handleClick}
|
|
31623
|
+
// onContextMenu={contextClick}
|
|
31624
|
+
// tabIndex={0}
|
|
31625
|
+
// >
|
|
31626
|
+
// {label !== undefined ? label : columnIndexToLabel(column)}
|
|
31627
|
+
// <div
|
|
31628
|
+
// onMouseDown={onMouseDown}
|
|
31629
|
+
// onClick={() => activate({ row: -1, column })}
|
|
31630
|
+
// style={{
|
|
31631
|
+
// zIndex: 'inherit',
|
|
31632
|
+
// width: '2px',
|
|
31633
|
+
// position: 'absolute',
|
|
31634
|
+
// right: 0,
|
|
31635
|
+
// top: 0,
|
|
31636
|
+
// height: '100%',
|
|
31637
|
+
// cursor: 'ew-resize',
|
|
31638
|
+
// }}
|
|
31639
|
+
// />
|
|
31640
|
+
// </th>
|
|
31641
|
+
;
|
|
31625
31642
|
};
|
|
31626
31643
|
const enhance$2 = ColumnIndicatorComponent => {
|
|
31627
31644
|
return function ColumnIndicatorWrapper(props) {
|
|
@@ -31711,7 +31728,8 @@ const RowIndicator = ({
|
|
|
31711
31728
|
return jsxRuntime.jsxs("th", {
|
|
31712
31729
|
style: {
|
|
31713
31730
|
height: `${rowHeight}px`,
|
|
31714
|
-
minWidth: '60px'
|
|
31731
|
+
minWidth: '60px',
|
|
31732
|
+
position: 'relative'
|
|
31715
31733
|
},
|
|
31716
31734
|
className: classNames('ff-spreadsheet-header', {
|
|
31717
31735
|
'ff-spreadsheet-header--selected': selected
|
|
@@ -31719,15 +31737,9 @@ const RowIndicator = ({
|
|
|
31719
31737
|
onClick: handleClick,
|
|
31720
31738
|
onContextMenu: contextClick,
|
|
31721
31739
|
tabIndex: 0,
|
|
31722
|
-
children: [jsxRuntime.jsx(
|
|
31723
|
-
|
|
31724
|
-
|
|
31725
|
-
zIndex: 2000
|
|
31726
|
-
},
|
|
31727
|
-
children: jsxRuntime.jsx(Typography, {
|
|
31728
|
-
fontWeight: "medium",
|
|
31729
|
-
children: label !== undefined ? label : row + 1
|
|
31730
|
-
})
|
|
31740
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
31741
|
+
fontWeight: "medium",
|
|
31742
|
+
children: label !== undefined ? label : row + 1
|
|
31731
31743
|
}), jsxRuntime.jsx("div", {
|
|
31732
31744
|
onMouseDown: onMouseDown,
|
|
31733
31745
|
onClick: () => activate$1({
|
|
@@ -32128,7 +32140,7 @@ const Copied = () => {
|
|
|
32128
32140
|
});
|
|
32129
32141
|
};
|
|
32130
32142
|
|
|
32131
|
-
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:
|
|
32143
|
+
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}";
|
|
32132
32144
|
styleInject(css_248z$n);
|
|
32133
32145
|
|
|
32134
32146
|
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}";
|