pds-dev-kit-web-test 2.7.296 → 2.7.297
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -39,10 +39,11 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
|
|
|
39
39
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
40
40
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
41
41
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
42
|
+
var textSpecFormatOptions_1 = require("../Text/textSpecFormatOptions");
|
|
42
43
|
function Button(props) {
|
|
43
44
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
44
45
|
var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
|
|
45
|
-
var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
46
|
+
var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, _d = props.CB_CONTENT_PROP_TEXTOPTION, CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX = _d.CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX, CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX = _d.CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX, CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT = _d.CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
46
47
|
var cLinkValue = function () {
|
|
47
48
|
if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
|
|
48
49
|
CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
|
|
@@ -57,15 +58,15 @@ function Button(props) {
|
|
|
57
58
|
}
|
|
58
59
|
return CB_CONTENT_PROP_CLINK_SPEC_SRC;
|
|
59
60
|
};
|
|
60
|
-
var
|
|
61
|
+
var _e = (0, useCLINK_1.default)({
|
|
61
62
|
src: cLinkValue(),
|
|
62
63
|
type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
63
64
|
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
64
65
|
internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
|
|
65
|
-
}), onClickCLINK =
|
|
66
|
-
var
|
|
67
|
-
var
|
|
68
|
-
var
|
|
66
|
+
}), onClickCLINK = _e.onClickCLINK, CLINKCursor = _e.CLINKCursor;
|
|
67
|
+
var _f = getBTNStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _f.style, btnTextHoverStyle = _f.hoverStyle;
|
|
68
|
+
var _g = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _g.style, btnColorHoverStyle = _g.hoverStyle;
|
|
69
|
+
var _h = (0, util_1.parseProperties)(props, device), propsStyle = _h.style, propsHoverStyle = _h.hoverStyle, _j = _h.layout, paddingLeft = _j.paddingLeft, paddingRight = _j.paddingRight, paddingTop = _j.paddingTop, paddingBottom = _j.paddingBottom, layoutStyle = __rest(_j, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _h.effect;
|
|
69
70
|
var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
|
|
70
71
|
var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
|
|
71
72
|
(0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
|
|
@@ -84,6 +85,20 @@ function Button(props) {
|
|
|
84
85
|
var hasEffect = !isNoneEffectType;
|
|
85
86
|
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
86
87
|
var textValue = function () {
|
|
88
|
+
var FORMATOPTION = CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT;
|
|
89
|
+
var formatOption = textSpecFormatOptions_1.TEXT_SPEC_FORMAT_OPRIONS[FORMATOPTION];
|
|
90
|
+
var isDataConnected = CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' ||
|
|
91
|
+
CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
|
|
92
|
+
if (isDataConnected) {
|
|
93
|
+
if (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData) {
|
|
94
|
+
var value = queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
|
|
95
|
+
if (formatOption) {
|
|
96
|
+
return formatOption.formatter(value);
|
|
97
|
+
}
|
|
98
|
+
return value;
|
|
99
|
+
}
|
|
100
|
+
return 'ERROR: data connected but no data';
|
|
101
|
+
}
|
|
87
102
|
if (device === 'MOBILE' &&
|
|
88
103
|
mode !== 'EDIT' &&
|
|
89
104
|
props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB === false) {
|
|
@@ -97,10 +112,19 @@ function Button(props) {
|
|
|
97
112
|
if (device === 'MOBILE') {
|
|
98
113
|
var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
|
|
99
114
|
if (value === null || value === undefined) {
|
|
115
|
+
if (formatOption) {
|
|
116
|
+
return formatOption.formatter(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
|
|
117
|
+
}
|
|
100
118
|
return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
|
|
101
119
|
}
|
|
120
|
+
if (formatOption) {
|
|
121
|
+
return formatOption.formatter(value);
|
|
122
|
+
}
|
|
102
123
|
return value;
|
|
103
124
|
}
|
|
125
|
+
if (formatOption) {
|
|
126
|
+
return formatOption.formatter(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
|
|
127
|
+
}
|
|
104
128
|
return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
|
|
105
129
|
};
|
|
106
130
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
|
|
@@ -108,9 +132,9 @@ function Button(props) {
|
|
|
108
132
|
paddingRight: paddingRight,
|
|
109
133
|
paddingBottom: paddingBottom,
|
|
110
134
|
paddingTop: paddingTop
|
|
111
|
-
} }, { children: (0, jsx_runtime_1.
|
|
135
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
|
|
112
136
|
e.currentTarget.classList.remove('hovered');
|
|
113
|
-
}, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: textValue() })) }))] }));
|
|
137
|
+
}, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX, textValue(), CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX] })) }))] }));
|
|
114
138
|
}
|
|
115
139
|
function getBTNStyles(props, device) {
|
|
116
140
|
var availableSpecCodes = [
|
|
@@ -57,6 +57,7 @@ export type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
|
|
|
57
57
|
};
|
|
58
58
|
export type CB_BTN_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
|
|
59
59
|
CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
|
|
60
|
+
CB_CONTENT_PROP_TEXTOPTION: CB_CONTENT_PROP_TEXTOPTION;
|
|
60
61
|
CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
|
|
61
62
|
CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
|
|
62
63
|
CB_STYLE_PROP_TEXT: CB_STYLE_PROP_TEXT_SPECS;
|