@hanzogui/image 3.0.2 → 7.0.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/package.json +10 -10
- package/src/createImage.tsx +14 -5
- package/src/v1/Image.tsx +3 -3
- package/types/Image.native.d.ts +2 -2
- package/types/createImage.d.ts +4 -4
- package/types/types.d.ts +1 -1
- package/types/v1/Image.d.ts +3 -3
- package/dist/cjs/Image.cjs +0 -62
- package/dist/cjs/Image.native.js +0 -33
- package/dist/cjs/Image.native.js.map +0 -1
- package/dist/cjs/createImage.cjs +0 -128
- package/dist/cjs/createImage.native.js +0 -134
- package/dist/cjs/createImage.native.js.map +0 -1
- package/dist/cjs/index.cjs +0 -19
- package/dist/cjs/index.native.js +0 -22
- package/dist/cjs/index.native.js.map +0 -1
- package/dist/cjs/types.cjs +0 -16
- package/dist/cjs/types.native.js +0 -19
- package/dist/cjs/types.native.js.map +0 -1
- package/dist/cjs/v1/Image.cjs +0 -86
- package/dist/cjs/v1/Image.native.js +0 -105
- package/dist/cjs/v1/Image.native.js.map +0 -1
- package/dist/cjs/v1/index.cjs +0 -18
- package/dist/cjs/v1/index.native.js +0 -21
- package/dist/cjs/v1/index.native.js.map +0 -1
- package/dist/esm/Image.mjs +0 -39
- package/dist/esm/Image.mjs.map +0 -1
- package/dist/esm/Image.native.js +0 -7
- package/dist/esm/Image.native.js.map +0 -1
- package/dist/esm/createImage.mjs +0 -105
- package/dist/esm/createImage.mjs.map +0 -1
- package/dist/esm/createImage.native.js +0 -108
- package/dist/esm/createImage.native.js.map +0 -1
- package/dist/esm/index.js +0 -3
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs +0 -3
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js +0 -3
- package/dist/esm/index.native.js.map +0 -1
- package/dist/esm/types.mjs +0 -2
- package/dist/esm/types.mjs.map +0 -1
- package/dist/esm/types.native.js +0 -2
- package/dist/esm/types.native.js.map +0 -1
- package/dist/esm/v1/Image.mjs +0 -52
- package/dist/esm/v1/Image.mjs.map +0 -1
- package/dist/esm/v1/Image.native.js +0 -68
- package/dist/esm/v1/Image.native.js.map +0 -1
- package/dist/esm/v1/index.mjs +0 -2
- package/dist/esm/v1/index.mjs.map +0 -1
- package/dist/esm/v1/index.native.js +0 -2
- package/dist/esm/v1/index.native.js.map +0 -1
- package/dist/jsx/Image.mjs +0 -39
- package/dist/jsx/Image.mjs.map +0 -1
- package/dist/jsx/Image.native.js +0 -33
- package/dist/jsx/Image.native.js.map +0 -1
- package/dist/jsx/createImage.mjs +0 -105
- package/dist/jsx/createImage.mjs.map +0 -1
- package/dist/jsx/createImage.native.js +0 -134
- package/dist/jsx/createImage.native.js.map +0 -1
- package/dist/jsx/index.js +0 -3
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs +0 -3
- package/dist/jsx/index.mjs.map +0 -1
- package/dist/jsx/index.native.js +0 -22
- package/dist/jsx/index.native.js.map +0 -1
- package/dist/jsx/types.mjs +0 -2
- package/dist/jsx/types.mjs.map +0 -1
- package/dist/jsx/types.native.js +0 -19
- package/dist/jsx/types.native.js.map +0 -1
- package/dist/jsx/v1/Image.mjs +0 -52
- package/dist/jsx/v1/Image.mjs.map +0 -1
- package/dist/jsx/v1/Image.native.js +0 -105
- package/dist/jsx/v1/Image.native.js.map +0 -1
- package/dist/jsx/v1/index.mjs +0 -2
- package/dist/jsx/v1/index.mjs.map +0 -1
- package/dist/jsx/v1/index.native.js +0 -21
- package/dist/jsx/v1/index.native.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzogui/image",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"files": [
|
|
6
6
|
"src",
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
|
-
"build": "
|
|
34
|
-
"watch": "
|
|
35
|
-
"clean": "
|
|
36
|
-
"clean:build": "
|
|
33
|
+
"build": "hanzogui-build",
|
|
34
|
+
"watch": "hanzogui-build --watch",
|
|
35
|
+
"clean": "hanzogui-build clean",
|
|
36
|
+
"clean:build": "hanzogui-build clean:build"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@hanzogui/constants": "
|
|
40
|
-
"@hanzogui/core": "
|
|
41
|
-
"@hanzogui/web": "
|
|
39
|
+
"@hanzogui/constants": "^7.0.0",
|
|
40
|
+
"@hanzogui/core": "^7.0.0",
|
|
41
|
+
"@hanzogui/web": "^7.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@hanzogui/build": "
|
|
44
|
+
"@hanzogui/build": "^7.0.0",
|
|
45
45
|
"react": ">=19",
|
|
46
46
|
"react-native": "0.83.2"
|
|
47
47
|
},
|
|
@@ -50,4 +50,4 @@
|
|
|
50
50
|
"react-native": "*"
|
|
51
51
|
},
|
|
52
52
|
"module:jsx": "dist/jsx"
|
|
53
|
-
}
|
|
53
|
+
}
|
package/src/createImage.tsx
CHANGED
|
@@ -86,7 +86,7 @@ const defaultTransformSource = (props: {
|
|
|
86
86
|
* })
|
|
87
87
|
*
|
|
88
88
|
* Now you get all expo-image props (transition, placeholder, etc.)
|
|
89
|
-
* plus
|
|
89
|
+
* plus Hanzogui's unified API (src, objectFit, objectPosition)
|
|
90
90
|
* <Image
|
|
91
91
|
* src="https://example.com/photo.jpg"
|
|
92
92
|
* objectFit="cover"
|
|
@@ -105,7 +105,7 @@ export function createImage<C extends ComponentType<any>>(
|
|
|
105
105
|
transformSource = defaultTransformSource,
|
|
106
106
|
} = options
|
|
107
107
|
|
|
108
|
-
// Props that should pass directly to the underlying component without
|
|
108
|
+
// Props that should pass directly to the underlying component without Hanzogui processing
|
|
109
109
|
const inlinePropsSet = new Set([
|
|
110
110
|
'source',
|
|
111
111
|
'placeholder',
|
|
@@ -135,7 +135,7 @@ export function createImage<C extends ComponentType<any>>(
|
|
|
135
135
|
}
|
|
136
136
|
)
|
|
137
137
|
|
|
138
|
-
// Combined props: ImageProps (
|
|
138
|
+
// Combined props: ImageProps (Hanzogui) + Component's native props
|
|
139
139
|
type CombinedProps = ImageProps & Omit<GetProps<C>, keyof ImageProps>
|
|
140
140
|
|
|
141
141
|
const ImageComponent = StyledImage.styleable<CombinedProps>((incomingProps, ref) => {
|
|
@@ -144,6 +144,7 @@ export function createImage<C extends ComponentType<any>>(
|
|
|
144
144
|
src,
|
|
145
145
|
width,
|
|
146
146
|
height,
|
|
147
|
+
borderRadius,
|
|
147
148
|
objectFit,
|
|
148
149
|
objectPosition,
|
|
149
150
|
// web only props - filter out on native
|
|
@@ -160,10 +161,12 @@ export function createImage<C extends ComponentType<any>>(
|
|
|
160
161
|
} = props
|
|
161
162
|
|
|
162
163
|
const resolvedWidth =
|
|
163
|
-
typeof width === 'string' && width[0] === '$'
|
|
164
|
+
typeof width === 'string' && width[0] === '$'
|
|
165
|
+
? getTokenValue(width as any, 'size')
|
|
166
|
+
: width
|
|
164
167
|
const resolvedHeight =
|
|
165
168
|
typeof height === 'string' && height[0] === '$'
|
|
166
|
-
? getTokenValue(height as any)
|
|
169
|
+
? getTokenValue(height as any, 'size')
|
|
167
170
|
: height
|
|
168
171
|
|
|
169
172
|
const finalSource = transformSource({
|
|
@@ -176,11 +179,17 @@ export function createImage<C extends ComponentType<any>>(
|
|
|
176
179
|
? Object.assign({}, ...rest.style.flat())
|
|
177
180
|
: rest.style
|
|
178
181
|
|
|
182
|
+
const resolvedBorderRadius =
|
|
183
|
+
typeof borderRadius === 'string' && borderRadius[0] === '$'
|
|
184
|
+
? getTokenValue(borderRadius as any, 'radius')
|
|
185
|
+
: borderRadius
|
|
186
|
+
|
|
179
187
|
const finalProps: any = {
|
|
180
188
|
...rest,
|
|
181
189
|
source: finalSource,
|
|
182
190
|
style: {
|
|
183
191
|
...incomingStyle,
|
|
192
|
+
...(resolvedBorderRadius !== undefined && { borderRadius: resolvedBorderRadius }),
|
|
184
193
|
...(resolvedWidth !== undefined && { width: resolvedWidth }),
|
|
185
194
|
...(resolvedHeight !== undefined && { height: resolvedHeight }),
|
|
186
195
|
},
|
package/src/v1/Image.tsx
CHANGED
|
@@ -52,7 +52,7 @@ let hasWarned = false
|
|
|
52
52
|
|
|
53
53
|
/**
|
|
54
54
|
* @summary An image is a component that displays an image.
|
|
55
|
-
* @see — Docs https://
|
|
55
|
+
* @see — Docs https://hanzogui.dev/ui/image
|
|
56
56
|
*/
|
|
57
57
|
export const Image = StyledImage.styleable<ImageProps>((inProps, ref) => {
|
|
58
58
|
const [props, style] = usePropsAndStyle(inProps)
|
|
@@ -86,7 +86,7 @@ export const Image = StyledImage.styleable<ImageProps>((inProps, ref) => {
|
|
|
86
86
|
: (source ?? src)
|
|
87
87
|
|
|
88
88
|
if (finalSource && typeof finalSource === 'object') {
|
|
89
|
-
if (process.env.
|
|
89
|
+
if (process.env.TAMAGUI_TARGET === 'native') {
|
|
90
90
|
// fix: normalize import style images
|
|
91
91
|
if (!Array.isArray(finalSource)) {
|
|
92
92
|
if (typeof finalSource.uri === 'number') {
|
|
@@ -101,7 +101,7 @@ export const Image = StyledImage.styleable<ImageProps>((inProps, ref) => {
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
if (process.env.NODE_ENV === 'development' && process.env.
|
|
104
|
+
if (process.env.NODE_ENV === 'development' && process.env.TAMAGUI_IMAGE_CHECK_ERROR) {
|
|
105
105
|
// lets add an onload timeout and warning if it fails to load in console
|
|
106
106
|
React.useEffect(() => {
|
|
107
107
|
async function run() {
|
package/types/Image.native.d.ts
CHANGED
|
@@ -6,11 +6,11 @@ export declare const Image: import("react").FC<Partial<import("./types").ImagePr
|
|
|
6
6
|
prefetchWithMetadata: typeof RNImage.prefetchWithMetadata;
|
|
7
7
|
abortPrefetch: typeof RNImage.abortPrefetch | undefined;
|
|
8
8
|
queryCache: typeof RNImage.queryCache | undefined;
|
|
9
|
-
} & import("react").FC<import("@
|
|
9
|
+
} & import("react").FC<import("@hanzogui/web").StackNonStyleProps & import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>> & import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> & import("@hanzogui/web").WithMediaProps<import("@hanzogui/web").WithThemeShorthandsAndPseudos<import("@hanzogui/web").StackStyleBase, {}>> & Omit<import("react-native").ImageProps, `$${string}` | `$${number}` | import("@hanzogui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | keyof import("@hanzogui/web").StackStyleBase | keyof import("@hanzogui/web").StackNonStyleProps | keyof import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> | "source" | "resizeMode"> & {
|
|
10
10
|
src?: string | number;
|
|
11
11
|
source?: import("react-native").ImageSourcePropType;
|
|
12
12
|
resizeMode?: import("react-native").ImageResizeMode;
|
|
13
13
|
objectFit?: React.CSSProperties["objectFit"];
|
|
14
14
|
objectPosition?: React.CSSProperties["objectPosition"];
|
|
15
|
-
} & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, `$${string}` | `$${number}` | import("@
|
|
15
|
+
} & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, `$${string}` | `$${number}` | import("@hanzogui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | keyof import("@hanzogui/web").StackStyleBase | keyof import("@hanzogui/web").StackNonStyleProps | keyof import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> | "src"> & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "style" | "height" | "width" | "src"> & Omit<import("react-native").ImageProps, `$${string}` | `$${number}` | import("@hanzogui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | "onLayout" | "rel" | "dir" | keyof import("@hanzogui/web").StackStyleBase | keyof import("@hanzogui/web").StackNonStyleProps | keyof import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> | "source" | "resizeMode" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "src" | "srcSet" | "loadingIndicatorSource" | "defaultSource" | "alt" | "crossOrigin" | "tintColor" | "referrerPolicy" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "resizeMethod" | "fadeDuration" | "objectPosition" | "decoding" | "fetchPriority" | "loading" | "sizes" | "useMap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "title" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">>;
|
|
16
16
|
//# sourceMappingURL=Image.native.d.ts.map
|
package/types/createImage.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ export type CreateImageOptions<C extends ComponentType<any>> = {
|
|
|
42
42
|
* @example
|
|
43
43
|
* Using with expo-image
|
|
44
44
|
* import { Image as ExpoImage } from 'expo-image'
|
|
45
|
-
* import { createImage } from '@
|
|
45
|
+
* import { createImage } from '@hanzogui/image'
|
|
46
46
|
*
|
|
47
47
|
* export const Image = createImage({
|
|
48
48
|
* Component: ExpoImage,
|
|
@@ -51,7 +51,7 @@ export type CreateImageOptions<C extends ComponentType<any>> = {
|
|
|
51
51
|
* })
|
|
52
52
|
*
|
|
53
53
|
* Now you get all expo-image props (transition, placeholder, etc.)
|
|
54
|
-
* plus
|
|
54
|
+
* plus Hanzogui's unified API (src, objectFit, objectPosition)
|
|
55
55
|
* <Image
|
|
56
56
|
* src="https://example.com/photo.jpg"
|
|
57
57
|
* objectFit="cover"
|
|
@@ -66,12 +66,12 @@ export declare function createImage<C extends ComponentType<any>>(options: Creat
|
|
|
66
66
|
prefetchWithMetadata: typeof import("react-native").Image.prefetchWithMetadata;
|
|
67
67
|
abortPrefetch: typeof import("react-native").Image.abortPrefetch | undefined;
|
|
68
68
|
queryCache: typeof import("react-native").Image.queryCache | undefined;
|
|
69
|
-
} & import("react").FC<import("@
|
|
69
|
+
} & import("react").FC<import("@hanzogui/web").StackNonStyleProps & import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>> & import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> & import("@hanzogui/web").WithMediaProps<import("@hanzogui/web").WithThemeShorthandsAndPseudos<import("@hanzogui/web").StackStyleBase, {}>> & Omit<import("react-native").ImageProps, `$${string}` | `$${number}` | import("@hanzogui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | keyof import("@hanzogui/web").StackStyleBase | keyof import("@hanzogui/web").StackNonStyleProps | keyof import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> | "source" | "resizeMode"> & {
|
|
70
70
|
src?: string | number;
|
|
71
71
|
source?: import("react-native").ImageSourcePropType;
|
|
72
72
|
resizeMode?: ImageResizeMode;
|
|
73
73
|
objectFit?: React.CSSProperties["objectFit"];
|
|
74
74
|
objectPosition?: React.CSSProperties["objectPosition"];
|
|
75
|
-
} & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, `$${string}` | `$${number}` | import("@
|
|
75
|
+
} & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, `$${string}` | `$${number}` | import("@hanzogui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | keyof import("@hanzogui/web").StackStyleBase | keyof import("@hanzogui/web").StackNonStyleProps | keyof import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> | "src"> & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "style" | "height" | "width" | "src"> & Omit<GetProps<C>, `$${string}` | `$${number}` | import("@hanzogui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | "onLayout" | "rel" | "dir" | keyof import("@hanzogui/web").StackStyleBase | keyof import("@hanzogui/web").StackNonStyleProps | keyof import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> | "source" | "resizeMode" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "src" | "srcSet" | "loadingIndicatorSource" | "defaultSource" | "alt" | "crossOrigin" | "tintColor" | "referrerPolicy" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "resizeMethod" | "fadeDuration" | "objectPosition" | "decoding" | "fetchPriority" | "loading" | "sizes" | "useMap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "title" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">>;
|
|
76
76
|
export {};
|
|
77
77
|
//# sourceMappingURL=createImage.d.ts.map
|
package/types/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ViewProps } from '@
|
|
1
|
+
import type { ViewProps } from '@hanzogui/web';
|
|
2
2
|
import type { ImageResizeMode, ImageSourcePropType, Image as RNImage, ImageProps as RNImageProps } from 'react-native';
|
|
3
3
|
type RNImageType = typeof RNImage;
|
|
4
4
|
type KeyofViewProps = keyof ViewProps;
|
package/types/v1/Image.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { GetProps, RadiusTokens, SizeTokens, ViewProps, ThemeValueFallback } from '@
|
|
2
|
+
import type { GetProps, RadiusTokens, SizeTokens, ViewProps, ThemeValueFallback } from '@hanzogui/web';
|
|
3
3
|
import type { FC } from 'react';
|
|
4
4
|
import { Image as RNImage } from 'react-native';
|
|
5
|
-
declare const StyledImage: import("@
|
|
5
|
+
declare const StyledImage: import("@hanzogui/web").HanzoguiComponent<import("@hanzogui/web").TamaDefer, RNImage, import("@hanzogui/web").HanzoguiComponentPropsBaseBase & import("react-native").ImageProps, import("@hanzogui/web").StackStyleBase, {}, import("@hanzogui/web").StaticConfigPublic>;
|
|
6
6
|
type StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {
|
|
7
7
|
borderRadius?: RadiusTokens;
|
|
8
8
|
};
|
|
@@ -29,7 +29,7 @@ type ImageType = FC<ImageProps> & {
|
|
|
29
29
|
};
|
|
30
30
|
/**
|
|
31
31
|
* @summary An image is a component that displays an image.
|
|
32
|
-
* @see — Docs https://
|
|
32
|
+
* @see — Docs https://hanzogui.dev/ui/image
|
|
33
33
|
*/
|
|
34
34
|
export declare const Image: ImageType;
|
|
35
35
|
export {};
|
package/dist/cjs/Image.cjs
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all) __defProp(target, name, {
|
|
7
|
-
get: all[name],
|
|
8
|
-
enumerable: !0
|
|
9
|
-
});
|
|
10
|
-
},
|
|
11
|
-
__copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
|
|
13
|
-
get: () => from[key],
|
|
14
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
-
});
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
19
|
-
value: !0
|
|
20
|
-
}), mod);
|
|
21
|
-
var Image_exports = {};
|
|
22
|
-
__export(Image_exports, {
|
|
23
|
-
Image: () => Image
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(Image_exports);
|
|
26
|
-
var import_gui_web = require("@hanzogui/web"),
|
|
27
|
-
import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
-
const StyledImage = (0, import_gui_web.styled)(import_gui_web.View, {
|
|
29
|
-
name: "Image",
|
|
30
|
-
render: "img"
|
|
31
|
-
}),
|
|
32
|
-
Image = StyledImage.styleable((inProps, ref) => {
|
|
33
|
-
const {
|
|
34
|
-
// exclude native only props
|
|
35
|
-
blurRadius,
|
|
36
|
-
capInsets,
|
|
37
|
-
defaultSource,
|
|
38
|
-
fadeDuration,
|
|
39
|
-
loadingIndicatorSource,
|
|
40
|
-
onLoadEnd,
|
|
41
|
-
onPartialLoad,
|
|
42
|
-
progressiveRenderingEnabled,
|
|
43
|
-
resizeMethod,
|
|
44
|
-
tintColor,
|
|
45
|
-
...rest
|
|
46
|
-
} = inProps;
|
|
47
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledImage, {
|
|
48
|
-
ref,
|
|
49
|
-
...rest
|
|
50
|
-
});
|
|
51
|
-
}, {
|
|
52
|
-
staticConfig: {
|
|
53
|
-
memo: !0
|
|
54
|
-
}
|
|
55
|
-
}),
|
|
56
|
-
func = () => {};
|
|
57
|
-
Image.getSize = func;
|
|
58
|
-
Image.getSizeWithHeaders = func;
|
|
59
|
-
Image.prefetch = func;
|
|
60
|
-
Image.prefetchWithMetadata = func;
|
|
61
|
-
Image.abortPrefetch = func;
|
|
62
|
-
Image.queryCache = func;
|
package/dist/cjs/Image.native.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all) __defProp(target, name, {
|
|
9
|
-
get: all[name],
|
|
10
|
-
enumerable: !0
|
|
11
|
-
});
|
|
12
|
-
},
|
|
13
|
-
__copyProps = (to, from, except, desc) => {
|
|
14
|
-
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
|
|
15
|
-
get: () => from[key],
|
|
16
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
17
|
-
});
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
21
|
-
value: !0
|
|
22
|
-
}), mod);
|
|
23
|
-
var Image_native_exports = {};
|
|
24
|
-
__export(Image_native_exports, {
|
|
25
|
-
Image: () => Image
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(Image_native_exports);
|
|
28
|
-
var import_react_native = require("react-native"),
|
|
29
|
-
import_createImage = require("./createImage.native.js"),
|
|
30
|
-
Image = (0, import_createImage.createImage)({
|
|
31
|
-
Component: import_react_native.Image
|
|
32
|
-
});
|
|
33
|
-
//# sourceMappingURL=Image.native.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Image_native_exports","__export","Image","module","exports","__toCommonJS","import_react_native","require","import_createImage","createImage","Component"],"sources":["../../src/Image.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,KAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAL,oBAAA;AAAA,IAAAM,mBAAA,GAAiCC,OAAA;EACjCC,kBAAA,GAA4BD,OAAA;EACjBL,KAAA,OAAQM,kBAAA,CAAAC,WAAA,EAAY;IAC3BC,SAAA,EAAWJ,mBAAA,CAAAJ;EACf,CAAC","ignoreList":[]}
|
package/dist/cjs/createImage.cjs
DELETED
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all) __defProp(target, name, {
|
|
7
|
-
get: all[name],
|
|
8
|
-
enumerable: !0
|
|
9
|
-
});
|
|
10
|
-
},
|
|
11
|
-
__copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
|
|
13
|
-
get: () => from[key],
|
|
14
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
-
});
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
19
|
-
value: !0
|
|
20
|
-
}), mod);
|
|
21
|
-
var createImage_exports = {};
|
|
22
|
-
__export(createImage_exports, {
|
|
23
|
-
createImage: () => createImage
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(createImage_exports);
|
|
26
|
-
var import_gui_web = require("@hanzogui/web"),
|
|
27
|
-
import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
-
const defaultObjectFitMap = objectFit => {
|
|
29
|
-
switch (objectFit) {
|
|
30
|
-
case "fill":
|
|
31
|
-
return "stretch";
|
|
32
|
-
case "none":
|
|
33
|
-
return "center";
|
|
34
|
-
case "scale-down":
|
|
35
|
-
return "contain";
|
|
36
|
-
case "contain":
|
|
37
|
-
return "contain";
|
|
38
|
-
default:
|
|
39
|
-
return "cover";
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
defaultTransformSource = props => {
|
|
43
|
-
const {
|
|
44
|
-
src,
|
|
45
|
-
source,
|
|
46
|
-
width,
|
|
47
|
-
height
|
|
48
|
-
} = props;
|
|
49
|
-
return source || (src && typeof src != "string" ? src : {
|
|
50
|
-
uri: src,
|
|
51
|
-
width,
|
|
52
|
-
height
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
function createImage(options) {
|
|
56
|
-
const {
|
|
57
|
-
Component,
|
|
58
|
-
mapObjectFitToResizeMode = defaultObjectFitMap,
|
|
59
|
-
resizeModePropName = "resizeMode",
|
|
60
|
-
objectPositionPropName,
|
|
61
|
-
transformSource = defaultTransformSource
|
|
62
|
-
} = options,
|
|
63
|
-
ImageComponent = (0, import_gui_web.styled)(Component, {
|
|
64
|
-
name: "Image"
|
|
65
|
-
}, {
|
|
66
|
-
inlineProps: /* @__PURE__ */new Set(["source", "placeholder", "transition", "contentFit", "contentPosition", "cachePolicy", "recyclingKey", "allowDownscaling", "autoplay", "blurRadius", "priority", "placeholderContentFit", "responsivePolicy", "onLoadStart", "onProgress", "onLoadEnd"])
|
|
67
|
-
}).styleable((incomingProps, ref) => {
|
|
68
|
-
const props = incomingProps,
|
|
69
|
-
{
|
|
70
|
-
src,
|
|
71
|
-
width,
|
|
72
|
-
height,
|
|
73
|
-
objectFit,
|
|
74
|
-
objectPosition,
|
|
75
|
-
// web only props - filter out on native
|
|
76
|
-
decoding,
|
|
77
|
-
elementTiming,
|
|
78
|
-
fetchpriority,
|
|
79
|
-
isMap,
|
|
80
|
-
loading,
|
|
81
|
-
sizes,
|
|
82
|
-
useMap,
|
|
83
|
-
onLoad,
|
|
84
|
-
onError,
|
|
85
|
-
...rest
|
|
86
|
-
} = props,
|
|
87
|
-
resolvedWidth = typeof width == "string" && width[0] === "$" ? (0, import_gui_web.getTokenValue)(width) : width,
|
|
88
|
-
resolvedHeight = typeof height == "string" && height[0] === "$" ? (0, import_gui_web.getTokenValue)(height) : height,
|
|
89
|
-
finalSource = transformSource({
|
|
90
|
-
src,
|
|
91
|
-
width: resolvedWidth,
|
|
92
|
-
height: resolvedHeight
|
|
93
|
-
}),
|
|
94
|
-
incomingStyle = Array.isArray(rest.style) ? Object.assign({}, ...rest.style.flat()) : rest.style,
|
|
95
|
-
finalProps = {
|
|
96
|
-
...rest,
|
|
97
|
-
source: finalSource,
|
|
98
|
-
style: {
|
|
99
|
-
...incomingStyle,
|
|
100
|
-
...(resolvedWidth !== void 0 && {
|
|
101
|
-
width: resolvedWidth
|
|
102
|
-
}),
|
|
103
|
-
...(resolvedHeight !== void 0 && {
|
|
104
|
-
height: resolvedHeight
|
|
105
|
-
})
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
return objectFit && (finalProps[resizeModePropName] = mapObjectFitToResizeMode(objectFit)), objectPositionPropName && objectPosition && (finalProps[objectPositionPropName] = objectPosition), onLoad && (finalProps.onLoad = e => {
|
|
109
|
-
const source = e?.nativeEvent?.source || e?.source || {};
|
|
110
|
-
onLoad({
|
|
111
|
-
target: {
|
|
112
|
-
naturalHeight: source?.height,
|
|
113
|
-
naturalWidth: source?.width
|
|
114
|
-
},
|
|
115
|
-
type: "load"
|
|
116
|
-
});
|
|
117
|
-
}), onError && (finalProps.onError = () => {
|
|
118
|
-
onError({
|
|
119
|
-
type: "error"
|
|
120
|
-
});
|
|
121
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
|
|
122
|
-
ref,
|
|
123
|
-
...finalProps
|
|
124
|
-
});
|
|
125
|
-
}),
|
|
126
|
-
comp = Component;
|
|
127
|
-
return ImageComponent.getSize = comp.getSize || (() => {}), ImageComponent.getSizeWithHeaders = comp.getSizeWithHeaders || (() => {}), ImageComponent.prefetch = comp.prefetch || (() => {}), ImageComponent.prefetchWithMetadata = comp.prefetchWithMetadata || (() => {}), ImageComponent.abortPrefetch = comp.abortPrefetch || (() => {}), ImageComponent.queryCache = comp.queryCache || (() => {}), ImageComponent;
|
|
128
|
-
}
|