"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7329/react/features/base/ui/components/web/Button.tsx" (9 Jun 2023, 5587 Bytes) of package /linux/misc/jitsi-meet-7329.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style:
standard) with prefixed line numbers.
Alternatively you can here
view or
download the uninterpreted source code file.
See also the last
Fossies "Diffs" side-by-side code changes report for "Button.tsx":
jitsi-meet_8319_vs_jitsi-meet_8615.
1 import React from 'react';
2 import { useTranslation } from 'react-i18next';
3 import { makeStyles } from 'tss-react/mui';
4
5 import Icon from '../../../icons/components/Icon';
6 import { withPixelLineHeight } from '../../../styles/functions.web';
7 import { BUTTON_TYPES } from '../../constants.web';
8 import { IButtonProps } from '../types';
9
10 interface IProps extends IButtonProps {
11
12 /**
13 * Class name used for additional styles.
14 */
15 className?: string;
16
17 /**
18 * Whether or not the button should be full width.
19 */
20 fullWidth?: boolean;
21
22 /**
23 * The id of the button.
24 */
25 id?: string;
26
27 /**
28 * Whether or not the button is a submit form button.
29 */
30 isSubmit?: boolean;
31
32 /**
33 * Text to be displayed on the component.
34 * Used when there's no labelKey.
35 */
36 label?: string;
37
38 /**
39 * Which size the button should be.
40 */
41 size?: 'small' | 'medium' | 'large';
42
43 /**
44 * Data test id.
45 */
46 testId?: string;
47 }
48
49 const useStyles = makeStyles()(theme => {
50 return {
51 button: {
52 backgroundColor: theme.palette.action01,
53 color: theme.palette.text01,
54 borderRadius: theme.shape.borderRadius,
55 padding: '10px 16px',
56 display: 'flex',
57 alignItems: 'center',
58 justifyContent: 'center',
59 border: 0,
60 ...withPixelLineHeight(theme.typography.bodyShortBold),
61 transition: 'background .2s',
62 cursor: 'pointer',
63
64 '&:hover': {
65 backgroundColor: theme.palette.action01Hover
66 },
67
68 '&:active': {
69 backgroundColor: theme.palette.action01Active
70 },
71
72 '&.focus-visible': {
73 outline: 0,
74 boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
75 },
76
77 '& div > svg': {
78 fill: theme.palette.icon01
79 }
80 },
81
82 primary: {},
83
84 secondary: {
85 backgroundColor: theme.palette.action02,
86 color: theme.palette.text04,
87
88 '&:hover': {
89 backgroundColor: theme.palette.action02Hover
90 },
91
92 '&:active': {
93 backgroundColor: theme.palette.action02Active
94 },
95
96 '& div > svg': {
97 fill: theme.palette.icon04
98 }
99 },
100
101 tertiary: {
102 backgroundColor: theme.palette.action03,
103
104 '&:hover': {
105 backgroundColor: theme.palette.action03Hover
106 },
107
108 '&:active': {
109 backgroundColor: theme.palette.action03Active
110 }
111 },
112
113 destructive: {
114 backgroundColor: theme.palette.actionDanger,
115
116 '&:hover': {
117 backgroundColor: theme.palette.actionDangerHover
118 },
119
120 '&:active': {
121 backgroundColor: theme.palette.actionDangerActive
122 }
123 },
124
125 disabled: {
126 backgroundColor: theme.palette.disabled01,
127 color: theme.palette.text03,
128
129 '&:hover': {
130 backgroundColor: theme.palette.disabled01,
131 color: theme.palette.text03
132 },
133
134 '&:active': {
135 backgroundColor: theme.palette.disabled01,
136 color: theme.palette.text03
137 },
138
139 '& div > svg': {
140 fill: theme.palette.icon03
141 }
142 },
143
144 iconButton: {
145 padding: theme.spacing(2)
146 },
147
148 textWithIcon: {
149 marginLeft: theme.spacing(2)
150 },
151
152 small: {
153 padding: '8px 16px',
154 ...withPixelLineHeight(theme.typography.labelBold),
155
156 '&.iconButton': {
157 padding: theme.spacing(1)
158 }
159 },
160
161 medium: {},
162
163 large: {
164 padding: '13px 16px',
165 ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
166
167 '&.iconButton': {
168 padding: '12px'
169 }
170 },
171
172 fullWidth: {
173 width: '100%'
174 }
175 };
176 });
177
178 const Button = React.forwardRef<any, any>(({
179 accessibilityLabel,
180 autoFocus = false,
181 className,
182 disabled,
183 fullWidth,
184 icon,
185 id,
186 isSubmit,
187 label,
188 labelKey,
189 onClick = () => null,
190 onKeyPress = () => null,
191 size = 'medium',
192 testId,
193 type = BUTTON_TYPES.PRIMARY
194 }: IProps, ref) => {
195 const { classes: styles, cx } = useStyles();
196 const { t } = useTranslation();
197
198 return (
199 <button
200 aria-label = { accessibilityLabel }
201 autoFocus = { autoFocus }
202 className = { cx(styles.button, styles[type],
203 disabled && styles.disabled,
204 icon && !(labelKey || label) && `${styles.iconButton} iconButton`,
205 styles[size], fullWidth && styles.fullWidth, className) }
206 data-testid = { testId }
207 disabled = { disabled }
208 { ...(id ? { id } : {}) }
209 onClick = { onClick }
210 onKeyPress = { onKeyPress }
211 ref = { ref }
212 title = { accessibilityLabel }
213 type = { isSubmit ? 'submit' : 'button' }>
214 {icon && <Icon
215 size = { 24 }
216 src = { icon } />}
217 {(labelKey || label) && <span className = { icon ? styles.textWithIcon : '' }>
218 {labelKey ? t(labelKey) : label}
219 </span>}
220 </button>
221 );
222 });
223
224 export default Button;