tabexseriescomponents 0.2.1069 → 0.2.1071

package/srcbefore27-11/Imagekitconfig.jsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { IKImage } from 'imagekitio-react';
+export const Imagekitimagecomp = (props) => {
+    const [isoutsidelink, setisoutsidelink] = useState(false);
+    const [outsidelinkpath, setoutsidelinkpath] = useState('');
+    const [cloudflarePath, setcloudflarePath] = useState('');
+    const [is_Cloudflare_image, setis_Cloudflare_image] = useState(false);
+    const [outsidelink, setoutsidelink] = useState(false);
+
+    useEffect(() => {
+        if (props.path != undefined && props.path != null && props.path.length != 0) {
+            // if (props.path[0] == 'h') {
+            //     setisoutsidelink(true);
+            // }
+            var imagepath = props.path;
+
+            if (imagepath.includes('https')) {
+                let position = imagepath.search('https');
+                let result = imagepath.slice(position);
+                // var myArray = imagepath.split('https');
+                // if (Array.isArray(myArray)) {
+                //     if (myArray.length > 1) {
+                //     }
+                // }
+                setoutsidelinkpath(result);
+
+                setoutsidelink(true);
+            }
+        }
+    }, [props.path]);
+    useEffect(() => {
+        // if (props.urlEndpoint != undefined && props.urlEndpoint != null && props.urlEndpoint.length != 0) {
+        //     var image_urlEndpoint_loc = props.urlEndpoint;
+        //     if (image_urlEndpoint_loc.includes('image.tabexseries.com')) {
+        //         setis_Cloudflare_image(true);
+        //         setoutsidelinkpath(props.path);
+        //         if (props.path != undefined && props.path != null && props.path.length != 0) {
+        //             var imagePath = props.path; // e.g. "tr:h-100,w-200/path/to/image.jpg"
+        //             var urlEndpoint = props.urlEndpoint.replace(/\/+$/, ''); // e.g. "https://image.tabexseries.com"
+
+        //             // Extract the tr: transformation part from the path (e.g. tr:h-100,w-200)
+        //             var trMatch = imagePath.match(/tr:([^\/]+)/);
+
+        //             var width = null;
+        //             var height = null;
+
+        //             if (trMatch) {
+        //                 var transformations = trMatch[1].split(',');
+        //                 transformations.forEach((transform) => {
+        //                     if (transform.startsWith('w-')) {
+        //                         width = transform.substring(2);
+        //                     } else if (transform.startsWith('h-')) {
+        //                         height = transform.substring(2);
+        //                     }
+        //                 });
+        //             }
+
+        //             // Remove the tr: part from the image path to get the clean image path
+        //             var cleanPath = imagePath.replace(/(?:^|\/)tr:[^\/]+\/+/g, '');
+        //             cleanPath = cleanPath.replace(/^\/+/, '');
+
+        //             // Only add transforms if both width AND height are present
+        //             var cfTransformStr = '';
+        //             if (
+        //                 width != undefined &&
+        //                 width != null &&
+        //                 width != 'null' &&
+        //                 width != 0 &&
+        //                 width != '0' &&
+        //                 width.length != 0 &&
+        //                 height != undefined &&
+        //                 height != null &&
+        //                 height != 0 &&
+        //                 height != '0' &&
+        //                 height != 'null' &&
+        //                 height.length != 0
+        //             ) {
+        //                 cfTransformStr = `cdn-cgi/image/width=${width},height=${height}/`;
+        //             }
+
+        //             // Construct the full Cloudflare URL
+        //             var fullPath = urlEndpoint + '/' + cfTransformStr + cleanPath;
+
+        //             setcloudflarePath(fullPath);
+        //         }
+        //     }
+        // }
+        var image_urlEndpoint_loc = props.urlEndpoint;
+        if (props.urlEndpoint != undefined && props.urlEndpoint != null && props?.urlEndpoint?.length != 0) {
+            var image_urlEndpoint_loc = props.urlEndpoint;
+            if (image_urlEndpoint_loc.includes('image.tabexseries.com')) {
+                setis_Cloudflare_image(true);
+                setoutsidelinkpath(props.path);
+                if (props.path != undefined && props.path != null && props.path.length != 0) {
+                    var imagePath = props.path; // e.g. "tr:h-100,w-200/path/to/image.jpg"
+                    var urlEndpoint = props?.urlEndpoint?.replace(/\/+$/, ''); // e.g. "https://image.tabexseries.com"
+
+                    // Extract the tr: transformation part from the path (e.g. tr:h-100,w-200)
+                    var trMatch = imagePath.match(/tr:([^\/]+)/);
+
+                    var width = null;
+                    var height = null;
+
+                    if (trMatch) {
+                        var transformations = trMatch[1].split(',');
+                        transformations.forEach((transform) => {
+                            if (transform.startsWith('w-')) {
+                                width = transform.substring(2);
+                            } else if (transform.startsWith('h-')) {
+                                height = transform.substring(2);
+                            }
+                        });
+                    }
+
+                    // Remove the tr: part from the image path to get the clean image path
+                    var cleanPath = imagePath.replace(/(?:^|\/)tr:[^\/]+\/+/g, '');
+                    cleanPath = cleanPath.replace(/^\/+/, '');
+
+                    // Only add transforms if both width AND height are present
+                    var cfTransformStr = '';
+                    if (
+                        width != undefined &&
+                        width != null &&
+                        width != 'null' &&
+                        width != 0 &&
+                        width != '0' &&
+                        width.length != 0 &&
+                        height != undefined &&
+                        height != null &&
+                        height != 0 &&
+                        height != '0' &&
+                        height != 'null' &&
+                        height.length != 0
+                    ) {
+                        cfTransformStr = `cdn-cgi/image/width=${width},height=${height}/`;
+                    }
+
+                    // Construct the full Cloudflare URL
+                    var fullPath = urlEndpoint + '/' + cfTransformStr + cleanPath;
+
+                    setcloudflarePath(fullPath);
+                }
+            }
+        }
+    }, [props.urlEndpoint, props.path]);
+    return (
+        <>
+            {/* <h3>cloudflare here{cloudflarePath}</h3> */}
+            {/* <h3>cloudflare here{outsidelinkpath}</h3> */}
+            {is_Cloudflare_image && (
+                <>
+                    {/* <h3>cloudflare here</h3> */}
+                    {/* <h3>cloudflare - {cloudflarePath}</h3> */}
+                    <img src={cloudflarePath} style={props.style} loading={props.loading} onClick={props.onClick} class={props.class} />
+                </>
+            )}
+            {!is_Cloudflare_image && (
+                <>
+                    {outsidelink == false && props?.urlEndpoint != undefined && props?.urlEndpoint != '' && (
+                        <IKImage
+                            key={props.path}
+                            urlEndpoint={props?.urlEndpoint}
+                            // urlEndpoint={'https://ik.imagekit.io/ppcqtfrxp'}
+                            publicKey={props?.publicKey}
+                            // publicKey={'public_h8U+4K+MFoeq+MKLf34NST4axAo='}
+                            path={props.path}
+                            style={props.style}
+                            loading={props.loading}
+                            onClick={props.onClick}
+                            class={props.class}
+                        />
+                    )}
+                    {outsidelink && <img src={outsidelinkpath} style={props.style} loading={props.loading} onClick={props.onClick} class={props.class} />}
+                </>
+            )}
+        </>
+    );
+};

