Skip to content

Commit 3d27339

Browse files
bollainbollain
committed
Update 11.5
1 parent cdaffcd commit 3d27339

File tree

14 files changed

+80
-89
lines changed

14 files changed

+80
-89
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,4 +145,4 @@
145145
"lint-staged": {
146146
"./src/**/*.{js,ts}": "eslint --fix"
147147
}
148-
}
148+
}

‎src/components/App/App.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -703,10 +703,6 @@ const App = ({ removeEventHandlers }) => {
703703
Component={LazyLoadComponents.HeaderFooterOptionsModal}
704704
dataElement={DataElements.HEADER_FOOTER_OPTIONS_MODAL}
705705
/>
706-
<LazyLoadWrapper
707-
Component={LazyLoadComponents.OfficeEditorMarginsModal}
708-
dataElement={DataElements.OFFICE_EDITOR_MARGINS_MODAL}
709-
/>
710706
</>
711707
)}
712708
</div>

‎src/components/ModularComponents/EditorFileName/EditorFileName.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
import React, { useState, useEffect, useCallback } from 'react';
22
import core from 'core';
3-
import selectors from 'selectors';
43
import { useTranslation } from 'react-i18next';
54
import useOnDocumentFileNameEdit from 'hooks/useOnDocumentFileNameEdit';
65
import Button from 'components/Button';
76
import './EditorFileName.scss';
87
import PropTypes from 'prop-types';
98
import { isMobileSize } from 'helpers/getDeviceSize';
10-
import { useSelector } from 'react-redux';
119
import classNames from 'classnames';
1210
import useOnDocumentUnloaded from 'hooks/useOnDocumentUnloaded';
1311
import { FILESAVERJS_MAX_NAME_LENTH } from 'src/constants/fileName';
1412

15-
const EDIT_MODE = window.Core.SpreadsheetEditor.SpreadsheetEditorEditMode;
1613

