cloudmr-ux 0.0.3 → 1.0.0

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

@@ -1,198 +0,0 @@
-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>
-}

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

@@ -1,224 +0,0 @@
-import {Box} from "@mui/material";
-import {useEffect, 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 reverse
- * @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 InvertibleDualSlider = ({name,min,max,setMin,setMax, reverse=false,
-                               transform=x=>x,inverse=x=>x,onFinalize}:
-                               {name:string,min:number,max:number, setMin?:(min:number)=>void,
-                                   setMax?:(max:number)=>void,reverse?:boolean,transform?:(x:number)=>number,
-                                   inverse?:(x:number)=>number,onFinalize?: ()=>void} )=>{
-    const [leftSliderPosition, setLeftSliderPosition] = useState(0); // Initial percentage for the left slider
-    const [rightSliderPosition, setRightSliderPosition] = useState(100); // Initial percentage for the right slider
-    useEffect(() => {//Initialize parent min/max values upon initialization
-        setMin&&setMin(min);
-        setMax&&setMax(max);
-        setLeftSliderPosition(0);
-        setRightSliderPosition(100);
-    }, [min,max]);
-    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);
-            onFinalize&&onFinalize();
-        };
-
-        // 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={27}>
-        {name!=''&&<Box fontSize={16} marginRight={'5pt'} color={'white'} 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:'#ffffff',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);
-                    onFinalize&&onFinalize();
-            }}/>
-
-            <Box sx={{ backgroundColor: '#ffffff', flex: 1, marginLeft: '4px', marginRight: '4px', borderRadius: '2px', position: 'relative',
-                overflow:'hidden'
-            }} ref={sliderRef}
-                 onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
-                {/* Central gray block with two vertical black components */}
-
-
-                {!reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
-                    height:'100%',position:'absolute',
-                    left:`calc(${Math.min(leftSliderPosition,rightSliderPosition+3)*0.97}%)`,
-                    right:`calc(${(100 - Math.max(leftSliderPosition-3,rightSliderPosition))*0.97}%)`,
-                    zIndex:1}}/>}
-                {reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
-                    height:'100%',position:'absolute',
-                    left:`calc(${Math.max(leftSliderPosition,rightSliderPosition+3)*0.97}%)`,
-                    right:`0`,
-                    zIndex:1}}/>}
-                {reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
-                    height:'100%',position:'absolute',
-                    left:`0`,
-                    right:`calc(${(100 - Math.min(leftSliderPosition-3,rightSliderPosition))*0.97}%)`,
-                    zIndex:1}}/>}
-                <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: '#2e9eff' }} />
-                </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: '#2e9eff' }} />
-                </Box>
-            </Box>
-
-            <input style={{backgroundColor: '#ffffff', 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);
-                     onFinalize&&onFinalize();
-                 }}
-            />
-        </Box>
-    </Box>
-}

package/src/common/components/Cmr-components/dropdown/Dropdown.scss

@@ -1,36 +0,0 @@
-.select-box {
-  position: relative;
-  outline: none;
-}
-
-.select-box .ant-select {
-  color: #888080;
-  width: 205px;
-  background: #ffffff;
-  box-sizing: border-box;
-  border-radius: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  -webkit-outline: none;
-  outline: none;
-}
-
-.select-box > .ant-select > .ant-select-selector {
-  border: 1px solid #e5e5e5;
-}
-
-.select-box
-> .ant-select
-> .ant-select-selector
-> .ant-select-selection-placeholder,
-.ant-select-selection-item {
-  font-size: 12px;
-  line-height: 30px;
-  color: #999999;
-  font-weight: normal;
-  letter-spacing: 0.1px;
-}
-
-.select-box > .ant-select > .ant-select-arrow {
-  top: 65%;
-}

package/src/common/components/Cmr-components/dropdown/Dropdown.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import { Select } from 'antd';
-import './DropDown.scss';
-
-const { Option } = Select;
-
-const CmrDropDown = (props: any) => {
-    const [DropdownCaret, setDropdownCaret] = useState(false);
-    const onCaretChange = () => {
-        setDropdownCaret(!DropdownCaret);
-    };
-
-    return (
-        <div className="select-box">
-            <Select
-                onFocus={onCaretChange}
-                onBlur={onCaretChange}
-                suffixIcon={
-                    <>
-                        <svg
-                            style={{ display: DropdownCaret ? 'none' : 'block' }}
-                            width="6"
-                            height="3"
-                            viewBox="0 0 6 3"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M5.79875 0H0.20125C0.0333594 0 -0.0603867 0.147179 0.0435863 0.247656L2.84234 2.94215C2.92245 3.01928 3.0767 3.01928 3.15766 2.94215L5.95641 0.247656C6.06039 0.147179 5.96664 0 5.79875 0Z"
-                                fill="#999999"
-                            />
-                        </svg>
-                        <svg
-                            style={{ display: DropdownCaret ? 'block' : 'none' }}
-                            width="6"
-                            height="3"
-                            viewBox="0 0 6 3"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M5.79875 3H0.20125C0.0333594 3 -0.0603867 2.85282 0.0435863 2.75234L2.84234 0.0578451C2.92245 -0.0192819 3.0767 -0.0192819 3.15766 0.0578451L5.95641 2.75234C6.06039 2.85282 5.96664 3 5.79875 3Z"
-                                fill="#999999"
-                            />
-                        </svg>
-                    </>
-                }
-                id=""
-                disabled={props.disabled}
-                className={props.className}
-                placeholder={props.placeholder}
-                value={props.value}
-                onChange={props.onChange}
-                dropdownClassName={props.dropdownClassName}
-                dropdownStyle={props.dropdownStyle}
-                defaultValue={props.defaultValue}
-                onSelect={props.onSelect}
-                showSearch={props.showSearch}
-                onSearch={props.onSearch}
-                dropdownAlign={{
-                    offset: [0, 0],
-                    overflow: {
-                        adjustY: 0,
-                    },
-                }}
-            >
-                {props.isOptionsObj
-                    ? props.options.map((obj: any, i: any) => (
-                          <Option key={i} value={obj.value}>
-                              {obj.label}
-                          </Option>
-                      ))
-                    : props.options.map((opt: any, ind: any) => (
-                          <Option key={ind} value={props.options[ind]}>
-                              {props.options[ind]}
-                          </Option>
-                      ))}
-            </Select>
-        </div>
-    );
-};
-
-export default CmrDropDown;