| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { colord, AnyColor } from 'colord'; |
| 3 |
import { Attributes } from '../../../types'; |
| 4 |
import { findBackgroundColor } from '../../../util/colors'; |
| 5 |
|
| 6 |
export const BlockLeft = ( |
| 7 |
attributes: Partial<Attributes> & { context?: string }, |
| 8 |
) => { |
| 9 |
const { |
| 10 |
bgColor, |
| 11 |
textColor, |
| 12 |
seeMoreString, |
| 13 |
disablePadding, |
| 14 |
context, |
| 15 |
footerType, |
| 16 |
seeMoreCollapse, |
| 17 |
seeMoreCollapseString, |
| 18 |
} = attributes; |
| 19 |
let backgroundColor = colord(bgColor as AnyColor).toHex(); |
| 20 |
const textC = colord(textColor as AnyColor); |
| 21 |
let color = textC.isDark() |
| 22 |
? textC.lighten(0.05).toHex() |
| 23 |
: textC.darken(0.05).toHex(); |
| 24 |
const hasFooter = footerType !== 'none'; |
| 25 |
const inEditor = context === 'editor'; |
| 26 |
const seeMore = seeMoreString || __('Expand', 'code-block-pro'); |
| 27 |
|
| 28 |
if (bgColor?.startsWith('var(')) { |
| 29 |
backgroundColor = findBackgroundColor(attributes) ?? bgColor; |
| 30 |
} |
| 31 |
if (textColor?.startsWith('var(')) { |
| 32 |
color = textColor; |
| 33 |
} |
| 34 |
|
| 35 |
return ( |
| 36 |
<div |
| 37 |
className="cbp-see-more-container" |
| 38 |
// If the user opted to collapse, store strings |
| 39 |
data-see-more-collapse-string={ |
| 40 |
seeMoreCollapse |
| 41 |
? seeMoreCollapseString || __('Collapse', 'code-block-pro') |
| 42 |
: undefined |
| 43 |
} |
| 44 |
data-see-more-string={seeMoreCollapse ? seeMore : undefined} |
| 45 |
style={{ |
| 46 |
display: context === 'front' ? 'none' : 'flex', |
| 47 |
flexDirection: 'column', |
| 48 |
alignItems: 'flex-start', |
| 49 |
width: '100%', |
| 50 |
backgroundColor: 'transparent', |
| 51 |
fontSize: '12px', |
| 52 |
lineHeight: '1', |
| 53 |
position: 'relative', |
| 54 |
marginBottom: hasFooter || inEditor ? 0 : '-16px', |
| 55 |
height: hasFooter && !inEditor ? '16px' : '32px', |
| 56 |
}}> |
| 57 |
{/* span is used to avoid theme button styling */} |
| 58 |
<span |
| 59 |
role={inEditor ? 'presentation' : 'button'} |
| 60 |
tabIndex={inEditor ? -1 : 0} |
| 61 |
className="cbp-see-more-simple-btn cbp-see-more-simple-btn-hover" |
| 62 |
style={{ |
| 63 |
color, |
| 64 |
backgroundColor, |
| 65 |
padding: disablePadding ? '10px 0 0' : '10px 16px', |
| 66 |
cursor: 'default', |
| 67 |
}}> |
| 68 |
{seeMore} |
| 69 |
</span> |
| 70 |
</div> |
| 71 |
); |
| 72 |
}; |
| 73 |
|
