@dvrd/dvr-controls 1.0.37 → 1.0.39

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.37",
+  "version": "1.0.39",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

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/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/miscUtil.ts

@@ -136,8 +136,8 @@ export const shuffleArray = (arr: any[]): any[] => {
     return arr;
 };
 
-export function nullify<T extends string | Array<any> | Set<any> | number>(value?: T | null): T | null {
-    if (typeof value === 'number') {
+export function nullify<T extends string | Array<any> | Set<any> | number | bigint>(value?: T | null): T | null {
+    if (typeof value === 'number' || typeof value === 'bigint') {
         if (value > 0) return value;
         return null;
     }

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',