package/srcbefore27-11/StylesJS/Customstyles.js

@@ -0,0 +1,456 @@
+export const selectcustomStyles = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        border: '1px solid #e6e6e6',
+        // boxShadow: '0 0 10px #e6e6e6',
+        borderRadius: '5px',
+        display: 'flex',
+        cursor: 'pointer',
+        transition: '.3s',
+
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+        },
+    }),
+};
+export const selectcustomStylesTranslated = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#ffffff',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        border: '2px solid #e6e6e6',
+        // boxShadow: '0 0 10px #e6e6e6',
+        borderRadius: '10px',
+        display: 'flex',
+        cursor: 'pointer',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+};
+export const tabexselect = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '2px solid #e6e6e6',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        height: '30px',
+        transition: '.3s',
+        fontSize: '13px',
+        fontWeight: 600,
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            color: '#eac435',
+        },
+    }),
+};
+export const selectcustomStylesfromSelect = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '2px solid #e6e6e6',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            color: '#eac435',
+        },
+    }),
+};
+export const selectcustomStylesfromSelectTranslated = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '2px solid #e6e6e6',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            color: '#eac435',
+        },
+    }),
+};
+export const defaultstyles = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#000000',
+        transition: '.3s',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'white',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        backgroundColor: 'transparent',
+        color: 'red',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        color: '#000000',
+    }),
+};
+export const defaultstyleswhite = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : 'black',
+        transition: '.3s',
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        backgroundColor: 'white',
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+};
+export const defaultstylestranslatedwhite = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        // color: state.isSelected ? '#eac435' : '#022648',
+        color: state.isSelected ? '#eac435' : '#ffffff',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'white',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+};
+export const defaultstylestranslated = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        // color: state.isSelected ? '#eac435' : '#022648',
+        color: state.isSelected ? '#eac435' : 'black',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'white',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+        color: '#000000',
+    }),
+};
+export const defaultstylestransparent = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : 'black',
+        transition: '.3s',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+};
+export const defaultstylestranslatedtransparent = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        // color: state.isSelected ? '#eac435' : '#022648',
+        color: state.isSelected ? '#eac435' : 'black',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+};
+
+export const defaultstylesnone = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : 'black',
+        transition: '.3s',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: 'none',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+};
+export const defaultstylesnonear = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : 'black',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: 'none',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        textAlign: 'right',
+
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+};