Core 20 highlight edit navigation #2558
Conversation
RoyEJohnson
force-pushed
the
core-20-highlight-edit-navigation
branch
from
f4806f7 to
4a38c4a
Compare
RoyEJohnson
force-pushed
the
core-20-highlight-edit-navigation
branch
from
1683277 to
9f6495c
Compare
RoyEJohnson
force-pushed
the
core-20-highlight-edit-navigation
branch
from
65e322d to
51bd861
Compare
Update snapshots
RoyEJohnson
force-pushed
the
core-20-highlight-edit-navigation
branch
from
51bd861 to
600cdff
Compare
| @@ -37,7 +37,6 @@ export const Heading = styled.h1` | |||
| display: flex; | |||
| align-items: center; | |||
| margin: 0; | |||
| padding: ${modalPadding * 0.5}rem 0; | |||
There was a problem hiding this comment.
Padding was doubled in the dialog title bar
| @@ -58,6 +58,7 @@ export default styled(MainContent)` | |||
| .highlight { | |||
| position: relative; | |||
| z-index: 1; | |||
| user-select: none; | |||
There was a problem hiding this comment.
Prevent text selection in highlights, in particular by double-clicking, but overlapping highlights aren't allowed anyway, so this prevents error messages.
| @@ -291,12 +293,13 @@ const StyledCard = styled(Card)` | |||
| // Styling is expensive and most Cards don't need to render | |||
| function PreCard(props: CardProps) { | |||
| const computedProps = useComputedProps(props); | |||
| const hideUnfocusedEditCard = computedProps.annotation ? {} : {isHidden: !props.shouldFocusCard}; | |||
There was a problem hiding this comment.
Edit card now only appears when making edits to the highlight/note
| return [cardsHeights, onHeightChange] as const; | ||
| } | ||
|
|
||
| function rangeString({startOffset, endOffset}: Highlight['range']) { |
There was a problem hiding this comment.
Functional changes are here through the end of useFocusedHighlight. There's a section below where most of the code was extracted to make the function, and replaced with a call to useFocusedHighlight. It's more obvious what I did if you look at the individual commit.
| @@ -454,24 +454,22 @@ function useOnColorChange(props: EditCardProps) { | |||
| } | |||
|
|
|||
| function useSaveAnnotation( | |||
| props: EditCardProps, | |||
| { data, pageId, locationFilterId, highlight, onCancel }: EditCardProps, | |||
There was a problem hiding this comment.
Just a bit of revising to props handling
| @@ -94,59 +94,63 @@ interface Props { | |||
| loggedOut: boolean; | |||
| } | |||
|
|
|||
| function useCloseAndTrack(closeFn: () => void) { | |||
There was a problem hiding this comment.
Some refactoring for clarity.
| @@ -142,13 +142,11 @@ export const onFocusInOrOutHandler = ( | |||
| }; | |||
|
|
|||
| export const useFocusLost = (ref: React.RefObject<HTMLElement>, isEnabled: boolean, cb: () => void) => { | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| React.useEffect(onFocusInOrOutHandler(ref, isEnabled, cb, 'focusout'), [ref, isEnabled, cb]); | |||
| React.useEffect(() => onFocusInOrOutHandler(ref, isEnabled, cb, 'focusout')(), [ref, isEnabled, cb]); | |||
There was a problem hiding this comment.
useEffect prefers to have an anonymous function, and this saves an eslint-disable comment
| } | ||
| } else { | ||
| target = event.target; | ||
| } | ||
| const highlight = highlights.find(h => | ||
| h.elements && h.elements.some(el => | ||
| h.elements && (h.elements as Element[]).some(el => |
There was a problem hiding this comment.
This cast is better than using any below.
CORE-20