cloudmr-ux 0.0.1

package/src/common/components/Cmr-components/collapse/Collapse.tsx

@@ -0,0 +1,75 @@
+import React, {cloneElement} from 'react';
+import { Collapse } from 'antd';
+import { CollapsibleType } from 'antd/es/collapse/CollapsePanel';
+import { ExpandIconPosition } from 'antd/es/collapse/Collapse';
+import './Collapse.scss';
+
+interface CmrCollapseProps {
+    accordion?: boolean;
+    activeKey?: Array<string | number>|number;
+    bordered?: boolean;
+    collapsible?: CollapsibleType;
+    defaultActiveKey?: Array<string | number>;
+    destroyInactivePanel?: boolean;
+    expandIconPosition?: ExpandIconPosition;
+    ghost?: boolean;
+    onChange?: (key:Array<string | number>|number) => void;
+    children?: JSX.Element[]|JSX.Element;
+}
+
+export const CmrCollapse = (props: CmrCollapseProps) => {
+    let {activeKey, defaultActiveKey, onChange, children}=props;
+    defaultActiveKey = (defaultActiveKey)?defaultActiveKey:[];
+    let [activeKeys, setActiveKeys] = React.useState(defaultActiveKey);
+    if(activeKey!=undefined&&activeKey!=activeKeys){
+        console.log(activeKey);
+        if(activeKey instanceof Array)
+            setActiveKeys(activeKey);
+        else setActiveKeys([activeKey]);
+    }
+    return (
+        <div className="cmr-collapse">
+            <div>
+                {(children&&Array.isArray(children))?children.map((child,index)=>{
+                    let props = {expanded:activeKeys.indexOf(index)>=0,
+                                panelKey: index,
+                                onToggle: (key:number)=>{
+                                    let i = activeKeys.indexOf(key);
+                                    if(i<0) {
+                                        let newKeys = [...activeKeys];
+                                        newKeys.push(index);
+                                        setActiveKeys(newKeys);
+                                        if(onChange!=undefined)
+                                            onChange(newKeys);
+                                    }
+                                    else {
+                                        let newKeys = [...activeKeys];
+                                        newKeys.splice(i,1);
+                                        setActiveKeys(newKeys);
+                                        if(onChange!=undefined)
+                                            onChange(newKeys);
+                                    }
+                                }};
+                    return cloneElement(child, props)
+                }):((children?cloneElement(children,{expanded:activeKeys.indexOf(0)>=0,
+                    panelKey: 0,
+                    onToggle: (key:number)=>{
+                        let i = activeKeys.indexOf(key);
+                        if(i<0) {
+                            let newKeys = [...activeKeys];
+                            newKeys.push(0);
+                            setActiveKeys(newKeys);
+                        }
+                        else {
+                            let newKeys = [...activeKeys];
+                            newKeys.splice(i,1);
+                            setActiveKeys(newKeys);
+                        }
+                        if(onChange!=undefined)
+                            onChange([0]);
+                    }}):undefined))}
+            </div>
+        </div>
+    );
+};
+

