pixel-react-excel-sheet 1.0.13 → 1.0.15
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/components/Excel/ExcelFile/ExcelFile.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +2 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.esm.js +11 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +11 -1
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +6 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +1 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +4 -1
- package/src/components/Excel/ExcelFile.stories.tsx +1 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +4 -0
package/lib/index.js
CHANGED
|
@@ -31816,7 +31816,7 @@ const Copied = () => {
|
|
|
31816
31816
|
});
|
|
31817
31817
|
};
|
|
31818
31818
|
|
|
31819
|
-
var css_248z$m = ".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: static;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\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(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n
|
|
31819
|
+
var css_248z$m = ".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: static;\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(--pop-up-background-blur);\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::-webkit-scrollbar {\n height: 0px;\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 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: 100;\n font-weight: 500;\n font-size: 12px;\n}\n.ff-excel .corner_indicator {\n padding-left: 20px;\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-header,\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-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}";
|
|
31820
31820
|
styleInject(css_248z$m);
|
|
31821
31821
|
|
|
31822
31822
|
var css_248z$l = ".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}";
|
|
@@ -32154,6 +32154,7 @@ const ExcelToolBar = ({
|
|
|
32154
32154
|
className: "ff-excel-toolbar-font-family",
|
|
32155
32155
|
children: jsxRuntime.jsx(Select$1, {
|
|
32156
32156
|
showLabel: false,
|
|
32157
|
+
optionZIndex: 10000,
|
|
32157
32158
|
onChange: e => {
|
|
32158
32159
|
setSelectedFontFamily({
|
|
32159
32160
|
label: e.label,
|
|
@@ -32173,6 +32174,7 @@ const ExcelToolBar = ({
|
|
|
32173
32174
|
className: "ff-excel-toolbar-font-size",
|
|
32174
32175
|
children: jsxRuntime.jsx(Select$1, {
|
|
32175
32176
|
showLabel: false,
|
|
32177
|
+
optionZIndex: 5000,
|
|
32176
32178
|
required: false,
|
|
32177
32179
|
onChange: e => setFontSize(data, e.value),
|
|
32178
32180
|
optionsList: fontSize,
|
|
@@ -32255,6 +32257,7 @@ const ExcelToolBar = ({
|
|
|
32255
32257
|
name: getUnderlineIcon()
|
|
32256
32258
|
}), jsxRuntime.jsx(MenuOption, {
|
|
32257
32259
|
iconName: "arrow_down",
|
|
32260
|
+
zIndex: 2000,
|
|
32258
32261
|
iconSize: 12,
|
|
32259
32262
|
options: underlineTypeIcon,
|
|
32260
32263
|
tooltipPlacement: "top",
|
|
@@ -32337,6 +32340,7 @@ const ExcelToolBar = ({
|
|
|
32337
32340
|
}), jsxRuntime.jsx(MenuOption, {
|
|
32338
32341
|
iconName: "arrow_down",
|
|
32339
32342
|
iconSize: 12,
|
|
32343
|
+
zIndex: 5000,
|
|
32340
32344
|
options: borderTypeIcon,
|
|
32341
32345
|
tooltipPlacement: "top",
|
|
32342
32346
|
variant: "light",
|
|
@@ -32377,6 +32381,7 @@ const Spreadsheet = props => {
|
|
|
32377
32381
|
onKeyDown,
|
|
32378
32382
|
Table: Table$1 = Table,
|
|
32379
32383
|
Row: Row$1 = Row,
|
|
32384
|
+
sheetHeight,
|
|
32380
32385
|
HeaderRow: HeaderRow$1 = HeaderRow,
|
|
32381
32386
|
DataEditor: DataEditor$1 = DataEditor,
|
|
32382
32387
|
DataViewer: DataViewer$1 = DataViewer,
|
|
@@ -32598,6 +32603,9 @@ const Spreadsheet = props => {
|
|
|
32598
32603
|
})
|
|
32599
32604
|
}), jsxRuntime.jsxs("div", {
|
|
32600
32605
|
ref: rootRef,
|
|
32606
|
+
style: {
|
|
32607
|
+
height: sheetHeight
|
|
32608
|
+
},
|
|
32601
32609
|
className: classNames('ff-spreadsheet', className),
|
|
32602
32610
|
onKeyDown: handleKeyDown,
|
|
32603
32611
|
onMouseMove: handleMouseMove,
|
|
@@ -32645,6 +32653,7 @@ const ExcelContextMenu = ({
|
|
|
32645
32653
|
|
|
32646
32654
|
const ExcelFile = ({
|
|
32647
32655
|
excelData,
|
|
32656
|
+
sheetHeight = '100%',
|
|
32648
32657
|
onSave = saveData => {
|
|
32649
32658
|
saveData();
|
|
32650
32659
|
}
|
|
@@ -33003,6 +33012,7 @@ const ExcelFile = ({
|
|
|
33003
33012
|
ref: sheetRef,
|
|
33004
33013
|
className: "ff-excel-sheet",
|
|
33005
33014
|
children: jsxRuntime.jsx(Spreadsheet, {
|
|
33015
|
+
sheetHeight: sheetHeight,
|
|
33006
33016
|
setContextMenu: setContextMenu,
|
|
33007
33017
|
data: selectedSheetData,
|
|
33008
33018
|
onEvaluatedDataChange: onEvaluateChange
|