1- import React , { Children , forwardRef } from 'react' ;
1+ import React , { forwardRef } from 'react' ;
22import cn from 'classnames' ;
33
4+ import { BUTTON_DEFAULT_SHAPE , BUTTON_DEFAULT_SIZE } from '../../constants/const' ;
45import { useLoading } from '../../shared' ;
56import { type ButtonRef , type CommonButtonProps , type PrivateButtonProps } from '../../typings' ;
6- import { BaseButtonCandidate } from '../base-button-candidate' ;
77import { ButtonComponent } from '../button-component' ;
8- import { ButtonContent } from '../button-content ' ;
8+ import { ButtonLayout } from '../button-layout ' ;
99
1010import defaultColors from './default.module.css' ;
1111import commonStyles from './index.module.css' ;
@@ -14,117 +14,51 @@ import invertedColors from './inverted.module.css';
1414const colorStyles = {
1515 default : defaultColors ,
1616 inverted : invertedColors ,
17- } as const ;
17+ } ;
1818
1919export const BaseButton = forwardRef < ButtonRef , CommonButtonProps & PrivateButtonProps > (
2020 (
2121 {
2222 allowBackdropBlur,
23- children,
2423 view = 'secondary' ,
25- shape = 'rectangular' ,
26- textResizing = 'hug' ,
27- hint,
28- leftAddons,
29- rightAddons,
30- size = 56 ,
3124 className : classNameFromProps ,
3225 spinnerClassName,
3326 loaderClassName = spinnerClassName ,
3427 loading : loadingFromProps ,
35- nowrap,
3628 colors = 'default' ,
3729 Component = ButtonComponent ,
38- styles = { } ,
39- colorStylesMap = { default : { } , inverted : { } } ,
40- disabled,
30+ styles : stylesFromProps = { } ,
31+ colorStylesMap,
4132 ...restProps
4233 } ,
4334 ref ,
4435 ) => {
4536 const loading = useLoading ( loadingFromProps ) ;
46- const hasLabel = Children . toArray ( children ) . length > 0 ;
47- const showHint = size >= 56 && Children . toArray ( hint ) . length > 0 ;
48- const sizeStyle = `size${ size } ;
37+ const { size = BUTTON_DEFAULT_SIZE , shape = BUTTON_DEFAULT_SHAPE , disabled } = restProps ;
38+ const styles = [ stylesFromProps , colorStyles [ colors ] , colorStylesMap [ colors ] ] ;
4939 const blurred =
5040 allowBackdropBlur &&
5141 ( view === 'secondary' || ( disabled && ( view === 'accent' || view === 'primary' ) ) ) ;
52-
5342 const className = cn (
54- commonStyles . component ,
55- colorStyles [ colors ] . component ,
56- styles . component ,
57- colorStylesMap [ colors ] . component ,
58- commonStyles [ view ] ,
59- colorStyles [ colors ] [ view ] ,
60- colorStylesMap [ colors ] [ view ] ,
61- commonStyles [ sizeStyle ] ,
62- commonStyles [ textResizing ] ,
43+ styles . map ( ( s ) => s [ view ] ) ,
6344 {
64- [ commonStyles [ shape ] ] : shape === 'rounded' ,
65- [ styles [ sizeStyle ] ] : shape === 'rectangular' ,
66- [ commonStyles . defaultPaddings ] : hasLabel && view !== 'text' ,
67- [ commonStyles . defaultWidth ] : hasLabel && view !== 'text' ,
68- [ commonStyles . minWidth ] : ! hasLabel && view !== 'text' ,
69- [ commonStyles . minHeight ] : view !== 'text' ,
45+ [ stylesFromProps [ `size${ size } ] ] : shape === 'rectangular' ,
7046 [ commonStyles . blurred ] : blurred ,
7147 } ,
72- loading && [
73- commonStyles . loading ,
74- colorStyles [ colors ] . loading ,
75- colorStylesMap [ colors ] . loading ,
76- ] ,
7748 classNameFromProps ,
7849 ) ;
7950
8051 return (
81- < BaseButtonCandidate
52+ < ButtonLayout
8253 { ...restProps }
8354 ref = { ref }
55+ layout = { view === 'text' ? 'text' : 'button' }
8456 className = { className }
85- Content = { ButtonContent }
8657 Component = { Component }
8758 loading = { loading }
88- loaderClassName = { cn (
89- commonStyles . loader ,
90- colorStyles [ colors ] . loader ,
91- colorStylesMap [ colors ] . loader ,
92- loaderClassName ,
93- ) }
94- disabled = { disabled }
95- disabledClassName = { cn (
96- colorStylesMap [ colors ] . disabled ,
97- colorStyles [ colors ] . disabled ,
98- ) }
99- >
100- { Children . toArray ( leftAddons ) . length > 0 && (
101- < span className = { commonStyles . addon } > { leftAddons } </ span >
102- ) }
103- { hasLabel && (
104- < span
105- className = { cn ( commonStyles . label , {
106- [ commonStyles . nowrap ] : nowrap ,
107- [ commonStyles . stretchText ] : textResizing === 'fill' ,
108- } ) }
109- >
110- { children }
111- { showHint && (
112- < span
113- className = { cn (
114- commonStyles . hint ,
115- colorStylesMap [ colors ] . hint ,
116- colorStyles [ colors ] . hint ,
117- ) }
118- >
119- { hint }
120- </ span >
121- ) }
122- </ span >
123- ) }
124- { Children . toArray ( rightAddons ) . length > 0 && (
125- < span className = { commonStyles . addon } > { rightAddons } </ span >
126- ) }
127- </ BaseButtonCandidate >
59+ loaderClassName = { loaderClassName }
60+ styles = { styles }
61+ />
12862 ) ;
12963 } ,
13064) ;
0 commit comments