cloudmr-ux 0.0.3 → 1.0.0

package/src/common/components/Cmr-components/radio/Radio.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import './Radio.scss';
-import { Radio } from 'antd';
-
-interface CmrRadioProps {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    value?: any;
-    children?: any;
-}
-
-const CmrRadio = (props: CmrRadioProps) => {
-    const { checked, defaultChecked, disabled, value, children, ...rest } = props;
-
-    return (
-        <Radio checked={checked} defaultChecked={defaultChecked} disabled={disabled} value={value} {...rest}>
-            {children}
-        </Radio>
-    );
-};
-
-export default CmrRadio;

package/src/common/components/Cmr-components/radio-group/RadioGroup.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import './RadioGroup.scss';
-import { Radio } from 'antd';
-import { RadioChangeEvent } from 'antd/lib/radio/interface';
-
-interface CmrRadioGroupProps {
-    defaultValue?: any;
-    disabled?: boolean;
-    name?: string;
-    value?: any;
-    onChange?: (e: RadioChangeEvent) => void;
-    children?: React.ReactNode;
-}
-
-const CmrRadioGroup = (props: CmrRadioGroupProps) => {
-    const { defaultValue, disabled, name, value, onChange, children, ...rest } = props;
-
-    return (
-        <Radio.Group
-            defaultValue={defaultValue}
-            disabled={disabled}
-            name={name}
-            value={value}
-            onChange={onChange}
-            {...rest}
-        >
-            {children}
-        </Radio.Group>
-    );
-};
-
-export default CmrRadioGroup;

package/src/common/components/Cmr-components/rename/edit.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import CmrButton from "../button/Button";
-import {useEffect} from "react";
-
-export default function CmrNameDialog(props: {originalName: string; renamingCallback:(alias:string)=>Promise<boolean>, open:boolean, setOpen:(open:boolean)=>void}) {
-    let {originalName,open, setOpen} = props;
-    const [helperText, setHelperText] = React.useState('');
-    const [text, setText] = React.useState(originalName);
-    const [error, setError] = React.useState(false);
-
-    const renamingCallback = props.renamingCallback;
-
-    const handleClose = () => {
-        setOpen(false);
-    };
-
-    useEffect(() => {
-        checkError(originalName);
-    }, [originalName]);
-
-    const handleConfirm = async () => {
-        // if(!error)
-        if(await renamingCallback(text))
-            handleClose();
-    };
-
-    const handleTextFieldChange=(e: { target: { value: string; }; })=>{
-        setText( e.target.value);
-        checkError(e.target.value);
-    }
-    const checkError=(text: string)=>{
-        const fileNameRegex = /^[a-zA-Z0-9_\-]+\.[a-zA-Z]{1,5}$/;
-        let newExtension = text.split('.').pop();
-        let orgExtension = (originalName.indexOf('.')>=0)? originalName.split('.').pop(): '?';
-        if(!fileNameRegex.test(text)){
-            setError(true);
-            if(text.indexOf('.')<0){
-                setHelperText('Invalid file name, needs a valid extension.');
-            }else{
-                setHelperText('Invalid file name, please check.');
-            }
-        }else if(newExtension!==orgExtension){
-            setHelperText(`You are modifying your file extension from .${orgExtension} to .${newExtension}.`);
-            setError(false);
-        }else{
-            setError(false);
-            setHelperText('');
-        }
-    }
-
-    return (
-        <div>
-            <Dialog open={open} onClose={handleClose}  fullWidth
-                    maxWidth="xs">
-                <DialogTitle>
-                    Renaming file {originalName} to:
-                </DialogTitle>
-                <DialogContent>
-                    {/*<DialogContentText>*/}
-                    {/*    Renaming file {originalName} to:*/}
-                    {/*</DialogContentText>*/}
-
-                    <TextField
-                        autoFocus
-                        margin="dense"
-                        id="name"
-                        // type="file"
-                        defaultValue = {originalName}
-                        onFocus={event => {
-                            event.target.select();
-                        }}
-                        fullWidth
-                        inputProps={{style: {fontSize: "16pt"}}}
-                        variant="standard"
-                        onChange={handleTextFieldChange}
-                        error={error}
-                        helperText={helperText}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <CmrButton variant={"outlined"} color={'inherit'} sx={{color:'#333'}} onClick={handleClose}>Cancel</CmrButton>
-                    <CmrButton variant={"contained"} color={'primary'} onClick={handleConfirm}>Confirm</CmrButton>
-                </DialogActions>
-            </Dialog>
-        </div>
-    );
-}

