@hanzogui/web 4.4.0 → 7.3.0
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/LICENSE +40 -19
- package/dist/cjs/_withStableStyle.cjs +1 -1
- package/dist/cjs/_withStableStyle.native.js +1 -1
- package/dist/cjs/config.cjs +2 -2
- package/dist/cjs/config.native.js +2 -2
- package/dist/cjs/config.native.js.map +1 -1
- package/dist/cjs/constants/constants.cjs +3 -3
- package/dist/cjs/constants/constants.native.js +3 -3
- package/dist/cjs/createComponent.cjs +307 -530
- package/dist/cjs/createComponent.native.js +265 -588
- package/dist/cjs/createComponent.native.js.map +1 -1
- package/dist/cjs/createGui.cjs +19 -48
- package/dist/cjs/createGui.native.js +22 -65
- package/dist/cjs/createGui.native.js.map +1 -1
- package/dist/cjs/eventHandling.native.js +19 -9
- package/dist/cjs/eventHandling.native.js.map +1 -1
- package/dist/cjs/helpers/createDesignSystem.cjs +22 -36
- package/dist/cjs/helpers/createDesignSystem.native.js +19 -91
- package/dist/cjs/helpers/createDesignSystem.native.js.map +1 -1
- package/dist/cjs/helpers/defaultAnimationDriver.cjs +1 -1
- package/dist/cjs/helpers/defaultAnimationDriver.native.js +1 -1
- package/dist/cjs/helpers/expandStyle.cjs +11 -74
- package/dist/cjs/helpers/expandStyle.native.js +29 -81
- package/dist/cjs/helpers/expandStyle.native.js.map +1 -1
- package/dist/cjs/helpers/expandStyles.cjs +2 -15
- package/dist/cjs/helpers/expandStyles.native.js +7 -13
- package/dist/cjs/helpers/expandStyles.native.js.map +1 -1
- package/dist/cjs/helpers/getSplitStyles.cjs +233 -557
- package/dist/cjs/helpers/getSplitStyles.native.js +204 -659
- package/dist/cjs/helpers/getSplitStyles.native.js.map +1 -1
- package/dist/cjs/helpers/getThemeCSSRules.cjs +8 -16
- package/dist/cjs/helpers/getTokenForKey.cjs +32 -54
- package/dist/cjs/helpers/getTokenForKey.native.js +40 -59
- package/dist/cjs/helpers/getTokenForKey.native.js.map +1 -1
- package/dist/cjs/helpers/insertStyleRule.cjs +27 -79
- package/dist/cjs/helpers/insertStyleRule.native.js +16 -335
- package/dist/cjs/helpers/insertStyleRule.native.js.map +1 -1
- package/dist/cjs/helpers/isActivePlatform.cjs +2 -17
- package/dist/cjs/helpers/isActivePlatform.native.js +2 -17
- package/dist/cjs/helpers/isActivePlatform.native.js.map +1 -1
- package/dist/cjs/helpers/log.cjs +1 -4
- package/dist/cjs/helpers/log.native.js +1 -6
- package/dist/cjs/helpers/log.native.js.map +1 -1
- package/dist/cjs/helpers/propMapper.cjs +37 -110
- package/dist/cjs/helpers/propMapper.native.js +54 -131
- package/dist/cjs/helpers/propMapper.native.js.map +1 -1
- package/dist/cjs/helpers/skipProps.cjs +3 -11
- package/dist/cjs/helpers/skipProps.native.js +3 -11
- package/dist/cjs/helpers/skipProps.native.js.map +1 -1
- package/dist/cjs/helpers/useRenderElement.cjs +7 -18
- package/dist/cjs/helpers/useRenderElement.native.js +7 -15
- package/dist/cjs/helpers/useRenderElement.native.js.map +1 -1
- package/dist/cjs/helpers/wrapStyleTags.cjs +11 -15
- package/dist/cjs/helpers/wrapStyleTags.native.js +3 -22
- package/dist/cjs/helpers/wrapStyleTags.native.js.map +1 -1
- package/dist/cjs/hooks/getThemeProxied.cjs +10 -54
- package/dist/cjs/hooks/getThemeProxied.native.js +27 -48
- package/dist/cjs/hooks/getThemeProxied.native.js.map +1 -1
- package/dist/cjs/hooks/useTheme.cjs +2 -2
- package/dist/cjs/hooks/useTheme.native.js +2 -2
- package/dist/cjs/hooks/useTheme.native.js.map +1 -1
- package/dist/cjs/hooks/useThemeState.cjs +66 -124
- package/dist/cjs/hooks/useThemeState.native.js +64 -142
- package/dist/cjs/hooks/useThemeState.native.js.map +1 -1
- package/dist/cjs/insertFont.cjs +6 -15
- package/dist/cjs/insertFont.native.js +7 -23
- package/dist/cjs/insertFont.native.js.map +1 -1
- package/dist/cjs/setupReactNative.cjs +4 -24
- package/dist/cjs/setupReactNative.native.js +5 -26
- package/dist/cjs/setupReactNative.native.js.map +1 -1
- package/dist/cjs/views/GuiProvider.cjs +4 -6
- package/dist/cjs/views/GuiProvider.native.js +5 -7
- package/dist/cjs/views/GuiProvider.native.js.map +1 -1
- package/dist/cjs/views/Text.cjs +11 -18
- package/dist/cjs/views/Text.native.js +6 -14
- package/dist/cjs/views/Text.native.js.map +1 -1
- package/dist/cjs/views/ThemeProvider.cjs +9 -11
- package/dist/cjs/views/ThemeProvider.native.js +3 -16
- package/dist/cjs/views/ThemeProvider.native.js.map +1 -1
- package/dist/cjs/views/View.native.js.map +1 -1
- package/dist/esm/_withStableStyle.mjs +1 -1
- package/dist/esm/_withStableStyle.mjs.map +1 -1
- package/dist/esm/_withStableStyle.native.js +1 -1
- package/dist/esm/config.mjs +2 -2
- package/dist/esm/config.mjs.map +1 -1
- package/dist/esm/config.native.js +2 -2
- package/dist/esm/config.native.js.map +1 -1
- package/dist/esm/constants/constants.mjs +3 -3
- package/dist/esm/constants/constants.native.js +3 -3
- package/dist/esm/createComponent.mjs +311 -536
- package/dist/esm/createComponent.mjs.map +1 -1
- package/dist/esm/createComponent.native.js +265 -591
- package/dist/esm/createComponent.native.js.map +1 -1
- package/dist/esm/createGui.mjs +20 -51
- package/dist/esm/createGui.mjs.map +1 -1
- package/dist/esm/createGui.native.js +24 -70
- package/dist/esm/createGui.native.js.map +1 -1
- package/dist/esm/createVariables.mjs.map +1 -1
- package/dist/esm/createVariables.native.js.map +1 -1
- package/dist/esm/eventHandling.native.js +19 -9
- package/dist/esm/eventHandling.native.js.map +1 -1
- package/dist/esm/helpers/createDesignSystem.mjs +22 -36
- package/dist/esm/helpers/createDesignSystem.mjs.map +1 -1
- package/dist/esm/helpers/createDesignSystem.native.js +18 -90
- package/dist/esm/helpers/createDesignSystem.native.js.map +1 -1
- package/dist/esm/helpers/defaultAnimationDriver.mjs +1 -1
- package/dist/esm/helpers/defaultAnimationDriver.mjs.map +1 -1
- package/dist/esm/helpers/defaultAnimationDriver.native.js +1 -1
- package/dist/esm/helpers/expandStyle.mjs +12 -73
- package/dist/esm/helpers/expandStyle.mjs.map +1 -1
- package/dist/esm/helpers/expandStyle.native.js +28 -80
- package/dist/esm/helpers/expandStyle.native.js.map +1 -1
- package/dist/esm/helpers/expandStyles.mjs +2 -15
- package/dist/esm/helpers/expandStyles.mjs.map +1 -1
- package/dist/esm/helpers/expandStyles.native.js +7 -13
- package/dist/esm/helpers/expandStyles.native.js.map +1 -1
- package/dist/esm/helpers/getSplitStyles.mjs +236 -560
- package/dist/esm/helpers/getSplitStyles.mjs.map +1 -1
- package/dist/esm/helpers/getSplitStyles.native.js +205 -662
- package/dist/esm/helpers/getSplitStyles.native.js.map +1 -1
- package/dist/esm/helpers/getThemeCSSRules.mjs +8 -16
- package/dist/esm/helpers/getThemeCSSRules.mjs.map +1 -1
- package/dist/esm/helpers/getTokenForKey.mjs +32 -54
- package/dist/esm/helpers/getTokenForKey.mjs.map +1 -1
- package/dist/esm/helpers/getTokenForKey.native.js +40 -59
- package/dist/esm/helpers/getTokenForKey.native.js.map +1 -1
- package/dist/esm/helpers/insertStyleRule.mjs +27 -79
- package/dist/esm/helpers/insertStyleRule.mjs.map +1 -1
- package/dist/esm/helpers/insertStyleRule.native.js +14 -333
- package/dist/esm/helpers/insertStyleRule.native.js.map +1 -1
- package/dist/esm/helpers/isActivePlatform.mjs +2 -17
- package/dist/esm/helpers/isActivePlatform.mjs.map +1 -1
- package/dist/esm/helpers/isActivePlatform.native.js +2 -17
- package/dist/esm/helpers/isActivePlatform.native.js.map +1 -1
- package/dist/esm/helpers/log.mjs +1 -4
- package/dist/esm/helpers/log.mjs.map +1 -1
- package/dist/esm/helpers/log.native.js +1 -6
- package/dist/esm/helpers/log.native.js.map +1 -1
- package/dist/esm/helpers/propMapper.mjs +37 -108
- package/dist/esm/helpers/propMapper.mjs.map +1 -1
- package/dist/esm/helpers/propMapper.native.js +54 -131
- package/dist/esm/helpers/propMapper.native.js.map +1 -1
- package/dist/esm/helpers/skipProps.mjs +3 -10
- package/dist/esm/helpers/skipProps.mjs.map +1 -1
- package/dist/esm/helpers/skipProps.native.js +2 -10
- package/dist/esm/helpers/skipProps.native.js.map +1 -1
- package/dist/esm/helpers/useRenderElement.mjs +9 -22
- package/dist/esm/helpers/useRenderElement.mjs.map +1 -1
- package/dist/esm/helpers/useRenderElement.native.js +8 -17
- package/dist/esm/helpers/useRenderElement.native.js.map +1 -1
- package/dist/esm/helpers/wrapStyleTags.mjs +11 -15
- package/dist/esm/helpers/wrapStyleTags.mjs.map +1 -1
- package/dist/esm/helpers/wrapStyleTags.native.js +1 -20
- package/dist/esm/helpers/wrapStyleTags.native.js.map +1 -1
- package/dist/esm/hooks/getThemeProxied.mjs +11 -52
- package/dist/esm/hooks/getThemeProxied.mjs.map +1 -1
- package/dist/esm/hooks/getThemeProxied.native.js +27 -48
- package/dist/esm/hooks/getThemeProxied.native.js.map +1 -1
- package/dist/esm/hooks/useTheme.mjs +2 -2
- package/dist/esm/hooks/useTheme.mjs.map +1 -1
- package/dist/esm/hooks/useTheme.native.js +2 -2
- package/dist/esm/hooks/useTheme.native.js.map +1 -1
- package/dist/esm/hooks/useThemeState.mjs +67 -124
- package/dist/esm/hooks/useThemeState.mjs.map +1 -1
- package/dist/esm/hooks/useThemeState.native.js +64 -142
- package/dist/esm/hooks/useThemeState.native.js.map +1 -1
- package/dist/esm/insertFont.mjs +7 -17
- package/dist/esm/insertFont.mjs.map +1 -1
- package/dist/esm/insertFont.native.js +7 -24
- package/dist/esm/insertFont.native.js.map +1 -1
- package/dist/esm/setupReactNative.mjs +4 -24
- package/dist/esm/setupReactNative.mjs.map +1 -1
- package/dist/esm/setupReactNative.native.js +5 -26
- package/dist/esm/setupReactNative.native.js.map +1 -1
- package/dist/esm/views/GuiProvider.mjs +4 -6
- package/dist/esm/views/GuiProvider.mjs.map +1 -1
- package/dist/esm/views/GuiProvider.native.js +5 -7
- package/dist/esm/views/GuiProvider.native.js.map +1 -1
- package/dist/esm/views/Slot.mjs.map +1 -1
- package/dist/esm/views/Text.mjs +11 -18
- package/dist/esm/views/Text.mjs.map +1 -1
- package/dist/esm/views/Text.native.js +5 -12
- package/dist/esm/views/Text.native.js.map +1 -1
- package/dist/esm/views/Theme.mjs.map +1 -1
- package/dist/esm/views/ThemeProvider.mjs +9 -11
- package/dist/esm/views/ThemeProvider.mjs.map +1 -1
- package/dist/esm/views/ThemeProvider.native.js +1 -14
- package/dist/esm/views/ThemeProvider.native.js.map +1 -1
- package/dist/esm/views/View.mjs.map +1 -1
- package/dist/esm/views/View.native.js.map +1 -1
- package/package.json +29 -22
- package/src/_withStableStyle.tsx +2 -2
- package/src/config.ts +7 -4
- package/src/constants/accessibilityDirectMap.tsx +1 -1
- package/src/constants/constants.ts +3 -3
- package/src/createComponent.tsx +2 -2
- package/src/createGui.ts +2 -2
- package/src/eventHandling.native.ts +31 -10
- package/src/helpers/createMediaStyle.ts +1 -1
- package/src/helpers/defaultAnimationDriver.tsx +1 -1
- package/src/helpers/getSplitStyles.tsx +1 -1
- package/src/helpers/getTokenForKey.ts +42 -29
- package/src/helpers/insertStyleRule.tsx +2 -2
- package/src/helpers/isActivePlatform.ts +5 -5
- package/src/helpers/mergeProps.ts +1 -1
- package/src/helpers/skipProps.ts +1 -1
- package/src/helpers/useRenderElement.tsx +4 -1
- package/src/hooks/useTheme.tsx +2 -2
- package/src/interfaces/GuiComponentPropsBaseBase.tsx +10 -4
- package/src/styled.tsx +2 -2
- package/src/types.tsx +33 -24
- package/src/views/View.tsx +6 -1
- package/types/Gui.d.ts.map +1 -0
- package/types/_withStableStyle.d.ts.map +1 -0
- package/types/config.d.ts.map +1 -0
- package/types/constants/accessibilityDirectMap.d.ts.map +1 -0
- package/types/constants/accessibilityDirectMap.native.d.ts.map +1 -0
- package/types/constants/constants.d.ts.map +1 -0
- package/types/constants/isDevTools.d.ts.map +1 -0
- package/types/contexts/ComponentContext.d.ts.map +1 -0
- package/types/contexts/GroupContext.d.ts.map +1 -0
- package/types/createComponent.d.ts.map +1 -0
- package/types/createFont.d.ts.map +1 -0
- package/types/createGui.d.ts.map +1 -0
- package/types/createShorthands.d.ts.map +1 -0
- package/types/createTokens.d.ts.map +1 -0
- package/types/createVariable.d.ts.map +1 -0
- package/types/createVariables.d.ts.map +1 -0
- package/types/defaultComponentState.d.ts.map +1 -0
- package/types/eventHandling.d.ts.map +1 -0
- package/types/eventHandling.native.d.ts.map +1 -0
- package/types/helpers/consoleLog.native.d.ts.map +1 -0
- package/types/helpers/createDesignSystem.d.ts.map +1 -0
- package/types/helpers/createMediaStyle.d.ts.map +1 -0
- package/types/helpers/createStyledContext.d.ts.map +1 -0
- package/types/helpers/defaultAnimationDriver.d.ts.map +1 -0
- package/types/helpers/defaultOffset.d.ts.map +1 -0
- package/types/helpers/expandStyle.d.ts.map +1 -0
- package/types/helpers/expandStyles.d.ts.map +1 -0
- package/types/helpers/getCSSStylesAtomic.d.ts.map +1 -0
- package/types/helpers/getCSSStylesAtomic.native.d.ts.map +1 -0
- package/types/helpers/getDefaultProps.d.ts.map +1 -0
- package/types/helpers/getDynamicVal.d.ts.map +1 -0
- package/types/helpers/getExpandedShorthands.d.ts.map +1 -0
- package/types/helpers/getFontLanguage.d.ts.map +1 -0
- package/types/helpers/getGroupPropParts.d.ts.map +1 -0
- package/types/helpers/getShorthandValue.d.ts.map +1 -0
- package/types/helpers/getSplitStyles.d.ts.map +1 -0
- package/types/helpers/getThemeCSSRules.d.ts.map +1 -0
- package/types/helpers/getThemeCSSRules.native.d.ts.map +1 -0
- package/types/helpers/getTokenForKey.d.ts.map +1 -0
- package/types/helpers/getVariantExtras.d.ts.map +1 -0
- package/types/helpers/insertStyleRule.d.ts.map +1 -0
- package/types/helpers/isActivePlatform.d.ts +5 -5
- package/types/helpers/isActivePlatform.d.ts.map +1 -0
- package/types/helpers/isActiveTheme.d.ts.map +1 -0
- package/types/helpers/isGuiComponent.d.ts.map +1 -0
- package/types/helpers/isGuiElement.d.ts.map +1 -0
- package/types/helpers/isObj.d.ts.map +1 -0
- package/types/helpers/log.d.ts.map +1 -0
- package/types/helpers/mainThreadPressEvents.d.ts.map +1 -0
- package/types/helpers/mainThreadPressEvents.native.d.ts.map +1 -0
- package/types/helpers/matchMedia.d.ts.map +1 -0
- package/types/helpers/matchMedia.native.d.ts.map +1 -0
- package/types/helpers/mediaObjectToString.d.ts.map +1 -0
- package/types/helpers/mediaState.d.ts.map +1 -0
- package/types/helpers/mergeProps.d.ts.map +1 -0
- package/types/helpers/mergeRenderElementProps.d.ts.map +1 -0
- package/types/helpers/mergeSlotStyleProps.d.ts.map +1 -0
- package/types/helpers/mergeVariants.d.ts.map +1 -0
- package/types/helpers/nativeOnlyProps.d.ts.map +1 -0
- package/types/helpers/normalizeColor.d.ts.map +1 -0
- package/types/helpers/normalizeColor.native.d.ts.map +1 -0
- package/types/helpers/normalizeShadow.d.ts.map +1 -0
- package/types/helpers/normalizeShadow.native.d.ts.map +1 -0
- package/types/helpers/normalizeStyle.d.ts.map +1 -0
- package/types/helpers/normalizeStylePropKeys.d.ts.map +1 -0
- package/types/helpers/normalizeStylePropKeys.native.d.ts.map +1 -0
- package/types/helpers/normalizeValueWithProperty.d.ts.map +1 -0
- package/types/helpers/objectIdentityKey.d.ts.map +1 -0
- package/types/helpers/parseBorderShorthand.d.ts.map +1 -0
- package/types/helpers/parseBorderShorthand.native.d.ts.map +1 -0
- package/types/helpers/parseNativeStyle.d.ts.map +1 -0
- package/types/helpers/parseOutlineShorthand.d.ts.map +1 -0
- package/types/helpers/parseOutlineShorthand.native.d.ts.map +1 -0
- package/types/helpers/platformResolveValue.d.ts.map +1 -0
- package/types/helpers/platformResolveValue.native.d.ts.map +1 -0
- package/types/helpers/pointerEvents.d.ts.map +1 -0
- package/types/helpers/pointerEvents.native.d.ts.map +1 -0
- package/types/helpers/propMapper.d.ts.map +1 -0
- package/types/helpers/proxyThemeToParents.d.ts.map +1 -0
- package/types/helpers/proxyThemeVariables.d.ts.map +1 -0
- package/types/helpers/pseudoDescriptors.d.ts.map +1 -0
- package/types/helpers/pseudoTransitions.d.ts.map +1 -0
- package/types/helpers/registerCSSVariable.d.ts.map +1 -0
- package/types/helpers/resolveAnimationDriver.d.ts.map +1 -0
- package/types/helpers/resolveCompoundTokens.d.ts.map +1 -0
- package/types/helpers/resolveRem.d.ts.map +1 -0
- package/types/helpers/resolveRem.native.d.ts.map +1 -0
- package/types/helpers/resolveSafeArea.d.ts.map +1 -0
- package/types/helpers/resolveSafeArea.native.d.ts.map +1 -0
- package/types/helpers/setElementProps.d.ts.map +1 -0
- package/types/helpers/setElementProps.native.d.ts.map +1 -0
- package/types/helpers/skipProps.d.ts +1 -1
- package/types/helpers/skipProps.d.ts.map +1 -0
- package/types/helpers/sortString.d.ts.map +1 -0
- package/types/helpers/subscribeToContextGroup.d.ts.map +1 -0
- package/types/helpers/themeable.d.ts.map +1 -0
- package/types/helpers/themes.d.ts.map +1 -0
- package/types/helpers/timer.d.ts.map +1 -0
- package/types/helpers/transformsToString.d.ts.map +1 -0
- package/types/helpers/useRenderElement.d.ts.map +1 -0
- package/types/helpers/webPropsToSkip.d.ts.map +1 -0
- package/types/helpers/webPropsToSkip.native.d.ts.map +1 -0
- package/types/helpers/wrapStyleTags.d.ts +1 -1
- package/types/helpers/wrapStyleTags.d.ts.map +1 -0
- package/types/hooks/doesRootSchemeMatchSystem.d.ts.map +1 -0
- package/types/hooks/doesRootSchemeMatchSystem.native.d.ts.map +1 -0
- package/types/hooks/getThemeProxied.d.ts.map +1 -0
- package/types/hooks/useComponentState.d.ts.map +1 -0
- package/types/hooks/useDisableSSR.d.ts.map +1 -0
- package/types/hooks/useIsTouchDevice.d.ts.map +1 -0
- package/types/hooks/useMedia.d.ts.map +1 -0
- package/types/hooks/useProps.d.ts.map +1 -0
- package/types/hooks/useTheme.d.ts.map +1 -0
- package/types/hooks/useThemeName.d.ts.map +1 -0
- package/types/hooks/useThemeState.d.ts.map +1 -0
- package/types/index.d.ts.map +1 -0
- package/types/inject-styles.d.ts.map +1 -0
- package/types/insertFont.d.ts.map +1 -0
- package/types/interfaces/CSSColorNames.d.ts.map +1 -0
- package/types/interfaces/GetRef.d.ts.map +1 -0
- package/types/interfaces/GuiComponentEvents.d.ts.map +1 -0
- package/types/interfaces/GuiComponentPropsBaseBase.d.ts +3 -3
- package/types/interfaces/GuiComponentPropsBaseBase.d.ts.map +1 -0
- package/types/interfaces/RNExclusiveTypes.d.ts.map +1 -0
- package/types/setupHooks.d.ts.map +1 -0
- package/types/setupReactNative.d.ts.map +1 -0
- package/types/styled.d.ts +1 -1
- package/types/styled.d.ts.map +1 -0
- package/types/type-utils.d.ts.map +1 -0
- package/types/types.d.ts +17 -17
- package/types/types.d.ts.map +1 -0
- package/types/views/Configuration.d.ts +1 -1
- package/types/views/Configuration.d.ts.map +1 -0
- package/types/views/FontLanguage.d.ts +1 -1
- package/types/views/FontLanguage.d.ts.map +1 -0
- package/types/views/FontLanguage.native.d.ts +2 -1
- package/types/views/FontLanguage.native.d.ts.map +1 -0
- package/types/views/GuiProvider.d.ts +2 -1
- package/types/views/GuiProvider.d.ts.map +1 -0
- package/types/views/GuiRoot.d.ts +1 -1
- package/types/views/GuiRoot.d.ts.map +1 -0
- package/types/views/GuiRoot.native.d.ts.map +1 -0
- package/types/views/Slot.d.ts +1 -1
- package/types/views/Slot.d.ts.map +1 -0
- package/types/views/Text.d.ts.map +1 -0
- package/types/views/Theme.d.ts.map +1 -0
- package/types/views/ThemeDebug.d.ts.map +1 -0
- package/types/views/ThemeDebug.native.d.ts.map +1 -0
- package/types/views/ThemeProvider.d.ts +1 -1
- package/types/views/ThemeProvider.d.ts.map +1 -0
- package/types/views/View.d.ts.map +1 -0
- package/inject-styles/index.cjs +0 -2
- package/inject-styles/index.js +0 -2
- package/tsconfig.json +0 -44
- package/tsconfig.test.json +0 -9
- package/vitest.config.d.ts +0 -3
- package/vitest.config.d.ts.map +0 -1
- package/vitest.config.ts +0 -14
|
@@ -39,7 +39,7 @@ __export(createComponent_exports, {
|
|
|
39
39
|
module.exports = __toCommonJS(createComponent_exports);
|
|
40
40
|
var import_compose_refs = require("@hanzogui/compose-refs");
|
|
41
41
|
var import_constants = require("@hanzogui/constants");
|
|
42
|
-
|
|
42
|
+
require("@hanzogui/native");
|
|
43
43
|
var import_helpers = require("@hanzogui/helpers");
|
|
44
44
|
var import_is_equal_shallow = require("@hanzogui/is-equal-shallow");
|
|
45
45
|
var import_react = __toESM(require("react"), 1);
|
|
@@ -78,27 +78,23 @@ const avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "
|
|
|
78
78
|
if (typeof window !== "undefined") {
|
|
79
79
|
const cancelPresses = () => {
|
|
80
80
|
componentSetStates.forEach(setState => setState(prev => {
|
|
81
|
-
if (prev.press || prev.pressIn) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
};
|
|
87
|
-
}
|
|
81
|
+
if (prev.press || prev.pressIn) return {
|
|
82
|
+
...prev,
|
|
83
|
+
press: false,
|
|
84
|
+
pressIn: false
|
|
85
|
+
};
|
|
88
86
|
return prev;
|
|
89
87
|
}));
|
|
90
88
|
componentSetStates.clear();
|
|
91
89
|
};
|
|
92
90
|
const cancelTouches = () => {
|
|
93
91
|
componentSetStates.forEach(setState => setState(prev => {
|
|
94
|
-
if (prev.press || prev.pressIn || prev.hover) {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
};
|
|
101
|
-
}
|
|
92
|
+
if (prev.press || prev.pressIn || prev.hover) return {
|
|
93
|
+
...prev,
|
|
94
|
+
press: false,
|
|
95
|
+
pressIn: false,
|
|
96
|
+
hover: false
|
|
97
|
+
};
|
|
102
98
|
return prev;
|
|
103
99
|
}));
|
|
104
100
|
componentSetStates.clear();
|
|
@@ -106,72 +102,66 @@ if (typeof window !== "undefined") {
|
|
|
106
102
|
addEventListener("mouseup", cancelPresses);
|
|
107
103
|
addEventListener("touchend", cancelTouches);
|
|
108
104
|
addEventListener("touchcancel", cancelTouches);
|
|
109
|
-
if (process.env.NODE_ENV === "development") {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
let show = function (val) {
|
|
114
|
-
clearTimeout(tm);
|
|
115
|
-
isShowing = val;
|
|
116
|
-
debugKeyListeners?.forEach(l => l(val));
|
|
117
|
-
if (!val && resizeListener) {
|
|
118
|
-
window.removeEventListener("resize", resizeListener);
|
|
119
|
-
resizeListener = null;
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
cancelShow = function () {
|
|
123
|
-
clearTimeout(tm);
|
|
124
|
-
if (resizeListener) {
|
|
125
|
-
window.removeEventListener("resize", resizeListener);
|
|
126
|
-
resizeListener = null;
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
globalThis.__guiDevVisualizer = true;
|
|
130
|
-
debugKeyListeners = /* @__PURE__ */new Set();
|
|
131
|
-
let tm;
|
|
132
|
-
let isShowing = false;
|
|
133
|
-
let resizeListener = null;
|
|
134
|
-
const options = {
|
|
135
|
-
key: "Alt",
|
|
136
|
-
delay: 800,
|
|
137
|
-
...(typeof devVisualizerConfig === "object" ? devVisualizerConfig : {})
|
|
138
|
-
};
|
|
139
|
-
window.addEventListener("blur", () => {
|
|
140
|
-
show(false);
|
|
141
|
-
});
|
|
142
|
-
window.addEventListener("keydown", ({
|
|
143
|
-
key,
|
|
144
|
-
metaKey,
|
|
145
|
-
defaultPrevented
|
|
146
|
-
}) => {
|
|
105
|
+
if (process.env.NODE_ENV === "development") startVisualizer = () => {
|
|
106
|
+
const devVisualizerConfig = import_config.devConfig?.visualizer;
|
|
107
|
+
if (devVisualizerConfig && !globalThis.__guiDevVisualizer) {
|
|
108
|
+
let show = function (val) {
|
|
147
109
|
clearTimeout(tm);
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
if (
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
window.addEventListener("resize", resizeListener);
|
|
154
|
-
}
|
|
155
|
-
tm = setTimeout(() => {
|
|
156
|
-
show(true);
|
|
157
|
-
}, options.delay);
|
|
110
|
+
isShowing = val;
|
|
111
|
+
debugKeyListeners?.forEach(l => l(val));
|
|
112
|
+
if (!val && resizeListener) {
|
|
113
|
+
window.removeEventListener("resize", resizeListener);
|
|
114
|
+
resizeListener = null;
|
|
158
115
|
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
if (isShowing) {
|
|
166
|
-
show(false);
|
|
116
|
+
},
|
|
117
|
+
cancelShow = function () {
|
|
118
|
+
clearTimeout(tm);
|
|
119
|
+
if (resizeListener) {
|
|
120
|
+
window.removeEventListener("resize", resizeListener);
|
|
121
|
+
resizeListener = null;
|
|
167
122
|
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
123
|
+
};
|
|
124
|
+
globalThis.__guiDevVisualizer = true;
|
|
125
|
+
debugKeyListeners = /* @__PURE__ */new Set();
|
|
126
|
+
let tm;
|
|
127
|
+
let isShowing = false;
|
|
128
|
+
let resizeListener = null;
|
|
129
|
+
const options = {
|
|
130
|
+
key: "Alt",
|
|
131
|
+
delay: 800,
|
|
132
|
+
...(typeof devVisualizerConfig === "object" ? devVisualizerConfig : {})
|
|
133
|
+
};
|
|
134
|
+
window.addEventListener("blur", () => {
|
|
135
|
+
show(false);
|
|
136
|
+
});
|
|
137
|
+
window.addEventListener("keydown", ({
|
|
138
|
+
key,
|
|
139
|
+
metaKey,
|
|
140
|
+
defaultPrevented
|
|
141
|
+
}) => {
|
|
142
|
+
clearTimeout(tm);
|
|
143
|
+
if (defaultPrevented) return;
|
|
144
|
+
if (metaKey) return;
|
|
145
|
+
if (key === options.key) {
|
|
146
|
+
if (!resizeListener) {
|
|
147
|
+
resizeListener = () => cancelShow();
|
|
148
|
+
window.addEventListener("resize", resizeListener);
|
|
149
|
+
}
|
|
150
|
+
tm = setTimeout(() => {
|
|
151
|
+
show(true);
|
|
152
|
+
}, options.delay);
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
window.addEventListener("keyup", ({
|
|
156
|
+
defaultPrevented
|
|
157
|
+
}) => {
|
|
158
|
+
if (defaultPrevented) return;
|
|
159
|
+
cancelShow();
|
|
160
|
+
if (isShowing) show(false);
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
};
|
|
172
164
|
}
|
|
173
|
-
let BaseText;
|
|
174
|
-
let BaseView;
|
|
175
165
|
const lastInteractionWasKeyboard = {
|
|
176
166
|
value: false
|
|
177
167
|
};
|
|
@@ -180,19 +170,13 @@ const lastInteractionWasTouch = {
|
|
|
180
170
|
};
|
|
181
171
|
if (import_constants.isWeb && typeof document !== "undefined") {
|
|
182
172
|
document.addEventListener("keydown", () => {
|
|
183
|
-
if (!lastInteractionWasKeyboard.value)
|
|
184
|
-
lastInteractionWasKeyboard.value = true;
|
|
185
|
-
}
|
|
173
|
+
if (!lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = true;
|
|
186
174
|
});
|
|
187
175
|
document.addEventListener("mousedown", () => {
|
|
188
|
-
if (lastInteractionWasKeyboard.value)
|
|
189
|
-
lastInteractionWasKeyboard.value = false;
|
|
190
|
-
}
|
|
176
|
+
if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
|
|
191
177
|
});
|
|
192
178
|
document.addEventListener("mousemove", () => {
|
|
193
|
-
if (lastInteractionWasKeyboard.value)
|
|
194
|
-
lastInteractionWasKeyboard.value = false;
|
|
195
|
-
}
|
|
179
|
+
if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
|
|
196
180
|
lastInteractionWasTouch.value = false;
|
|
197
181
|
});
|
|
198
182
|
document.addEventListener("touchstart", () => {
|
|
@@ -217,16 +201,6 @@ function createComponent(staticConfig) {
|
|
|
217
201
|
startVisualizer = void 0;
|
|
218
202
|
}
|
|
219
203
|
}
|
|
220
|
-
if (false) {
|
|
221
|
-
if (!hasSetupBaseViews) {
|
|
222
|
-
hasSetupBaseViews = true;
|
|
223
|
-
const baseViews = import_setupHooks.hooks.getBaseViews?.();
|
|
224
|
-
if (baseViews) {
|
|
225
|
-
BaseText = baseViews.Text;
|
|
226
|
-
BaseView = baseViews.View;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
204
|
if (process.env.NODE_ENV === "test") {
|
|
231
205
|
if (propsIn["data-test-renders"]) {
|
|
232
206
|
propsIn["data-test-renders"]["current"] = propsIn["data-test-renders"]["current"] ?? 0;
|
|
@@ -242,80 +216,68 @@ function createComponent(staticConfig) {
|
|
|
242
216
|
let overriddenContextProps = null;
|
|
243
217
|
const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
|
|
244
218
|
const hasTextAncestor = !!(import_constants.isWeb && isText ? componentContext.inText : false);
|
|
245
|
-
const isInsideNativeMenu = false ? import_react.default.useContext(NativeMenuContext) : false;
|
|
246
219
|
if (!process.env.GUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
|
|
247
|
-
|
|
248
|
-
time = timer.start();
|
|
220
|
+
time = require("@hanzogui/timer").timer().start();
|
|
249
221
|
globalThis["time"] = time;
|
|
250
222
|
}
|
|
251
|
-
if (process.env.NODE_ENV === "development" && !time && globalThis.time)
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
if (process.env.NODE_ENV === "development" && time) time`non-tamagui time (ignore)`;
|
|
223
|
+
if (process.env.NODE_ENV === "development" && !time && globalThis.time) time = globalThis.time;
|
|
224
|
+
if (process.env.NODE_ENV === "development" && time) time`non-gui time (ignore)`;
|
|
255
225
|
let props = propsIn;
|
|
256
226
|
const componentName = props.componentName || staticConfig.componentName;
|
|
257
227
|
const defaultProps = (0, import_getDefaultProps.getDefaultProps)(staticConfig, props.componentName);
|
|
258
228
|
const [nextProps, overrides] = (0, import_mergeProps.mergeComponentProps)(defaultProps, styledContextValue, propsIn);
|
|
259
229
|
props = nextProps;
|
|
260
230
|
overriddenContextProps = overrides;
|
|
261
|
-
if (process.env.NODE_ENV === "development" && import_constants.isClient) {
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
overlay.style.borderColor = "red";
|
|
283
|
-
overlay.style.borderWidth = "1px";
|
|
284
|
-
overlay.style.borderStyle = "dotted";
|
|
285
|
-
}
|
|
286
|
-
const dataAt = node.getAttribute("data-at") || "";
|
|
287
|
-
const dataIn = node.getAttribute("data-in") || "";
|
|
288
|
-
const tooltip = document.createElement("span");
|
|
289
|
-
tooltip.style.position = "absolute";
|
|
290
|
-
tooltip.style.top = "0px";
|
|
291
|
-
tooltip.style.left = "0px";
|
|
292
|
-
tooltip.style.padding = "3px";
|
|
293
|
-
tooltip.style.background = "rgba(0,0,0,0.75)";
|
|
294
|
-
tooltip.style.color = "rgba(255,255,255,1)";
|
|
295
|
-
tooltip.style.fontSize = "12px";
|
|
296
|
-
tooltip.style.lineHeight = "12px";
|
|
297
|
-
tooltip.style.fontFamily = "monospace";
|
|
298
|
-
tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
|
|
299
|
-
overlay.appendChild(tooltip);
|
|
300
|
-
node.appendChild(overlay);
|
|
301
|
-
} else {
|
|
302
|
-
remove();
|
|
231
|
+
if (process.env.NODE_ENV === "development" && import_constants.isClient) import_react.default.useEffect(() => {
|
|
232
|
+
let node;
|
|
233
|
+
let overlay = null;
|
|
234
|
+
const remove = () => {
|
|
235
|
+
if (overlay) try {
|
|
236
|
+
overlay.parentNode?.removeChild(overlay);
|
|
237
|
+
overlay = null;
|
|
238
|
+
} catch {}
|
|
239
|
+
};
|
|
240
|
+
const debugVisualizerHandler = (show = false) => {
|
|
241
|
+
node = stateRef.current.host;
|
|
242
|
+
if (!node) return;
|
|
243
|
+
if (show) {
|
|
244
|
+
if (!overlay) {
|
|
245
|
+
overlay = document.createElement("span");
|
|
246
|
+
overlay.style.inset = "0px";
|
|
247
|
+
overlay.style.zIndex = "1000000";
|
|
248
|
+
overlay.style.position = "absolute";
|
|
249
|
+
overlay.style.borderColor = "red";
|
|
250
|
+
overlay.style.borderWidth = "1px";
|
|
251
|
+
overlay.style.borderStyle = "dotted";
|
|
303
252
|
}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
253
|
+
const dataAt = node.getAttribute("data-at") || "";
|
|
254
|
+
const dataIn = node.getAttribute("data-in") || "";
|
|
255
|
+
const tooltip = document.createElement("span");
|
|
256
|
+
tooltip.style.position = "absolute";
|
|
257
|
+
tooltip.style.top = "0px";
|
|
258
|
+
tooltip.style.left = "0px";
|
|
259
|
+
tooltip.style.padding = "3px";
|
|
260
|
+
tooltip.style.background = "rgba(0,0,0,0.75)";
|
|
261
|
+
tooltip.style.color = "rgba(255,255,255,1)";
|
|
262
|
+
tooltip.style.fontSize = "12px";
|
|
263
|
+
tooltip.style.lineHeight = "12px";
|
|
264
|
+
tooltip.style.fontFamily = "monospace";
|
|
265
|
+
tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
|
|
266
|
+
overlay.appendChild(tooltip);
|
|
267
|
+
node.appendChild(overlay);
|
|
268
|
+
} else remove();
|
|
269
|
+
};
|
|
270
|
+
debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set();
|
|
271
|
+
debugKeyListeners.add(debugVisualizerHandler);
|
|
272
|
+
return () => {
|
|
273
|
+
remove();
|
|
274
|
+
debugKeyListeners?.delete(debugVisualizerHandler);
|
|
275
|
+
};
|
|
276
|
+
}, [componentName]);
|
|
313
277
|
const groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext);
|
|
314
278
|
const animationDriver = (() => {
|
|
315
279
|
if (props.animatedBy && config) {
|
|
316
|
-
if (config.animationDrivers)
|
|
317
|
-
return config.animationDrivers[props.animatedBy] ?? config.animations;
|
|
318
|
-
}
|
|
280
|
+
if (config.animationDrivers) return config.animationDrivers[props.animatedBy] ?? config.animations;
|
|
319
281
|
return props.animatedBy === "default" ? config.animations : null;
|
|
320
282
|
}
|
|
321
283
|
return (0, import_resolveAnimationDriver.resolveAnimationDriver)(componentContext.animationDriver) ?? (0, import_resolveAnimationDriver.resolveAnimationDriver)(config?.animations) ?? null;
|
|
@@ -342,19 +304,15 @@ function createComponent(staticConfig) {
|
|
|
342
304
|
willBeAnimatedClient,
|
|
343
305
|
startedUnhydrated
|
|
344
306
|
} = componentState;
|
|
345
|
-
if (hasAnimationProp && animationDriver?.avoidReRenders) {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
componentState.setStateShallow(pendingState);
|
|
351
|
-
}
|
|
352
|
-
});
|
|
353
|
-
}
|
|
354
|
-
const allGroupContexts = (0, import_react.useMemo)(() => {
|
|
355
|
-
if (!groupName || props.passThrough) {
|
|
356
|
-
return groupContextParent;
|
|
307
|
+
if (hasAnimationProp && animationDriver?.avoidReRenders) (0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
308
|
+
const pendingState = stateRef.current.nextState;
|
|
309
|
+
if (pendingState) {
|
|
310
|
+
stateRef.current.nextState = void 0;
|
|
311
|
+
componentState.setStateShallow(pendingState);
|
|
357
312
|
}
|
|
313
|
+
});
|
|
314
|
+
const allGroupContexts = (0, import_react.useMemo)(() => {
|
|
315
|
+
if (!groupName || props.passThrough) return groupContextParent;
|
|
358
316
|
const listeners = /* @__PURE__ */new Set();
|
|
359
317
|
stateRef.current.group?.listeners?.clear();
|
|
360
318
|
stateRef.current.group = {
|
|
@@ -364,18 +322,14 @@ function createComponent(staticConfig) {
|
|
|
364
322
|
},
|
|
365
323
|
subscribe(cb) {
|
|
366
324
|
listeners.add(cb);
|
|
367
|
-
if (listeners.size === 1) {
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
});
|
|
371
|
-
}
|
|
325
|
+
if (listeners.size === 1) setStateShallow({
|
|
326
|
+
hasDynGroupChildren: true
|
|
327
|
+
});
|
|
372
328
|
return () => {
|
|
373
329
|
listeners.delete(cb);
|
|
374
|
-
if (listeners.size === 0) {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
});
|
|
378
|
-
}
|
|
330
|
+
if (listeners.size === 0) setStateShallow({
|
|
331
|
+
hasDynGroupChildren: false
|
|
332
|
+
});
|
|
379
333
|
};
|
|
380
334
|
}
|
|
381
335
|
};
|
|
@@ -399,16 +353,10 @@ function createComponent(staticConfig) {
|
|
|
399
353
|
const renderProp = props.render;
|
|
400
354
|
const isRenderString = !Component || typeof Component === "string";
|
|
401
355
|
const element = import_constants.isWeb ? isRenderString ? renderProp || Component : Component : Component;
|
|
402
|
-
const
|
|
403
|
-
const BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
|
|
404
|
-
const BaseComponent = isText ? BaseTextComponent : BaseViewComponent;
|
|
356
|
+
const BaseComponent = isText ? element || "span" : element || (hasTextAncestor ? "span" : "div");
|
|
405
357
|
let elementType = BaseComponent;
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
elementType = animationDriver[isText ? "Text" : "View"] || elementType;
|
|
409
|
-
}
|
|
410
|
-
const disableThemeProp = false ? false : props["data-disable-theme"];
|
|
411
|
-
const disableTheme = disableThemeProp || isHOC;
|
|
358
|
+
if (animationDriver && isAnimated && animationDriver.needsCustomComponent) elementType = animationDriver[isText ? "Text" : "View"] || elementType;
|
|
359
|
+
const disableTheme = props["data-disable-theme"] || isHOC;
|
|
412
360
|
if (process.env.NODE_ENV === "development" && time) time`theme-props`;
|
|
413
361
|
const themeStateProps = {
|
|
414
362
|
componentName,
|
|
@@ -417,13 +365,8 @@ function createComponent(staticConfig) {
|
|
|
417
365
|
debug: debugProp,
|
|
418
366
|
unstyled: props.unstyled
|
|
419
367
|
};
|
|
420
|
-
if ("theme" in props)
|
|
421
|
-
themeStateProps.name = props.theme;
|
|
422
|
-
}
|
|
368
|
+
if ("theme" in props) themeStateProps.name = props.theme;
|
|
423
369
|
themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme;
|
|
424
|
-
if (false) {
|
|
425
|
-
themeStateProps.deopt = willBeAnimated;
|
|
426
|
-
}
|
|
427
370
|
if (process.env.NODE_ENV === "development") {
|
|
428
371
|
if (debugProp && debugProp !== "profile") {
|
|
429
372
|
const name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`;
|
|
@@ -432,19 +375,15 @@ function createComponent(staticConfig) {
|
|
|
432
375
|
const banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
|
|
433
376
|
const ch = propsIn.children;
|
|
434
377
|
let childLog = typeof ch === "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
|
|
435
|
-
if (childLog.length) {
|
|
436
|
-
childLog = `(children: ${childLog})`;
|
|
437
|
-
}
|
|
378
|
+
if (childLog.length) childLog = `(children: ${childLog})`;
|
|
438
379
|
if (import_constants.isWeb) {
|
|
439
380
|
console.info(`%c ${banner}`, "background: green; color: white;");
|
|
440
|
-
if (import_constants.isServer) {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
});
|
|
447
|
-
} else {
|
|
381
|
+
if (import_constants.isServer) (0, import_log.log)({
|
|
382
|
+
noClass,
|
|
383
|
+
isAnimated,
|
|
384
|
+
isWeb: import_constants.isWeb,
|
|
385
|
+
inputStyle
|
|
386
|
+
});else {
|
|
448
387
|
console.groupEnd();
|
|
449
388
|
console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
|
|
450
389
|
(0, import_log.log)("props in:", propsIn);
|
|
@@ -498,13 +437,10 @@ ${banner}
|
|
|
498
437
|
const mediaState = (0, import_useMedia.useMedia)(componentContext, debugProp);
|
|
499
438
|
(0, import_createVariable.setDidGetVariableValue)(false);
|
|
500
439
|
if (process.env.NODE_ENV === "development" && time) time`media`;
|
|
501
|
-
const resolveValues =
|
|
502
|
-
// if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
|
|
503
|
-
isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto";
|
|
504
440
|
const styleProps = {
|
|
505
441
|
mediaState,
|
|
506
442
|
noClass,
|
|
507
|
-
resolveValues,
|
|
443
|
+
resolveValues: isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto",
|
|
508
444
|
isExiting,
|
|
509
445
|
isAnimated,
|
|
510
446
|
willBeAnimated,
|
|
@@ -522,23 +458,17 @@ ${banner}
|
|
|
522
458
|
overriddenContextProps = overriddenContextProps || {};
|
|
523
459
|
overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
|
|
524
460
|
}
|
|
525
|
-
if (!staticConfig.context)
|
|
526
|
-
contextForOverride = contextForProps;
|
|
527
|
-
}
|
|
461
|
+
if (!staticConfig.context) contextForOverride = contextForProps;
|
|
528
462
|
}
|
|
529
463
|
}
|
|
530
464
|
const groupContext = groupName ? allGroupContexts?.[groupName] || null : null;
|
|
531
|
-
if (!isPassthrough && groupContext &&
|
|
532
|
-
// avoids onLayout if we don't need it
|
|
533
|
-
props.containerType !== "normal") {
|
|
465
|
+
if (!isPassthrough && groupContext && props.containerType !== "normal") {
|
|
534
466
|
const groupState = groupContext?.state;
|
|
535
467
|
if (groupState && groupState.layout === void 0) {
|
|
536
|
-
if (splitStyles.style?.width || splitStyles.style?.height) {
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
};
|
|
541
|
-
}
|
|
468
|
+
if (splitStyles.style?.width || splitStyles.style?.height) groupState.layout = {
|
|
469
|
+
width: fromPx(splitStyles.style.width),
|
|
470
|
+
height: fromPx(splitStyles.style.height)
|
|
471
|
+
};
|
|
542
472
|
}
|
|
543
473
|
}
|
|
544
474
|
const hasEnterExitTransition = props.transition && typeof props.transition === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
|
|
@@ -589,16 +519,12 @@ ${banner}
|
|
|
589
519
|
};
|
|
590
520
|
}
|
|
591
521
|
componentContext.mediaEmit = componentContext.mediaEmit || (next => {
|
|
592
|
-
for (const listener of componentContext.mediaEmitListeners)
|
|
593
|
-
listener(next);
|
|
594
|
-
}
|
|
522
|
+
for (const listener of componentContext.mediaEmitListeners) listener(next);
|
|
595
523
|
});
|
|
596
524
|
stateRef.current.setStateShallow = nextOrGetNext => {
|
|
597
525
|
const prev = stateRef.current.nextState || state;
|
|
598
526
|
const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
|
|
599
|
-
if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next))
|
|
600
|
-
return;
|
|
601
|
-
}
|
|
527
|
+
if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
|
|
602
528
|
const canAvoidReRender = Object.keys(next).every(key => avoidReRenderKeys.has(key));
|
|
603
529
|
const updatedState = {
|
|
604
530
|
...prev,
|
|
@@ -617,12 +543,10 @@ ${banner}
|
|
|
617
543
|
updateGroupListeners();
|
|
618
544
|
stateRef.current.updateStyleListener?.();
|
|
619
545
|
} else {
|
|
620
|
-
if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
});
|
|
625
|
-
}
|
|
546
|
+
if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") console.info(`[\u{1F40C}] re-render`, {
|
|
547
|
+
canAvoidReRender,
|
|
548
|
+
next
|
|
549
|
+
});
|
|
626
550
|
ogSetStateShallow(next);
|
|
627
551
|
}
|
|
628
552
|
};
|
|
@@ -636,16 +560,12 @@ ${banner}
|
|
|
636
560
|
splitStyles.style = splitStyles.style || {};
|
|
637
561
|
splitStyles.style.opacity = 0;
|
|
638
562
|
}
|
|
639
|
-
if (splitStyles.dynamicThemeAccess != null)
|
|
640
|
-
stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
|
|
641
|
-
}
|
|
563
|
+
if (splitStyles.dynamicThemeAccess != null) stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
|
|
642
564
|
}
|
|
643
565
|
const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true;
|
|
644
566
|
const shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === true;
|
|
645
567
|
const mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
|
|
646
|
-
if (process.env.NODE_ENV === "development" && debugProp === "verbose")
|
|
647
|
-
console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
|
|
648
|
-
}
|
|
568
|
+
if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
|
|
649
569
|
(0, import_useMedia.setMediaShouldUpdate)(componentContext, shouldListenForMedia, mediaListeningKeys);
|
|
650
570
|
const {
|
|
651
571
|
viewProps: viewPropsIn,
|
|
@@ -674,48 +594,33 @@ ${banner}
|
|
|
674
594
|
onFocus,
|
|
675
595
|
onBlur,
|
|
676
596
|
separator,
|
|
677
|
-
// ignore from here on out
|
|
678
597
|
passThrough,
|
|
679
598
|
forceStyle: _forceStyle,
|
|
680
|
-
// @ts-ignore for next/link compat etc
|
|
681
599
|
onClick,
|
|
682
600
|
theme: _themeProp,
|
|
683
601
|
...nonGuiProps
|
|
684
602
|
} = viewPropsIn || {};
|
|
685
603
|
let viewProps = nonGuiProps;
|
|
686
|
-
if (props.forceStyle)
|
|
687
|
-
viewProps.forceStyle = props.forceStyle;
|
|
688
|
-
}
|
|
604
|
+
if (props.forceStyle) viewProps.forceStyle = props.forceStyle;
|
|
689
605
|
if (isHOC) {
|
|
690
|
-
if (typeof _themeProp !== "undefined")
|
|
691
|
-
|
|
692
|
-
}
|
|
693
|
-
if (typeof passThrough !== "undefined") {
|
|
694
|
-
viewProps.passThrough = passThrough;
|
|
695
|
-
}
|
|
606
|
+
if (typeof _themeProp !== "undefined") viewProps.theme = _themeProp;
|
|
607
|
+
if (typeof passThrough !== "undefined") viewProps.passThrough = passThrough;
|
|
696
608
|
}
|
|
697
609
|
let animationStyles;
|
|
698
|
-
const shouldUseAnimation =
|
|
699
|
-
// if it supports css vars we run it on server too to get matching initial style
|
|
700
|
-
(inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
|
|
610
|
+
const shouldUseAnimation = (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
|
|
701
611
|
let animatedRef;
|
|
702
612
|
if (shouldUseAnimation) {
|
|
703
613
|
const useStyleEmitter = animationDriver?.avoidReRenders ? listener => {
|
|
704
614
|
stateRef.current.useStyleListener = listener;
|
|
705
615
|
} : void 0;
|
|
706
616
|
const effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions, props.transition);
|
|
707
|
-
if (splitStyles)
|
|
708
|
-
splitStyles.effectiveTransition = effectiveTransition;
|
|
709
|
-
}
|
|
617
|
+
if (splitStyles) splitStyles.effectiveTransition = effectiveTransition;
|
|
710
618
|
stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(state);
|
|
711
619
|
const animations = useAnimations({
|
|
712
620
|
props: propsWithAnimation,
|
|
713
|
-
// clone style to prevent animation driver mutations from leaking to viewProps
|
|
714
|
-
// during SSR/pre-hydration (CSS driver mutates style.transition in place)
|
|
715
621
|
style: isHydrated ? splitStylesStyle || {} : {
|
|
716
622
|
...splitStylesStyle
|
|
717
623
|
},
|
|
718
|
-
// @ts-ignore
|
|
719
624
|
styleState: splitStyles,
|
|
720
625
|
useStyleEmitter,
|
|
721
626
|
presence,
|
|
@@ -728,56 +633,38 @@ ${banner}
|
|
|
728
633
|
stateRef
|
|
729
634
|
});
|
|
730
635
|
if (animations) {
|
|
731
|
-
if (animations.ref)
|
|
732
|
-
animatedRef = animations.ref;
|
|
733
|
-
}
|
|
636
|
+
if (animations.ref) animatedRef = animations.ref;
|
|
734
637
|
if (isHydrated && animations) {
|
|
735
638
|
animationStyles = animations.style;
|
|
736
639
|
viewProps.style = animationStyles;
|
|
737
|
-
if (animations.className) {
|
|
738
|
-
viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
|
|
739
|
-
}
|
|
640
|
+
if (animations.className) viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
|
|
740
641
|
}
|
|
741
642
|
}
|
|
742
643
|
if (process.env.NODE_ENV === "development" && time) time`animations`;
|
|
743
644
|
}
|
|
744
|
-
if (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group)
|
|
745
|
-
console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
|
|
645
|
+
if (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group) console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
|
|
746
646
|
|
|
747
647
|
If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`);
|
|
748
|
-
}
|
|
749
648
|
if (process.env.NODE_ENV === "development" && time) time`destructure`;
|
|
750
|
-
if (!isPassthrough && groupContext &&
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
groupContext.state.layout = layout;
|
|
756
|
-
stateRef.current.group?.emit({
|
|
757
|
-
layout
|
|
758
|
-
});
|
|
759
|
-
if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") {
|
|
760
|
-
setState(prev => ({
|
|
761
|
-
...prev
|
|
762
|
-
}));
|
|
763
|
-
}
|
|
764
|
-
stateRef.current.hasMeasured = true;
|
|
649
|
+
if (!isPassthrough && groupContext && props.containerType !== "normal") nonGuiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonGuiProps.onLayout, e => {
|
|
650
|
+
const layout = e.nativeEvent.layout;
|
|
651
|
+
groupContext.state.layout = layout;
|
|
652
|
+
stateRef.current.group?.emit({
|
|
653
|
+
layout
|
|
765
654
|
});
|
|
766
|
-
|
|
655
|
+
if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") setState(prev => ({
|
|
656
|
+
...prev
|
|
657
|
+
}));
|
|
658
|
+
stateRef.current.hasMeasured = true;
|
|
659
|
+
});
|
|
767
660
|
viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonGuiProps, stateRef, stateRef.current.willHydrate) || nonGuiProps;
|
|
768
|
-
if (!stateRef.current.composedRef)
|
|
769
|
-
stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(x => stateRef.current.host = x, forwardedRef, import_setElementProps.setElementProps, animatedRef);
|
|
770
|
-
}
|
|
661
|
+
if (!stateRef.current.composedRef) stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(x => stateRef.current.host = x, forwardedRef, import_setElementProps.setElementProps, animatedRef);
|
|
771
662
|
viewProps.ref = stateRef.current.composedRef;
|
|
772
663
|
(0, import_pointerEvents.usePointerEvents)(props, viewProps);
|
|
773
664
|
if (process.env.NODE_ENV === "development") {
|
|
774
|
-
if (!isReactNative && !isText && import_constants.isWeb && !isHOC) {
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
|
|
778
|
-
}
|
|
779
|
-
});
|
|
780
|
-
}
|
|
665
|
+
if (!isReactNative && !isText && import_constants.isWeb && !isHOC) import_react.default.Children.toArray(props.children).forEach(item => {
|
|
666
|
+
if (typeof item === "string" && item !== "\n") console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
|
|
667
|
+
});
|
|
781
668
|
}
|
|
782
669
|
if (process.env.NODE_ENV === "development" && time) time`events-hooks`;
|
|
783
670
|
const unPress = () => {
|
|
@@ -786,25 +673,23 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
786
673
|
pressIn: false
|
|
787
674
|
});
|
|
788
675
|
};
|
|
789
|
-
if (process.env.NODE_ENV === "development" && import_constants.isWeb) {
|
|
790
|
-
(
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
});
|
|
807
|
-
}
|
|
676
|
+
if (process.env.NODE_ENV === "development" && import_constants.isWeb) (0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
677
|
+
if (debugProp === "verbose") {
|
|
678
|
+
let cssStyleDeclarationToObject = function (style) {
|
|
679
|
+
const styleObject = {};
|
|
680
|
+
for (let i = 0; i < style.length; i++) {
|
|
681
|
+
let prop = style[i];
|
|
682
|
+
styleObject[prop] = style.getPropertyValue(prop);
|
|
683
|
+
}
|
|
684
|
+
return styleObject;
|
|
685
|
+
};
|
|
686
|
+
const computed = stateRef.current.host ? cssStyleDeclarationToObject(getComputedStyle(stateRef.current.host)) : {};
|
|
687
|
+
console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
|
|
688
|
+
console.warn(stateRef.current.host);
|
|
689
|
+
console.warn(computed);
|
|
690
|
+
console.groupEnd();
|
|
691
|
+
}
|
|
692
|
+
});
|
|
808
693
|
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
809
694
|
if (state.unmounted === true && hasEnterStyle) {
|
|
810
695
|
setStateShallow({
|
|
@@ -865,20 +750,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
865
750
|
const shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
|
|
866
751
|
const needsPressState = Boolean(hasDynamicGroupChildren || runtimePressStyle);
|
|
867
752
|
if (process.env.NODE_ENV === "development" && time) time`events-setup`;
|
|
868
|
-
if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
});
|
|
881
|
-
}
|
|
753
|
+
if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`\u{1FAA9} events()`, {
|
|
754
|
+
runtimeFocusStyle,
|
|
755
|
+
runtimePressStyle,
|
|
756
|
+
runtimeHoverStyle,
|
|
757
|
+
runtimeFocusVisibleStyle,
|
|
758
|
+
attachPress,
|
|
759
|
+
attachFocus,
|
|
760
|
+
attachHover,
|
|
761
|
+
shouldAttach,
|
|
762
|
+
needsHoverState,
|
|
763
|
+
pseudos
|
|
764
|
+
});
|
|
882
765
|
const events = shouldAttach ? {
|
|
883
766
|
onPressOut: attachPress ? e => {
|
|
884
767
|
unPress();
|
|
@@ -888,13 +771,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
888
771
|
...((attachHover || attachPress) && {
|
|
889
772
|
onMouseEnter: e => {
|
|
890
773
|
const next = {};
|
|
891
|
-
if (needsHoverState && !lastInteractionWasTouch.value)
|
|
892
|
-
next.hover = true;
|
|
893
|
-
}
|
|
774
|
+
if (needsHoverState && !lastInteractionWasTouch.value) next.hover = true;
|
|
894
775
|
if (needsPressState) {
|
|
895
|
-
if (state.pressIn)
|
|
896
|
-
next.press = true;
|
|
897
|
-
}
|
|
776
|
+
if (state.pressIn) next.press = true;
|
|
898
777
|
}
|
|
899
778
|
setStateShallow(next);
|
|
900
779
|
onHoverIn?.(e);
|
|
@@ -902,9 +781,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
902
781
|
},
|
|
903
782
|
onMouseLeave: e => {
|
|
904
783
|
const next = {};
|
|
905
|
-
if (needsHoverState)
|
|
906
|
-
next.hover = false;
|
|
907
|
-
}
|
|
784
|
+
if (needsHoverState) next.hover = false;
|
|
908
785
|
if (needsPressState) {
|
|
909
786
|
next.press = false;
|
|
910
787
|
next.pressIn = false;
|
|
@@ -915,32 +792,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
915
792
|
}
|
|
916
793
|
}),
|
|
917
794
|
onPressIn: attachPress ? e => {
|
|
918
|
-
if (needsPressState) {
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
});
|
|
923
|
-
}
|
|
795
|
+
if (needsPressState) setStateShallow({
|
|
796
|
+
press: true,
|
|
797
|
+
pressIn: true
|
|
798
|
+
});
|
|
924
799
|
onPressIn?.(e);
|
|
925
800
|
onMouseDown?.(e);
|
|
926
|
-
if (import_constants.isWeb)
|
|
927
|
-
componentSetStates.add(setState);
|
|
928
|
-
}
|
|
801
|
+
if (import_constants.isWeb) componentSetStates.add(setState);
|
|
929
802
|
} : void 0,
|
|
930
803
|
onPress: attachPress ? e => {
|
|
931
804
|
unPress();
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
if (onPress || onClick) {
|
|
935
|
-
e.stopPropagation();
|
|
936
|
-
}
|
|
937
|
-
}
|
|
805
|
+
onClick?.(e);
|
|
806
|
+
if (onPress || onClick) e.stopPropagation();
|
|
938
807
|
onPress?.(e);
|
|
939
|
-
|
|
940
|
-
onLongPress?.(e);
|
|
941
|
-
}
|
|
808
|
+
onLongPress?.(e);
|
|
942
809
|
} : void 0,
|
|
943
|
-
...false,
|
|
944
810
|
...(attachFocus && {
|
|
945
811
|
onFocus: e => {
|
|
946
812
|
const next = {};
|
|
@@ -951,23 +817,15 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
951
817
|
next.focusWithin = true;
|
|
952
818
|
}
|
|
953
819
|
if (pseudos?.focusVisibleStyle) {
|
|
954
|
-
if (lastInteractionWasKeyboard.value)
|
|
955
|
-
|
|
956
|
-
} else {
|
|
957
|
-
next.focus = true;
|
|
958
|
-
}
|
|
959
|
-
} else {
|
|
960
|
-
next.focus = true;
|
|
961
|
-
}
|
|
820
|
+
if (lastInteractionWasKeyboard.value) next.focusVisible = true;else next.focus = true;
|
|
821
|
+
} else next.focus = true;
|
|
962
822
|
setStateShallow(next);
|
|
963
823
|
onFocus?.(e);
|
|
964
824
|
},
|
|
965
825
|
onBlur: e => {
|
|
966
|
-
if (componentContext.setParentFocusState) {
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
});
|
|
970
|
-
}
|
|
826
|
+
if (componentContext.setParentFocusState) componentContext.setParentFocusState({
|
|
827
|
+
focusWithin: false
|
|
828
|
+
});
|
|
971
829
|
setStateShallow({
|
|
972
830
|
focus: false,
|
|
973
831
|
focusVisible: false,
|
|
@@ -977,38 +835,20 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
977
835
|
}
|
|
978
836
|
})
|
|
979
837
|
} : null;
|
|
980
|
-
if (
|
|
981
|
-
Object.assign(events, {
|
|
982
|
-
cancelable: !viewProps.rejectResponderTermination,
|
|
983
|
-
disabled,
|
|
984
|
-
hitSlop: viewProps.hitSlop,
|
|
985
|
-
delayLongPress: viewProps.delayLongPress,
|
|
986
|
-
delayPressIn: viewProps.delayPressIn,
|
|
987
|
-
delayPressOut: viewProps.delayPressOut,
|
|
988
|
-
focusable: viewProps.focusable ?? true,
|
|
989
|
-
minPressDuration: 0
|
|
990
|
-
});
|
|
991
|
-
}
|
|
992
|
-
if (events && !isReactNative) {
|
|
993
|
-
Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
|
|
994
|
-
}
|
|
838
|
+
if (events && !isReactNative) Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
|
|
995
839
|
if (process.env.NODE_ENV === "development" && time) time`events`;
|
|
996
|
-
if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
});
|
|
1002
|
-
}
|
|
840
|
+
if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`events`, {
|
|
841
|
+
events,
|
|
842
|
+
attachHover,
|
|
843
|
+
attachPress
|
|
844
|
+
});
|
|
1003
845
|
const propsWithHref = props;
|
|
1004
846
|
const propsInWithHref = propsIn;
|
|
1005
|
-
|
|
1006
|
-
const pressDebugName = [componentName, pressDebugDetail].filter(Boolean).join(":") || null;
|
|
1007
|
-
const pressGesture = false ? useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu, pressDebugName) : null;
|
|
847
|
+
[componentName, props.testID ?? propsIn.testID ?? props.accessibilityLabel ?? propsIn.accessibilityLabel ?? (typeof propsWithHref.href === "string" ? propsWithHref.href : null) ?? (typeof propsInWithHref.href === "string" ? propsInWithHref.href : null)].filter(Boolean).join(":");
|
|
1008
848
|
if (process.env.NODE_ENV === "development" && time) time`hooks`;
|
|
1009
849
|
if (asChild) {
|
|
1010
850
|
elementType = import_Slot.Slot;
|
|
1011
|
-
|
|
851
|
+
{
|
|
1012
852
|
const webStyleEvents = asChild === "web" || asChild === "except-style-web";
|
|
1013
853
|
const passEvents = (0, import_eventHandling.getWebEvents)({
|
|
1014
854
|
onPress,
|
|
@@ -1021,25 +861,16 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
1021
861
|
onMouseLeave
|
|
1022
862
|
}, webStyleEvents);
|
|
1023
863
|
Object.assign(viewProps, passEvents);
|
|
1024
|
-
} else {
|
|
1025
|
-
Object.assign(viewProps, {
|
|
1026
|
-
onPress,
|
|
1027
|
-
onLongPress
|
|
1028
|
-
});
|
|
1029
864
|
}
|
|
1030
865
|
}
|
|
1031
866
|
if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
|
|
1032
867
|
let content;
|
|
1033
|
-
if (isPassthrough) {
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
display: "contents"
|
|
1037
|
-
}
|
|
1038
|
-
}, propsIn.children);
|
|
1039
|
-
} else {
|
|
1040
|
-
if (import_setupHooks.hooks.useChildren) {
|
|
1041
|
-
content = import_setupHooks.hooks.useChildren(elementType, content || children, viewProps);
|
|
868
|
+
if (isPassthrough) content = import_react.default.createElement(BaseComponent, {
|
|
869
|
+
style: {
|
|
870
|
+
display: "contents"
|
|
1042
871
|
}
|
|
872
|
+
}, propsIn.children);else {
|
|
873
|
+
if (import_setupHooks.hooks.useChildren) content = import_setupHooks.hooks.useChildren(elementType, content || children, viewProps);
|
|
1043
874
|
const isRenderPropString = typeof renderProp === "string";
|
|
1044
875
|
if (renderProp && !isRenderPropString) {
|
|
1045
876
|
const out = getCustomRender(renderProp, content || children, viewProps, componentState);
|
|
@@ -1049,76 +880,47 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
1049
880
|
}
|
|
1050
881
|
}
|
|
1051
882
|
if (!content) {
|
|
1052
|
-
if (isRenderPropString)
|
|
1053
|
-
viewProps.render === renderProp;
|
|
1054
|
-
}
|
|
883
|
+
if (isRenderPropString) viewProps.render;
|
|
1055
884
|
content = import_react.default.createElement(elementType, viewProps, content || children);
|
|
1056
885
|
}
|
|
1057
886
|
if (process.env.NODE_ENV === "development" && time) time`use-children`;
|
|
1058
887
|
}
|
|
1059
|
-
if (false) {
|
|
1060
|
-
const isCompositeComponent = !isHOC && Component && typeof Component !== "string";
|
|
1061
|
-
content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC, isCompositeComponent);
|
|
1062
|
-
}
|
|
1063
888
|
const ResetPresence = animationDriver?.ResetPresence;
|
|
1064
889
|
const needsReset = Boolean(
|
|
1065
890
|
// not when passing down to child
|
|
1066
|
-
!asChild &&
|
|
1067
|
-
// not when passThrough
|
|
1068
|
-
splitStyles &&
|
|
1069
|
-
// not when HOC
|
|
1070
|
-
!isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
|
|
891
|
+
!asChild && splitStyles && !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
|
|
1071
892
|
const hasEverReset = stateRef.current.hasEverResetPresence;
|
|
1072
|
-
if (needsReset && !hasEverReset)
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResetPresence, {
|
|
1078
|
-
disabled: !needsReset,
|
|
1079
|
-
children: content
|
|
1080
|
-
});
|
|
1081
|
-
}
|
|
893
|
+
if (needsReset && !hasEverReset) stateRef.current.hasEverResetPresence = true;
|
|
894
|
+
if ((needsReset || hasEverReset) && ResetPresence) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResetPresence, {
|
|
895
|
+
disabled: !needsReset,
|
|
896
|
+
children: content
|
|
897
|
+
});
|
|
1082
898
|
if (process.env.NODE_ENV === "development" && time) time`create-element`;
|
|
1083
|
-
if ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) {
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
|
|
1098
|
-
...componentContext,
|
|
1099
|
-
inText: true,
|
|
1100
|
-
children: content
|
|
1101
|
-
});
|
|
1102
|
-
}
|
|
899
|
+
if ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
|
|
900
|
+
...componentContext,
|
|
901
|
+
setParentFocusState: setStateShallow,
|
|
902
|
+
children: content
|
|
903
|
+
});
|
|
904
|
+
if ("group" in props) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
|
|
905
|
+
value: allGroupContexts,
|
|
906
|
+
children: content
|
|
907
|
+
});
|
|
908
|
+
if (!asChild && isText && !hasTextAncestor) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
|
|
909
|
+
...componentContext,
|
|
910
|
+
inText: true,
|
|
911
|
+
children: content
|
|
912
|
+
});
|
|
1103
913
|
if (process.env.NODE_ENV === "development" && time) time`group-context`;
|
|
1104
914
|
content = disableTheme || !splitStyles ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, false, stateRef);
|
|
1105
915
|
if (process.env.NODE_ENV === "development" && time) time`themed-children`;
|
|
1106
|
-
if (
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
children: content
|
|
1112
|
-
});
|
|
1113
|
-
}
|
|
1114
|
-
}
|
|
916
|
+
if (isReactNative && !asChild) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
|
|
917
|
+
className: "_dsp_contents",
|
|
918
|
+
...(!isPassthrough && isHydrated && events && (0, import_eventHandling.getWebEvents)(events)),
|
|
919
|
+
children: content
|
|
920
|
+
});
|
|
1115
921
|
if (overriddenContextProps && contextForOverride) {
|
|
1116
922
|
const Provider = contextForOverride.Provider;
|
|
1117
|
-
for (const key in styledContextValue)
|
|
1118
|
-
if (!(key in overriddenContextProps)) {
|
|
1119
|
-
overriddenContextProps[key] = styledContextValue[key];
|
|
1120
|
-
}
|
|
1121
|
-
}
|
|
923
|
+
for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
|
|
1122
924
|
content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Provider, {
|
|
1123
925
|
__disableMergeDefaultValues: true,
|
|
1124
926
|
...overriddenContextProps,
|
|
@@ -1126,61 +928,52 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
1126
928
|
});
|
|
1127
929
|
}
|
|
1128
930
|
if (process.env.NODE_ENV === "development" && time) time`context-override`;
|
|
1129
|
-
if (startedUnhydrated && splitStyles) {
|
|
1130
|
-
content
|
|
1131
|
-
|
|
1132
|
-
});
|
|
1133
|
-
}
|
|
931
|
+
if (startedUnhydrated && splitStyles) content = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
932
|
+
children: [content, !isHydrated ? (0, import_wrapStyleTags.getStyleTags)(Object.values(splitStyles.rulesToInsert)) : null]
|
|
933
|
+
});
|
|
1134
934
|
if (process.env.NODE_ENV === "development" && time) time`style-tags`;
|
|
1135
935
|
if (process.env.NODE_ENV === "development") {
|
|
1136
936
|
if (debugProp && debugProp !== "profile") {
|
|
1137
|
-
const
|
|
1138
|
-
const title = `render <${element2} /> (${internalID}) with props`;
|
|
937
|
+
const title = `render <${typeof elementType === "string" ? elementType : "Component"} /> (${internalID}) with props`;
|
|
1139
938
|
if (!import_constants.isWeb || !import_constants.isClient) {
|
|
1140
939
|
(0, import_log.log)(title);
|
|
1141
940
|
(0, import_log.log)(`state: `, state);
|
|
1142
|
-
if (import_isDevTools.isDevTools)
|
|
1143
|
-
(0, import_log.log)("viewProps", viewProps);
|
|
1144
|
-
}
|
|
941
|
+
if (import_isDevTools.isDevTools) (0, import_log.log)("viewProps", viewProps);
|
|
1145
942
|
(0, import_log.log)(`final styles:`);
|
|
1146
|
-
for (const key in splitStylesStyle)
|
|
1147
|
-
(0, import_log.log)(key, splitStylesStyle[key]);
|
|
1148
|
-
}
|
|
943
|
+
for (const key in splitStylesStyle) (0, import_log.log)(key, splitStylesStyle[key]);
|
|
1149
944
|
} else {
|
|
1150
945
|
console.groupCollapsed(title);
|
|
1151
946
|
try {
|
|
1152
947
|
(0, import_log.log)("viewProps", viewProps);
|
|
1153
948
|
(0, import_log.log)("children", content);
|
|
1154
|
-
if (typeof window !== "undefined") {
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
});
|
|
1183
|
-
}
|
|
949
|
+
if (typeof window !== "undefined") (0, import_log.log)({
|
|
950
|
+
propsIn,
|
|
951
|
+
props,
|
|
952
|
+
attachPress,
|
|
953
|
+
animationStyles,
|
|
954
|
+
classNames,
|
|
955
|
+
content,
|
|
956
|
+
elementType,
|
|
957
|
+
events,
|
|
958
|
+
isAnimated,
|
|
959
|
+
hasRuntimeMediaKeys,
|
|
960
|
+
isStringElement,
|
|
961
|
+
mediaListeningKeys,
|
|
962
|
+
pseudos,
|
|
963
|
+
shouldAttach,
|
|
964
|
+
noClass,
|
|
965
|
+
shouldListenForMedia,
|
|
966
|
+
splitStyles,
|
|
967
|
+
splitStylesStyle,
|
|
968
|
+
state,
|
|
969
|
+
stateRef,
|
|
970
|
+
staticConfig,
|
|
971
|
+
styleProps,
|
|
972
|
+
themeState,
|
|
973
|
+
viewProps,
|
|
974
|
+
willBeAnimated,
|
|
975
|
+
startedUnhydrated
|
|
976
|
+
});
|
|
1184
977
|
} catch {} finally {
|
|
1185
978
|
console.groupEnd();
|
|
1186
979
|
}
|
|
@@ -1202,9 +995,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
1202
995
|
return content;
|
|
1203
996
|
});
|
|
1204
997
|
function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
|
|
1205
|
-
if (!groupContext || !groupEmitter)
|
|
1206
|
-
return;
|
|
1207
|
-
}
|
|
998
|
+
if (!groupContext || !groupEmitter) return;
|
|
1208
999
|
const nextState = {
|
|
1209
1000
|
...groupContext.state,
|
|
1210
1001
|
pseudo
|
|
@@ -1212,9 +1003,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
1212
1003
|
groupEmitter.emit(nextState);
|
|
1213
1004
|
groupContext.state = nextState;
|
|
1214
1005
|
}
|
|
1215
|
-
if (staticConfig.componentName)
|
|
1216
|
-
component.displayName = staticConfig.componentName;
|
|
1217
|
-
}
|
|
1006
|
+
if (staticConfig.componentName) component.displayName = staticConfig.componentName;
|
|
1218
1007
|
let res = component;
|
|
1219
1008
|
res = import_react.default.memo(res);
|
|
1220
1009
|
res.staticConfig = staticConfig;
|
|
@@ -1228,13 +1017,10 @@ If you meant to do this, you can disable this warning - either change untilMeasu
|
|
|
1228
1017
|
};
|
|
1229
1018
|
}
|
|
1230
1019
|
function styleable(Component2, options) {
|
|
1231
|
-
|
|
1232
|
-
let out = skipForwardRef ? Component2 : import_react.default.forwardRef(Component2);
|
|
1020
|
+
let out = typeof Component2 === "function" && Component2.length === 1 ? Component2 : import_react.default.forwardRef(Component2);
|
|
1233
1021
|
const extendedConfig = extendStyledConfig(options?.staticConfig);
|
|
1234
1022
|
out = options?.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig, true);
|
|
1235
|
-
if (extendedConfig.memo || process.env.
|
|
1236
|
-
out = import_react.default.memo(out);
|
|
1237
|
-
}
|
|
1023
|
+
if (extendedConfig.memo || process.env.GUI_MEMOIZE_STYLEABLE) out = import_react.default.memo(out);
|
|
1238
1024
|
out.staticConfig = extendedConfig;
|
|
1239
1025
|
out.styleable = styleable;
|
|
1240
1026
|
return out;
|
|
@@ -1248,14 +1034,10 @@ const fromPx = val => {
|
|
|
1248
1034
|
return 0;
|
|
1249
1035
|
};
|
|
1250
1036
|
const getCustomRender = (renderProp, content, viewProps, state) => {
|
|
1251
|
-
if (typeof renderProp === "function")
|
|
1252
|
-
const out = renderProp(viewProps, state);
|
|
1253
|
-
renderProp = getRenderElementForPlatform(out);
|
|
1254
|
-
}
|
|
1037
|
+
if (typeof renderProp === "function") renderProp = getRenderElementForPlatform(renderProp(viewProps, state));
|
|
1255
1038
|
if (renderProp) {
|
|
1256
1039
|
if (typeof renderProp === "object" && import_react.default.isValidElement(renderProp)) {
|
|
1257
|
-
|
|
1258
|
-
if (renderElement) {
|
|
1040
|
+
if (getRenderElementForPlatform(renderProp)) {
|
|
1259
1041
|
const elementProps = renderProp.props;
|
|
1260
1042
|
const mergedProps = elementProps ? (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content) : viewProps;
|
|
1261
1043
|
return {
|
|
@@ -1267,10 +1049,5 @@ const getCustomRender = (renderProp, content, viewProps, state) => {
|
|
|
1267
1049
|
}
|
|
1268
1050
|
};
|
|
1269
1051
|
function getRenderElementForPlatform(potential) {
|
|
1270
|
-
if (false) {
|
|
1271
|
-
if (isHTMLElement(potential)) {
|
|
1272
|
-
return;
|
|
1273
|
-
}
|
|
1274
|
-
}
|
|
1275
1052
|
return potential;
|
|
1276
1053
|
}
|