search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.31k stars 1.14k forks source link

Switch component parity for Fabric #11163

Closed jonthysell closed 5 months ago

jonthysell commented 1 year ago

This task captures the work to reach parity between Paper and Fabric for the native code for the <Switch> component.

ComponentView

  1. [x] Create the SwitchComponentView (SwCV)
  2. [x] Register the ComponentView in the ComponentViewRegistry

Implemented in #11204

APIs

See latest spec at https://reactnative.dev/docs/switch.

Switch Props

7/7 API Platform RNW Paper RNW Fabric Notes
  • [x] disabled
 SwVM SwCV Fabric:#11204
  • [x] ios_backgroundColor
 iOS No No?
  • [x] onChange
 SwVM SwCV Fabric:#11204
  • [x] onValueChange
 JS JS
  • [x] thumbColor
 SwVM SwCV Fabric:#11204
SwVM SwCV Fabric:#11234
  • [x] value
 SwVM SwCV Fabric:#11204

Switch Methods

1/1 API Platform RNW Paper RNW Fabric Notes
  • [x] setValue()
 SwVM SwCV Not exposed to the user, but used by the JS to sync JS state with UI state, Fabric:#11204

View Props

51/60 API Platform RNW Paper RNW Fabric Notes
  • [ ] accessibilityActions
 FEVM Pri 2
  • [x] accessibilityElementsHidden
 iOS No No?
  • [x] accessibilityHint
 FEVM CBCV+CDAP Fabric: #12036
  • [x] accessibilityIgnoresInvertColors
 iOS No No?
  • [x] accessibilityLabel
 FEVM CBCV+CDAP Fabric: #11674
  • [x] accessibilityLanguage
 iOS No No?
  • [ ] accessibilityLiveRegion
 Android FEVM Pri 2
  • [x] accessibilityRole
 FEVM CDAP Fabric: #11412
  • [ ] accessibilityState
 FEVM CBCV+CDAP Fabric: Partial impl in #11674
  • [x] accessibilityValue
 FEVM CBCV+CDAP Fabric: #12287
  • [x] accessibilityViewIsModal
 iOS No No?
  • [x] accessible
 CVM+FEVM CBCV+CDAP Fabric: #11719
  • [x] collapsable
 Android No No?
  • [ ] focusable
 Android CVM Pri 1
  • [x] hitSlop
 JS JS
  • [x] importantForAccessibility
 Android No No?
  • [x] nativeID
 No No?
  • [x] needsOffscreenAlphaCompositing
 No No?
  • [x] nextFocusDown
 Android No No?
  • [x] nextFocusForward
 Android No No?
  • [x] nextFocusLeft
 Android No No?
  • [x] nextFocusRight
 Android No No?
  • [x] nextFocusUp
 Android No No?
  • [ ] onAccessibilityAction
 VMB Pri 2
  • [x] onAccessibilityEscape
 iOS No No?
  • [x] onAccessibilityTap
 No CDAP Fabric: #11874
  • [x] onLayout
 VMB Pri 1
  • [x] onMagicTap
 iOS No No?
  • [x] onMoveShouldSetResponder
 JS JS
  • [x] onMoveShouldSetResponderCapture
 JS JS
  • [x] onResponderGrant
 JS JS
  • [x] onResponderMove
 JS JS
  • [x] onResponderReject
 JS JS
  • [x] onResponderRelease
 JS JS
  • [x] onResponderTerminate
 JS JS
  • [x] onResponderTerminationRequest
 JS JS
  • [x] onStartShouldSetResponder
 JS JS
  • [x] onStartShouldSetResponderCapture
 JS JS
  • [x] pointerEvents
 VMB SwCV Fabric:#11204
  • [x] removeClippedSubviews
 No No?
  • [x] renderToHardwareTextureAndroid
 Android No No?
  • [x] shouldRasterizeIOS
 iOS No No?
  • [x] style
 See Below See Below Supports View Style Props, Layout Props, Shadow Props
  • [x] testID
 FEVM CDAP Fabric: #11412
  • [ ] accessibilityPosInSet
 Windows FEVM Pri 2
  • [ ] accessibilitySetSize
 Windows FEVM Pri 2
  • [x] enableFocusRing
 Windows JS CBCV+SwCV Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] keyDownEvents
 Windows VMB SwCV+CBCV Fabric: #12146
  • [x] keyUpEvents
 Windows VMB SwCV+CBCV Fabric: #12146
  • [x] onBlur
 Windows VMB CBCV Paper: Event is registered, but maybe never fired?, Fabric: #11279
  • [x] onFocus
 Windows VMB CBCV Paper: Event is registered, but maybe never fired?, Fabric: #11279
  • [x] onKeyDown
 Windows VMB SwCV+CBCV+CEH Fabric: #12146
  • [x] onKeyDownCapture
 Windows VMB Pri 1
  • [x] onKeyUp
 Windows VMB SwCV+CBCV+CEH Fabric: #12146
  • [x] onKeyUpCapture
 Windows VMB Pri 1
  • [x] onMouseEnter
 Windows VMB CEH
  • [x] onMouseLeave
 Windows VMB CEH
  • [ ] tabIndex
 Windows CVM Pri 1
  • [ ] tooltip
 Windows FEVM Pri 1