package/src/common/components/Cmr-components/select/Select.scss

@@ -1,3 +0,0 @@
-.ant-select {
-  width: 120px;
-}

package/src/common/components/Cmr-components/select/Select.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import './Select.scss';
-import { Select } from 'antd';
-
-interface CmrSelectProps {
-    id?: string;
-    className?: string;
-    value?: Array<string | number> | string | number;
-    defaultValue?: Array<string | number> | string | number;
-    disabled?: boolean;
-    onChange?: (value: any) => void;
-    children?: any;
-}
-
-const CmrSelect = (props: CmrSelectProps) => {
-    const { id, className, value, defaultValue, disabled, onChange, children, ...rest } = props;
-
-    return (
-        <Select
-            id={id}
-            className={className}
-            value={value}
-            defaultValue={defaultValue}
-            disabled={disabled}
-            onChange={onChange}
-            {...rest}
-        >
-            {children}
-        </Select>
-    );
-};
-
-export default CmrSelect;

package/src/common/components/Cmr-components/select-upload/SelectUpload.tsx

@@ -1,133 +0,0 @@
-import React, {Fragment, useState} from "react";
-import CMRUpload, {CMRUploadProps, LambdaFile} from '../upload/Upload';
-import {Alert, AlertTitle, Button, Collapse, InputLabel, MenuItem} from "@mui/material";
-import Select, {SelectChangeEvent} from "@mui/material/Select";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
-import CmrTooltip from "../tooltip/Tooltip";
-import Box from "@mui/material/Box";
-import {uploadData} from "../../../../features/data/dataActionCreation";
-import {useAppDispatch, useAppSelector} from "../../../../features/hooks";
-import {AxiosResponse} from "axios";
-
-interface CMRSelectUploadProps extends CMRUploadProps{
-    /**
-     * A selection of currently uploaded files
-     */
-    fileSelection: UploadedFile[];
-    onSelected: (file?: UploadedFile)=>void;
-    chosenFile?: string;
-    buttonText?: string;
-    /**
-     * Enforces the extension of selected files
-     */
-    fileExtension?:string;
-}
-
-interface UploadedFile {
-    id: number;
-    fileName: string;
-    link: string;
-    md5?: string;
-    size: string;
-    status: string;
-    createdAt: string;
-    updatedAt: string;
-    database: string;
-    location: string;
-}
-
-/**
- * Select from a set of uploaded files or upload new
- */
-const CMRSelectUpload = (props: CMRSelectUploadProps) => {
-
-    let [open, setOpen] = React.useState(false);
-    let [fileIndex, selectFileIndex] = React.useState(-1);
-    let [uploading, setUploading] = React.useState(false);
-    const [progress, setProgress] = React.useState(0);
-    const handleClickOpen = () => {
-        selectFileIndex(-1);
-        setOpen(true);
-    };
-
-    const handleClose = () => {
-        setOpen(false);
-    };
-
-    const handleChange = (event: SelectChangeEvent<number>) => {
-        //@ts-ignore
-        selectFileIndex(event.target.value);
-    };
-
-    const onSet = ()=>{
-        props.onSelected(props.fileSelection[fileIndex]);
-        setOpen(false);
-    }
-    const selectionDialog =  <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>Upload or select</DialogTitle>
-        <DialogContent sx={{width: 520}}>
-            <DialogContentText sx={{pl:1, pr:1, pb:0}}>
-                {(uploading)?"Please wait for the upload to finish.":"Upload a new file or select from previously uploaded files:"}
-            </DialogContentText>
-                <DialogContent sx={{p:1}}>
-                <Select
-                    value={fileIndex}
-                    onChange={handleChange}
-                    disabled={uploading}
-                    inputProps={{ 'aria-label': 'Without label' }}
-                    sx={{width: '100%'}}
-                >
-                    <MenuItem value={-1}>
-                        <em>Select or upload a new file to proceed</em>
-                    </MenuItem>
-                    {((props.fileSelection!=undefined? props.fileSelection: [])).map((option,index) => (
-                        <MenuItem key={index} value={index}>
-                            {option.fileName}
-                        </MenuItem>
-                    ))}
-                </Select>
-            </DialogContent>
-                <Box sx={{pt:2, justifyContent:'center',display:'flex', padding:'8px'}}>
-                    {(!uploading)&&<Button fullWidth sx={{marginRight:'8px'}} variant="contained"  color="success" onClick={onSet}>
-                        Select
-                    </Button>}
-                    {fileIndex==-1&& <CMRUpload {...props} color="info" fullWidth onUploaded={(res, file)=>{
-                        console.log("calling Setup level on uploaded");
-                        console.log(props.onUploaded);
-                        selectFileIndex(props.fileSelection.length);
-                        props.onUploaded(res, file);
-                        setOpen(false);
-                    }} fileExtension = {props.fileExtension}
-                                                uploadHandler={props.uploadHandler}
-                                                uploadStarted={()=>{
-                                                    setUploading(true);
-                                                    props.onSelected(undefined);
-                                                }}
-                                                uploadProgressed={(progress)=>{
-                                                    setOpen(false);
-                                                    setProgress(progress);
-                                                }}
-                                                uploadEnded={()=>setUploading(false)}
-                    ></CMRUpload>}
-                    <Button fullWidth variant="outlined"   color="inherit" sx={{color:'#333', marginLeft:'8px'}} onClick={handleClose}> Cancel</Button>
-                </Box>
-        </DialogContent>
-    </Dialog>;
-    return <Fragment>
-        {uploading?<Button variant={"contained"} style={{...props.style, textTransform:'none'}} sx={{overflowWrap:'inherit'}} color={'primary'} disabled={uploading}>
-            Uploading {progress}%
-        </Button>:<Button variant={(props.chosenFile==undefined)?"contained":"outlined"} color="info" onClick={handleClickOpen} sx={{marginRight:'10pt'}}
-                          style={{...props.style, textTransform:'none'}}>
-            {(props.chosenFile==undefined)?
-                (props.buttonText?props.buttonText:"Choose")
-                :props.chosenFile}
-        </Button>}
-        {selectionDialog}
-    </Fragment>;
-};
-
-export default CMRSelectUpload;