1714
const EditorFileName = ({ dataElement }) => {
1815
const { t } = useTranslation();
1916
const {
17+
viewOnly,
2018
extension,
2119
isEditing,
2220
fileNameWithoutExtension,
@@ -26,10 +24,7 @@ const EditorFileName = ({ dataElement }) => {
2624
handleKeyDown,
2725
} = useOnDocumentFileNameEdit();
2826

29-
const isSpreadsheetEditorMode = useSelector(selectors.isSpreadsheetEditorModeEnabled);
30-
const spreadsheetEditorEditMode = useSelector(selectors.getSpreadsheetEditorEditMode);
31-
const isSpreadsheetAndReadOnlyMode = isSpreadsheetEditorMode && spreadsheetEditorEditMode === EDIT_MODE.VIEW_ONLY;
32-
const buttonTitlePrefix = isSpreadsheetAndReadOnlyMode ? '' : `${t('action.edit')} ${t('saveModal.fileName')} - `;
27+
const buttonTitlePrefix = viewOnly ? '' : `${t('action.edit')} ${t('saveModal.fileName')} - `;
3328
const [fileName, setFileName] = useState(core.getDocument()?.getFilename());
3429

3530
useEffect(() => {
@@ -54,7 +49,7 @@ const EditorFileName = ({ dataElement }) => {
5449
}, [fileNameWithoutExtension, extension]);
5550

5651
// Hiding this component on mobile until we implement mobile functionality
57-
return !isMobileSize() && isEditing ? (
52+
return !isMobileSize() && (isEditing && !viewOnly) ? (
5853
<input
5954
maxLength={FILESAVERJS_MAX_NAME_LENTH - extension.length}
6055
type='text'
@@ -76,6 +71,7 @@ const EditorFileName = ({ dataElement }) => {
7671
label={fileName}
7772
title={`${buttonTitlePrefix}${fileName}`}
7873
onClick={startEditing}
74+
disabled={viewOnly}
7975
/>
8076
);
8177
};

‎src/components/ModularComponents/EditorFileName/EditorFileName.stories.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import { configureStore } from '@reduxjs/toolkit';
44
import core from 'core';
55
import { userEvent, expect, within } from '@storybook/test';
66
import EditorFileName from './EditorFileName';
7-
import { OEModularUIMockState, string280Chars } from 'src/helpers/storybookHelper';
8-
import { FILESAVERJS_MAX_NAME_LENTH } from 'src/constants/fileName';
7+
import { OEModularUIMockState, string280Chars } from 'helpers/storybookHelper';
8+
import { FILESAVERJS_MAX_NAME_LENTH } from 'constants/fileName';
9+
import { OfficeEditorEditMode } from 'constants/officeEditor';
10+
import { SpreadsheetEditorEditMode } from 'constants/spreadsheetEditor';
11+
912
export default {
1013
title: 'ModularComponents/EditorFileName',
1114
component: EditorFileName,
@@ -15,7 +18,7 @@ const initialState = OEModularUIMockState;
1518

1619
const store = configureStore({ reducer: () => initialState });
1720

18-
const prepareButtonStory = () => {
21+
const prepareButtonStory = (dataElement = 'editorFileName') => {
1922
const oldDoc = core.getDocument;
2023
core.getDocument = () => ({
2124
getFilename: () => 'test.docx',
@@ -27,7 +30,7 @@ const prepareButtonStory = () => {
2730

2831
return (
2932
<Provider store={store}>
30-
<EditorFileName dataElement='editorFileName' />
33+
<EditorFileName dataElement={dataElement} />
3134
</Provider>
3235
);
3336
};
@@ -60,3 +63,14 @@ FileNameButton.play = async ({ canvasElement }) => {
6063
const inputCap = secondInput.value.length + extension.length;
6164
expect(inputCap).toBe(FILESAVERJS_MAX_NAME_LENTH);
6265
};
66+
67+
export function OfficeEditorDisabledFileName() {
68+
initialState.officeEditor.editMode = OfficeEditorEditMode.VIEW_ONLY;
69+
return prepareButtonStory();
70+
}
71+
72+
export function SpreadsheetEditorDisabledFileName() {
73+
initialState.viewer.isSpreadsheetEditorModeEnabled = true;
74+
initialState.spreadsheetEditor.editMode = SpreadsheetEditorEditMode.VIEW_ONLY;
75+
return prepareButtonStory('spreadsheetEditorFileName');
76+
}

‎src/components/StylePanel/StylePanelContainer.js‎

Lines changed: 24 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { useSelector } from 'react-redux';
33
import selectors from 'selectors';
44
import core from 'core';
55
import { getStylePanelComponent } from './StylePanelFactory';
66
import DataElementWrapper from '../DataElementWrapper';
77
import NoToolStylePanel from './panels/NoToolStylePanel';
88
import getAnnotationCreateToolNames from 'helpers/getAnnotationCreateToolNames';
9-
import {
10-
shouldShowNoStyles
11-
} from 'helpers/stylePanelHelper';
9+
import { shouldShowNoStyles } from 'helpers/stylePanelHelper';
10+
import debounce from 'lodash/debounce';
1211

1312
import './StylePanel.scss';
1413

@@ -20,26 +19,15 @@ const StylePanelContainer = () => {
2019

2120
const [selectedAnnotations, setSelectedAnnotations] = useState(core.getSelectedAnnotations());
2221
const [currentTool, setCurrentTool] = useState(core.getToolMode());
23-
const [showStyles, setShowStyles] = useState(false);
2422

2523
const filteredTypes = [Annotations.PushButtonWidgetAnnotation];
2624

27-
const handleAnnotationDeselected = () => {
28-
const latestTool = core.getToolMode();
29-
if (latestTool instanceof window.Core.Tools.AnnotationEditTool || window.Core.Tools.TextSelectTool) {
30-
setShowStyles(false);
31-
}
32-
setSelectedAnnotations([]);
33-
handleToolModeChange(latestTool);
34-
core.setToolMode(latestTool.name);
35-
};
36-
37-
const handleAnnotationSelected = (annotations, action) => {
25+
const handleChange = debounce(() => {
3826
const annotationManager = core.getAnnotationManager();
39-
const allSelectedAnnotations = new Set();
40-
41-
annotations.forEach((annotation) => allSelectedAnnotations.add(annotation));
27+
const tool = core.getToolMode();
28+
const annotations = core.getSelectedAnnotations();
4229

30+
const allSelectedAnnotations = new Set(annotations);
4331
annotations.forEach((annotation) => {
4432
if (annotation.isGrouped()) {
4533
const groupedAnnotations = annotationManager.getGroupAnnotations(annotation);
@@ -48,68 +36,46 @@ const StylePanelContainer = () => {
4836
annotation.getGroupedChildren().forEach((child) => allSelectedAnnotations.add(child));
4937
}
5038
});
51-
5239
const selectedAnnotations = Array.from(allSelectedAnnotations);
5340

54-
if (action === 'selected') {
55-
if (shouldShowNoStyles(selectedAnnotations, filteredTypes)) {
56-
setShowStyles(false);
57-
return;
58-
}
59-
setSelectedAnnotations(selectedAnnotations);
60-
setShowStyles(true);
61-
} else if (action === 'deselected') {
62-
handleAnnotationDeselected();
63-
}
64-
};
65-
66-
const handleToolModeChange = (newTool) => {
67-
setCurrentTool(newTool);
68-
setSelectedAnnotations([]);
69-
70-
const toolName = newTool?.name;
71-
if (annotationCreateToolNames.includes(toolName)) {
72-
setShowStyles(true);
73-
} else {
74-
setShowStyles(false);
75-
}
76-
};
41+
setSelectedAnnotations(selectedAnnotations);
42+
setCurrentTool(tool);
43+
}, 150, { leading: false, trailing: true });
7744

7845
useEffect(() => {
7946
if (isPanelOpen) {
80-
const annotations = core.getSelectedAnnotations();
81-
if (annotations.length > 0) {
82-
setSelectedAnnotations(annotations);
83-
setShowStyles(true);
84-
} else {
85-
const tool = core.getToolMode();
86-
handleToolModeChange(tool);
87-
}
47+
handleChange();
8848
}
8949
}, [isPanelOpen]);
9050

9151
useEffect(() => {
92-
core.addEventListener('annotationSelected', handleAnnotationSelected);
93-
core.addEventListener('toolModeUpdated', handleToolModeChange);
52+
core.addEventListener('annotationSelected', handleChange);
53+
core.addEventListener('toolModeUpdated', handleChange);
9454

9555
return () => {
96-
core.removeEventListener('annotationSelected', handleAnnotationSelected);
97-
core.removeEventListener('toolModeUpdated', handleToolModeChange);
56+
core.removeEventListener('annotationSelected', handleChange);
57+
core.removeEventListener('toolModeUpdated', handleChange);
9858
};
9959
}, []);
10060

101-
const StylePanelComponent = useMemo(() => {
102-
if (!showStyles) {
61+
const getComponent = () => {
62+
const hideStyles = selectedAnnotations.length > 0 ?
63+
shouldShowNoStyles(selectedAnnotations, filteredTypes) :
64+
!annotationCreateToolNames.includes(currentTool?.name);
65+
66+
if (hideStyles) {
10367
return NoToolStylePanel;
10468
}
10569

10670
return getStylePanelComponent(currentTool, selectedAnnotations);
107-
}, [showStyles, currentTool, selectedAnnotations]);
71+
};
10872

10973
if (!isPanelOpen) {
11074
return null;
11175
}
11276

77+
const StylePanelComponent = getComponent();
78+
11379
return (
11480
<DataElementWrapper dataElement="stylePanel" className="Panel StylePanel">
11581
<StylePanelComponent

‎src/components/StylePicker/ColorPicker/ColorPicker.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const ColorPicker = ({
5757
setSelectedColor,
5858
onColorChange,
5959
setColors: (newColors) => dispatch(actions.setColors(newColors, activeToolName, type, true)),
60+
useHex: true,
6061
});
6162

6263
const openColorPickerModalWithFocus = useFocusHandler(handleAddColor);

‎src/components/StylePicker/StrokePanelSection/StrokePanelSection.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
defaultStartLineStyles,
99
defaultStrokeStyles,
1010
defaultEndLineStyles,
11-
cloudyStrokeStyle
11+
cloudyStrokeStyle,
1212
} from 'constants/strokeStyleIcons';
1313
import { stylePanelSectionTitles } from 'helpers/stylePanelHelper';
1414

@@ -78,8 +78,7 @@ const StrokePanelSection = ({
7878
<Dropdown
7979
id="middleLineStyleDropdown"
8080
translationPrefix={middleLineSegmentLabel}
81-
className={`StylePicker-StrokeLineStyleDropdown${!!strokeStyle && !showLineStyleOptions ? ' StyleOptions' : ''
82-
}`}
81+
className={`StylePicker-StrokeLineStyleDropdown${!!strokeStyle && !showLineStyleOptions ? ' StyleOptions' : ''}`}
8382
dataElement="middleLineStyleDropdown"
8483
images={showLineStyleOptions || hideCloudyLineStyle ? defaultStrokeStyles : withCloudyStyle}
8584
onClickItem={onStrokeStyleChange}

‎src/components/StylePicker/StylePicker.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@ const propTypes = {
5050

5151
const MAX_STROKE_THICKNESS = 23;
5252

53-
const StylePicker = ({ onStyleChange,
53+
const StylePicker = ({
54+
onStyleChange,
5455
style,
5556
isFreeText,
5657
isRedaction,

‎src/helpers/stylePanelHelper.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const shouldHideStrokeDropdowns = (toolName) => {
2222
Tools.FreeHandHighlightCreateTool,
2323
Tools.ArcCreateTool,
2424
Tools.ArcMeasurementCreateTool,
25+
Tools.TextAnnotationCreateTool,
2526
];
2627

2728
return toolsWithNoStrokeDropdowns.some((tool) => core.getTool(toolName) instanceof tool);

0 commit comments

Comments
 (0)