diff options
Diffstat (limited to 'packages/components/src')
| -rw-r--r-- | packages/components/src/components/Button/Button.tsx | 164 |
1 files changed, 2 insertions, 162 deletions
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 9b8893452..dd6942a7e 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -5,31 +5,17 @@ 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'; +// import { infoState } from '../../../../../src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState'; // This import was unused 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; @@ -38,14 +24,6 @@ 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) => { @@ -74,38 +52,10 @@ 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 @@ -118,17 +68,6 @@ 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 @@ -141,17 +80,6 @@ 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 @@ -164,17 +92,6 @@ 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) { @@ -187,17 +104,6 @@ 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; @@ -219,16 +125,7 @@ export const Button = (props: IButtonProps) => { if (colorPicker) return colorPicker; return color; 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: + return undefined; // Tertiary buttons usually don't have a background or it's transparent } }; @@ -245,28 +142,11 @@ 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}> @@ -308,43 +188,3 @@ 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 - ); -}; |