package/src/common/components/Cmr-components/slider/Slider.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import './Slider.scss';
-import { Slider } from 'antd';
-import { SliderMarks } from 'antd/lib/slider';
-
-interface CmrSliderProps {
-    reverse?: boolean;
-    defaultValue?: number;
-    disabled?: boolean;
-    dots?: boolean;
-    included?: boolean;
-    max?: number;
-    min?: number;
-    range?: false;
-    step?: null | number;
-    marks?: SliderMarks;
-    vertical?: boolean;
-    tipFormatter?: null | ((value?: number) => React.ReactNode);
-    value?: number;
-    onChange?: (value: number) => void;
-    onAfterChange?: (value: number) => void;
-}
-
-const CmrSlider = (props: CmrSliderProps) => {
-    const {
-        reverse,
-        defaultValue,
-        disabled,
-        dots,
-        included,
-        max,
-        min,
-        range,
-        step,
-        marks,
-        vertical,
-        tipFormatter,
-        value,
-        onChange,
-        onAfterChange,
-        ...rest
-    } = props;
-
-    return (
-        <Slider
-            reverse={reverse}
-            defaultValue={defaultValue}
-            disabled={disabled}
-            dots={dots}
-            included={included}
-            max={max}
-            min={min}
-            range={range}
-            step={step}
-            marks={marks}
-            vertical={vertical}
-            tipFormatter={tipFormatter}
-            value={value}
-            onChange={onChange}
-            onAfterChange={onAfterChange}
-            {...rest}
-        />
-    );
-};
-
-export default CmrSlider;

package/src/common/components/Cmr-components/spin/Spin.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import './Spin.scss';
-import { Spin } from 'antd';
-import { SpinIndicator, SpinSize } from 'antd/lib/spin';
-
-interface CmrSpinProps {
-    delay?: number;
-    indicator?: SpinIndicator;
-    size?: SpinSize;
-    spinning?: boolean;
-    tip?: string;
-    wrapperClassName?: string;
-}
-
-const CmrSpin = (props: CmrSpinProps) => {
-    const { delay, indicator, size, spinning, tip, wrapperClassName, ...rest } = props;
-
-    return (
-        <Spin
-            delay={delay}
-            indicator={indicator}
-            size={size}
-            spinning={spinning}
-            tip={tip}
-            wrapperClassName={wrapperClassName}
-            {...rest}
-        />
-    );
-};
-
-export default CmrSpin;

