From 0184748d0694ac228fefe2e883fd3080d7ff4330 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Fri, 16 Feb 2024 08:19:56 +0530 Subject: [PATCH] updated types --- README.md | 4 ++++ src/components/IKContext/props.ts | 15 ++------------- src/components/IKUpload/index.tsx | 11 ++--------- src/components/IKUpload/props.ts | 20 +++++++++++++++++++- src/utils/Utility.ts | 31 ++++++++++++++++++++++--------- 5 files changed, 49 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 8a77fc0..2095727 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,10 @@ ImageKit is a complete media storage, optimization, and transformation solution * In version 4.0.0, we've removed the old overlay syntax parameters for transformations, such as `oi`, `ot`, `obg`, and [more](https://docs.imagekit.io/features/image-transformations/overlay). These parameters are deprecated and will start returning errors when used in URLs. Please migrate to the new layers syntax that supports overlay nesting, provides better positional control, and allows more transformations at the layer level. You can start with [examples](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#examples) to learn quickly. * You can migrate to the new layers syntax using the `raw` transformation parameter. +2. IKContext props update + +* In version 4.0.0, we've narrowed down the options you can use with `IKContext`. Now, you can only use `urlEndpoint`, `publicKey`, `authenticator`, and `transformationPosition` as props. + ### Upgrading from 2.x to 3.x version 3.x version has breaking changes as listed below. * In version 3.0.0, we have deprecated the use of the `authenticationEndpoint` parameter. Instead, the SDK now introduces a new parameter named `authenticator`. This parameter expects an asynchronous function that resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`. diff --git a/src/components/IKContext/props.ts b/src/components/IKContext/props.ts index 5d084d4..7e4807b 100644 --- a/src/components/IKContext/props.ts +++ b/src/components/IKContext/props.ts @@ -1,8 +1,5 @@ import ImageKit from 'imagekit-javascript'; import PropTypes, { InferProps } from 'prop-types'; -import IK_IMAGE_PROPS from "../IKImage/props"; -import IK_UPLOAD_PROPS from "../IKUpload/props"; -import IK_VIDEO_PROPS from "../IKUpload/props"; const Props = { publicKey: PropTypes.string, @@ -12,19 +9,11 @@ const Props = { export const IKContextCombinedProps = { ...Props, - ...IK_IMAGE_PROPS, - ...IK_UPLOAD_PROPS, - ...IK_VIDEO_PROPS, + transformationPosition: PropTypes.oneOf(['path', 'query']), ikClient: PropTypes.instanceOf(ImageKit), }; -type IKContextCombinedPropsOmit = Omit & { - src?: string; - path?: string; - transformation?: Array; -}; - -export type IKContextCombinedProps = InferProps & { +export type IKContextCombinedProps = InferProps & { urlEndpoint?: string; }; diff --git a/src/components/IKUpload/index.tsx b/src/components/IKUpload/index.tsx index d7c674f..8960b00 100755 --- a/src/components/IKUpload/index.tsx +++ b/src/components/IKUpload/index.tsx @@ -1,14 +1,9 @@ import React, { forwardRef, useContext, useEffect, useState } from 'react'; -import COMMON_PROPS, { IKContextBaseProps } from "../IKContext/props"; -import IK_UPLOAD_PROPS, { IKUploadProps } from "./props"; +import { IKContextBaseProps } from "../IKContext/props"; +import { IKUploadProps } from "./props"; import { ImageKitContext } from '../IKContext'; import useImageKitComponent from '../ImageKitComponent'; -const PROP_TYPES = { - ...COMMON_PROPS, - ...IK_UPLOAD_PROPS, -}; - type IKUploadState = { xhr?: XMLHttpRequest; }; @@ -213,6 +208,4 @@ const IKUpload = forwardRef & { isPrivateFile?: boolean; customCoordinates?: string; responseFields?: Array; - extensions?: object[]; + extensions?: Extension; webhookUrl?: string; overwriteFile?: boolean, overwriteAITags?: boolean, diff --git a/src/utils/Utility.ts b/src/utils/Utility.ts index fc95197..66468e4 100644 --- a/src/utils/Utility.ts +++ b/src/utils/Utility.ts @@ -36,15 +36,28 @@ export const areObjectsDifferent = (prevProps: T, newProps: T, propsAffecting type GetSrcReturnType = {originalSrc: string; lqipSrc?: string;}; export const getSrc = ({ urlEndpoint, lqip, src, path, transformation, transformationPosition, queryParameters }: IKImageBaseProps & IKVideoBaseProps & IKContextBaseProps, - ikClient: ImageKit, contextOptions: IKContextCombinedProps): GetSrcReturnType => { - let options: UrlOptions = { - urlEndpoint: urlEndpoint || contextOptions.urlEndpoint, - src: src || contextOptions.src || undefined, - path: path || contextOptions.path || undefined, - transformation: transformation || contextOptions.transformation, - transformationPosition: ((transformationPosition || contextOptions.transformationPosition || undefined) as TransformationPosition), - queryParameters: queryParameters || contextOptions.queryParameters || {} - }; + ikClient: ImageKit, contextOptions: IKContextCombinedProps): GetSrcReturnType => { + + let options: UrlOptions; + if (src) { + options = { + urlEndpoint: urlEndpoint || contextOptions.urlEndpoint, + src, + transformation: transformation || undefined, + transformationPosition: ((transformationPosition || contextOptions.transformationPosition || undefined) as TransformationPosition), + queryParameters: queryParameters || {}, + }; + } else if (path) { + options = { + urlEndpoint: urlEndpoint || contextOptions.urlEndpoint, + path, + transformation: transformation || undefined, + transformationPosition: ((transformationPosition || contextOptions.transformationPosition || undefined) as TransformationPosition), + queryParameters: queryParameters || {}, + }; + } else{ + throw new Error("Either src and path is required"); + } const result: GetSrcReturnType = {originalSrc: ikClient.url(options)};