pixel-react 1.5.8 → 1.5.9
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/.storybook/main.ts +1 -7
- package/.storybook/preview-head.html +3 -0
- package/index.scss +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts +2 -2
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +17 -1
- package/lib/components/Excel/Types.d.ts +22 -1
- package/lib/components/Excel/dataConversion.d.ts +3 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.esm.js +264 -56
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +264 -56
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +60 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +39 -39
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +34 -28
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +0 -29
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +29 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +33 -0
- package/src/components/Excel/ExcelFile.stories.tsx +77 -67
- package/src/components/Excel/Types.ts +23 -1
- package/src/components/Excel/dataConversion.ts +173 -0
- package/src/components/Typography/Typography.scss +1 -36
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/src/assets/fonts/Poppins-Bold.ttf +0 -0
- package/src/assets/fonts/Poppins-Bold.woff2 +0 -0
- package/src/assets/fonts/Poppins-Medium.ttf +0 -0
- package/src/assets/fonts/Poppins-Medium.woff2 +0 -0
- package/src/assets/fonts/Poppins-Regular.ttf +0 -0
- package/src/assets/fonts/Poppins-Regular.woff2 +0 -0
- package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/src/assets/fonts/Poppins-SemiBold.woff2 +0 -0
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
package/lib/index.esm.js
CHANGED
@@ -845,7 +845,7 @@ const Icon = /*#__PURE__*/forwardRef(({
|
|
845
845
|
});
|
846
846
|
});
|
847
847
|
|
848
|
-
var css_248z$17 = "
|
848
|
+
var css_248z$17 = ".ff-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n.ff-text--regular {\n font-weight: 400;\n}\n.ff-text--medium {\n font-weight: 500;\n}\n.ff-text--semi-bold {\n font-weight: 600;\n}\n.ff-text--bold {\n font-weight: 700;\n}\n.ff-text .required-asterisk {\n color: var(--input-error-text-color);\n padding-right: 4px;\n}";
|
849
849
|
styleInject(css_248z$17);
|
850
850
|
|
851
851
|
const Typography = ({
|
@@ -1143,7 +1143,7 @@ const Drawer = ({
|
|
1143
1143
|
var css_248z$14 = ".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-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-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n align-items: center;\n cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 8px;\n}";
|
1144
1144
|
styleInject(css_248z$14);
|
1145
1145
|
|
1146
|
-
var css_248z$13 = "";
|
1146
|
+
var css_248z$13 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
|
1147
1147
|
styleInject(css_248z$13);
|
1148
1148
|
|
1149
1149
|
var css_248z$12 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\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-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-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 4px 8px;\n opacity: 0;\n z-index: 10000;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
|
@@ -7537,7 +7537,7 @@ function createFormControl(props = {}) {
|
|
7537
7537
|
timer = setTimeout(callback, wait);
|
7538
7538
|
};
|
7539
7539
|
const _updateValid = async (shouldUpdateValid) => {
|
7540
|
-
if (!
|
7540
|
+
if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
7541
7541
|
const isValid = _options.resolver
|
7542
7542
|
? isEmptyObject((await _executeSchema()).errors)
|
7543
7543
|
: await executeBuiltInValidation(_fields, true);
|
@@ -7549,7 +7549,7 @@ function createFormControl(props = {}) {
|
|
7549
7549
|
}
|
7550
7550
|
};
|
7551
7551
|
const _updateIsValidating = (names, isValidating) => {
|
7552
|
-
if (!
|
7552
|
+
if (!_options.disabled &&
|
7553
7553
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
7554
7554
|
(names || Array.from(_names.mount)).forEach((name) => {
|
7555
7555
|
if (name) {
|
@@ -7565,7 +7565,7 @@ function createFormControl(props = {}) {
|
|
7565
7565
|
}
|
7566
7566
|
};
|
7567
7567
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
7568
|
-
if (args && method && !
|
7568
|
+
if (args && method && !_options.disabled) {
|
7569
7569
|
_state.action = true;
|
7570
7570
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
7571
7571
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -7629,7 +7629,7 @@ function createFormControl(props = {}) {
|
|
7629
7629
|
const output = {
|
7630
7630
|
name,
|
7631
7631
|
};
|
7632
|
-
if (!
|
7632
|
+
if (!_options.disabled) {
|
7633
7633
|
const disabledField = !!(get$1(_fields, name) &&
|
7634
7634
|
get$1(_fields, name)._f &&
|
7635
7635
|
get$1(_fields, name)._f.disabled);
|
@@ -7765,7 +7765,7 @@ function createFormControl(props = {}) {
|
|
7765
7765
|
}
|
7766
7766
|
_names.unMount = new Set();
|
7767
7767
|
};
|
7768
|
-
const _getDirty = (name, data) => !
|
7768
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
7769
7769
|
(name && data && set$1(_formValues, name, data),
|
7770
7770
|
!deepEqual(getValues(), _defaultValues));
|
7771
7771
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8081,7 +8081,7 @@ function createFormControl(props = {}) {
|
|
8081
8081
|
};
|
8082
8082
|
const register = (name, options = {}) => {
|
8083
8083
|
let field = get$1(_fields, name);
|
8084
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8084
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
8085
8085
|
set$1(_fields, name, {
|
8086
8086
|
...(field || {}),
|
8087
8087
|
_f: {
|
@@ -8097,7 +8097,7 @@ function createFormControl(props = {}) {
|
|
8097
8097
|
field,
|
8098
8098
|
disabled: isBoolean(options.disabled)
|
8099
8099
|
? options.disabled
|
8100
|
-
:
|
8100
|
+
: _options.disabled,
|
8101
8101
|
name,
|
8102
8102
|
value: options.value,
|
8103
8103
|
});
|
@@ -8107,7 +8107,7 @@ function createFormControl(props = {}) {
|
|
8107
8107
|
}
|
8108
8108
|
return {
|
8109
8109
|
...(disabledIsDefined
|
8110
|
-
? { disabled: options.disabled ||
|
8110
|
+
? { disabled: options.disabled || _options.disabled }
|
8111
8111
|
: {}),
|
8112
8112
|
...(_options.progressive
|
8113
8113
|
? {
|
@@ -8191,6 +8191,12 @@ function createFormControl(props = {}) {
|
|
8191
8191
|
e.preventDefault && e.preventDefault();
|
8192
8192
|
e.persist && e.persist();
|
8193
8193
|
}
|
8194
|
+
if (_options.disabled) {
|
8195
|
+
if (onInvalid) {
|
8196
|
+
await onInvalid({ ..._formState.errors }, e);
|
8197
|
+
}
|
8198
|
+
return;
|
8199
|
+
}
|
8194
8200
|
let fieldValues = cloneObject(_formValues);
|
8195
8201
|
_subjects.state.next({
|
8196
8202
|
isSubmitting: true,
|
@@ -8369,7 +8375,9 @@ function createFormControl(props = {}) {
|
|
8369
8375
|
: fieldReference.ref;
|
8370
8376
|
if (fieldRef.focus) {
|
8371
8377
|
fieldRef.focus();
|
8372
|
-
options.shouldSelect &&
|
8378
|
+
options.shouldSelect &&
|
8379
|
+
isFunction$1(fieldRef.select) &&
|
8380
|
+
fieldRef.select();
|
8373
8381
|
}
|
8374
8382
|
}
|
8375
8383
|
};
|
@@ -8570,11 +8578,6 @@ function useForm(props = {}) {
|
|
8570
8578
|
values: control._getWatch(),
|
8571
8579
|
});
|
8572
8580
|
}, [props.shouldUnregister, control]);
|
8573
|
-
React__default.useEffect(() => {
|
8574
|
-
if (_formControl.current) {
|
8575
|
-
_formControl.current.watch = _formControl.current.watch.bind({});
|
8576
|
-
}
|
8577
|
-
}, [formState]);
|
8578
8581
|
_formControl.current.formState = getProxyFormState(formState, control);
|
8579
8582
|
return _formControl.current;
|
8580
8583
|
}
|
@@ -26991,6 +26994,26 @@ const ADD_ROW_TOP = 'ADD_ROW_TOP';
|
|
26991
26994
|
const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
|
26992
26995
|
const DELETE_ROW = 'DELETE_ROW';
|
26993
26996
|
const DELETE_COLUMN = 'DELETE_COLUMN';
|
26997
|
+
const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
|
26998
|
+
const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
|
26999
|
+
function setRowHeight(row, height) {
|
27000
|
+
return {
|
27001
|
+
type: SET_ROW_HEIGHT,
|
27002
|
+
payload: {
|
27003
|
+
row,
|
27004
|
+
height
|
27005
|
+
}
|
27006
|
+
};
|
27007
|
+
}
|
27008
|
+
function setColumnPosition(column, width) {
|
27009
|
+
return {
|
27010
|
+
type: SET_COLUMN_POSITION,
|
27011
|
+
payload: {
|
27012
|
+
column,
|
27013
|
+
width
|
27014
|
+
}
|
27015
|
+
};
|
27016
|
+
}
|
26994
27017
|
function bold(data) {
|
26995
27018
|
return {
|
26996
27019
|
type: BOLD,
|
@@ -29324,6 +29347,48 @@ function reducer(state, action) {
|
|
29324
29347
|
}
|
29325
29348
|
return state;
|
29326
29349
|
}
|
29350
|
+
case SET_ROW_HEIGHT:
|
29351
|
+
{
|
29352
|
+
const {
|
29353
|
+
row,
|
29354
|
+
height
|
29355
|
+
} = action.payload;
|
29356
|
+
const prevDimensions = state.rowDimensions[row] || {
|
29357
|
+
top: 0,
|
29358
|
+
height: 0
|
29359
|
+
};
|
29360
|
+
return {
|
29361
|
+
...state,
|
29362
|
+
rowDimensions: {
|
29363
|
+
...state.rowDimensions,
|
29364
|
+
[row]: {
|
29365
|
+
top: prevDimensions.top,
|
29366
|
+
height
|
29367
|
+
}
|
29368
|
+
}
|
29369
|
+
};
|
29370
|
+
}
|
29371
|
+
case SET_COLUMN_POSITION:
|
29372
|
+
{
|
29373
|
+
const {
|
29374
|
+
column,
|
29375
|
+
width
|
29376
|
+
} = action.payload;
|
29377
|
+
const prevDimensions = state.columnDimensions[column] || {
|
29378
|
+
left: 0,
|
29379
|
+
width: 0
|
29380
|
+
};
|
29381
|
+
return {
|
29382
|
+
...state,
|
29383
|
+
columnDimensions: {
|
29384
|
+
...state.columnDimensions,
|
29385
|
+
[column]: {
|
29386
|
+
left: prevDimensions.left,
|
29387
|
+
width
|
29388
|
+
}
|
29389
|
+
}
|
29390
|
+
};
|
29391
|
+
}
|
29327
29392
|
case DRAG_START:
|
29328
29393
|
{
|
29329
29394
|
return {
|
@@ -30466,7 +30531,7 @@ const ColumnIndicator = ({
|
|
30466
30531
|
data
|
30467
30532
|
}) => {
|
30468
30533
|
const dispatch = useDispatch();
|
30469
|
-
const [width
|
30534
|
+
const columnWidth = useSelector(state => state.columnDimensions[column]?.width || 100);
|
30470
30535
|
const options = [{
|
30471
30536
|
label: 'Add Column',
|
30472
30537
|
value: 'Add Column',
|
@@ -30484,26 +30549,24 @@ const ColumnIndicator = ({
|
|
30484
30549
|
},
|
30485
30550
|
disable: false
|
30486
30551
|
}];
|
30487
|
-
const onMouseDown =
|
30488
|
-
|
30552
|
+
const onMouseDown = React.useCallback(event => {
|
30553
|
+
onSelect(column, event.shiftKey);
|
30554
|
+
const startX = event.clientX;
|
30555
|
+
const initialWidth = columnWidth;
|
30489
30556
|
const onMouseMove = moveEvent => {
|
30490
|
-
const newWidth =
|
30491
|
-
|
30492
|
-
const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
|
30493
|
-
const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
|
30494
|
-
if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
|
30495
|
-
selectedAllRow.style.width = `${newWidth}px`;
|
30496
|
-
selectedSingleRow.style.width = `${newWidth}px`;
|
30497
|
-
}
|
30557
|
+
const newWidth = Math.max(100, initialWidth + (moveEvent.clientX - startX));
|
30558
|
+
dispatch(setColumnPosition(column, newWidth));
|
30498
30559
|
};
|
30499
30560
|
const onMouseUp = () => {
|
30500
30561
|
document.removeEventListener('mousemove', onMouseMove);
|
30501
30562
|
document.removeEventListener('mouseup', onMouseUp);
|
30563
|
+
dispatch(dragEnd());
|
30502
30564
|
};
|
30503
30565
|
document.addEventListener('mousemove', onMouseMove);
|
30504
30566
|
document.addEventListener('mouseup', onMouseUp);
|
30505
|
-
|
30506
|
-
|
30567
|
+
dispatch(dragStart());
|
30568
|
+
}, [column, columnWidth, dispatch]);
|
30569
|
+
const activate$1 = React.useCallback(point => dispatch(activate(point)), [dispatch]);
|
30507
30570
|
const handleClick = React.useCallback(event => {
|
30508
30571
|
onSelect(column, event.shiftKey);
|
30509
30572
|
}, [onSelect, column]);
|
@@ -30521,7 +30584,7 @@ const ColumnIndicator = ({
|
|
30521
30584
|
}, [onSelect, column, setContextMenu]);
|
30522
30585
|
return jsxs("th", {
|
30523
30586
|
style: {
|
30524
|
-
minWidth: `${
|
30587
|
+
minWidth: `${columnWidth}px`,
|
30525
30588
|
position: 'relative'
|
30526
30589
|
},
|
30527
30590
|
className: classNames('ff-spreadsheet-header', {
|
@@ -30532,8 +30595,10 @@ const ColumnIndicator = ({
|
|
30532
30595
|
tabIndex: 0,
|
30533
30596
|
children: [label !== undefined ? label : columnIndexToLabel(column), jsx("div", {
|
30534
30597
|
onMouseDown: onMouseDown,
|
30535
|
-
onClick: () => {
|
30536
|
-
|
30598
|
+
onClick: () => activate$1({
|
30599
|
+
row: -1,
|
30600
|
+
column
|
30601
|
+
}),
|
30537
30602
|
style: {
|
30538
30603
|
zIndex: 'inherit',
|
30539
30604
|
width: '2px',
|
@@ -30558,7 +30623,7 @@ const enhance$2 = ColumnIndicatorComponent => {
|
|
30558
30623
|
});
|
30559
30624
|
};
|
30560
30625
|
};
|
30561
|
-
|
30626
|
+
const EnhancedColumnIndicator = enhance$2(ColumnIndicator);
|
30562
30627
|
function columnIndexToLabel(column) {
|
30563
30628
|
let label = '';
|
30564
30629
|
let index = column;
|
@@ -30579,7 +30644,8 @@ const RowIndicator = ({
|
|
30579
30644
|
deleteRow,
|
30580
30645
|
data
|
30581
30646
|
}) => {
|
30582
|
-
const
|
30647
|
+
const dispatch = useDispatch();
|
30648
|
+
const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 28);
|
30583
30649
|
const options = [{
|
30584
30650
|
label: 'Add Row',
|
30585
30651
|
value: 'Add Row',
|
@@ -30597,25 +30663,24 @@ const RowIndicator = ({
|
|
30597
30663
|
},
|
30598
30664
|
disable: false
|
30599
30665
|
}];
|
30600
|
-
const onMouseDown =
|
30601
|
-
|
30666
|
+
const onMouseDown = React.useCallback(event => {
|
30667
|
+
onSelect(row, event.shiftKey);
|
30668
|
+
const startY = event.clientY;
|
30669
|
+
const initialHeight = rowHeight;
|
30602
30670
|
const onMouseMove = moveEvent => {
|
30603
|
-
const newHeight =
|
30604
|
-
|
30605
|
-
const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
|
30606
|
-
const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
|
30607
|
-
if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
|
30608
|
-
selectedAllRow.style.height = `${newHeight}px`;
|
30609
|
-
selectedSingleRow.style.height = `${newHeight}px`;
|
30610
|
-
}
|
30671
|
+
const newHeight = Math.max(28, initialHeight + (moveEvent.clientY - startY));
|
30672
|
+
dispatch(setRowHeight(row, newHeight));
|
30611
30673
|
};
|
30612
30674
|
const onMouseUp = () => {
|
30613
30675
|
document.removeEventListener('mousemove', onMouseMove);
|
30614
30676
|
document.removeEventListener('mouseup', onMouseUp);
|
30677
|
+
dispatch(dragEnd());
|
30615
30678
|
};
|
30616
30679
|
document.addEventListener('mousemove', onMouseMove);
|
30617
30680
|
document.addEventListener('mouseup', onMouseUp);
|
30618
|
-
|
30681
|
+
dispatch(dragEnd());
|
30682
|
+
}, [onSelect, rowHeight, row]);
|
30683
|
+
const activate$1 = React.useCallback(point => dispatch(activate(point)), [dispatch]);
|
30619
30684
|
const handleClick = React.useCallback(event => {
|
30620
30685
|
onSelect(row, event.shiftKey);
|
30621
30686
|
}, [onSelect, row]);
|
@@ -30633,8 +30698,7 @@ const RowIndicator = ({
|
|
30633
30698
|
}, [onSelect, row, setContextMenu]);
|
30634
30699
|
return jsxs("th", {
|
30635
30700
|
style: {
|
30636
|
-
height: `${
|
30637
|
-
minWidth: '60px',
|
30701
|
+
height: `${rowHeight}px`,
|
30638
30702
|
position: 'relative'
|
30639
30703
|
},
|
30640
30704
|
className: classNames('ff-spreadsheet-header', {
|
@@ -30645,6 +30709,10 @@ const RowIndicator = ({
|
|
30645
30709
|
tabIndex: 0,
|
30646
30710
|
children: [label !== undefined ? label : row + 1, jsx("div", {
|
30647
30711
|
onMouseDown: onMouseDown,
|
30712
|
+
onClick: () => activate$1({
|
30713
|
+
row,
|
30714
|
+
column: -1
|
30715
|
+
}),
|
30648
30716
|
style: {
|
30649
30717
|
zIndex: 'inherit',
|
30650
30718
|
height: '2px',
|
@@ -31038,7 +31106,7 @@ const Copied = () => {
|
|
31038
31106
|
});
|
31039
31107
|
};
|
31040
31108
|
|
31041
|
-
var css_248z$f = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm
|
31109
|
+
var css_248z$f = ".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-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\n.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(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.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\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.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\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
|
31042
31110
|
styleInject(css_248z$f);
|
31043
31111
|
|
31044
31112
|
var css_248z$e = ".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}";
|
@@ -31580,7 +31648,7 @@ const Spreadsheet = props => {
|
|
31580
31648
|
}, [props.Cell]);
|
31581
31649
|
const CornerIndicator$1 = React.useMemo(() => enhance$3(props.CornerIndicator || CornerIndicator), [props.CornerIndicator]);
|
31582
31650
|
const RowIndicator$1 = React.useMemo(() => enhance$1(props.RowIndicator || RowIndicator), [props.RowIndicator]);
|
31583
|
-
const ColumnIndicator
|
31651
|
+
const ColumnIndicator = React.useMemo(() => enhance$2(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator]);
|
31584
31652
|
React.useEffect(() => {
|
31585
31653
|
document.addEventListener('cut', handleCut);
|
31586
31654
|
document.addEventListener('copy', handleCopy);
|
@@ -31594,14 +31662,14 @@ const Spreadsheet = props => {
|
|
31594
31662
|
const tableNode = React.useMemo(() => jsxs(Table$1, {
|
31595
31663
|
columns: size.columns,
|
31596
31664
|
children: [jsxs(HeaderRow$1, {
|
31597
|
-
children: [jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsx(ColumnIndicator
|
31665
|
+
children: [jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsx(ColumnIndicator, {
|
31598
31666
|
column: columnNumber,
|
31599
31667
|
setContextMenu: props.setContextMenu,
|
31600
31668
|
label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
|
31601
31669
|
deleteColumn: deleteColumn$1,
|
31602
31670
|
addColumnLeft: addColumnLeft$1,
|
31603
31671
|
data: props.data
|
31604
|
-
}, columnNumber) : jsx(ColumnIndicator
|
31672
|
+
}, columnNumber) : jsx(ColumnIndicator, {
|
31605
31673
|
column: columnNumber,
|
31606
31674
|
setContextMenu: props.setContextMenu,
|
31607
31675
|
deleteColumn: deleteColumn$1,
|
@@ -31631,7 +31699,7 @@ const Spreadsheet = props => {
|
|
31631
31699
|
DataViewer: DataViewer$1
|
31632
31700
|
}, columnNumber))]
|
31633
31701
|
}, rowNumber))]
|
31634
|
-
}), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator
|
31702
|
+
}), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
|
31635
31703
|
const activeCellNode = React.useMemo(() => jsx(ActiveCell
|
31636
31704
|
// @ts-ignore
|
31637
31705
|
, {
|
@@ -31699,9 +31767,112 @@ const ExcelContextMenu = ({
|
|
31699
31767
|
});
|
31700
31768
|
};
|
31701
31769
|
|
31770
|
+
const getTextAlignment = alignment => {
|
31771
|
+
switch (alignment.toLowerCase()) {
|
31772
|
+
case 'left':
|
31773
|
+
return 'left';
|
31774
|
+
case 'right':
|
31775
|
+
return 'right';
|
31776
|
+
case 'center':
|
31777
|
+
return 'center';
|
31778
|
+
case 'justify':
|
31779
|
+
return 'justify';
|
31780
|
+
default:
|
31781
|
+
return 'left';
|
31782
|
+
}
|
31783
|
+
};
|
31784
|
+
const getTextDecoration = textDecoration => {
|
31785
|
+
if (!textDecoration) {
|
31786
|
+
return 'solid';
|
31787
|
+
}
|
31788
|
+
switch (textDecoration.toLowerCase()) {
|
31789
|
+
case 'solid':
|
31790
|
+
return 'solid';
|
31791
|
+
case 'dotted':
|
31792
|
+
return 'dotted';
|
31793
|
+
case 'dashed':
|
31794
|
+
return 'dashed';
|
31795
|
+
case 'wavy':
|
31796
|
+
return 'wavy';
|
31797
|
+
default:
|
31798
|
+
return 'solid';
|
31799
|
+
}
|
31800
|
+
};
|
31801
|
+
const getTextAlignmentBack = alignment => {
|
31802
|
+
switch (alignment) {
|
31803
|
+
case 'left':
|
31804
|
+
return 'left';
|
31805
|
+
case 'right':
|
31806
|
+
return 'right';
|
31807
|
+
case 'center':
|
31808
|
+
return 'center';
|
31809
|
+
case 'justify':
|
31810
|
+
return 'justify';
|
31811
|
+
default:
|
31812
|
+
return 'left';
|
31813
|
+
}
|
31814
|
+
};
|
31815
|
+
function convertStyleToFrontend(backendStyle) {
|
31816
|
+
return {
|
31817
|
+
fontSize: `${backendStyle.size}px`,
|
31818
|
+
fontFamily: backendStyle.name,
|
31819
|
+
color: `#${backendStyle.color}`,
|
31820
|
+
backgroundColor: `#${backendStyle.backgroundColor}`,
|
31821
|
+
fontWeight: backendStyle.bold ? 'bold' : 'normal',
|
31822
|
+
fontStyle: backendStyle.italic ? 'italic' : 'normal',
|
31823
|
+
textDecoration: backendStyle.underline ? 'underline' : 'value',
|
31824
|
+
textDecorationStyle: getTextDecoration(backendStyle.underline),
|
31825
|
+
borderTop: backendStyle.border.top === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31826
|
+
borderRight: backendStyle.border.right === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31827
|
+
borderBottom: backendStyle.border.bottom === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31828
|
+
borderLeft: backendStyle.border.left === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31829
|
+
textAlign: getTextAlignment(backendStyle.alignment.horizontal)
|
31830
|
+
};
|
31831
|
+
}
|
31832
|
+
const getBorderStyle = border => {
|
31833
|
+
if (!border || border === 'none') {
|
31834
|
+
return 'NONE';
|
31835
|
+
}
|
31836
|
+
if (border.includes('solid') || border.includes('dashed') || border.includes('dotted')) {
|
31837
|
+
if (border.includes('2px') || border.includes('thin')) {
|
31838
|
+
return 'THIN';
|
31839
|
+
} else if (border.includes('3px') || border.includes('medium')) {
|
31840
|
+
return 'MEDIUM';
|
31841
|
+
} else if (border.includes('4px') || border.includes('thick')) {
|
31842
|
+
return 'THICK';
|
31843
|
+
}
|
31844
|
+
}
|
31845
|
+
return 'THIN';
|
31846
|
+
};
|
31847
|
+
const convertStyleToBackend = frontendStyle => {
|
31848
|
+
return {
|
31849
|
+
name: frontendStyle.fontFamily || 'Arial',
|
31850
|
+
size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
|
31851
|
+
bold: frontendStyle.fontWeight === 'bold',
|
31852
|
+
italic: frontendStyle.fontStyle === 'italic',
|
31853
|
+
underline: "solid",
|
31854
|
+
color: frontendStyle.color?.replace('#', '') || '000000',
|
31855
|
+
backgroundColor: frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
|
31856
|
+
borderColor: frontendStyle.borderTop && frontendStyle.borderTop.toString().includes('solid') ? 'F2F2F2' : '000000',
|
31857
|
+
border: {
|
31858
|
+
top: getBorderStyle(frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined),
|
31859
|
+
right: getBorderStyle(frontendStyle.borderRight ? frontendStyle.borderRight.toString() : undefined),
|
31860
|
+
bottom: getBorderStyle(frontendStyle.borderBottom ? frontendStyle.borderBottom.toString() : undefined),
|
31861
|
+
left: getBorderStyle(frontendStyle.borderLeft ? frontendStyle.borderLeft.toString() : undefined)
|
31862
|
+
},
|
31863
|
+
alignment: {
|
31864
|
+
horizontal: getTextAlignmentBack(frontendStyle.textAlign),
|
31865
|
+
vertical: 'BOTTOM',
|
31866
|
+
wrapText: false
|
31867
|
+
}
|
31868
|
+
};
|
31869
|
+
};
|
31870
|
+
|
31702
31871
|
const ExcelFile = ({
|
31703
31872
|
excelData,
|
31704
|
-
onSave =
|
31873
|
+
onSave = saveData => {
|
31874
|
+
saveData();
|
31875
|
+
}
|
31705
31876
|
}) => {
|
31706
31877
|
const [sheetNames, setSheetNames] = useState([]);
|
31707
31878
|
const [contextMenu, setContextMenu] = React__default.useState({
|
@@ -31788,7 +31959,7 @@ const ExcelFile = ({
|
|
31788
31959
|
}
|
31789
31960
|
spreadsheetData[rowIndex][colIndex] = {
|
31790
31961
|
value: checkVal(cell.value),
|
31791
|
-
style: cell
|
31962
|
+
style: convertStyleToFrontend(cell?.style),
|
31792
31963
|
type: true
|
31793
31964
|
};
|
31794
31965
|
}
|
@@ -31802,12 +31973,49 @@ const ExcelFile = ({
|
|
31802
31973
|
setSelectedSheetData(newWorksheetsData[firstSheetName]);
|
31803
31974
|
}
|
31804
31975
|
}, []);
|
31976
|
+
const onSaveWorksheetData = () => {
|
31977
|
+
const savedData = {
|
31978
|
+
sheets: sheetNames.map(sheetName => {
|
31979
|
+
const sheetData = worksheetsData[sheetName]?.map(row => {
|
31980
|
+
const lastIndex = row.reduce((lastIdx, cell, i) => {
|
31981
|
+
const hasValueOrTypeTrue = cell && cell.value !== null && !checkEmpty(cell && cell.value) || cell && cell.type === true;
|
31982
|
+
return hasValueOrTypeTrue ? i : lastIdx;
|
31983
|
+
}, -1);
|
31984
|
+
const filteredRow = row.map((cell, index) => {
|
31985
|
+
if (cell && cell.value !== null) {
|
31986
|
+
return {
|
31987
|
+
value: cell.value,
|
31988
|
+
styles: convertStyleToBackend(cell.style ?? {})
|
31989
|
+
};
|
31990
|
+
} else if (cell && cell.type || index <= lastIndex) {
|
31991
|
+
return {
|
31992
|
+
value: '',
|
31993
|
+
styles: convertStyleToBackend(cell?.style ?? {})
|
31994
|
+
};
|
31995
|
+
}
|
31996
|
+
return null;
|
31997
|
+
}).filter(cell => cell !== null);
|
31998
|
+
return filteredRow.length > 0 ? filteredRow : [];
|
31999
|
+
}) || [];
|
32000
|
+
const finalData = sheetData.filter((row, index) => {
|
32001
|
+
const isNextRowNotEmpty = sheetData.slice(index + 1).some(nextRow => nextRow.length > 0);
|
32002
|
+
return row.length > 0 || isNextRowNotEmpty;
|
32003
|
+
});
|
32004
|
+
return {
|
32005
|
+
sheetName: sheetName,
|
32006
|
+
data: checkEmpty(finalData.length) ? [[]] : finalData
|
32007
|
+
};
|
32008
|
+
})
|
32009
|
+
};
|
32010
|
+
onSave(savedData);
|
32011
|
+
toast.success('File saved successfully!');
|
32012
|
+
};
|
31805
32013
|
const onEvaluateChange = data => {
|
31806
32014
|
setWorksheetsData(prev => ({
|
31807
32015
|
...prev,
|
31808
32016
|
[pageRef.current]: data
|
31809
32017
|
}));
|
31810
|
-
|
32018
|
+
onSaveWorksheetData();
|
31811
32019
|
};
|
31812
32020
|
const [editingSheet, setEditingSheet] = useState(null);
|
31813
32021
|
const handleAddSheet = () => {
|
@@ -31847,7 +32055,7 @@ const ExcelFile = ({
|
|
31847
32055
|
} else {
|
31848
32056
|
setSelectedSheetData([]);
|
31849
32057
|
}
|
31850
|
-
}, [selectedSheet.name
|
32058
|
+
}, [selectedSheet.name]);
|
31851
32059
|
const handleDeleteSheet = () => {
|
31852
32060
|
const {
|
31853
32061
|
index,
|