package/src/common/components/Cmr-components/tooltip/Tooltip.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import './Tooltip.scss';
-import { Tooltip } from 'antd';
-import {  TooltipPlacement } from 'antd/lib/tooltip';
-
-interface CmrTooltipProps {
-    arrowPointAtCenter?: boolean;
-    autoAdjustOverflow?: boolean;
-    color?: string;
-    defaultVisible?: boolean;
-    mouseEnterDelay?: number;
-    mouseLeaveDelay?: number;
-    overlayClassName?: string;
-    placement?: TooltipPlacement;
-    visible?: boolean;
-    title: React.ReactNode;
-    overlay?: React.ReactNode;
-}
-
-const CmrTooltip = (props: CmrTooltipProps) => {
-    const {
-        arrowPointAtCenter,
-        autoAdjustOverflow,
-        color,
-        defaultVisible,
-        mouseEnterDelay,
-        mouseLeaveDelay,
-        overlayClassName,
-        placement,
-        visible,
-        ...rest
-    } = props;
-
-    return (
-        <Tooltip
-            arrowPointAtCenter={arrowPointAtCenter}
-            autoAdjustOverflow={autoAdjustOverflow}
-            color={color}
-            defaultVisible={defaultVisible}
-            mouseEnterDelay={mouseEnterDelay}
-            mouseLeaveDelay={mouseLeaveDelay}
-            overlayClassName={overlayClassName}
-            placement={placement}
-            visible={visible}
-            {...rest}
-        />
-    );
-};
-
-export default CmrTooltip;

package/src/common/components/Cmr-components/upload/Upload.scss

@@ -1,5 +0,0 @@
-.btn-info {
-  color: #ffffff; /* Change it to your preferred color */
-  --bs-btn-hover-color: #ffffff;
-  --bs-btn-color: #ffffff;
-}

package/src/common/components/Cmr-components/upload/Upload.tsx

