diff options
Diffstat (limited to 'packages/components/src')
4 files changed, 156 insertions, 189 deletions
diff --git a/packages/components/src/components/NumberDropdown/NumberDropdown.scss b/packages/components/src/components/NumberDropdown/NumberDropdown.scss index 0999afb98..4ed5855d9 100644 --- a/packages/components/src/components/NumberDropdown/NumberDropdown.scss +++ b/packages/components/src/components/NumberDropdown/NumberDropdown.scss @@ -1,5 +1,19 @@ @import '../../global/globalCssVariables.scss'; .numberDropdown-container { - -}
\ No newline at end of file +} + +.form-wrapper { + .iconButton-label { + position: relative; + z-index: 2; + width: 100%; + overflow: hidden; + white-space: normal; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + font-size: $xsmall-fontSize !important; + } +} diff --git a/packages/components/src/components/NumberDropdown/NumberDropdown.tsx b/packages/components/src/components/NumberDropdown/NumberDropdown.tsx index a26cd71ab..7f12198d5 100644 --- a/packages/components/src/components/NumberDropdown/NumberDropdown.tsx +++ b/packages/components/src/components/NumberDropdown/NumberDropdown.tsx @@ -1,137 +1,101 @@ -import * as React from 'react' -import { Colors, IGlobalProps, INumberProps, Size, Type, getFontSize , getFormLabelSize } from '../../global' -import { Popup } from '../Popup' -import { Toggle, ToggleType } from '../Toggle' -import { useState } from 'react' -import { Slider } from '../Slider' -import { ListBox } from '../ListBox' -import { IListItemProps } from '../ListItem' -import { Group } from '../Group' -import { IconButton } from '../IconButton' -import * as fa from 'react-icons/fa' +import * as React from 'react'; +import { Colors, INumberProps, Size, getFormLabelSize } from '../../global'; +import { Popup } from '../Popup'; +import { Toggle, ToggleType } from '../Toggle'; +import { useState } from 'react'; +import { Slider } from '../Slider'; +import { ListBox } from '../ListBox'; +import { IListItemProps } from '../ListItem'; +import { Group } from '../Group'; +import { IconButton } from '../IconButton'; +import * as fa from 'react-icons/fa'; +import './NumberDropdown.scss'; - -export type NumberDropdownType = 'slider' | 'dropdown' | 'input' +export type NumberDropdownType = 'slider' | 'dropdown' | 'input'; export interface INumberDropdownProps extends INumberProps { - numberDropdownType: NumberDropdownType, - showPlusMinus?: boolean + numberDropdownType: NumberDropdownType; + showPlusMinus?: boolean; } export const NumberDropdown = (props: INumberDropdownProps) => { - const [numberLoc, setNumberLoc] = useState<number>(0) - const { - fillWidth, - numberDropdownType = false, - color = Colors.MEDIUM_BLUE, - type, - formLabelPlacement, - showPlusMinus, - min, - max, - unit, - step = 1, - number = numberLoc, - setNumber = setNumberLoc, - size, - formLabel, - tooltip } = - props; + const [numberLoc, setNumberLoc] = useState<number>(0); + const { fillWidth, numberDropdownType = false, color = Colors.MEDIUM_BLUE, type, formLabelPlacement, showPlusMinus, min, max, unit, step = 1, number = numberLoc, setNumber = setNumberLoc, size, formLabel, tooltip } = props; const [isOpen, setOpen] = useState<boolean>(false); let toggleText = number.toString(); - if (unit) toggleText = toggleText + unit - let toggle = <Toggle - tooltip={tooltip} - color={color} - fillWidth={fillWidth} - type={type} - size={size} - align={'center'} - text={toggleText} - toggleType={ToggleType.BUTTON} - toggleStatus={isOpen} - onPointerDown={() => setOpen(!isOpen)} - />; - + if (unit) toggleText = toggleText + unit; + let toggle = <Toggle tooltip={tooltip} color={color} fillWidth={fillWidth} type={type} size={size} align={'center'} text={toggleText} toggleType={ToggleType.BUTTON} toggleStatus={isOpen} onPointerDown={() => setOpen(!isOpen)} />; + if (showPlusMinus) { - toggle = <Group columnGap={0} style={{overflow: 'hidden'}}> - <IconButton - size={size} - icon={<fa.FaMinus/>} - color={color} - onClick={(e) => { - e.stopPropagation(); - setNumber(number - step); - }} - fillWidth={fillWidth} - tooltip={`Subtract ${step}${unit}`} - /> - {toggle} - <IconButton - size={size} - icon={<fa.FaPlus/>} - color={color} - onClick={(e) => { - e.stopPropagation(); - setNumber(number + step); - }} - fillWidth={fillWidth} - tooltip={`Add ${step}${unit}`} - /> - </Group> + toggle = ( + <Group columnGap={0} style={{ overflow: 'hidden' }}> + <IconButton + size={size} + icon={<fa.FaMinus />} + color={color} + onClick={e => { + e.stopPropagation(); + setNumber(number - step); + }} + fillWidth={fillWidth} + tooltip={`Subtract ${step}${unit}`} + /> + {toggle} + <IconButton + size={size} + icon={<fa.FaPlus />} + color={color} + onClick={e => { + e.stopPropagation(); + setNumber(number + step); + }} + fillWidth={fillWidth} + tooltip={`Add ${step}${unit}`} + /> + </Group> + ); } - + let popup; switch (numberDropdownType) { case 'dropdown': - let items: IListItemProps[] = []; - for (let i = min; i <= max; i += step) { - let text = i.toString() - if (unit) text = i.toString() + unit - items.push( - { + { + const items: IListItemProps[] = []; + for (let i = min; i <= max; i += step) { + let text = i.toString(); + if (unit) text = i.toString() + unit; + items.push({ text: text, val: i, - style: { textAlign: 'center' } - } - ) + style: { textAlign: 'center' }, + }); + } + popup = <ListBox color={color} selectedVal={number} setSelectedVal={num => setNumber(num as number)} items={items} />; } - popup = <ListBox - color={color} - selectedVal={number} - setSelectedVal={(num) => setNumber(num as number)} - items={items} - /> break; case 'slider': default: - popup = <Slider size={Size.SMALL} unit={unit} multithumb={false} min={min} max={max} step={step} number={number} setNumber={setNumber}/> + popup = <Slider size={Size.SMALL} unit={unit} multithumb={false} min={min} max={max} step={step} number={number} setNumber={setNumber} />; break; case 'input': - popup = <Slider multithumb={false} min={min} max={max} step={step} number={number}/> + popup = <Slider multithumb={false} min={min} max={max} step={step} number={number} />; break; } - const numberDropdown: JSX.Element = <div className={`numberDropdown-container`} style={{width: fillWidth ? '100%' : 'fit-content'}}> - <Popup - setOpen={setOpen} - placement={'bottom'} - isOpen={isOpen} - popup={popup} - toggle={toggle} - fillWidth={fillWidth} - color={color} - /> - </div> + const numberDropdown: JSX.Element = ( + <div className={`numberDropdown-container`} style={{ height: '75%', width: fillWidth ? '100%' : 'fit-content' }}> + <Popup setOpen={setOpen} placement={'bottom'} size={size} isOpen={isOpen} popup={popup} toggle={toggle} fillWidth={fillWidth} color={color} /> + </div> + ); - return ( - formLabel ? - <div className={`form-wrapper ${formLabelPlacement}`} -style={{ width: fillWidth ? '100%' : undefined}}> + return formLabel ? ( + <div className={`form-wrapper ${formLabelPlacement}`} style={{ height: '100%', width: fillWidth ? '100%' : undefined }}> {numberDropdown} - <div className={'formLabel'} style={{fontSize: getFormLabelSize(size)}}>{formLabel}</div> + <div className="iconButton-label" style={{ fontSize: getFormLabelSize(size) }}> + {formLabel} + </div> </div> - : + ) : ( numberDropdown - ) -}
\ No newline at end of file + ); +}; diff --git a/packages/components/src/components/Popup/Popup.tsx b/packages/components/src/components/Popup/Popup.tsx index 92e7227bd..aa732d568 100644 --- a/packages/components/src/components/Popup/Popup.tsx +++ b/packages/components/src/components/Popup/Popup.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Colors, IGlobalProps, Placement, Size, getFormLabelSize, isDark } from '../../global'; +import { Colors, IGlobalProps, Placement, Size, isDark } from '../../global'; import { Toggle, ToggleType } from '../Toggle'; import './Popup.scss'; import { Popper } from '@mui/material'; @@ -16,7 +16,7 @@ export interface IPopupProps extends IGlobalProps { iconPlacement?: Placement; placement?: Placement; size?: Size; - height?: number; + height?: number | string; toggle?: JSX.Element; popup: JSX.Element | string | (() => JSX.Element); trigger?: PopupTrigger; @@ -62,12 +62,12 @@ export const Popup = (props: IPopupProps) => { } = props; const triggerRef = useRef(null); - const popperRef = useRef(null); + const popperRef = useRef<HTMLDivElement | null>(null); let timeout = setTimeout(() => {}); const handlePointerAwayDown = (e: PointerEvent) => { - const rect = (popperRef.current as any)?.getBoundingClientRect(); + const rect = popperRef.current?.getBoundingClientRect(); if (rect && !(rect.left < e.clientX && rect.top < e.clientY && rect.right > e.clientX && rect.bottom > e.clientY) && !popupContainsPt?.(e.clientX, e.clientY)) { e.preventDefault(); setOpen(false); diff --git a/packages/components/src/global/globalTypes.ts b/packages/components/src/global/globalTypes.ts index aa8451a9c..764fe7422 100644 --- a/packages/components/src/global/globalTypes.ts +++ b/packages/components/src/global/globalTypes.ts @@ -1,87 +1,76 @@ -import { PointerEventHandler } from "react" -import { Size } from "./globalEnums" +import { PointerEventHandler } from 'react'; +import { Size } from './globalEnums'; -export interface IGlobalProps { - // Size - size?: Size - height?: number - width?: number - fillWidth?: boolean - color?: string - background?: string +export enum Type { + PRIM = 'primary', + SEC = 'secondary', + TERT = 'tertiary', +} - // Type - type?: Type +export type Placement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'; - // Status - inactive?: boolean +export type Alignment = 'flex-start' | 'flex-end' | 'center'; - // Content - tooltip?: string - tooltipPlacement?: Placement +export type TextAlignment = 'center' | 'left' | 'right'; - // Label - label?: string - hideLabel?: boolean +export interface IGlobalProps { + // Size + size?: Size; + height?: number | string; + width?: number; + fillWidth?: boolean; + color?: string; + background?: string; - // Label when used in forms - formLabel?: string - formLabelPlacement?: Placement + // Type + type?: Type; - // Custom style - style?: React.CSSProperties + // Status + inactive?: boolean; - // Global pointer events - onPointerDown?: PointerEventHandler | undefined; - onPointerDownCapture?: PointerEventHandler | undefined; - onPointerMove?: PointerEventHandler | undefined; - onPointerMoveCapture?: PointerEventHandler | undefined; - onPointerUp?: PointerEventHandler | undefined; - onPointerUpCapture?: PointerEventHandler | undefined; - onPointerCancel?: PointerEventHandler | undefined; - onPointerCancelCapture?: PointerEventHandler | undefined; - onPointerEnter?: PointerEventHandler | undefined; - onPointerEnterCapture?: PointerEventHandler | undefined; - onPointerLeave?: PointerEventHandler | undefined; - onPointerLeaveCapture?: PointerEventHandler | undefined; - onPointerOver?: PointerEventHandler | undefined; - onPointerOverCapture?: PointerEventHandler | undefined; - onPointerOut?: PointerEventHandler | undefined; - onPointerOutCapture?: PointerEventHandler | undefined; - onGotPointerCapture?: PointerEventHandler | undefined; - onGotPointerCaptureCapture?: PointerEventHandler | undefined; - onLostPointerCapture?: PointerEventHandler | undefined; - onLostPointerCaptureCapture?: PointerEventHandler | undefined; -} + // Content + tooltip?: string; + tooltipPlacement?: Placement; -export interface INumberProps extends IGlobalProps { - min: number, - max: number, - step?: number, - number: number - setNumber?: (num: number) => unknown, - unit?: string -} + // Label + label?: string; + hideLabel?: boolean; -export enum Type { - PRIM = "primary", - SEC = "secondary", - TERT = "tertiary", -} + // Label when used in forms + formLabel?: string; + formLabelPlacement?: Placement; -export type Placement = 'bottom-end' - | 'bottom-start' - | 'bottom' - | 'left-end' - | 'left-start' - | 'left' - | 'right-end' - | 'right-start' - | 'right' - | 'top-end' - | 'top-start' - | 'top' + // Custom style + style?: React.CSSProperties; -export type Alignment = 'flex-start' | 'flex-end' | 'center' + // Global pointer events + onPointerDown?: PointerEventHandler | undefined; + onPointerDownCapture?: PointerEventHandler | undefined; + onPointerMove?: PointerEventHandler | undefined; + onPointerMoveCapture?: PointerEventHandler | undefined; + onPointerUp?: PointerEventHandler | undefined; + onPointerUpCapture?: PointerEventHandler | undefined; + onPointerCancel?: PointerEventHandler | undefined; + onPointerCancelCapture?: PointerEventHandler | undefined; + onPointerEnter?: PointerEventHandler | undefined; + onPointerEnterCapture?: PointerEventHandler | undefined; + onPointerLeave?: PointerEventHandler | undefined; + onPointerLeaveCapture?: PointerEventHandler | undefined; + onPointerOver?: PointerEventHandler | undefined; + onPointerOverCapture?: PointerEventHandler | undefined; + onPointerOut?: PointerEventHandler | undefined; + onPointerOutCapture?: PointerEventHandler | undefined; + onGotPointerCapture?: PointerEventHandler | undefined; + onGotPointerCaptureCapture?: PointerEventHandler | undefined; + onLostPointerCapture?: PointerEventHandler | undefined; + onLostPointerCaptureCapture?: PointerEventHandler | undefined; +} -export type TextAlignment = 'center' | 'left' | 'right'
\ No newline at end of file +export interface INumberProps extends IGlobalProps { + min: number; + max: number; + step?: number; + number: number; + setNumber?: (num: number) => unknown; + unit?: string; +} |