Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(hooks): minor fixes to useAccessibility & useStyles #2268

Merged
merged 6 commits into from
Jan 27, 2020
Merged

fix(hooks): minor fixes to useAccessibility & useStyles #2268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1e3dbd9
fix(hooks): minor fixes to useAccessibility & useStyles
layershifter Jan 24, 2020
5bdba34
add changelog
layershifter Jan 24, 2020
b37ad0d
Merge branch 'master' into fix/hooks
layershifter Jan 24, 2020
1c97f6c
Merge branch 'master' into fix/hooks
layershifter Jan 24, 2020
a5390c4
fix naming
layershifter Jan 27, 2020
59e78ad
fix naming
layershifter Jan 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239))
- `mode` property from `focusZone` configuration in accessibility behaviors is no longer supported - the focus zone will always be in embed mode @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
- `FocusZoneMode` and `FOCUSZONE_WRAP_ATTRIBUTE` are no longer exported @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
- Returned function from `useAccessibility` no longer keeps the same reference @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
- Changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))

### Fixes
- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
- Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
- Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
- Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))

### Features
Expand Down
10 changes: 2 additions & 8 deletions packages/react-bindings/src/hooks/useAccessibility.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,8 @@ const useAccessibility = <Props>(
actionHandlers,
)

const latestDefinition = React.useRef<ReactAccessibilityBehavior>(definition)
latestDefinition.current = definition

return React.useCallback(
<SlotProps extends Record<string, any>>(slotName: string, slotProps: SlotProps) =>
mergeProps(slotName, slotProps, latestDefinition.current),
[],
)
return <SlotProps extends Record<string, any>>(slotName: string, slotProps: SlotProps) =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 for simplifying

mergeProps(slotName, slotProps, definition)
}

export default useAccessibility
15 changes: 8 additions & 7 deletions packages/react-bindings/src/hooks/useStateManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,8 @@ const useStateManager = <
} = options
const latestManager = React.useRef<Manager<State, Actions> | null>(null)

// Heads up! forceUpdate() is used only for triggering rerenders stateManager is SSOT()
const [, forceUpdate] = React.useState()
const syncState = React.useCallback(
(_prevState: State, nextState: State) => forceUpdate(nextState),
[],
)
// Heads up! forceUpdate() is used only for triggering rerenders, stateManager is SSOT
const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
const [, syncState] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]

Or just remove syncState and use forceUpdate

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have only forceUpdate() now 👍


// If manager exists, the current state will be used
const initialState = latestManager.current
Expand All @@ -54,7 +50,12 @@ const useStateManager = <
// Factory has already configured actions
actions: {} as EnhancedActions<State, Actions>,
state: { ...initialState, ...getDefinedProps(mapPropsToState()) },
sideEffects: [...sideEffects, syncState],
sideEffects: [
...sideEffects,
// `sideEffect` is called with two arguments, but hooks don't support the second callback
// argument
() => forceUpdate(),
],
})

// We need to pass exactly `manager.state` to provide the same state object during the same render
Expand Down