@@ -1,188 +0,0 @@
-import React, {useState} from 'react';
-import './Upload.scss';
-import {Box, Button, SxProps, Theme} from '@mui/material';
-import UploadWindow from "./UploadWindow";
-import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
-
-export interface LambdaFile {
-    "filename": string;
-    "filetype": string;
-    "filesize": string;
-    "filemd5": string;
-    "file": File;
-}
-/**
- * Consists of general settings for upload component
- * functionalities and call back methods evoked
- * for specific interactions
- */
-interface CMRUploadProps extends React.HTMLAttributes<HTMLDivElement>{
-    //Determines if the upload buttons should retain the uploaded
-    //file after upload, or if it should refresh for a new session
-    retains?:boolean;
-    maxCount: number;
-    onRemove?:(removedFile: File)=>void;
-    /**
-     * Allows access to file content prior to uploading.
-     * If returned value from the method is false,
-     * prevents the file upload process. Called before
-     * create payload.
-     * @param file
-     */
-    beforeUpload?: (file:File)=>Promise<boolean>;
-    /**
-     * This or uploadHandler must be specified
-     * @param file
-     * @param fileAlias
-     * @param fileDatabase
-     */
-    createPayload?: (file: File,fileAlias:string, fileDatabase: string)=>
-        (Promise<{destination: string, lambdaFile:LambdaFile, file:File, config: AxiosRequestConfig}|undefined>);
-    onUploadProgressUpdate?:(loaded: number, total: number)=>void|undefined;
-    onUploaded: (res: AxiosResponse, file: File)=>Promise<void>|void;
-    sx?:  SxProps<Theme>|undefined;
-    rest?: any;
-    fileExtension?: string;
-    uploadStarted?:()=>void;
-    uploadEnded?:()=>void;
-    uploadFailed?:()=>void;
-    uploadProgressed?:(progress:number)=>void;
-    /**
-     * Override this to replace the default behavior of uploading
-     * @param file
-     * @param fileAlias
-     * @param fileDatabase
-     * @param onProgress
-     * @param onUploaded
-     */
-    uploadHandler?:(file:File, fileAlias:string, fileDatabase:string,
-                    onProgress?:(progress:number)=>void,
-                    onUploaded?:(res:AxiosResponse,file:File)=>void)=>Promise<number>;
-    fullWidth?: boolean;
-    style?: any;
-    /**
-     * Displays upload button instead of uploaded file after upload
-     * if set to reusable
-     */
-    reusable?: boolean;
-    uploadButtonName?:string;
-    /**
-     * Processes the uploaded file before performing the upload;
-     * @return file/undefined/statuscode undefined to fail the upload, return File
-     * to pass the processed file, return number to indicate error code
-     * and return to upload window.
-     * @param file
-     */
-    preprocess?:(file:File)=>Promise<File|undefined|number>;
-}
-
-
-const CmrUpload = (props: CMRUploadProps) => {
-
-    let [open, setOpen] = useState(false);
-    /**
-     * Life cycle representing the current status of the upload
-     * process.
-     */
-    let [uploading, setUploading] = useState(false);
-    let [progress, setProgress] = useState(0);
-    let [uploadedFile, setUploadedFile] = useState<string|undefined>(undefined);
-
-   const upload = async (file: File, fileAlias:string, fileDatabase: string)=>{
-        setUploading(true);
-        const onProgress = (progress:number)=>{
-            let percentage = (progress* 99);
-            props.uploadProgressed&&props.uploadProgressed(+percentage.toFixed(2));
-            setProgress(+percentage.toFixed(2));
-        }
-        if(props.uploadStarted)
-            props.uploadStarted();
-        let status:any = 0;
-        // try {
-            if(props.beforeUpload!=undefined&&!await props.beforeUpload(file)){
-                if(props.uploadEnded)
-                    props.uploadEnded();
-                setUploading(false);
-                return 200;
-            }
-            if(props.preprocess){
-                let processed = await props.preprocess(file);
-                if(processed==undefined)
-                    return failUpload();
-                if(typeof processed =='number'){
-                    setUploading(false);
-                    return processed;
-                }
-                file = processed as File;
-            }
-            if(props.uploadHandler!=undefined){
-                status = await props.uploadHandler(file,fileAlias,fileDatabase,onProgress,props.onUploaded);
-                setUploadedFile(props.reusable?undefined:file.name);
-            }else if(props.createPayload){
-                let payload = await props.createPayload(file, fileAlias, fileDatabase);
-                if(payload==undefined){
-                    return failUpload();
-                }
-                payload.config.onUploadProgress = (progressEvent) => {
-                    if(progressEvent.total==undefined)
-                        return;
-                    onProgress(progressEvent.loaded/progressEvent.total);
-                };
-                // console.log(payload.formData)
-                const res = await axios.post(payload.destination, payload.lambdaFile, payload.config);
-                status = res.status;
-                if(status===200){
-                    // file.name = res.data.response.
-                    // await axios.post(res.data.upload_url, file)
-                    console.log(res.data);
-                    await axios.put(res.data.upload_url, payload.file, {
-                        headers: {
-                            'Content-Type': payload.file.type
-                        }
-                    })
-                    await props.onUploaded(res,payload.file);
-                    setUploadedFile(props.reusable?undefined:payload.file.name);
-                }
-            }else{
-                return failUpload();
-            }
-            if(props.uploadEnded)
-                props.uploadEnded();
-            setUploading(false);
-            setProgress(0);
-        // }
-        return status;
-    };
-
-    function failUpload(){
-        setUploading(false);
-        setProgress(0);
-        if(props.uploadFailed)
-            return props.uploadFailed();
-        return 0;
-    }
-
-    return (
-        <React.Fragment>
-            {(!uploading)?
-
-                <Button fullWidth={props.fullWidth} style={props.style} variant={(uploadedFile==undefined)?"contained":"outlined"}
-                        onClick={()=>{
-                            setOpen(true);
-                        }}
-                        sx={props.sx}
-                >
-                    {(uploadedFile==undefined)?(props.uploadButtonName?props.uploadButtonName:"Upload"):uploadedFile}
-                </Button>
-            :
-                <Button fullWidth={props.fullWidth} style={props.style} variant={"contained"} sx={{overflowWrap:'inherit'}} color={'primary'} disabled>
-                    Uploading {progress}%
-                </Button>}
-            <UploadWindow open={open} setOpen={setOpen} upload={upload} fileExtension={props.fileExtension}
-                          template={{showFileName:true,showFileSize:true}}/>
-        </React.Fragment>
-    );
-};
-
-export type {CMRUploadProps};
-export default CmrUpload;