View Style Props

29/30 API Platform RNW Paper RNW Fabric Notes
  • [x] backfaceVisibility
 No CBCV+PCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps
  • [x] backgroundColor
 CVM SwCV Fabric:#11204
  • [x] borderBottomColor
 No CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomEndRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomLeftRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomRightRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomStartRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderColor
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndColor
 No CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftColor
 No CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightColor
 No CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartColor
 No CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
No CBCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopColor
 No CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopEndRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopLeftRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopRightRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopStartRadius
 CVM CBCV+SwCV Fabric:#11204, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] elevation
 Android No No?
  • [ ] opacity
 FEVM Pri 1
  • [x] transform
 FEVM CBCV+SwCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps

Layout Props

52/53 API Platform RNW Paper RNW Fabric Notes
  • [x] alignContent
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] alignItems
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] alignSelf
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] aspectRatio
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] borderBottomWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderWidth
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] bottom
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] direction
 FEVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] display
 FEVM+NUIM SwCV Fabric:#11204
  • [x] end
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] flex
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] flexBasis
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] flexDirection
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] flexGrow
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] flexShrink
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] flexWrap
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] height
 VMB+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] justifyContent
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] left
 VMB+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] margin
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginBottom
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginEnd
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginHorizontal
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginLeft
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginRight
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginStart
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginTop
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] marginVertical
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] maxHeight
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] maxWidth
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] minHeight
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] minWidth
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [ ] overflow
 NUIM Pri 1
  • [x] padding
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingBottom
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingEnd
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingHorizontal
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingLeft
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingRight
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingStart
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingTop
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] paddingVertical
 CVM+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] position
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] right
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] start
 NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] top
 VMB+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [x] width
 VMB+NUIM CBCV+SwCV Fabric:#11204, RN Core resolves LayoutMetrics
  • [ ] zIndex
 FEVM Pri 1

Shadow Props

4/4 API Platform RNW Paper RNW Fabric Notes
  • [x] shadowColor
 No CBCV+SwCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • [x] shadowOffset
 iOS No CBCV+SwCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • [x] shadowOpacity
 iOS No CBCV+SwCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • [x] shadowRadius
 iOS No CBCV+SwCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps

Native Component Methods

2/2 API Platform RNW Paper RNW Fabric Notes
  • [x] blur()
 VMB CBCV Fabric: #11323
  • [x] focus()
 VMB CBCV Fabric: #11323

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.

jonthysell commented 5 months ago

Closing this deliverable, all remaining component properties required for parity are now being tracked by individual issues.