package/src/common/components/Cmr-components/dialogue/Confirmation.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+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 {StyledComponentProps} from "@mui/material";
+
+export default function Confirmation({ name,message,cancelText='Cancel',
+    color, open, setOpen, confirmCallback=()=>{},confirmText='Confirm', cancellable=false, cancelCallback=()=>{}, width}: { name: string | undefined; cancelText?:string; message:string|undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined, open:boolean, setOpen:(open:boolean)=>void, confirmCallback?:()=>void,
+    cancellable?:boolean, cancelCallback?:()=>void, width?:number, confirmText?:string}) {
+    const [text, setText] = React.useState('');
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleConfirm=()=>{
+        confirmCallback();
+        handleClose();
+    }
+
+    const handleCancel=()=>{
+        cancelCallback();
+        handleClose();
+    }
+
+
+    return (
+        <Dialog open={open} onClose={handleClose}>
+            <DialogTitle>{name?name:'Confirmation'}</DialogTitle>
+            <DialogContent sx={{width:width}}>
+                <DialogContentText alignContent={'center'}>
+                    {message}
+                </DialogContentText>
+                <DialogActions className={'mt-4'}>
+                    {cancellable&&
+                        <CmrButton variant={"outlined"} color={'inherit'} sx={{color:'#333'}} onClick={handleCancel}>{cancelText}</CmrButton>
+                    }
+                    <CmrButton variant={"contained"} color={color} onClick={handleConfirm}>{confirmText}</CmrButton>
+                </DialogActions>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/common/components/Cmr-components/dialogue/DeletionDialog.tsx

@@ -0,0 +1,61 @@
+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';
+
+export default function DeletionDialog(props: { name: string | undefined; deletionCallback: () => void; }) {
+    const [open, setOpen] = React.useState(true);
+    const [text, setText] = React.useState('');
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleConfirm = () => {
+        if(text===props.name){
+            props.deletionCallback();
+            setOpen(false);
+        }
+    };
+
+    const handleTextFieldChange=(e: { target: { value: React.SetStateAction<string>; }; })=>{
+        setText( e.target.value);
+    }
+
+    return (
+        <div>
+            <Dialog open={open} onClose={handleClose}>
+                <DialogTitle>Confirmation</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        To delete the files, please type your full name below and confirm.
+                    </DialogContentText>
+
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        type="email"
+                        placeholder = {props.name}
+                        fullWidth
+                        inputProps={{style: {fontSize: "16pt"}}}
+                        variant="standard"
+                        onChange={handleTextFieldChange}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <button className='btn btn-secondary' onClick={handleClose}>Cancel</button>
+                    <button className='btn btn-danger' onClick={handleConfirm}>Confirm</button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

package/src/common/components/Cmr-components/dialogue/EditConfirmation.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+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 { InputAdornment } from '@mui/material';
+import {useEffect} from "react";
+
+export interface EditConfirmationProps{
+    name?: string; // Equivalent to string | undefined
+    defaultText?: string;
+    message?: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    confirmCallback?: (text: string) => void;
+    cancellable?: boolean;
+    cancelCallback?: (edit: string) => void;
+    suffix?:string;
+}
+
+export default function EditConfirmation({ name,message, defaultText='',
+    color, open, setOpen, confirmCallback=()=>{}, cancellable=false, cancelCallback=()=>{},suffix=''}:EditConfirmationProps) {
+    const [text, setText] = React.useState(defaultText);
+    useEffect(() => {
+        if(open)
+            setText(defaultText);
+    }, [open]);
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleConfirm=()=>{
+        confirmCallback(text+suffix);
+        handleClose();
+    }
+
+    const handleCancel=()=>{
+        cancelCallback(text+suffix);
+        handleClose();
+    }
+
+
+    return (
+        <Dialog maxWidth="xs" fullWidth={true} open={open} onClose={handleCancel}>
+            <DialogTitle>{name?name:'Confirmation'}</DialogTitle>
+            <DialogContent>
+                <DialogContentText alignContent={'center'}>
+                    {message}
+                </DialogContentText>
+                <DialogActions>
+                    <TextField fullWidth variant='standard'
+                               InputProps={{
+                                   endAdornment: (
+                                       <InputAdornment position="end"  sx={{ whiteSpace: 'nowrap' }}>{suffix}</InputAdornment>
+                                   ),
+                               }}
+                               defaultValue={text} onChange={(e)=>setText(e.target.value)}/>
+                </DialogActions>
+                <DialogActions>
+                    {cancellable&&
+                        <CmrButton variant={"outlined"} color={'inherit'} sx={{color:'#333'}} onClick={handleCancel}>Cancel</CmrButton>
+                    }
+                    <CmrButton variant={"contained"} color={color} onClick={handleConfirm}>Confirm</CmrButton>
+                </DialogActions>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/common/components/Cmr-components/double-slider/DualSlider.tsx

@@ -0,0 +1,198 @@
+import {Box} from "@mui/material";
+import {useRef, useState} from "react";
+
+/**
+ * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
+ * The rendered interval (and number control) can be masked by a transformation - inverse pair.
+ * @param name
+ * @param min
+ * @param max
+ * @param setMin
+ * @param setMax
+ * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @constructor
+ */
+export const DualSlider = ({name,min,max,setMin,setMax,
+                               transform=x=>x,inverse=x=>x}:
+                               {name:string,min:number,max:number, setMin?:(min:number)=>void,
+                                   setMax?:(max:number)=>void,transform?:(x:number)=>number,
+                                   inverse?:(x:number)=>number})=>{
+    const [leftSliderPosition, setLeftSliderPosition] = useState(0); // Initial percentage for the left slider
+    const [rightSliderPosition, setRightSliderPosition] = useState(100); // Initial percentage for the right slider
+    const [isHovering, setIsHovering] = useState(false);
+    const [leftEditing, setLeftEditing] = useState(false);
+
+    const [minOverride, setMinOverride] = useState<any>(undefined);
+    const [maxOverride, setMaxOverride] = useState<any>(undefined);
+
+    if(minOverride)
+        min = minOverride;
+    if(maxOverride)
+        max = maxOverride;
+
+    const a = transform((max-min)*leftSliderPosition/100+min);
+    const b = transform((max-min)*rightSliderPosition/100+min);
+    const left = Math.min(a,b);
+    const right = Math.max(a,b);
+
+    const sliderRef = useRef(null); // Ref for the parent box
+
+    const handleDragStart = (e:any, slider:string) => {
+        // Prevent default behavior
+        e.preventDefault();
+        setLeftEditing(false);
+        setLeftIsNaN(false)
+        leftRef.current.blur();
+
+        setRightEditing(false);
+        setRightIsNaN(false);
+        rightRef.current.blur();
+
+        // Calculate initial positions
+        const startX = e.clientX;
+        // @ts-ignore
+        const sliderWidth = sliderRef.current.offsetWidth;
+
+        const handleMouseMove = (e:any) => {
+            const moveX = e.clientX - startX;
+            const newPosition = ((moveX / sliderWidth) * 100) + (slider === 'left' ? leftSliderPosition : rightSliderPosition);
+
+
+            // Prevent the slider from going outside the parent box
+            const clampedPosition = Math.min(100, Math.max(0, newPosition));
+
+            // Update the position of the slider
+            if (slider === 'left') {
+                setLeftSliderPosition(clampedPosition);
+                const a = (max-min)*clampedPosition/100+min;
+                const b = (max-min)*rightSliderPosition/100+min;
+                setMin&&setMin(Math.min(a,b));
+                setMax&&setMax(Math.max(a,b));
+
+            } else if (slider === 'right') {
+                setRightSliderPosition(clampedPosition);
+                const a = (max-min)*leftSliderPosition/100+min;
+                const b = (max-min)*clampedPosition/100+min;
+                setMin&&setMin(Math.min(a,b));
+                setMax&&setMax(Math.max(a,b));
+            }
+
+        };
+
+        const handleMouseUp = () => {
+            // Remove event listeners once dragging is complete
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+
+        // Add mouse move and mouse up listeners to document to handle drag
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+
+    const leftText = Math.abs(left)<0.01&&left!=0?Number(left).toExponential(3).toUpperCase():Number(left).toFixed(3);
+    const [leftEditedText,setLeftEditedText] = useState('');
+    const [leftIsNaN, setLeftIsNaN] = useState(false);
+    const leftRef = useRef<any>(null);
+
+    const [rightEditing, setRightEditing] = useState(false);
+    const [rightEditedText, setRightEditedText] = useState('');
+    const [rightIsNaN, setRightIsNaN] = useState(false);
+    const rightRef = useRef<any>(null);
+
+    // Logic to handle right value box editing...
+    const rightText = Math.abs(right) < 0.01 && right != 0 ? Number(right).toExponential(3).toUpperCase() : Number(right).toFixed(3);
+
+    return <Box sx={{display:'flex',flexDirection:'row', paddingLeft:'4px',paddingRight:'4px'}} height={20}>
+        <Box flex={0.322} fontSize={16} color={'#3D3D3D'} alignItems={'center'} display={'flex'} marginBottom={'1pt'}
+             fontFamily={'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'}>
+            {name}
+        </Box>
+        <Box sx={{display:'flex',flexDirection:'row'}} flex={1}>
+            <input ref={leftRef} style={{backgroundColor:'#f0f0f0',width:'45px', borderRadius:'2px', outline:"none",borderStyle:'none',paddingLeft:'3px',paddingRight:'3px', lineHeight:'20px',
+                whiteSpace:'nowrap',fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',fontSize:'11px',color:leftIsNaN?'red':'black'}} value={
+                (leftEditing)?leftEditedText:leftText
+            } onKeyDown={(e) => {
+                if (e.key === 'Enter'&&!leftIsNaN) {
+                    //@ts-ignore
+                    e.target.blur(); // This will cause the input to lose focus
+                }
+            }} onFocus={(e)=>{
+                setLeftEditedText(e.target.value);
+                setLeftEditing(true);
+            }} onChange={(event)=>{
+                setLeftIsNaN(isNaN(Number(event.target.value)));
+                setLeftEditedText(event.target.value);
+            }} onBlur={(e)=>{
+                    let val = inverse(Number(leftEditedText));
+                    if(isNaN(val)) {
+                        return e.preventDefault();
+                    }
+                    setLeftEditing(false);
+                    setMin&&setMin(val);
+                    let newMin = min;
+                    if(val<min) {
+                        setMinOverride(val);
+                        newMin = val;
+                    }
+                    let leftPosition = (val-newMin)/(max-newMin)*100;
+                    setLeftSliderPosition(leftPosition);
+            }}/>
+
+            <Box sx={{ backgroundColor: '#f0f0f0', flex: 1, marginLeft: '4px', marginRight: '4px', borderRadius: '2px', position: 'relative',
+                overflow:'hidden', opacity:isHovering?0.75:1
+            }} ref={sliderRef}
+                 onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
+                {/* Central gray block with two vertical black components */}
+                <Box sx={{ position: 'absolute', left: `calc(${leftSliderPosition*0.97}% - 10px)`, width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }}
+                     onMouseDown={(e) => handleDragStart(e, 'left')}>
+                    {/* Visual representation of the slider */}
+                    <Box sx={{ position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: 'black' }} />
+                </Box>
+
+                {/* Transparent hitbox for the right slider */}
+                <Box sx={{ position: 'absolute', right: `calc(${(100 - rightSliderPosition)*0.97}% - 10px)`, width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }}
+                     onMouseDown={(e) => handleDragStart(e, 'right')}>
+                    {/* Visual representation of the slider */}
+                    <Box sx={{ position: 'absolute', right: '10px', width: '2px', height: '100%', backgroundColor: 'black' }} />
+                </Box>
+            </Box>
+
+            <input style={{backgroundColor: '#f0f0f0', width: '45px', borderRadius: '2px', outline: "none", borderStyle: 'none', paddingLeft: '3px', paddingRight: '3px', lineHeight: '20px',
+                whiteSpace: 'nowrap', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif', fontSize: '11px', color: rightIsNaN ? 'red' : 'black'}}
+                 value={(rightEditing) ? rightEditedText : rightText}
+                 ref={rightRef}
+                 onKeyDown={(e) => {
+                     if (e.key === 'Enter' && !rightIsNaN) {
+                         //@ts-ignore
+                         e.target.blur(); // This will cause the input to lose focus
+                     }
+                 }}
+                 onFocus={(e) => {
+                     setRightEditedText(e.target.value);
+                     setRightEditing(true);
+                 }}
+                 onChange={(event) => {
+                     setRightIsNaN(isNaN(Number(event.target.value)));
+                     setRightEditedText(event.target.value);
+                 }}
+                 onBlur={(e) => {
+                     let val = inverse(Number(rightEditedText));
+                     if (isNaN(val)) {
+                         return e.preventDefault();
+                     }
+                     setRightEditing(false);
+                     setMax && setMax(val);
+                     let newMax = max;
+                     if (val > max) {
+                         setMaxOverride(val);
+                         newMax = val;
+                     }
+                     let rightPosition = (val - min) / (newMax - min) * 100;
+                     setRightSliderPosition(rightPosition);
+                 }}
+            />
+        </Box>
+    </Box>
+}