Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 28x 28x 28x 28x 28x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import cssJSLogic from './css/cssJSLogic';
import { mergeStyle } from '@zohodesk/utils';
import style from './css/Button.module.css';
/*
Button text and children props?
use children for both cases
toLowerCase check needed?
*/
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
export default function Button(props) {
let {
text,
disabled,
onClick,
status,
children,
dataId,
needAppearance,
getRef,
title,
dataSelectorId,
customProps,
customStyle,
a11y,
id
} = props;
const finalStyle = mergeStyle(style, customStyle);
const { buttonClass, loaderParentClass, loaderChildClass } = cssJSLogic({
props,
style: finalStyle
});
let statusLower = status.toLowerCase();
return (
<button
className={buttonClass}
data-id={disabled ? `${dataId}_disabled` : dataId}
data-test-id={disabled ? `${dataId}_disabled` : dataId}
disabled={disabled || statusLower === 'loading'}
onClick={onClick}
data-title={title}
type='button'
ref={getRef}
data-selector-id={dataSelectorId}
{...customProps}
{...a11y}
id={id}
>
{children ? children : text}
{statusLower !== 'none' && needAppearance && (
<div className={finalStyle.overlay}>
<div className={loaderParentClass}>
<div className={loaderChildClass} />
</div>
</div>
)}
</button>
);
}
Button.defaultProps = defaultProps;
Button.propTypes = propTypes;
// if (__DOCS__) {
// Button.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide'
// };
// }
|