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.js
CHANGED
@@ -865,7 +865,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
|
|
865
865
|
});
|
866
866
|
});
|
867
867
|
|
868
|
-
var css_248z$17 = "
|
868
|
+
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}";
|
869
869
|
styleInject(css_248z$17);
|
870
870
|
|
871
871
|
const Typography = ({
|
@@ -1163,7 +1163,7 @@ const Drawer = ({
|
|
1163
1163
|
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}";
|
1164
1164
|
styleInject(css_248z$14);
|
1165
1165
|
|
1166
|
-
var css_248z$13 = "";
|
1166
|
+
var css_248z$13 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
|
1167
1167
|
styleInject(css_248z$13);
|
1168
1168
|
|
1169
1169
|
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}";
|
@@ -7557,7 +7557,7 @@ function createFormControl(props = {}) {
|
|
7557
7557
|
timer = setTimeout(callback, wait);
|
7558
7558
|
};
|
7559
7559
|
const _updateValid = async (shouldUpdateValid) => {
|
7560
|
-
if (!
|
7560
|
+
if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
7561
7561
|
const isValid = _options.resolver
|
7562
7562
|
? isEmptyObject((await _executeSchema()).errors)
|
7563
7563
|
: await executeBuiltInValidation(_fields, true);
|
@@ -7569,7 +7569,7 @@ function createFormControl(props = {}) {
|
|
7569
7569
|
}
|
7570
7570
|
};
|
7571
7571
|
const _updateIsValidating = (names, isValidating) => {
|
7572
|
-
if (!
|
7572
|
+
if (!_options.disabled &&
|
7573
7573
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
7574
7574
|
(names || Array.from(_names.mount)).forEach((name) => {
|
7575
7575
|
if (name) {
|
@@ -7585,7 +7585,7 @@ function createFormControl(props = {}) {
|
|
7585
7585
|
}
|
7586
7586
|
};
|
7587
7587
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
7588
|
-
if (args && method && !
|
7588
|
+
if (args && method && !_options.disabled) {
|
7589
7589
|
_state.action = true;
|
7590
7590
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
7591
7591
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -7649,7 +7649,7 @@ function createFormControl(props = {}) {
|
|
7649
7649
|
const output = {
|
7650
7650
|
name,
|
7651
7651
|
};
|
7652
|
-
if (!
|
7652
|
+
if (!_options.disabled) {
|
7653
7653
|
const disabledField = !!(get$1(_fields, name) &&
|
7654
7654
|
get$1(_fields, name)._f &&
|
7655
7655
|
get$1(_fields, name)._f.disabled);
|
@@ -7785,7 +7785,7 @@ function createFormControl(props = {}) {
|
|
7785
7785
|
}
|
7786
7786
|
_names.unMount = new Set();
|
7787
7787
|
};
|
7788
|
-
const _getDirty = (name, data) => !
|
7788
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
7789
7789
|
(name && data && set$1(_formValues, name, data),
|
7790
7790
|
!deepEqual(getValues(), _defaultValues));
|
7791
7791
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8101,7 +8101,7 @@ function createFormControl(props = {}) {
|
|
8101
8101
|
};
|
8102
8102
|
const register = (name, options = {}) => {
|
8103
8103
|
let field = get$1(_fields, name);
|
8104
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8104
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
8105
8105
|
set$1(_fields, name, {
|
8106
8106
|
...(field || {}),
|
8107
8107
|
_f: {
|
@@ -8117,7 +8117,7 @@ function createFormControl(props = {}) {
|
|
8117
8117
|
field,
|
8118
8118
|
disabled: isBoolean(options.disabled)
|
8119
8119
|
? options.disabled
|
8120
|
-
:
|
8120
|
+
: _options.disabled,
|
8121
8121
|
name,
|
8122
8122
|
value: options.value,
|
8123
8123
|
});
|
@@ -8127,7 +8127,7 @@ function createFormControl(props = {}) {
|
|
8127
8127
|
}
|
8128
8128
|
return {
|
8129
8129
|
...(disabledIsDefined
|
8130
|
-
? { disabled: options.disabled ||
|
8130
|
+
? { disabled: options.disabled || _options.disabled }
|
8131
8131
|
: {}),
|
8132
8132
|
...(_options.progressive
|
8133
8133
|
? {
|
@@ -8211,6 +8211,12 @@ function createFormControl(props = {}) {
|
|
8211
8211
|
e.preventDefault && e.preventDefault();
|
8212
8212
|
e.persist && e.persist();
|
8213
8213
|
}
|
8214
|
+
if (_options.disabled) {
|
8215
|
+
if (onInvalid) {
|
8216
|
+
await onInvalid({ ..._formState.errors }, e);
|
8217
|
+
}
|
8218
|
+
return;
|
8219
|
+
}
|
8214
8220
|
let fieldValues = cloneObject(_formValues);
|
8215
8221
|
_subjects.state.next({
|
8216
8222
|
isSubmitting: true,
|
@@ -8389,7 +8395,9 @@ function createFormControl(props = {}) {
|
|
8389
8395
|
: fieldReference.ref;
|
8390
8396
|
if (fieldRef.focus) {
|
8391
8397
|
fieldRef.focus();
|
8392
|
-
options.shouldSelect &&
|
8398
|
+
options.shouldSelect &&
|
8399
|
+
isFunction$1(fieldRef.select) &&
|
8400
|
+
fieldRef.select();
|
8393
8401
|
}
|
8394
8402
|
}
|
8395
8403
|
};
|
@@ -8590,11 +8598,6 @@ function useForm(props = {}) {
|
|
8590
8598
|
values: control._getWatch(),
|
8591
8599
|
});
|
8592
8600
|
}, [props.shouldUnregister, control]);
|
8593
|
-
React.useEffect(() => {
|
8594
|
-
if (_formControl.current) {
|
8595
|
-
_formControl.current.watch = _formControl.current.watch.bind({});
|
8596
|
-
}
|
8597
|
-
}, [formState]);
|
8598
8601
|
_formControl.current.formState = getProxyFormState(formState, control);
|
8599
8602
|
return _formControl.current;
|
8600
8603
|
}
|
@@ -27011,6 +27014,26 @@ const ADD_ROW_TOP = 'ADD_ROW_TOP';
|
|
27011
27014
|
const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
|
27012
27015
|
const DELETE_ROW = 'DELETE_ROW';
|
27013
27016
|
const DELETE_COLUMN = 'DELETE_COLUMN';
|
27017
|
+
const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
|
27018
|
+
const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
|
27019
|
+
function setRowHeight(row, height) {
|
27020
|
+
return {
|
27021
|
+
type: SET_ROW_HEIGHT,
|
27022
|
+
payload: {
|
27023
|
+
row,
|
27024
|
+
height
|
27025
|
+
}
|
27026
|
+
};
|
27027
|
+
}
|
27028
|
+
function setColumnPosition(column, width) {
|
27029
|
+
return {
|
27030
|
+
type: SET_COLUMN_POSITION,
|
27031
|
+
payload: {
|
27032
|
+
column,
|
27033
|
+
width
|
27034
|
+
}
|
27035
|
+
};
|
27036
|
+
}
|
27014
27037
|
function bold(data) {
|
27015
27038
|
return {
|
27016
27039
|
type: BOLD,
|
@@ -29344,6 +29367,48 @@ function reducer(state, action) {
|
|
29344
29367
|
}
|
29345
29368
|
return state;
|
29346
29369
|
}
|
29370
|
+
case SET_ROW_HEIGHT:
|
29371
|
+
{
|
29372
|
+
const {
|
29373
|
+
row,
|
29374
|
+
height
|
29375
|
+
} = action.payload;
|
29376
|
+
const prevDimensions = state.rowDimensions[row] || {
|
29377
|
+
top: 0,
|
29378
|
+
height: 0
|
29379
|
+
};
|
29380
|
+
return {
|
29381
|
+
...state,
|
29382
|
+
rowDimensions: {
|
29383
|
+
...state.rowDimensions,
|
29384
|
+
[row]: {
|
29385
|
+
top: prevDimensions.top,
|
29386
|
+
height
|
29387
|
+
}
|
29388
|
+
}
|
29389
|
+
};
|
29390
|
+
}
|
29391
|
+
case SET_COLUMN_POSITION:
|
29392
|
+
{
|
29393
|
+
const {
|
29394
|
+
column,
|
29395
|
+
width
|
29396
|
+
} = action.payload;
|
29397
|
+
const prevDimensions = state.columnDimensions[column] || {
|
29398
|
+
left: 0,
|
29399
|
+
width: 0
|
29400
|
+
};
|
29401
|
+
return {
|
29402
|
+
...state,
|
29403
|
+
columnDimensions: {
|
29404
|
+
...state.columnDimensions,
|
29405
|
+
[column]: {
|
29406
|
+
left: prevDimensions.left,
|
29407
|
+
width
|
29408
|
+
}
|
29409
|
+
}
|
29410
|
+
};
|
29411
|
+
}
|
29347
29412
|
case DRAG_START:
|
29348
29413
|
{
|
29349
29414
|
return {
|
@@ -30486,7 +30551,7 @@ const ColumnIndicator = ({
|
|
30486
30551
|
data
|
30487
30552
|
}) => {
|
30488
30553
|
const dispatch = useDispatch();
|
30489
|
-
const [width
|
30554
|
+
const columnWidth = useSelector(state => state.columnDimensions[column]?.width || 100);
|
30490
30555
|
const options = [{
|
30491
30556
|
label: 'Add Column',
|
30492
30557
|
value: 'Add Column',
|
@@ -30504,26 +30569,24 @@ const ColumnIndicator = ({
|
|
30504
30569
|
},
|
30505
30570
|
disable: false
|
30506
30571
|
}];
|
30507
|
-
const onMouseDown =
|
30508
|
-
|
30572
|
+
const onMouseDown = React__namespace.useCallback(event => {
|
30573
|
+
onSelect(column, event.shiftKey);
|
30574
|
+
const startX = event.clientX;
|
30575
|
+
const initialWidth = columnWidth;
|
30509
30576
|
const onMouseMove = moveEvent => {
|
30510
|
-
const newWidth =
|
30511
|
-
|
30512
|
-
const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
|
30513
|
-
const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
|
30514
|
-
if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
|
30515
|
-
selectedAllRow.style.width = `${newWidth}px`;
|
30516
|
-
selectedSingleRow.style.width = `${newWidth}px`;
|
30517
|
-
}
|
30577
|
+
const newWidth = Math.max(100, initialWidth + (moveEvent.clientX - startX));
|
30578
|
+
dispatch(setColumnPosition(column, newWidth));
|
30518
30579
|
};
|
30519
30580
|
const onMouseUp = () => {
|
30520
30581
|
document.removeEventListener('mousemove', onMouseMove);
|
30521
30582
|
document.removeEventListener('mouseup', onMouseUp);
|
30583
|
+
dispatch(dragEnd());
|
30522
30584
|
};
|
30523
30585
|
document.addEventListener('mousemove', onMouseMove);
|
30524
30586
|
document.addEventListener('mouseup', onMouseUp);
|
30525
|
-
|
30526
|
-
|
30587
|
+
dispatch(dragStart());
|
30588
|
+
}, [column, columnWidth, dispatch]);
|
30589
|
+
const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
|
30527
30590
|
const handleClick = React__namespace.useCallback(event => {
|
30528
30591
|
onSelect(column, event.shiftKey);
|
30529
30592
|
}, [onSelect, column]);
|
@@ -30541,7 +30604,7 @@ const ColumnIndicator = ({
|
|
30541
30604
|
}, [onSelect, column, setContextMenu]);
|
30542
30605
|
return jsxRuntime.jsxs("th", {
|
30543
30606
|
style: {
|
30544
|
-
minWidth: `${
|
30607
|
+
minWidth: `${columnWidth}px`,
|
30545
30608
|
position: 'relative'
|
30546
30609
|
},
|
30547
30610
|
className: classNames('ff-spreadsheet-header', {
|
@@ -30552,8 +30615,10 @@ const ColumnIndicator = ({
|
|
30552
30615
|
tabIndex: 0,
|
30553
30616
|
children: [label !== undefined ? label : columnIndexToLabel(column), jsxRuntime.jsx("div", {
|
30554
30617
|
onMouseDown: onMouseDown,
|
30555
|
-
onClick: () => {
|
30556
|
-
|
30618
|
+
onClick: () => activate$1({
|
30619
|
+
row: -1,
|
30620
|
+
column
|
30621
|
+
}),
|
30557
30622
|
style: {
|
30558
30623
|
zIndex: 'inherit',
|
30559
30624
|
width: '2px',
|
@@ -30578,7 +30643,7 @@ const enhance$2 = ColumnIndicatorComponent => {
|
|
30578
30643
|
});
|
30579
30644
|
};
|
30580
30645
|
};
|
30581
|
-
|
30646
|
+
const EnhancedColumnIndicator = enhance$2(ColumnIndicator);
|
30582
30647
|
function columnIndexToLabel(column) {
|
30583
30648
|
let label = '';
|
30584
30649
|
let index = column;
|
@@ -30599,7 +30664,8 @@ const RowIndicator = ({
|
|
30599
30664
|
deleteRow,
|
30600
30665
|
data
|
30601
30666
|
}) => {
|
30602
|
-
const
|
30667
|
+
const dispatch = useDispatch();
|
30668
|
+
const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 28);
|
30603
30669
|
const options = [{
|
30604
30670
|
label: 'Add Row',
|
30605
30671
|
value: 'Add Row',
|
@@ -30617,25 +30683,24 @@ const RowIndicator = ({
|
|
30617
30683
|
},
|
30618
30684
|
disable: false
|
30619
30685
|
}];
|
30620
|
-
const onMouseDown =
|
30621
|
-
|
30686
|
+
const onMouseDown = React__namespace.useCallback(event => {
|
30687
|
+
onSelect(row, event.shiftKey);
|
30688
|
+
const startY = event.clientY;
|
30689
|
+
const initialHeight = rowHeight;
|
30622
30690
|
const onMouseMove = moveEvent => {
|
30623
|
-
const newHeight =
|
30624
|
-
|
30625
|
-
const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
|
30626
|
-
const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
|
30627
|
-
if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
|
30628
|
-
selectedAllRow.style.height = `${newHeight}px`;
|
30629
|
-
selectedSingleRow.style.height = `${newHeight}px`;
|
30630
|
-
}
|
30691
|
+
const newHeight = Math.max(28, initialHeight + (moveEvent.clientY - startY));
|
30692
|
+
dispatch(setRowHeight(row, newHeight));
|
30631
30693
|
};
|
30632
30694
|
const onMouseUp = () => {
|
30633
30695
|
document.removeEventListener('mousemove', onMouseMove);
|
30634
30696
|
document.removeEventListener('mouseup', onMouseUp);
|
30697
|
+
dispatch(dragEnd());
|
30635
30698
|
};
|
30636
30699
|
document.addEventListener('mousemove', onMouseMove);
|
30637
30700
|
document.addEventListener('mouseup', onMouseUp);
|
30638
|
-
|
30701
|
+
dispatch(dragEnd());
|
30702
|
+
}, [onSelect, rowHeight, row]);
|
30703
|
+
const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
|
30639
30704
|
const handleClick = React__namespace.useCallback(event => {
|
30640
30705
|
onSelect(row, event.shiftKey);
|
30641
30706
|
}, [onSelect, row]);
|
@@ -30653,8 +30718,7 @@ const RowIndicator = ({
|
|
30653
30718
|
}, [onSelect, row, setContextMenu]);
|
30654
30719
|
return jsxRuntime.jsxs("th", {
|
30655
30720
|
style: {
|
30656
|
-
height: `${
|
30657
|
-
minWidth: '60px',
|
30721
|
+
height: `${rowHeight}px`,
|
30658
30722
|
position: 'relative'
|
30659
30723
|
},
|
30660
30724
|
className: classNames('ff-spreadsheet-header', {
|
@@ -30665,6 +30729,10 @@ const RowIndicator = ({
|
|
30665
30729
|
tabIndex: 0,
|
30666
30730
|
children: [label !== undefined ? label : row + 1, jsxRuntime.jsx("div", {
|
30667
30731
|
onMouseDown: onMouseDown,
|
30732
|
+
onClick: () => activate$1({
|
30733
|
+
row,
|
30734
|
+
column: -1
|
30735
|
+
}),
|
30668
30736
|
style: {
|
30669
30737
|
zIndex: 'inherit',
|
30670
30738
|
height: '2px',
|
@@ -31058,7 +31126,7 @@ const Copied = () => {
|
|
31058
31126
|
});
|
31059
31127
|
};
|
31060
31128
|
|
31061
|
-
var css_248z$f = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm
|
31129
|
+
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}";
|
31062
31130
|
styleInject(css_248z$f);
|
31063
31131
|
|
31064
31132
|
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}";
|
@@ -31600,7 +31668,7 @@ const Spreadsheet = props => {
|
|
31600
31668
|
}, [props.Cell]);
|
31601
31669
|
const CornerIndicator$1 = React__namespace.useMemo(() => enhance$3(props.CornerIndicator || CornerIndicator), [props.CornerIndicator]);
|
31602
31670
|
const RowIndicator$1 = React__namespace.useMemo(() => enhance$1(props.RowIndicator || RowIndicator), [props.RowIndicator]);
|
31603
|
-
const ColumnIndicator
|
31671
|
+
const ColumnIndicator = React__namespace.useMemo(() => enhance$2(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator]);
|
31604
31672
|
React__namespace.useEffect(() => {
|
31605
31673
|
document.addEventListener('cut', handleCut);
|
31606
31674
|
document.addEventListener('copy', handleCopy);
|
@@ -31614,14 +31682,14 @@ const Spreadsheet = props => {
|
|
31614
31682
|
const tableNode = React__namespace.useMemo(() => jsxRuntime.jsxs(Table$1, {
|
31615
31683
|
columns: size.columns,
|
31616
31684
|
children: [jsxRuntime.jsxs(HeaderRow$1, {
|
31617
|
-
children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator
|
31685
|
+
children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator, {
|
31618
31686
|
column: columnNumber,
|
31619
31687
|
setContextMenu: props.setContextMenu,
|
31620
31688
|
label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
|
31621
31689
|
deleteColumn: deleteColumn$1,
|
31622
31690
|
addColumnLeft: addColumnLeft$1,
|
31623
31691
|
data: props.data
|
31624
|
-
}, columnNumber) : jsxRuntime.jsx(ColumnIndicator
|
31692
|
+
}, columnNumber) : jsxRuntime.jsx(ColumnIndicator, {
|
31625
31693
|
column: columnNumber,
|
31626
31694
|
setContextMenu: props.setContextMenu,
|
31627
31695
|
deleteColumn: deleteColumn$1,
|
@@ -31651,7 +31719,7 @@ const Spreadsheet = props => {
|
|
31651
31719
|
DataViewer: DataViewer$1
|
31652
31720
|
}, columnNumber))]
|
31653
31721
|
}, rowNumber))]
|
31654
|
-
}), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator
|
31722
|
+
}), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
|
31655
31723
|
const activeCellNode = React__namespace.useMemo(() => jsxRuntime.jsx(ActiveCell
|
31656
31724
|
// @ts-ignore
|
31657
31725
|
, {
|
@@ -31719,9 +31787,112 @@ const ExcelContextMenu = ({
|
|
31719
31787
|
});
|
31720
31788
|
};
|
31721
31789
|
|
31790
|
+
const getTextAlignment = alignment => {
|
31791
|
+
switch (alignment.toLowerCase()) {
|
31792
|
+
case 'left':
|
31793
|
+
return 'left';
|
31794
|
+
case 'right':
|
31795
|
+
return 'right';
|
31796
|
+
case 'center':
|
31797
|
+
return 'center';
|
31798
|
+
case 'justify':
|
31799
|
+
return 'justify';
|
31800
|
+
default:
|
31801
|
+
return 'left';
|
31802
|
+
}
|
31803
|
+
};
|
31804
|
+
const getTextDecoration = textDecoration => {
|
31805
|
+
if (!textDecoration) {
|
31806
|
+
return 'solid';
|
31807
|
+
}
|
31808
|
+
switch (textDecoration.toLowerCase()) {
|
31809
|
+
case 'solid':
|
31810
|
+
return 'solid';
|
31811
|
+
case 'dotted':
|
31812
|
+
return 'dotted';
|
31813
|
+
case 'dashed':
|
31814
|
+
return 'dashed';
|
31815
|
+
case 'wavy':
|
31816
|
+
return 'wavy';
|
31817
|
+
default:
|
31818
|
+
return 'solid';
|
31819
|
+
}
|
31820
|
+
};
|
31821
|
+
const getTextAlignmentBack = alignment => {
|
31822
|
+
switch (alignment) {
|
31823
|
+
case 'left':
|
31824
|
+
return 'left';
|
31825
|
+
case 'right':
|
31826
|
+
return 'right';
|
31827
|
+
case 'center':
|
31828
|
+
return 'center';
|
31829
|
+
case 'justify':
|
31830
|
+
return 'justify';
|
31831
|
+
default:
|
31832
|
+
return 'left';
|
31833
|
+
}
|
31834
|
+
};
|
31835
|
+
function convertStyleToFrontend(backendStyle) {
|
31836
|
+
return {
|
31837
|
+
fontSize: `${backendStyle.size}px`,
|
31838
|
+
fontFamily: backendStyle.name,
|
31839
|
+
color: `#${backendStyle.color}`,
|
31840
|
+
backgroundColor: `#${backendStyle.backgroundColor}`,
|
31841
|
+
fontWeight: backendStyle.bold ? 'bold' : 'normal',
|
31842
|
+
fontStyle: backendStyle.italic ? 'italic' : 'normal',
|
31843
|
+
textDecoration: backendStyle.underline ? 'underline' : 'value',
|
31844
|
+
textDecorationStyle: getTextDecoration(backendStyle.underline),
|
31845
|
+
borderTop: backendStyle.border.top === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31846
|
+
borderRight: backendStyle.border.right === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31847
|
+
borderBottom: backendStyle.border.bottom === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31848
|
+
borderLeft: backendStyle.border.left === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
|
31849
|
+
textAlign: getTextAlignment(backendStyle.alignment.horizontal)
|
31850
|
+
};
|
31851
|
+
}
|
31852
|
+
const getBorderStyle = border => {
|
31853
|
+
if (!border || border === 'none') {
|
31854
|
+
return 'NONE';
|
31855
|
+
}
|
31856
|
+
if (border.includes('solid') || border.includes('dashed') || border.includes('dotted')) {
|
31857
|
+
if (border.includes('2px') || border.includes('thin')) {
|
31858
|
+
return 'THIN';
|
31859
|
+
} else if (border.includes('3px') || border.includes('medium')) {
|
31860
|
+
return 'MEDIUM';
|
31861
|
+
} else if (border.includes('4px') || border.includes('thick')) {
|
31862
|
+
return 'THICK';
|
31863
|
+
}
|
31864
|
+
}
|
31865
|
+
return 'THIN';
|
31866
|
+
};
|
31867
|
+
const convertStyleToBackend = frontendStyle => {
|
31868
|
+
return {
|
31869
|
+
name: frontendStyle.fontFamily || 'Arial',
|
31870
|
+
size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
|
31871
|
+
bold: frontendStyle.fontWeight === 'bold',
|
31872
|
+
italic: frontendStyle.fontStyle === 'italic',
|
31873
|
+
underline: "solid",
|
31874
|
+
color: frontendStyle.color?.replace('#', '') || '000000',
|
31875
|
+
backgroundColor: frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
|
31876
|
+
borderColor: frontendStyle.borderTop && frontendStyle.borderTop.toString().includes('solid') ? 'F2F2F2' : '000000',
|
31877
|
+
border: {
|
31878
|
+
top: getBorderStyle(frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined),
|
31879
|
+
right: getBorderStyle(frontendStyle.borderRight ? frontendStyle.borderRight.toString() : undefined),
|
31880
|
+
bottom: getBorderStyle(frontendStyle.borderBottom ? frontendStyle.borderBottom.toString() : undefined),
|
31881
|
+
left: getBorderStyle(frontendStyle.borderLeft ? frontendStyle.borderLeft.toString() : undefined)
|
31882
|
+
},
|
31883
|
+
alignment: {
|
31884
|
+
horizontal: getTextAlignmentBack(frontendStyle.textAlign),
|
31885
|
+
vertical: 'BOTTOM',
|
31886
|
+
wrapText: false
|
31887
|
+
}
|
31888
|
+
};
|
31889
|
+
};
|
31890
|
+
|
31722
31891
|
const ExcelFile = ({
|
31723
31892
|
excelData,
|
31724
|
-
onSave =
|
31893
|
+
onSave = saveData => {
|
31894
|
+
saveData();
|
31895
|
+
}
|
31725
31896
|
}) => {
|
31726
31897
|
const [sheetNames, setSheetNames] = React.useState([]);
|
31727
31898
|
const [contextMenu, setContextMenu] = React.useState({
|
@@ -31808,7 +31979,7 @@ const ExcelFile = ({
|
|
31808
31979
|
}
|
31809
31980
|
spreadsheetData[rowIndex][colIndex] = {
|
31810
31981
|
value: checkVal(cell.value),
|
31811
|
-
style: cell
|
31982
|
+
style: convertStyleToFrontend(cell?.style),
|
31812
31983
|
type: true
|
31813
31984
|
};
|
31814
31985
|
}
|
@@ -31822,12 +31993,49 @@ const ExcelFile = ({
|
|
31822
31993
|
setSelectedSheetData(newWorksheetsData[firstSheetName]);
|
31823
31994
|
}
|
31824
31995
|
}, []);
|
31996
|
+
const onSaveWorksheetData = () => {
|
31997
|
+
const savedData = {
|
31998
|
+
sheets: sheetNames.map(sheetName => {
|
31999
|
+
const sheetData = worksheetsData[sheetName]?.map(row => {
|
32000
|
+
const lastIndex = row.reduce((lastIdx, cell, i) => {
|
32001
|
+
const hasValueOrTypeTrue = cell && cell.value !== null && !checkEmpty(cell && cell.value) || cell && cell.type === true;
|
32002
|
+
return hasValueOrTypeTrue ? i : lastIdx;
|
32003
|
+
}, -1);
|
32004
|
+
const filteredRow = row.map((cell, index) => {
|
32005
|
+
if (cell && cell.value !== null) {
|
32006
|
+
return {
|
32007
|
+
value: cell.value,
|
32008
|
+
styles: convertStyleToBackend(cell.style ?? {})
|
32009
|
+
};
|
32010
|
+
} else if (cell && cell.type || index <= lastIndex) {
|
32011
|
+
return {
|
32012
|
+
value: '',
|
32013
|
+
styles: convertStyleToBackend(cell?.style ?? {})
|
32014
|
+
};
|
32015
|
+
}
|
32016
|
+
return null;
|
32017
|
+
}).filter(cell => cell !== null);
|
32018
|
+
return filteredRow.length > 0 ? filteredRow : [];
|
32019
|
+
}) || [];
|
32020
|
+
const finalData = sheetData.filter((row, index) => {
|
32021
|
+
const isNextRowNotEmpty = sheetData.slice(index + 1).some(nextRow => nextRow.length > 0);
|
32022
|
+
return row.length > 0 || isNextRowNotEmpty;
|
32023
|
+
});
|
32024
|
+
return {
|
32025
|
+
sheetName: sheetName,
|
32026
|
+
data: checkEmpty(finalData.length) ? [[]] : finalData
|
32027
|
+
};
|
32028
|
+
})
|
32029
|
+
};
|
32030
|
+
onSave(savedData);
|
32031
|
+
toast.success('File saved successfully!');
|
32032
|
+
};
|
31825
32033
|
const onEvaluateChange = data => {
|
31826
32034
|
setWorksheetsData(prev => ({
|
31827
32035
|
...prev,
|
31828
32036
|
[pageRef.current]: data
|
31829
32037
|
}));
|
31830
|
-
|
32038
|
+
onSaveWorksheetData();
|
31831
32039
|
};
|
31832
32040
|
const [editingSheet, setEditingSheet] = React.useState(null);
|
31833
32041
|
const handleAddSheet = () => {
|
@@ -31867,7 +32075,7 @@ const ExcelFile = ({
|
|
31867
32075
|
} else {
|
31868
32076
|
setSelectedSheetData([]);
|
31869
32077
|
}
|
31870
|
-
}, [selectedSheet.name
|
32078
|
+
}, [selectedSheet.name]);
|
31871
32079
|
const handleDeleteSheet = () => {
|
31872
32080
|
const {
|
31873
32081
|
index,
|