wini-web-components 2.8.5 → 2.8.6

package/src/component/input-multi-select/input-multi-select.tsx

@@ -1,263 +0,0 @@
-import React, { createRef, CSSProperties } from 'react'
-import styles from './input-multi-select.module.css'
-import { OptionsItem } from '../select1/select1'
-import { Checkbox } from '../checkbox/checkbox'
-import { Text } from '../text/text'
-import { Winicon } from '../wini-icon/winicon'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { PopupOverlay } from '../popup/popup'
-
-interface SelectMultipleProps extends WithTranslation {
-    id?: string,
-    value?: Array<string | number>,
-    options: Required<Array<OptionsItem>>,
-    onChange?: (value?: Array<string | number>) => void,
-    placeholder?: string,
-    disabled?: boolean,
-    className?: string,
-    helperText?: string,
-    helperTextColor?: string,
-    style?: CSSProperties,
-    handleSearch?: (e: string) => Promise<Array<OptionsItem>>,
-    handleLoadmore?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => void,
-    showClearValueButton?: boolean,
-    popupClassName?: string
-}
-
-interface SelectMultipleState {
-    value: Array<string | number>,
-    options: Required<Array<OptionsItem>>,
-    offset: DOMRect,
-    isOpen: boolean,
-    onSelect: any,
-    search?: Array<OptionsItem>,
-    style?: Object
-};
-
-class TSelectMultiple extends React.Component<SelectMultipleProps, SelectMultipleState> {
-    private containerRef = createRef<HTMLDivElement>()
-    private inputRef = createRef<HTMLInputElement>()
-    constructor(props: SelectMultipleProps) {
-        super(props)
-        this.state = {
-            value: props.value ?? [],
-            options: props.options,
-            offset: {
-                x: 0,
-                y: 0,
-                height: 0,
-                width: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                toJSON: function () {
-                    throw new Error('Function not implemented.')
-                }
-            },
-            isOpen: false,
-            onSelect: null,
-        }
-        this.onCheck = this.onCheck.bind(this)
-        this.search = this.search.bind(this)
-        this.onClickItem = this.onClickItem.bind(this)
-    }
-
-    private onCheck(value: boolean, list: Array<OptionsItem>) {
-        let newValue: Array<string | number> = []
-        if (value) {
-            newValue = [...this.state.value, ...list.map(e => e.id)]
-        } else {
-            newValue = this.state.value.filter(vl => list.every(e => vl !== e.id))
-        }
-        this.setState({ ...this.state, value: newValue })
-        if (this.props.onChange) this.props.onChange(newValue)
-    }
-
-    private async search(ev: React.ChangeEvent<HTMLInputElement>) {
-        if (ev.target.value.trim().length) {
-            if (this.props?.handleSearch) {
-                const res = await this.props.handleSearch(ev.target.value.trim())
-                this.setState({ ...this.state, search: res })
-            } else {
-                this.setState({
-                    ...this.state,
-                    search: this.props.options.filter(e => typeof e.name === "string" && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()))
-                })
-            }
-        } else {
-            this.setState({ ...this.state, search: undefined })
-        }
-    }
-
-    private onClickItem(ev: React.MouseEvent<HTMLDivElement>, item: string | number) {
-        ev.stopPropagation()
-        let newValue = this.state.value.filter(vl => vl !== item)
-        this.setState({
-            ...this.state,
-            value: newValue,
-            ...(this.state.isOpen ? {} : {
-                isOpen: true,
-                style: undefined,
-                offset: this.containerRef?.current?.getBoundingClientRect() as any,
-            })
-        })
-        if (this.props.onChange) this.props.onChange(newValue)
-    }
-
-    private renderOptions(item: OptionsItem) {
-        let children: Array<OptionsItem> = []
-        if (!item.parentId) children = (this.state.search ?? this.state.options).filter(e => e.parentId === item.id)
-        // 
-        return <div key={item.id} className='col' style={{ width: '100%' }}>
-            <div className={`${styles['select-tile']} row ${item.disabled ? styles["disabled"] : ""}`} style={{ paddingLeft: item.parentId ? '4.4rem' : undefined }} onClick={children.length ? () => {
-                if (this.state.search) {
-                    this.setState({
-                        ...this.state, search: this.state.search.map(e => {
-                            if (e.id === item.id) return { ...e, isOpen: !(item as any).isOpen } as any
-                            else return e
-                        })
-                    })
-                } else {
-                    this.setState({
-                        ...this.state, options: this.state.options.map(e => {
-                            if (e.id === item.id) return { ...e, isOpen: !(item as any).isOpen } as any
-                            else return e
-                        })
-                    })
-                }
-            } : undefined}>
-                {(this.state.search ?? this.state.options).some(e => e.parentId) && <div className='row' style={{ width: '1.4rem', height: '1.4rem' }}>
-                    {children.length ? <Winicon src={(item as any).isOpen ? 'fill/arrows/triangle-down' : 'fill/arrows/triangle-right'} size={'1.2rem'} /> : null}
-                </div>}
-                <Checkbox disabled={item.disabled} value={children.length ? (children.every((e) => this.state.value.includes(e.id)) ? true : children.some((e) => this.state.value.includes(e.id)) ? undefined : false) : this.state.value.includes(item.id)} onChange={(v) => { this.onCheck(v, [item, ...children]) }} size={'2rem'} />
-                <Text className='body-3'>{item.name}</Text>
-            </div>
-            <div className='col' style={{ display: (item as any).isOpen ? "flex" : "none", width: '100%' }}>{children.map(e => this.renderOptions(e))}</div>
-        </div>
-    }
-
-    componentDidUpdate(prevProps: SelectMultipleProps, prevState: SelectMultipleState) {
-        if (prevProps.options !== this.props.options) this.setState({ ...this.state, options: this.props.options })
-        if (prevProps.value !== this.props.value) this.setState({ ...this.state, value: this.props.value ?? [] })
-        //
-        if (this.state.isOpen && (prevState.isOpen !== this.state.isOpen || prevState.value.length !== this.state.value.length)) {
-            const thisPopupRect = this.containerRef.current!.querySelector(`.select-multi-popup`)?.getBoundingClientRect()
-            if (thisPopupRect) {
-                let style: { top?: string, left?: string, right?: string, bottom?: string, width?: string, height?: string } | undefined;
-                if (prevState.isOpen !== this.state.isOpen && thisPopupRect.right > document.body.offsetWidth) {
-                    style = {
-                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                        right: document.body.offsetWidth - this.state.offset.right + 'px'
-                    }
-                }
-                let _bottom = thisPopupRect.bottom - 8
-                const thisContainerRect = this.containerRef.current?.getBoundingClientRect()
-                if (thisContainerRect) {
-                    if (prevState.value.length !== this.state.value.length) {
-                        _bottom = thisContainerRect.bottom + 2 + thisPopupRect.height
-                        style = { ...(style ?? {}), top: `${thisContainerRect.bottom + 2}px` }
-                    }
-                    if (_bottom > document.body.offsetHeight) {
-                        style = { ...(style ?? {}), top: `${thisContainerRect.y - 2 - thisPopupRect.height}px` }
-                    }
-                }
-                if (style) {
-                    style.left ??= (style.right ? undefined : `${this.state.offset.x}px`)
-                    style.width ??= `${this.state.offset.width}px`
-                    this.setState({ ...this.state, style: style })
-                }
-            }
-        }
-    }
-
-    render() {
-        const { t } = this.props;
-        return <div
-            id={this.props.id}
-            ref={this.containerRef}
-            className={`${styles['select-multi-container']} row ${this.props.disabled ? styles['disabled'] : ''} ${this.props.helperText?.length && styles['helper-text']} ${this.props.className ?? 'body-3'}`}
-            helper-text={this.props.helperText}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-            onClick={() => {
-                if (!this.state.isOpen) this.setState({
-                    ...this.state,
-                    isOpen: true,
-                    style: undefined,
-                    offset: this.containerRef?.current?.getBoundingClientRect() as any,
-                })
-            }}
-        >
-            <div className='row' style={{ flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' }}>
-                {this.state.value.map(item => {
-                    const optionItem = this.props.options.find(e => e.id === item)
-                    return <div key={item} className={`row ${styles['selected-item-value']}`} onClick={optionItem?.disabled ? undefined : (ev) => this.onClickItem(ev, item)}>
-                        <Text style={{ color: "var(--neutral-text-title-color)", fontSize: '1.2rem', lineHeight: '1.4rem' }} >{optionItem?.name}</Text>
-                        <Winicon src={"outline/user interface/e-remove"} size={'1.2rem'} />
-                    </div>
-                })}
-                {(!this.state.value.length || this.state.isOpen) && <input ref={this.inputRef} autoFocus={this.state.value.length > 0} onChange={this.search} placeholder={this.state.value.length ? undefined : this.props.placeholder}
-                    onBlur={ev => {
-                        if (this.state.isOpen) ev.target.focus()
-                    }}
-                />}
-            </div>
-            {this.props.showClearValueButton && this.state.value.length ? <button type='button' className='row' style={{ padding: '0.4rem' }} onClick={(ev) => {
-                ev.stopPropagation()
-                if (this.state.value.length) this.setState({ ...this.state, isOpen: true, value: [] })
-            }}>
-                <Winicon src={"outline/user interface/c-remove"} size={'1.6rem'} />
-            </button> : <div ref={iconRef => {
-                if (iconRef?.parentElement && iconRef.parentElement.getBoundingClientRect().width < 100) iconRef.style.display = "none"
-            }} className='row' >
-                <Winicon src={this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow"} size={'1.2rem'} />
-            </div>}
-            {this.state.isOpen && <PopupOverlay
-                className={`hidden-overlay`}
-                onClose={(ev) => {
-                    if (ev.target !== this.inputRef.current) this.setState({ ...this.state, isOpen: false })
-                }}
-            >
-                <div className={`${styles['select-multi-popup']} select-multi-popup col ${this.props.popupClassName ?? ""}`}
-                    style={this.state.style ?? {
-                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                        left: this.state.offset.x + 'px',
-                        width: this.state.offset.width,
-                    }}>
-                    <div style={{ padding: '1.2rem 1.6rem', width: '100%', borderBottom: "var(--neutral-main-border)" }}>
-                        {(() => {
-                            const _list = (this.state.search ?? this.props.options ?? [])
-                            const isSelectedAll = _list.every(item => this.state.value.some(vl => vl === item.id))
-                            return <Text onClick={() => {
-                                let newValue: Array<string | number> = []
-                                if (_list.length) {
-                                    if (isSelectedAll) {
-                                        newValue = this.state.value.filter(vl => _list.every(item => vl !== item.id || item.disabled))
-                                    } else {
-                                        newValue = [...this.state.value, ..._list.filter(item => this.state.value.every(vl => vl !== item.id) && !item.disabled).map(e => e.id)]
-                                    }
-                                }
-                                this.setState({ ...this.state, value: newValue })
-                                if (this.props.onChange) this.props.onChange(newValue)
-                            }} className='button-text-3' style={{ color: _list.length ? undefined : 'var(--neutral-text-title-color)' }}>{_list.length && isSelectedAll ? `${t("remove")} ${t("all").toLowerCase()}` : `${t("select")} ${t("all").toLowerCase()}`}</Text>
-                        })()}
-                    </div>
-                    <div className={`col ${styles['select-body']}`} onScroll={this.props.handleLoadmore ? (ev) => {
-                        if (this.props.handleLoadmore) {
-                            let scrollElement = ev.target as HTMLDivElement
-                            this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev)
-                        }
-                    } : undefined}>
-                        {(this.state.search ?? this.state.options).filter(e => !e.parentId).map(item => this.renderOptions(item))}
-                        {(!this.state.search?.length && !this.props.options?.length) && (
-                            <div className={styles['no-results-found']}>{t("noResultFound")}</div>
-                        )}
-                    </div>
-                </div>
-            </PopupOverlay>}
-        </div>
-    }
-}
-
-export const SelectMultiple = withTranslation()(TSelectMultiple)
-

package/src/component/input-otp/input-otp.module.css

@@ -1,41 +0,0 @@
-.input-opt-container {
-    height: 4.8rem;
-    gap: 0.8rem;
-}
-
-.input-opt-container>input {
-    border: var(--neutral-bolder-border);
-    height: 100%;
-    aspect-ratio: 1 / 1;
-    border-radius: 0.8rem;
-    text-align: center;
-    min-width: 3.2rem;
-    font: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    font-style: inherit;
-}
-
-.input-opt-container:focus-within>input {
-    border-color: var(--primary-main-color);
-}
-
-.input-opt-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.input-opt-container.helper-text::after {
-    content: attr(helper-text);
-    color: var(--helper-text-color);
-    position: absolute;
-    left: 0;
-    bottom: -0.4rem;
-    width: max-content;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    font-family: inherit;
-    transform: translateY(100%);
-}

package/src/component/input-otp/input-otp.tsx

@@ -1,110 +0,0 @@
-import React, { createRef, CSSProperties, ReactNode } from "react";
-import styles from './input-otp.module.css'
-
-interface Props {
-    id?: string,
-    onChange?: (value: string, target: HTMLDivElement) => void
-    disabled?: boolean,
-    value?: string,
-    length?: number,
-    inputStyle?: CSSProperties,
-    style?: CSSProperties,
-    className?: string,
-    helperText?: string,
-    helperTextColor?: string,
-    autoFocus?: boolean
-}
-
-export class InputOtp extends React.Component<Props> {
-    private containerRef = createRef<HTMLDivElement>()
-    constructor(props: Props | Readonly<Props>) {
-        super(props);
-        this.getValue = this.getValue.bind(this)
-    }
-
-    getValue = () => {
-        if (this.containerRef.current)
-            return [...(this.containerRef.current.querySelectorAll("input") as any)].map(v => v.value).join("")
-        else return this.props.value ?? ""
-    }
-
-    componentDidUpdate(prevProps: Readonly<Props>): void {
-        if (prevProps.value !== this.props.value && this.containerRef.current) {
-            const inputList = [...(this.containerRef.current.querySelectorAll("input") as any)]
-            if (this.props.value?.length) {
-                for (let i = 0; i < inputList.length; i++)   inputList[i].value = this.props.value[i]
-            } else {
-                for (let i = 0; i < inputList.length; i++)   inputList[i].value = ""
-            }
-        }
-    }
-
-    render(): ReactNode {
-        return <div
-            id={this.props.id}
-            ref={this.containerRef}
-            helper-text={this.props.helperText}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-            className={`row body-1 ${styles['input-opt-container']} ${this.props.helperText?.length && 'helper-text'} ${this.props.className ?? ''}`}
-            onMouseDown={(ev: any) => {
-                ev.stopPropagation()
-                ev.preventDefault()
-                const inputList: any = [...ev.target.closest("div").childNodes]
-                for (const [index, input] of inputList.entries()) {
-                    if (!input.value.length || index === (inputList.length - 1)) {
-                        input.focus()
-                        break;
-                    }
-                    continue;
-                }
-            }}
-        >
-            {Array.from({ length: this.props.length ?? 6 }).map((_, i) => <input
-                key={"opt-" + i}
-                autoFocus={i === 0 && this.props.autoFocus}
-                disabled={this.props.disabled}
-                style={this.props.inputStyle}
-                onKeyDown={(ev: any) => {
-                    const key = ev.key.toLowerCase()
-                    switch (key) {
-                        case "backspace":
-                            if (ev.target.value.length) ev.target.value = ""
-                            else if (ev.target.previousSibling?.localName === "input") ev.target.previousSibling.focus()
-                            else ev.target.blur()
-                            break;
-                        case "delete":
-                            ev.target.value = ""
-                            break;
-                        default:
-                            ev.preventDefault()
-                            ev.stopPropagation()
-                            if (key === "v" && ev.ctrlKey) {
-                                return navigator.clipboard.readText().then(text => {
-                                    const otpRegex = /^\d{6}$/g
-                                    if (otpRegex.test(text)) {
-                                        const inputList: any = [...ev.target.closest("div").childNodes]
-                                        inputList.forEach((input: any, i: number) => {
-                                            input.value = text[i]
-                                            input.focus()
-                                        })
-                                    }
-                                })
-                            } else {
-                                const numberCheck = /[0-9]/g
-                                if (numberCheck.test(key) && !key.startsWith("f")) {
-                                    if (!ev.target.value.length) ev.target.value = key
-                                    if (ev.target.nextSibling?.localName === "input" && !ev.target.nextSibling.value.length) ev.target.nextSibling.focus()
-                                    else ev.target.blur()
-                                }
-                            }
-                            break;
-                    }
-                }}
-                onBlur={() => {
-                    if (this.props.onChange) this.props.onChange(this.getValue(), this.containerRef.current!)
-                }}
-            />)}
-        </div>
-    }
-}
-

package/src/component/number-picker/number-picker.module.css

@@ -1,137 +0,0 @@
-.number-picker-container {
-    position: relative;
-    align-items: stretch;
-    gap: 0.4rem;
-}
-
-.number-picker-container[number-picker-type="outline"] {
-    border-radius: 0.8rem;
-    padding: 0 0.6rem;
-    border: var(--neutral-bolder-border);
-}
-
-.number-picker-container>div:has(>svg) {
-    padding: 0.7rem;
-    border: var(--neutral-bolder-border);
-    border-radius: 50%;
-    aspect-ratio: 1 / 1;
-    height: 100%;
-    cursor: pointer;
-}
-
-.number-picker-container[number-picker-type="outline"]>div:has(>svg) {
-    padding: 0.6rem;
-}
-
-.number-picker-container[class~="size40"]>div>svg {
-    width: 1.6rem;
-    height: 1.6rem;
-}
-
-.number-picker-container[class~="size40"]>div:has(>svg) {
-    padding: 1.1rem;
-}
-
-.number-picker-container[class~="size40"][number-picker-type="outline"]>div:has(>svg) {
-    padding: 1rem;
-}
-
-.number-picker-container[class~="size24"]>div:has(>svg) {
-    padding: 0.5rem;
-}
-
-.number-picker-container[class~="size24"][number-picker-type="outline"]>div:has(>svg) {
-    padding: 0.4rem;
-}
-
-.number-picker-container[class~="size24"]>div>svg {
-    width: 1.2rem;
-    height: 1.2rem;
-}
-
-.number-picker-container[number-picker-type="outline"]>div:has(>svg) {
-    border-color: transparent;
-    border-radius: 0;
-}
-
-.number-picker-container>div>svg {
-    height: 100%;
-    flex: 1;
-    aspect-ratio: 1 / 1;
-}
-
-.number-picker-container>div>svg * {
-    fill: var(--neutral-text-subtitle-color);
-}
-
-.number-picker-container>input {
-    flex: 1;
-    width: 100%;
-    min-width: 5.6rem;
-    border: var(--neutral-bolder-border);
-    border-color: transparent;
-    outline: none;
-    padding: 0 0.4rem;
-    background-color: transparent !important;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: center;
-    text-overflow: inherit;
-}
-
-.number-picker-container>input:focus {
-    border-color: var(--primary-main-color);
-    border-radius: 0.8rem;
-}
-
-.number-picker-container[number-picker-type="outline"] input {
-    border: none;
-}
-
-.number-picker-container[number-picker-type="outline"]:focus-within {
-    border-color: var(--primary-main-color);
-}
-
-.number-picker-container:has(>input:disabled) {
-    pointer-events: none !important;
-    color: var(--neutral-text-disabled-color);
-}
-
-.number-picker-container[number-picker-type="outline"]:has(>input:disabled) {
-    background-color: var(--neutral-disable-background-color);
-}
-
-.number-picker-container:has(>input:disabled)>div:has(>svg) {
-    background-color: var(--neutral-disable-background-color);
-}
-
-.number-picker-container:has(>input:disabled) svg * {
-    fill: var(--neutral-text-disabled-color);
-}
-
-.number-picker-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.number-picker-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.number-picker-container.helper-text::after {
-    content: attr(helper-text);
-    color: var(--helper-text-color);
-    position: absolute;
-    left: 0;
-    bottom: -0.4rem;
-    width: max-content;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    font-family: inherit;
-    transform: translateY(100%);
-}

package/src/component/number-picker/number-picker.tsx

@@ -1,107 +0,0 @@
-import { CSSProperties, useEffect, useRef, useState } from "react";
-import styles from './number-picker.module.css'
-
-interface Props {
-    id?: string,
-    value?: number,
-    onChange?: (ev: number) => void,
-    disabled?: boolean,
-    readOnly?: boolean,
-    /**
-     * default: size32: body-3 \
-     * recommend: size40: body-2 | size24: body-3
-     * */
-    className?: string,
-    helperText?: string,
-    helperTextColor?: string,
-    /** default: 1 */
-    volume?: number,
-    style?: CSSProperties,
-    min?: number,
-    max?: number,
-    type?: "outline" | "icon-button",
-}
-
-export const NumberPicker = ({ id, value, onChange, disabled, readOnly, className, helperText, helperTextColor, max, min, style, type = "icon-button", volume = 1 }: Props) => {
-    const [val, setValue] = useState<number>(0);
-    const inputRef = useRef<HTMLInputElement>(null)
-
-    useEffect(() => {
-        if (inputRef.current) {
-            setValue(value ?? 0)
-            inputRef.current.value = `${value ?? 0}`
-        }
-    }, [value, inputRef])
-
-    return <div id={id}
-        className={`row ${styles["number-picker-container"]} ${className ?? "body-2"} ${helperText?.length && styles['helper-text']}`}
-        number-picker-type={type ?? "icon-button"}
-        helper-text={helperText}
-        style={style ? { ...({ '--helper-text-color': helperTextColor ?? '#e14337' } as CSSProperties), ...style } : ({ '--helper-text-color': helperTextColor ?? '#e14337' } as CSSProperties)}
-    >
-        <div className="row" onClick={() => {
-            let newValue = val - volume
-            if (min === undefined || newValue >= min) {
-                if (volume % 1 === 0) newValue = Math.round(newValue)
-                else newValue = parseFloat(newValue.toFixed(1))
-                setValue(newValue)
-                if (inputRef.current) inputRef.current.value = `${newValue}`
-                if (onChange) onChange(newValue)
-            }
-        }}>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fillRule="evenodd" clipRule="evenodd" d="M1.3335 7.93907C1.3335 7.60435 1.60484 7.33301 1.93956 7.33301H14.0608C14.3955 7.33301 14.6668 7.60435 14.6668 7.93907C14.6668 8.27379 14.3955 8.54513 14.0608 8.54513H1.93956C1.60484 8.54513 1.3335 8.27379 1.3335 7.93907Z" />
-            </svg>
-        </div>
-        <input
-            ref={inputRef}
-            readOnly={readOnly}
-            disabled={disabled}
-            onKeyDown={(ev) => {
-                switch (ev.key.toLowerCase()) {
-                    case "enter":
-                        (ev.target as HTMLInputElement).blur()
-                        break;
-                    default:
-                        break;
-                }
-            }}
-            onFocus={(ev) => { (ev.target as HTMLInputElement).select() }}
-            onBlur={(ev) => {
-                let newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim())
-                if (isNaN(newValue)) ev.target.value = `${val}`
-                else {
-                    if (volume % 1 === 0) newValue = Math.round(newValue)
-                    else newValue = parseFloat(newValue.toFixed(1))
-                    if (min !== undefined && newValue < min) {
-                        setValue(min)
-                        if (inputRef.current) inputRef.current.value = `${min}`
-                        if (onChange) onChange(min)
-                    } else if (max !== undefined && newValue > max) {
-                        setValue(max)
-                        if (inputRef.current) inputRef.current.value = `${max}`
-                        if (onChange) onChange(max)
-                    } else {
-                        setValue(newValue)
-                        if (inputRef.current) inputRef.current.value = `${newValue}`
-                        if (onChange) onChange(newValue)
-                    }
-                }
-            }}
-        />
-        <div className="row" onClick={() => {
-            let newValue = val + volume
-            if (max === undefined || newValue <= max) {
-                if (volume % 1 === 0) newValue = Math.round(newValue)
-                else newValue = parseFloat(newValue.toFixed(1))
-                setValue(newValue)
-                if (inputRef.current) inputRef.current.value = `${newValue}`
-                if (onChange) onChange(newValue)
-            }
-        }}>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8.60622 1.93907C8.60622 1.60435 8.33488 1.33301 8.00016 1.33301C7.66544 1.33301 7.3941 1.60435 7.3941 1.93907V7.39361H1.93956C1.60484 7.39361 1.3335 7.66496 1.3335 7.99967C1.3335 8.33439 1.60484 8.60574 1.93956 8.60574H7.3941V14.0603C7.3941 14.395 7.66544 14.6663 8.00016 14.6663C8.33488 14.6663 8.60622 14.395 8.60622 14.0603V8.60574H14.0608C14.3955 8.60574 14.6668 8.33439 14.6668 7.99967C14.6668 7.66496 14.3955 7.39361 14.0608 7.39361H8.60622V1.93907Z" />
-            </svg>
-        </div>
-    </div>
-}