@dvrd/dvr-controls 1.0.38 → 1.0.40

package/index.ts

@@ -55,6 +55,7 @@ import DvrdSelectController from './src/js/select/dvrdSelectController';
 import DvrdSwitch from './src/js/switch/dvrdSwitch';
 import DvrdHeaderController from './src/js/header/v2/dvrdHeaderController';
 import FileUpload from './src/js/fileUpload/fileUpload';
+import DvrdRadioController from './src/js/radio/dvrdRadioController';
 
 export {
     // Components
@@ -102,6 +103,7 @@ export {
     DvrdSwitch,
     DvrdHeaderController as DvrdHeader,
     FileUpload,
+    DvrdRadioController as DvrdRadio,
 
     // Interfaces / Enums
     DialogActionShape,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -18,34 +18,34 @@
     "2": "ie >= 11"
   },
   "peerDependencies": {
-    "react-router-dom": "6.8.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-brands-svg-icons": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
-    "@fortawesome/react-fontawesome": "0.2.0",
+  "devDependencies": {
     "@types/dompurify": "2.4.0",
     "@types/js-cookie": "3.0.3",
     "@types/lodash": "4.14.191",
     "@types/node": "18.14.0",
-    "@types/react": "18.0.28",
+    "@types/react": "18.2.19",
     "@types/react-color": "3.0.6",
     "@types/react-dom": "18.0.11",
-    "@types/react-router-dom": "5.3.3",
     "@types/uuid": "9.0.0",
+    "typescript": "4.9.5"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-brands-svg-icons": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "classnames": "2.3.2",
-    "cross-env": "7.0.3",
     "dompurify": "3.0.0",
     "js-cookie": "3.0.1",
     "lodash": "4.17.21",
     "moment": "2.29.4",
-    "react": "18.2.0",
     "react-color": "2.19.3",
-    "react-dom": "18.2.0",
     "react-rnd": "10.4.1",
-    "typescript": "4.9.5",
+    "react-router-dom": "6.15.0",
     "uuid": "9.0.0"
   }
 }

package/src/js/colorPicker/colorPicker.tsx

@@ -16,6 +16,7 @@ import {Button} from "../../../index";
 
 interface Props extends ColorPickerProps<any> {
     onSubmit: (color: Color) => void;
+    onSubmitColorResult?: (colorResult: ColorResult | null) => void;
     onPreChange?: (color: Color) => void;
     onClose: MouseEventHandler;
     pickerType: ColorPickerType;
@@ -27,6 +28,7 @@ interface Props extends ColorPickerProps<any> {
 
 interface State {
     color: Color;
+    colorResult: ColorResult | null;
 }
 
 export default class ColorPicker extends PureComponent<Props, State> {
@@ -39,14 +41,17 @@ export default class ColorPicker extends PureComponent<Props, State> {
 
     state: State = {
         color: this.props.color || '#000',
+        colorResult: null,
     };
 
     onSubmit = () => {
-        const {onSubmit} = this.props, {color} = this.state;
+        const {onSubmit, onSubmitColorResult} = this.props, {color, colorResult} = this.state;
         onSubmit(color);
+        onSubmitColorResult?.(colorResult);
     };
 
     onChange = (color: ColorResult) => {
+        this.setState({colorResult: color});
         let newColor: Color;
         switch (this.props.resultType) {
             case ColorPickerResultType.HEX:

package/src/js/radio/dvrdRadio.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) Dave van Rijn Development 2023.
+ */
+import './style/dvrdRadio.scss';
+
+import classNames from 'classnames';
+import React, {MouseEventHandler, useContext, useMemo} from 'react';
+import {ControlContext} from "../util/controlContext";
+import {editColor} from "../util/colorUtil";
+
+interface Props {
+    onClick: MouseEventHandler;
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    checked: boolean;
+    hasHover: boolean;
+    id: string;
+    labelPosition: 'left' | 'right';
+    disabled?: boolean;
+    label?: string;
+    baseColor?: string;
+    title?: string;
+    className?: string;
+}
+
+export default function DvrdRadio(props: Props) {
+    const context = useContext(ControlContext);
+    const {
+        checked, label, labelPosition, hasHover, onClick, title, disabled, onMouseLeave, onMouseEnter, className, id
+    } = props;
+    const baseColor = useMemo(() => {
+        return props.baseColor ?? context.baseColor
+    }, [props.baseColor, context.baseColor]);
+
+    function getBulletContainerStyle() {
+        let borderColor: string = baseColor;
+        if (disabled) borderColor = 'color-gray-4';
+        else if (hasHover) borderColor = editColor(-.2, baseColor);
+        return {borderColor};
+    }
+
+    function getBulletStyle() {
+        let color: string = baseColor;
+        if (disabled) color = 'color-gray-4';
+        else if (hasHover) color = editColor(-.2, baseColor);
+        return {backgroundColor: color};
+    }
+
+    function renderLabel(position: 'left' | 'right') {
+        if (!label?.length || position !== labelPosition) return;
+        return <label className='dvrd-radio-button-label'>{label}</label>;
+    }
+
+    function renderBullet() {
+        return (
+            <div className='dvrd-radio-bullet-container' style={getBulletContainerStyle()}>
+                <div className='ripple' style={{backgroundColor: baseColor}}/>
+                <div className={classNames('dvrd-radio-bullet', checked && 'checked')} style={getBulletStyle()}/>
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className={classNames('dvrd-radio-button', disabled && 'disbled', !!context.noAnimations && 'no-animations', className)}
+            onClick={onClick} id={id} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} title={title}>
+            {renderLabel('left')}
+            {renderBullet()}
+            {renderLabel('right')}
+        </div>
+    )
+}

package/src/js/radio/dvrdRadioController.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) Dave van Rijn Development 2023.
+ */
+
+import React, {useCallback, useContext, useRef, useState} from 'react';
+import {ChangeFunction} from "../util/interfaces";
+import {generateComponentId} from "../util/componentUtil";
+import {ControlContext} from "../util/controlContext";
+import DvrdRadio from "./dvrdRadio";
+
+interface Props {
+    onChange: ChangeFunction<string | number | bigint>;
+    value: string | number | bigint;
+    checked: boolean;
+    disabled?: boolean;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+    baseColor?: string;
+    id?: string;
+    title?: string;
+    className?: string;
+}
+
+export default function DvrdRadioController(props: Props) {
+    const context = useContext(ControlContext);
+    const {disabled, onChange, value, checked, labelPosition, label, className, baseColor, title} = props;
+    const [hasHover, setHasHover] = useState(false);
+    const id = useRef(generateComponentId(props.id));
+
+    const getContainer = useCallback(() => {
+        return document.getElementById(id.current);
+    }, [id.current]);
+
+    const getRipple = useCallback(() => {
+        const container = getContainer();
+        if (container === null) return null;
+        return container.querySelector('div.ripple');
+    }, [id.current]);
+
+    function onClick() {
+        if (disabled) return;
+        onChange(value);
+        if (!context.noAnimations)
+            addRipple();
+    }
+
+    function onMouseEnter() {
+        if (!disabled)
+            setHasHover(true);
+    }
+
+    function onMouseLeave() {
+        setHasHover(false);
+    }
+
+    function addRipple() {
+        const container = getContainer();
+        const ripple = this.getRipple();
+        if (!container || !ripple) return;
+        if (container.classList.contains('rippling'))
+            container.classList.remove('rippling');
+        ripple.addEventListener('transitionend', removeRipple);
+        container.classList.add('rippling');
+    }
+
+    function removeRipple() {
+        const ripple = getRipple();
+        const container = getContainer();
+        if (!container || !ripple) return;
+        ripple.removeEventListener('transitionend', this.removeRipple);
+        container.classList.remove('rippling');
+    }
+
+    return (
+        <DvrdRadio onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} checked={checked}
+                   hasHover={hasHover} id={id.current} labelPosition={labelPosition ?? 'right'} label={label}
+                   baseColor={baseColor} className={className} title={title} disabled={disabled}/>
+    );
+}

package/src/js/radio/style/dvrdRadio.scss

@@ -0,0 +1,80 @@
+/*!
+ * Copyright (c) Dave van Rijn Development 2023.
+ */
+
+@import '../../../style/variables';
+
+.dvrd-radio-button {
+  cursor: pointer;
+  display: flex;
+  column-gap: .5rem;
+  align-items: center;
+
+  .dvrd-radio-button-label {
+    font-size: .9rem;
+    color: $color-blue-text;
+    cursor: inherit;
+    user-select: none;
+    transition: color .2s ease;
+  }
+
+  .dvrd-radio-bullet-container {
+    @include backgroundShadow2;
+    width: 22px;
+    height: 22px;
+    position: relative;
+    border-radius: 50%;
+    border: 2px solid;
+    cursor: inherit;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dvrd-radio-bullet {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+
+      &.checked {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .ripple {
+      @include centerXY;
+      @include borderRadius(50%);
+      opacity: 1;
+      width: 8px;
+      height: 8px;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+  }
+
+  &.no-animations {
+    &, * {
+      transition: none !important;
+    }
+  }
+
+  &.rippling {
+    .dvrd-radio-bullet-container {
+      .ripple {
+        width: 56px;
+        height: 56px;
+        visibility: visible;
+        opacity: 0;
+        transition: opacity .5s ease-in-out, opacity .5s ease, width .5s ease-in-out, height .5s ease-in-out;
+      }
+    }
+  }
+}

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -10,7 +10,7 @@ import classNames from 'classnames';
 import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
 import {ControlContext} from "../util/controlContext";
 import {defer} from 'lodash';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import {IconName} from '@fortawesome/fontawesome-svg-core';
 
 interface Props {
     onClickItem: (item: SidebarItem) => MouseEventHandler;
@@ -87,7 +87,7 @@ export default function SidebarMenu(props: Props) {
                 cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
                     isChild && 'child', children !== undefined && 'with-children');
             return (
-                <div key={id} className={cls} onClick={_onClickItem(item)}>
+                <div key={id} className={cls} onClick={_onClickItem(item)} id={id}>
                     {renderIcon(isActive, isChild, label, icon)}
                     {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
                     <span className={classNames('item-label', isActive && 'active')}>{label}</span>

package/src/js/util/controlContext.tsx

@@ -8,9 +8,9 @@ import {defer} from 'lodash';
 
 // noinspection JSUnusedGlobalSymbols
 export interface ThemeContextShape {
-    baseColor: string,
-    contrastColor: string,
-    onChange: Function,
+    baseColor: string;
+    contrastColor: string;
+    onChange: Function;
 }
 
 export interface ProviderProps {
@@ -23,6 +23,7 @@ export interface ThemeShape {
     controlVariant?: ControlVariant;
     borderColor?: string;
     onChange?: (theme?: ThemeShape) => void;
+    noAnimations?: boolean;
 }
 
 export const ControlContext: Context<ThemeShape> = React.createContext<ThemeShape>(

package/src/js/util/interfaces.ts

@@ -165,8 +165,25 @@ export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedO
     key: string;
     linkedID?: string;
 }>
-export type PDFImageParams = { img: File | string | null, persistent: PDFElementPersist; alignment?: ElementPosition; display?: PDFDisplay };
-export type PDFTextParams = { bold: boolean; underline: boolean; italic: boolean; fontSize: number; text: string; alignment?: ElementPosition; disabled?: boolean, font: PdfFont, color: string; persistent: PDFElementPersist; display?: PDFDisplay };
+export type PDFImageParams = {
+    img: File | string | null,
+    persistent: PDFElementPersist;
+    alignment?: ElementPosition;
+    display?: PDFDisplay
+};
+export type PDFTextParams = {
+    bold: boolean;
+    underline: boolean;
+    italic: boolean;
+    fontSize: number;
+    text: string;
+    alignment?: ElementPosition;
+    disabled?: boolean,
+    font: PdfFont,
+    color: string;
+    persistent: PDFElementPersist;
+    display?: PDFDisplay
+};
 export type PDFInvoiceTableParams = {
     fontSize: number;
     widths: number[];
@@ -177,7 +194,11 @@ export type PDFInvoiceTableParams = {
     persistent: PDFElementPersist;
 };
 export type PDFInvoiceWidths = { name: number; price: number; quantity: number; subtotal: number }
-export type PDFTextVariables = { company: IndexedObject<string>; client: IndexedObject<string>; invoice: IndexedObject<string>; }
+export type PDFTextVariables = {
+    company: IndexedObject<string>;
+    client: IndexedObject<string>;
+    invoice: IndexedObject<string>;
+}
 export type PDFSubmitHandler = (items: PDFElementParams<any, any>[], callback?: VoidFunction) => void;
 export type PDFElementDimensions = { left: number; top: number; width: number; height: number };
 

package/src/js/util/momentUtil.ts

@@ -5,6 +5,15 @@
 import moment, {Moment} from "moment";
 
 export const MOMENT_FORMATS: string[] = [
+    'MM/DD/YYYY HH:mm:ssZ',
+    'MM-DD-YYYY HH:mm:ssZ',
+    'DD/MM/YYYY HH:mm:ssZ',
+    'DD-MM-YYYY HH:mm:ssZ',
+    'YYYY-MM-DD HH:mm:ssZ',
+    'YYYY/MM/DD HH:mm:ssZ',
+    'DD/MM/YYYYTHH:mm:ssZ',
+    'DD-MM-YYYYTHH:mm:ssZ',
+    'YYYY-MM-DDTHH:mm:ssZ',
     'MM/DD/YYYY HH:mm:ss',
     'MM-DD-YYYY HH:mm:ss',
     'DD/MM/YYYY HH:mm:ss',

package/src/js/util/requestUtil.ts

@@ -61,6 +61,12 @@ export const cancelAllFetch = () => {
     }
 };
 
+function bigIntParser(_: string, value: any) {
+    if (typeof value === 'bigint')
+        return value.toString();
+    return value;
+}
+
 export function sendFetch(config: FetchOptions, legacySupport: boolean = false): AbortController | null {
     const baseUrl = config.baseUrl || window.settings.platformUrl;
     if (!baseUrl) throw new Error('Base url is not set!');
@@ -70,7 +76,7 @@ export function sendFetch(config: FetchOptions, legacySupport: boolean = false):
     const options: { [index: string]: any } = {
         headers,
         method,
-        body: config.stringifyData === false ? data : JSON.stringify(data),
+        body: config.stringifyData === false ? data : JSON.stringify(data, bigIntParser),
         cache: 'no-store',
     };
     const abortController = getAbortController();