@sendbird/react-uikit-message-template-view
Advanced tools
Comparing version 0.0.1-alpha.7 to 0.0.1-alpha.8
@@ -12,3 +12,3 @@ // create a context provider for MessageComponent | ||
handlePredefinedAction, | ||
}), [message?.updatedAt]); | ||
}), [message === null || message === void 0 ? void 0 : message.updatedAt]); | ||
return React.createElement(MessageContext.Provider, { value: value }, children); | ||
@@ -15,0 +15,0 @@ }; |
import { AlignValue, FlexSizeSpecValue, Layout, MediaContentMode, } from '@sendbird/uikit-message-template'; | ||
export function getDefaultStyles(overrides) { | ||
return { | ||
display: 'flex', | ||
overflow: 'hidden', | ||
...overrides, | ||
}; | ||
return Object.assign({ display: 'flex', overflow: 'hidden' }, overrides); | ||
} | ||
@@ -14,32 +10,34 @@ export function setViewProps(styles, view) { | ||
export function setViewStyle(styles, viewStyle) { | ||
if (viewStyle?.padding?.top) | ||
var _a, _b, _c, _d, _e, _f, _g, _h; | ||
if ((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _a === void 0 ? void 0 : _a.top) | ||
styles['paddingTop'] = viewStyle.padding.top; | ||
if (viewStyle?.padding?.bottom) | ||
if ((_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _b === void 0 ? void 0 : _b.bottom) | ||
styles['paddingBottom'] = viewStyle.padding.bottom; | ||
if (viewStyle?.padding?.left) | ||
if ((_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _c === void 0 ? void 0 : _c.left) | ||
styles['paddingLeft'] = viewStyle.padding.left; | ||
if (viewStyle?.padding?.right) | ||
if ((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _d === void 0 ? void 0 : _d.right) | ||
styles['paddingRight'] = viewStyle.padding.right; | ||
if (viewStyle?.margin?.top) | ||
if ((_e = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _e === void 0 ? void 0 : _e.top) | ||
styles['marginTop'] = viewStyle.margin.top; | ||
if (viewStyle?.margin?.bottom) | ||
if ((_f = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _f === void 0 ? void 0 : _f.bottom) | ||
styles['marginBottom'] = viewStyle.margin.bottom; | ||
if (viewStyle?.margin?.left) | ||
if ((_g = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _g === void 0 ? void 0 : _g.left) | ||
styles['marginLeft'] = viewStyle.margin.left; | ||
if (viewStyle?.margin?.right) | ||
if ((_h = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _h === void 0 ? void 0 : _h.right) | ||
styles['marginRight'] = viewStyle.margin.right; | ||
if (viewStyle?.backgroundColor) | ||
if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor) | ||
styles['backgroundColor'] = viewStyle.backgroundColor; | ||
if (viewStyle?.backgroundImageUrl) | ||
if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundImageUrl) | ||
styles['backgroundImageUrl'] = viewStyle.backgroundImageUrl; | ||
if (viewStyle?.radius) | ||
if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.radius) | ||
styles['borderRadius'] = viewStyle.radius; | ||
if (viewStyle?.borderWidth) | ||
if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth) | ||
styles['borderWidth'] = viewStyle.borderWidth; | ||
if (viewStyle?.borderColor) | ||
if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor) | ||
styles['borderColor'] = viewStyle.borderColor; | ||
} | ||
export function setViewSize(styles, view) { | ||
var _a, _b; | ||
{ | ||
const { type = 'flex', value = FlexSizeSpecValue.FillParent } = view.width ?? {}; | ||
const { type = 'flex', value = FlexSizeSpecValue.FillParent } = (_a = view.width) !== null && _a !== void 0 ? _a : {}; | ||
if (type === 'flex' && value === FlexSizeSpecValue.FillParent) | ||
@@ -51,3 +49,3 @@ styles['flex'] = 1; | ||
{ | ||
const { type = 'flex', value = FlexSizeSpecValue.WrapContent } = view.height ?? {}; | ||
const { type = 'flex', value = FlexSizeSpecValue.WrapContent } = (_b = view.height) !== null && _b !== void 0 ? _b : {}; | ||
if (type === 'flex' && value === FlexSizeSpecValue.FillParent) | ||
@@ -80,3 +78,3 @@ styles['flex'] = 1; | ||
} | ||
if (align?.vertical) { | ||
if (align === null || align === void 0 ? void 0 : align.vertical) { | ||
const styleKey = layout === Layout.Row ? 'alignItems' : 'justifyContent'; | ||
@@ -115,10 +113,11 @@ switch (align.vertical) { | ||
export function setImageAspectRatio(styles, props) { | ||
const imageMetaData = props?.metaData; | ||
if (!imageMetaData?.pixelHeight || !imageMetaData?.pixelWidth) { | ||
var _a, _b, _c, _d; | ||
const imageMetaData = props === null || props === void 0 ? void 0 : props.metaData; | ||
if (!(imageMetaData === null || imageMetaData === void 0 ? void 0 : imageMetaData.pixelHeight) || !(imageMetaData === null || imageMetaData === void 0 ? void 0 : imageMetaData.pixelWidth)) { | ||
return; | ||
} | ||
if (props?.width?.type === 'fixed' || props?.height?.type === 'fixed') { | ||
if (((_a = props === null || props === void 0 ? void 0 : props.width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed' || ((_b = props === null || props === void 0 ? void 0 : props.height) === null || _b === void 0 ? void 0 : _b.type) === 'fixed') { | ||
return; | ||
} | ||
styles['aspectRatio'] = `${props?.metaData?.pixelWidth} / ${props?.metaData?.pixelHeight}`; | ||
styles['aspectRatio'] = `${(_c = props === null || props === void 0 ? void 0 : props.metaData) === null || _c === void 0 ? void 0 : _c.pixelWidth} / ${(_d = props === null || props === void 0 ? void 0 : props.metaData) === null || _d === void 0 ? void 0 : _d.pixelHeight}`; | ||
} | ||
@@ -125,0 +124,0 @@ export function setTextStyle(styles, textStyle) { |
@@ -26,15 +26,16 @@ import React from 'react'; | ||
const onClick = (e) => { | ||
if (props?.action?.type === 'web') { | ||
var _a, _b, _c, _d, _e; | ||
if (((_a = props === null || props === void 0 ? void 0 : props.action) === null || _a === void 0 ? void 0 : _a.type) === 'web') { | ||
if (handleWebAction) { | ||
handleWebAction?.(e, props.action, message); | ||
handleWebAction === null || handleWebAction === void 0 ? void 0 : handleWebAction(e, props.action, message); | ||
} | ||
else { | ||
window?.open(returnUrl(props?.action?.data), '_blank', 'noopener noreferrer')?.focus(); | ||
(_c = window === null || window === void 0 ? void 0 : window.open(returnUrl((_b = props === null || props === void 0 ? void 0 : props.action) === null || _b === void 0 ? void 0 : _b.data), '_blank', 'noopener noreferrer')) === null || _c === void 0 ? void 0 : _c.focus(); | ||
} | ||
} | ||
if (props?.action?.type === 'custom') { | ||
handleCustomAction?.(e, props.action, message); | ||
if (((_d = props === null || props === void 0 ? void 0 : props.action) === null || _d === void 0 ? void 0 : _d.type) === 'custom') { | ||
handleCustomAction === null || handleCustomAction === void 0 ? void 0 : handleCustomAction(e, props.action, message); | ||
} | ||
if (props?.action?.type === 'uikit') { | ||
handlePredefinedAction?.(e, props.action, message); | ||
if (((_e = props === null || props === void 0 ? void 0 : props.action) === null || _e === void 0 ? void 0 : _e.type) === 'uikit') { | ||
handlePredefinedAction === null || handlePredefinedAction === void 0 ? void 0 : handlePredefinedAction(e, props.action, message); | ||
} | ||
@@ -45,3 +46,3 @@ }; | ||
} | ||
return (React.createElement("div", { className: `${className} ${props?.action ? 'sb-message-template__action' : ''}`, style: style, onClick: onClick }, children)); | ||
return (React.createElement("div", { className: `${className} ${(props === null || props === void 0 ? void 0 : props.action) ? 'sb-message-template__action' : ''}`, style: style, onClick: onClick }, children)); | ||
}; | ||
@@ -80,3 +81,3 @@ export const renderer = createRenderer({ | ||
// Better not set flex 1 to text | ||
setViewStyle(styles, props?.viewStyle); | ||
setViewStyle(styles, props === null || props === void 0 ? void 0 : props.viewStyle); | ||
setTextStyle(styles, props.textStyle); | ||
@@ -95,3 +96,3 @@ return styles; | ||
setViewProps(styles, props); | ||
setTextStyle(styles, { weight: 500, ...props.textStyle }); | ||
setTextStyle(styles, Object.assign({ weight: 500 }, props.textStyle)); | ||
return styles; | ||
@@ -98,0 +99,0 @@ }, |
{ | ||
"name": "@sendbird/react-uikit-message-template-view", | ||
"version": "0.0.1-alpha.7", | ||
"version": "0.0.1-alpha.8", | ||
"main": "./dist/index.js", | ||
@@ -18,6 +18,6 @@ "module": "./dist/index.js", | ||
"scripts": { | ||
"build": "tsc --module commonjs; npm run copy-files", | ||
"build": "tsc; npm run copy-files", | ||
"copy-files": "cp ./src/index.css ./dist/" | ||
}, | ||
"gitHead": "da8823e6865a1d4b2b04017884e116658fc5492c" | ||
"gitHead": "486ba2c8f4fcc9ae09d95ccbbfaf4ebac366d69a" | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
107204