pds-dev-kit-web 1.6.9 → 1.6.10

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.
Files changed (6) hide show
  1. package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.d.ts +1 -1
  2. package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js +42 -37
  3. package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.d.ts +4 -6
  4. package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js +41 -41
  5. package/package.json +1 -1
  6. package/release-note.md +10 -7
package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare type LottieReactionButtonProps = {
8
8
  displayType?: 'icon_only' | 'icon_text';
9
9
  backgroundColorTheme?: 'base1' | 'base2' | 'base3' | 'base4' | 'base5';
10
10
  overrideBackgroundColorKey?: UiColors;
11
- state?: 'normal' | 'view_only' | 'disabled';
11
+ state?: 'normal' | 'no_animation' | 'view_only' | 'disabled';
12
12
  type?: 'button' | 'submit';
13
13
  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
14
14
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js CHANGED
@@ -39,38 +39,35 @@ function LottieReactionButton(_a) {
39
39
  var convertFormatText = convertFormatHelper(text);
40
40
  var _g = (0, react_1.useState)(false), isAnimation = _g[0], setIsAnimation = _g[1];
41
41
  var _h = (0, react_1.useState)(convertFormatText), textWord = _h[0], setTextWord = _h[1];
42
- var handleTouchStart = function () {
43
- setIsAnimation(false);
44
- };
45
- var handleTouchEnd = function (e) {
46
- var _a, _b;
47
- setIsAnimation(true);
48
- (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
49
- setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
50
- e.preventDefault();
51
- };
42
+ var _j = (0, react_1.useState)(false), isBackgroundColor = _j[0], setIsBackgroundColor = _j[1];
52
43
  var handleMouseDown = function (e) {
53
- setIsAnimation(false);
44
+ if (state !== 'no_animation') {
45
+ setIsAnimation(false);
46
+ }
54
47
  if (onMouseDown) {
55
48
  onMouseDown(e);
56
49
  }
57
50
  };
58
51
  var handleClick = function (e) {
59
52
  var _a, _b;
60
- setIsAnimation(true);
61
- (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
62
- setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
53
+ if (state !== 'no_animation') {
54
+ setIsAnimation(true);
55
+ (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
56
+ setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
57
+ setIsBackgroundColor(true);
58
+ }
63
59
  if (onClick) {
64
60
  onClick(e);
65
61
  }
66
62
  };
67
63
  var handleLottieIconComplete = function (e) {
68
64
  setTextWord(convertFormatText);
65
+ setIsBackgroundColor(false);
69
66
  if (onComplete) {
70
67
  onComplete(e);
71
68
  }
72
69
  };
73
- return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation },
70
+ return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor },
74
71
  react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
75
72
  displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
76
73
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
@@ -94,40 +91,50 @@ var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject
94
91
  var theme = _a.theme;
95
92
  return theme.spacing.spacingB;
96
93
  });
97
- var base1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
94
+ var greyBackgroundColor = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n transition: background-color 0.8s;\n"], ["\n background-color: ", ";\n transition: background-color 0.8s;\n"])), function (_a) {
95
+ var theme = _a.theme;
96
+ return theme.ui_temp_grey_03;
97
+ });
98
+ var base1 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
98
99
  var theme = _a.theme;
99
100
  return theme.ui_cpnt_lottiereactionbutton_base_01;
100
101
  });
101
- var base2 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
102
+ var base2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
102
103
  var theme = _a.theme;
103
104
  return theme.ui_cpnt_lottiereactionbutton_base_02;
104
105
  });
105
- var base3 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
106
+ var base3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
106
107
  var theme = _a.theme;
107
108
  return theme.ui_cpnt_lottiereactionbutton_base_03;
108
109
  });
109
- var base4 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
110
+ var base4 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
110
111
  var theme = _a.theme;
111
112
  return theme.ui_cpnt_lottiereactionbutton_base_04;
112
113
  });
113
- var base5 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
114
+ var base5 = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
114
115
  var theme = _a.theme;
115
116
  return theme.ui_cpnt_lottiereactionbutton_base_05;
116
117
  });
117
- var overrideStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
118
+ var overrideStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
118
119
  var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
119
120
  return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
120
121
  });
