diff options
Diffstat (limited to 'packages/components')
| -rw-r--r-- | packages/components/src/components/Button/Button.tsx | 162 | ||||
| -rw-r--r-- | packages/components/src/components/Dropdown/Dropdown.tsx | 2 |
2 files changed, 163 insertions, 1 deletions
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 885403640..9b8893452 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -5,16 +5,31 @@ import { Colors, Size } from '../../global/globalEnums'; import { getFontSize, getHeight } from '../../global/globalUtils'; import { IconButton } from '../IconButton'; import './Button.scss'; +import { infoState } from '../../../../../src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState'; +import { Tooltip } from '@mui/material'; +import React from 'react'; +import { Alignment, IGlobalProps, Placement, Type, getFormLabelSize } from '../../global'; +import { Colors, Size } from '../../global/globalEnums'; +import { getFontSize, getHeight } from '../../global/globalUtils'; +import { IconButton } from '../IconButton'; +import './Button.scss'; export interface IButtonProps extends IGlobalProps { onClick?: (event: React.MouseEvent) => void; onDoubleClick?: (event: React.MouseEvent) => void; type?: Type; active?: boolean; + onClick?: (event: React.MouseEvent) => void; + onDoubleClick?: (event: React.MouseEvent) => void; + type?: Type; + active?: boolean; // Content text?: string; icon?: JSX.Element | string; + // Content + text?: string; + icon?: JSX.Element | string; // Additional stylization iconPlacement?: Placement; @@ -23,6 +38,14 @@ export interface IButtonProps extends IGlobalProps { uppercase?: boolean; align?: Alignment; filter?: string; + targetState?: infoState + // Additional stylization + iconPlacement?: Placement; + color?: string; + colorPicker?: string; + uppercase?: boolean; + align?: Alignment; + filter?: string; } export const Button = (props: IButtonProps) => { @@ -51,10 +74,38 @@ export const Button = (props: IButtonProps) => { fillWidth, align = fillWidth ? 'flex-start' : 'center', } = props; + const { + text, + icon, + onClick, + onDoubleClick, + onPointerDown, + active, + height, + inactive, + type = Type.PRIM, + filter, + uppercase = false, + iconPlacement = 'right', + size = Size.SMALL, + color = Colors.MEDIUM_BLUE, + background, + style, + tooltip, + tooltipPlacement = 'top', + colorPicker, + formLabel, + formLabelPlacement, + fillWidth, + align = fillWidth ? 'flex-start' : 'center', + } = props; if (!text) { return <IconButton {...props} />; } + if (!text) { + return <IconButton {...props} />; + } /** * Pointer down @@ -67,6 +118,17 @@ export const Button = (props: IButtonProps) => { onPointerDown(e); } }; + /** + * Pointer down + * @param e + */ + const handlePointerDown = (e: React.PointerEvent) => { + if (!inactive && onPointerDown) { + e.stopPropagation(); + e.preventDefault(); + onPointerDown(e); + } + }; /** * In the event that there is a single click @@ -79,6 +141,17 @@ export const Button = (props: IButtonProps) => { onClick(e); } }; + /** + * In the event that there is a single click + * @param e + */ + const handleClick = (e: React.MouseEvent) => { + if (!inactive && onClick) { + e.stopPropagation(); + e.preventDefault(); + onClick(e); + } + }; /** * Double click @@ -91,6 +164,17 @@ export const Button = (props: IButtonProps) => { onDoubleClick(e); } }; + /** + * Double click + * @param e + */ + const handleDoubleClick = (e: React.MouseEvent) => { + if (!inactive && onDoubleClick) { + e.stopPropagation(); + e.preventDefault(); + onDoubleClick(e); + } + }; const getBorderColor = (): Colors | string | undefined => { switch (type) { @@ -103,6 +187,17 @@ export const Button = (props: IButtonProps) => { return color; } }; + const getBorderColor = (): Colors | string | undefined => { + switch (type) { + case Type.PRIM: + return undefined; + case Type.SEC: + if (colorPicker) return colorPicker; + return color; + case Type.TERT: + return color; + } + }; const getColor = (): Colors | string | undefined => { if (color && background) return color; @@ -126,6 +221,16 @@ export const Button = (props: IButtonProps) => { case Type.TERT: } }; + const getBackground = (): Colors | string | undefined => { + if (background) return background; + switch (type) { + case Type.PRIM: + case Type.SEC: + if (colorPicker) return colorPicker; + return color; + case Type.TERT: + } + }; const defaultProperties: React.CSSProperties = { height: getHeight(height, size), @@ -140,11 +245,28 @@ export const Button = (props: IButtonProps) => { borderColor: getBorderColor(), color: getColor(), }; + const defaultProperties: React.CSSProperties = { + height: getHeight(height, size), + minHeight: getHeight(height, size), + width: fillWidth ? '100%' : 'fit-content', + justifyContent: align ? align : undefined, + padding: fillWidth && align === 'center' ? 0 : undefined, + fontWeight: 500, + fontSize: getFontSize(size), + fontFamily: 'sans-serif', + textTransform: uppercase ? 'uppercase' : undefined, + borderColor: getBorderColor(), + color: getColor(), + }; const backgroundProperties: React.CSSProperties = { background: getBackground(), filter, }; + const backgroundProperties: React.CSSProperties = { + background: getBackground(), + filter, + }; const button: JSX.Element = ( <Tooltip disableInteractive={true} arrow={true} placement={tooltipPlacement} title={tooltip}> @@ -186,3 +308,43 @@ export const Button = (props: IButtonProps) => { button ); }; + const button: JSX.Element = ( + <Tooltip disableInteractive={true} arrow={true} placement={tooltipPlacement} title={tooltip}> + <div className={`button-container ${type} ${active && 'active'} ${inactive && 'inactive'}`} onClick={handleClick} onDoubleClick={handleDoubleClick} onPointerDown={handlePointerDown} style={{ ...defaultProperties, ...style }}> + <div className="button-content" style={{ justifyContent: align }}> + {iconPlacement == 'left' && icon ? ( + <div + className="icon" + style={{ + fontSize: getFontSize(size, true), + }}> + {icon} + </div> + ) : null} + {text} + {iconPlacement == 'right' && icon ? ( + <div + className="icon" + style={{ + fontSize: getFontSize(size, true), + }}> + {icon} + </div> + ) : null} + </div> + <div className={`background ${active && 'active'}`} style={backgroundProperties} /> + </div> + </Tooltip> + ); + + return formLabel ? ( + <div className={`form-wrapper ${formLabelPlacement}`} style={{ width: fillWidth ? '100%' : undefined }}> + <div className="formLabel" style={{ fontSize: getFormLabelSize(size) }}> + {formLabel} + </div> + {button} + </div> + ) : ( + button + ); +}; diff --git a/packages/components/src/components/Dropdown/Dropdown.tsx b/packages/components/src/components/Dropdown/Dropdown.tsx index 783c7daa4..7dcaad5c3 100644 --- a/packages/components/src/components/Dropdown/Dropdown.tsx +++ b/packages/components/src/components/Dropdown/Dropdown.tsx @@ -151,7 +151,7 @@ export const Dropdown = (props: IDropdownProps) => { placement={placement} tooltip={tooltip} tooltipPlacement={tooltipPlacement} - trigger={PopupTrigger.CLICK} + trigger={PopupTrigger.HOVER} isOpen={active} setOpen={setActiveChanged} size={size} |