121
- var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
122
- var backgroundColorTheme = _a.backgroundColorTheme;
123
- return backgroundColorTheme &&
124
- {
125
- base1: base1,
126
- base2: base2,
127
- base3: base3,
128
- base4: base4,
129
- base5: base5
130
- }[backgroundColorTheme];
122
+ var S_Button = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
123
+ var backgroundColorTheme = _a.backgroundColorTheme, isDefaultBackgroundColor = _a.isDefaultBackgroundColor, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
124
+ if (isDefaultBackgroundColor) {
125
+ if (overrideBackgroundColorKey) {
126
+ return overrideStyle;
127
+ }
128
+ return (backgroundColorTheme &&
129
+ {
130
+ base1: base1,
131
+ base2: base2,
132
+ base3: base3,
133
+ base4: base4,
134
+ base5: base5
135
+ }[backgroundColorTheme]);
136
+ }
137
+ return greyBackgroundColor;
131
138
  }, function (_a) {
132
139
  var isAnimation = _a.isAnimation;
133
140
  return isAnimation && buttonAnimation;
@@ -138,17 +145,15 @@ var S_Button = styled_components_1.default.button(templateObject_13 || (template
138
145
  icon_only: icon_only,
139
146
  icon_text: icon_text
140
147
  }[displayType];
141
- }, function (_a) {
142
- var overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
143
- return overrideBackgroundColorKey && overrideStyle;
144
148
  }, function (_a) {
145
149
  var state = _a.state;
146
150
  return state &&
147
151
  {
148
152
  normal: normal,
149
- disabled: disabled,
150
- view_only: view_only
153
+ no_animation: normal,
154
+ view_only: view_only,
155
+ disabled: disabled
151
156
  }[state];
152
157
  });
153
158
  exports.default = LottieReactionButton;
154
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
159
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.d.ts CHANGED
@@ -8,13 +8,11 @@ export declare type LottieReactionButtonProps = {
8
8
  displayType?: 'icon_only' | 'icon_text';
9
9
  backgroundColorTheme?: 'base1' | 'base2' | 'base3' | 'base4' | 'base5';
10
10
  overrideBackgroundColorKey?: UiColors;
11
- state?: 'normal' | 'view_only' | 'disabled';
11
+ state?: 'normal' | 'no_animation' | 'view_only' | 'disabled';
12
12
  type?: 'button' | 'submit';
13
- onTouchStart?: (e: React.TouchEvent<HTMLButtonElement>) => void;
14
- onTouchEnd?: (e: React.TouchEvent<HTMLButtonElement>) => void;
15
- onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
16
- onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
13
+ onTouchStart?: (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
14
+ onTouchEnd?: (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
17
15
  onComplete?: AnimationEventHandler | null;
18
16
  };
19
- declare function LottieReactionButton({ text, actionText, iconName, displayType, backgroundColorTheme, overrideBackgroundColorKey, type, state, onTouchStart, onTouchEnd, onMouseDown, onClick, onComplete }: LottieReactionButtonProps): JSX.Element;
17
+ declare function LottieReactionButton({ text, actionText, iconName, displayType, backgroundColorTheme, overrideBackgroundColorKey, type, state, onTouchStart, onTouchEnd, onComplete }: LottieReactionButtonProps): JSX.Element;
20
18
  export default LottieReactionButton;
package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js CHANGED
@@ -29,7 +29,7 @@ var numberHelper_1 = require("../../../common/utils/numberHelper");
29
29
  var hybrid_1 = require("../../../hybrid");
30
30
  var TextLabel_1 = require("../TextLabel");
31
31
  function LottieReactionButton(_a) {
32
- var text = _a.text, actionText = _a.actionText, _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.displayType, displayType = _c === void 0 ? 'icon_text' : _c, _d = _a.backgroundColorTheme, backgroundColorTheme = _d === void 0 ? 'base1' : _d, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, onMouseDown = _a.onMouseDown, onClick = _a.onClick, onComplete = _a.onComplete;
32
+ var text = _a.text, actionText = _a.actionText, _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.displayType, displayType = _c === void 0 ? 'icon_text' : _c, _d = _a.backgroundColorTheme, backgroundColorTheme = _d === void 0 ? 'base1' : _d, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, onComplete = _a.onComplete;
33
33
  var lottieRef = (0, react_1.useRef)(null);
34
34
  var convertFormatHelper = function (value) {
35
35
  if (typeof value !== 'number')
@@ -39,44 +39,36 @@ function LottieReactionButton(_a) {
39
39
  var convertFormatText = convertFormatHelper(text);
40
40
  var _g = (0, react_1.useState)(false), isAnimation = _g[0], setIsAnimation = _g[1];
41
41
  var _h = (0, react_1.useState)(convertFormatText), textWord = _h[0], setTextWord = _h[1];
42
+ var _j = (0, react_1.useState)(false), isBackgroundColor = _j[0], setIsBackgroundColor = _j[1];
42
43
  var handleTouchStart = function (e) {
43
- setIsAnimation(false);
44
+ if (state !== 'no_animation') {
45
+ setIsAnimation(false);
46
+ }
44
47
  if (onTouchStart) {
45
48
  onTouchStart(e);
46
49
  }
47
50
  };
48
51
  var handleTouchEnd = function (e) {
49
52
  var _a, _b;
50
- setIsAnimation(true);
51
- (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
52
- setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
53
+ if (state !== 'no_animation') {
54
+ setIsAnimation(true);
55
+ (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
56
+ setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
57
+ setIsBackgroundColor(true);
58
+ }
53
59
  if (onTouchEnd) {
54
60
  onTouchEnd(e);
55
61
  }
56
62
  e.preventDefault();
57
63
  };
58
- var handleMouseDown = function (e) {
59
- setIsAnimation(false);
60
- if (onMouseDown) {
61
- onMouseDown(e);
62
- }
63
- };
64
- var handleClick = function (e) {
65
- var _a, _b;
66
- setIsAnimation(true);
67
- (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
68
- setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
69
- if (onClick) {
70
- onClick(e);
71
- }
72
- };
73
64
  var handleLottieIconComplete = function (e) {
74
65
  setTextWord(convertFormatText);
66
+ setIsBackgroundColor(false);
75
67
  if (onComplete) {
76
68
  onComplete(e);
77
69
  }
78
70
  };
79
- return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation },
71
+ return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: state === 'normal' ? handleTouchStart : undefined, onTouchEnd: state === 'normal' ? handleTouchEnd : undefined, onMouseDown: handleTouchStart, onClick: handleTouchEnd, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor },
80
72
  react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
81
73
  displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
82
74
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
@@ -97,40 +89,50 @@ var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject
97
89
  var theme = _a.theme;
98
90
  return theme.spacing.spacingB;
99
91
  });
100
- var base1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
92
+ var greyBackgroundColor = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n transition: background-color 0.8s;\n"], ["\n background-color: ", ";\n transition: background-color 0.8s;\n"])), function (_a) {
93
+ var theme = _a.theme;
94
+ return theme.ui_temp_grey_03;
95
+ });
96
+ var base1 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
101
97
  var theme = _a.theme;
102
98
  return theme.ui_cpnt_lottiereactionbutton_base_01;
103
99
  });
104
- var base2 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
100
+ var base2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
105
101
  var theme = _a.theme;
106
102
  return theme.ui_cpnt_lottiereactionbutton_base_02;
107
103
  });
108
- var base3 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
104
+ var base3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
109
105
  var theme = _a.theme;
110
106
  return theme.ui_cpnt_lottiereactionbutton_base_03;
111
107
  });
112
- var base4 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
108
+ var base4 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
113
109
  var theme = _a.theme;
114
110
  return theme.ui_cpnt_lottiereactionbutton_base_04;
115
111
  });
116
- var base5 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
112
+ var base5 = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
117
113
  var theme = _a.theme;
118
114
  return theme.ui_cpnt_lottiereactionbutton_base_05;
119
115
  });
120
- var overrideStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
116
+ var overrideStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
121
117
  var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
122
118
  return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
123
119
  });
124
- var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
125
- var backgroundColorTheme = _a.backgroundColorTheme;
126
- return backgroundColorTheme &&
127
- {
128
- base1: base1,
129
- base2: base2,
130
- base3: base3,
131
- base4: base4,
132
- base5: base5
133
- }[backgroundColorTheme];
120
+ var S_Button = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
121
+ var backgroundColorTheme = _a.backgroundColorTheme, isDefaultBackgroundColor = _a.isDefaultBackgroundColor, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
122
+ if (isDefaultBackgroundColor) {
123
+ if (overrideBackgroundColorKey) {
124
+ return overrideStyle;
125
+ }
126
+ return (backgroundColorTheme &&
127
+ {
128
+ base1: base1,
129
+ base2: base2,
130
+ base3: base3,
131
+ base4: base4,
132
+ base5: base5
133
+ }[backgroundColorTheme]);
134
+ }
135
+ return greyBackgroundColor;
134
136
  }, function (_a) {
135
137
  var isAnimation = _a.isAnimation;
136
138
  return isAnimation && buttonAnimation;
@@ -141,17 +143,15 @@ var S_Button = styled_components_1.default.button(templateObject_13 || (template
141
143
  icon_only: icon_only,
142
144
  icon_text: icon_text
143
145
  }[displayType];
144
- }, function (_a) {
145
- var overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
146
- return overrideBackgroundColorKey && overrideStyle;
147
146
  }, function (_a) {
148
147
  var state = _a.state;
149
148
  return state &&
150
149
  {
151
150
  normal: normal,
151
+ no_animation: normal,
152
152
  disabled: disabled,
153
153
  view_only: view_only
154
154
  }[state];
155
155
  });
156
156
  exports.default = LottieReactionButton;
157
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
157
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.6.9",
3
+ "version": "1.6.10",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,9 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.6.9]
2
+ ## [v1.6.10]
3
3
  ### Component
4
- * TextLabel
5
- * colorTheme prop에 sysTextWarning value 추가
6
- * AdminListItem
7
- * 텍스트별 styleTheme prop에 report2 value 추가
8
- ### Color
9
- * 컬러 키 값 22.11.29 19시 58분 기준 싱크
4
+ * D_LottieReactionButton
5
+ * 디자인 스펙 수정(회색 배경이 기본이 되도록)
6
+ * state prop에 no_animation value 추가
7
+ * touch이벤트를 제거
8
+ * M_LottieReactionButton
9
+ * 디자인 스펙 수정(회색 배경이 기본이 되도록)
10
+ * state prop에 no_animation value 추가
11
+ * onMouseDown와 onClick prop 삭제
12
+ * disabled과 view_only일때도 액션이 되던 부분을 수정