@citygross/components 0.7.124 → 0.7.126

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 (8) hide show
  1. package/build/@types/components/Button/SaveButton.d.ts +3 -3
  2. package/build/cjs/components/src/components/Button/Button.styles.js +1 -1
  3. package/build/cjs/components/src/components/Button/SaveButton.js +9 -15
  4. package/build/cjs/components/src/components/Button/SaveButton.js.map +1 -1
  5. package/build/es/components/src/components/Button/Button.styles.js +1 -1
  6. package/build/es/components/src/components/Button/SaveButton.js +10 -16
  7. package/build/es/components/src/components/Button/SaveButton.js.map +1 -1
  8. package/package.json +2 -2
package/build/@types/components/Button/SaveButton.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
- import { ButtonSize, TButtonColor } from './Button';
2
+ import { ButtonSize } from './Button';
3
3
  import * as styles from './Button.styles';
4
4
  export declare type TSaveButton = styles.TButton & {
5
5
  beforeSaveText: string;
6
6
  afterSaveText: string;
7
7
  children?: React.ReactNode;
8
- color?: TButtonColor;
8
+ onSavedColor?: string;
9
9
  icon?: JSX.Element;
10
10
  fullWidth?: boolean;
11
11
  size?: keyof typeof ButtonSize;
@@ -14,4 +14,4 @@ export declare type TSaveButton = styles.TButton & {
14
14
  saved?: boolean;
15
15
  onAnimationComplete: () => void;
16
16
  };
17
- export declare function SaveButton({ beforeSaveText, afterSaveText, color, size, xsSize, icon, isDisabled, loading, selected, noWrap, onClick, fullWidth, childGap, saved, onAnimationComplete }: TSaveButton): JSX.Element;
17
+ export declare function SaveButton({ beforeSaveText, afterSaveText, onSavedColor, size, xsSize, icon, isDisabled, loading, noWrap, onClick, fullWidth, childGap, saved, onAnimationComplete }: TSaveButton): JSX.Element;
package/build/cjs/components/src/components/Button/Button.styles.js CHANGED
@@ -120,7 +120,7 @@ var ButtonChildContainer = styled__default["default"].div(templateObject_3 || (t
120
120
  : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonChildGap;
121
121
  }, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
122
122
  var IconWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n position: relative;\n overflow: hidden;\n"], ["\n display: flex;\n position: relative;\n overflow: hidden;\n"])));
123
- var AnimationWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
123
+ var AnimationWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n visibility: hidden;\n \n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n visibility: visible;\n width: 100%;\n }\n 100% {\n width: 0%;\n }\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n visibility: hidden;\n \n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n visibility: visible;\n width: 100%;\n }\n 100% {\n width: 0%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
124
124
  var Loading = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
125
125
  var LoadingContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
126
126
  var LoadingSpinner = styled__default["default"](Spinner.Spinner)(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
package/build/cjs/components/src/components/Button/SaveButton.js CHANGED
@@ -12,32 +12,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  function SaveButton(_a) {
15
- var _b;
16
- var beforeSaveText = _a.beforeSaveText, afterSaveText = _a.afterSaveText, _c = _a.color, color = _c === void 0 ? 'alertGreen' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, xsSize = _a.xsSize, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, selected = _a.selected, noWrap = _a.noWrap, onClick = _a.onClick, fullWidth = _a.fullWidth, _e = _a.childGap, childGap = _e === void 0 ? 4 : _e, saved = _a.saved, onAnimationComplete = _a.onAnimationComplete;
17
- var _f = React.useState(true), showAnimation = _f[0], setShowAnimation = _f[1];
18
- var runOnClick = function (e) {
19
- onClick(e);
20
- if (setShowAnimation) {
15
+ var beforeSaveText = _a.beforeSaveText, afterSaveText = _a.afterSaveText, _b = _a.onSavedColor, onSavedColor = _b === void 0 ? 'alertGreen' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, xsSize = _a.xsSize, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, fullWidth = _a.fullWidth, _d = _a.childGap, childGap = _d === void 0 ? 4 : _d, saved = _a.saved, onAnimationComplete = _a.onAnimationComplete;
16
+ React.useEffect(function () {
17
+ if (!loading && saved) {
21
18
  setTimeout(function () {
22
- setShowAnimation(false);
23
19
  onAnimationComplete();
24
20
  }, 1000);
25
21
  }
26
- };
22
+ }, [saved]);
27
23
  return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { color: designTokens.theme && designTokens.theme.palette
28
- ? selected
29
- ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
30
- : saved
31
- ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
32
- : designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.secondary
33
- : 'white', isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return runOnClick(e); } },
24
+ ? saved
25
+ ? onSavedColor
26
+ : designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.secondary
27
+ : 'black', isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); } },
34
28
  loading && (React__default["default"].createElement(Button_styles.Loading, null,
35
29
  React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
36
30
  React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
37
31
  React__default["default"].createElement(Button_styles.ButtonChildContainer, { size: size, noWrap: noWrap, childGap: childGap }, saved && icon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
38
32
  React__default["default"].createElement(Button_styles.IconWrapper, null,
39
33
  icon,
40
- showAnimation && React__default["default"].createElement(Button_styles.AnimationWrapper, null)),
34
+ React__default["default"].createElement(Button_styles.AnimationWrapper, null)),
41
35
  React__default["default"].createElement(typography.BodyText, { color: "white" }, afterSaveText))) : (React__default["default"].createElement(typography.BodyText, { color: "white" }, beforeSaveText)))));
42
36
  }
43
37
 
package/build/cjs/components/src/components/Button/SaveButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Button/Button.styles.js CHANGED
@@ -112,7 +112,7 @@ var ButtonChildContainer = styled.div(templateObject_3 || (templateObject_3 = __
112
112
  : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonChildGap;
113
113
  }, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
114
114
  var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n position: relative;\n overflow: hidden;\n"], ["\n display: flex;\n position: relative;\n overflow: hidden;\n"])));
115
- var AnimationWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
115
+ var AnimationWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n visibility: hidden;\n \n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n visibility: visible;\n width: 100%;\n }\n 100% {\n width: 0%;\n }\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n visibility: hidden;\n \n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n visibility: visible;\n width: 100%;\n }\n 100% {\n width: 0%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
116
116
  var Loading = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
117
117
  var LoadingContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
118
118
  var LoadingSpinner = styled(Spinner)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
package/build/es/components/src/components/Button/SaveButton.js CHANGED
@@ -1,35 +1,29 @@
1
- import React, { useState } from 'react';
1
+ import React, { useEffect } from 'react';
2
2
  import { theme } from '@citygross/design-tokens';
3
3
  import { BasePrimaryButton, Loading, LoadingContainer, LoadingSpinner, ButtonChildContainer, IconWrapper, AnimationWrapper } from './Button.styles.js';
4
4
  import { BodyText } from '@citygross/typography';
5
5
 
6
6
  function SaveButton(_a) {
7
- var _b;
8
- var beforeSaveText = _a.beforeSaveText, afterSaveText = _a.afterSaveText, _c = _a.color, color = _c === void 0 ? 'alertGreen' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, xsSize = _a.xsSize, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, selected = _a.selected, noWrap = _a.noWrap, onClick = _a.onClick, fullWidth = _a.fullWidth, _e = _a.childGap, childGap = _e === void 0 ? 4 : _e, saved = _a.saved, onAnimationComplete = _a.onAnimationComplete;
9
- var _f = useState(true), showAnimation = _f[0], setShowAnimation = _f[1];
10
- var runOnClick = function (e) {
11
- onClick(e);
12
- if (setShowAnimation) {
7
+ var beforeSaveText = _a.beforeSaveText, afterSaveText = _a.afterSaveText, _b = _a.onSavedColor, onSavedColor = _b === void 0 ? 'alertGreen' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, xsSize = _a.xsSize, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, fullWidth = _a.fullWidth, _d = _a.childGap, childGap = _d === void 0 ? 4 : _d, saved = _a.saved, onAnimationComplete = _a.onAnimationComplete;
8
+ useEffect(function () {
9
+ if (!loading && saved) {
13
10
  setTimeout(function () {
14
- setShowAnimation(false);
15
11
  onAnimationComplete();
16
12
  }, 1000);
17
13
  }
18
- };
14
+ }, [saved]);
19
15
  return (React.createElement(BasePrimaryButton, { color: theme && theme.palette
20
- ? selected
21
- ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
22
- : saved
23
- ? theme === null || theme === void 0 ? void 0 : theme.palette[color]
24
- : theme === null || theme === void 0 ? void 0 : theme.palette.secondary
25
- : 'white', isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return runOnClick(e); } },
16
+ ? saved
17
+ ? onSavedColor
18
+ : theme === null || theme === void 0 ? void 0 : theme.palette.secondary
19
+ : 'black', isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); } },
26
20
  loading && (React.createElement(Loading, null,
27
21
  React.createElement(LoadingContainer, { xsSize: xsSize, size: size },
28
22
  React.createElement(LoadingSpinner, null)))),
29
23
  React.createElement(ButtonChildContainer, { size: size, noWrap: noWrap, childGap: childGap }, saved && icon ? (React.createElement(React.Fragment, null,
30
24
  React.createElement(IconWrapper, null,
31
25
  icon,
32
- showAnimation && React.createElement(AnimationWrapper, null)),
26
+ React.createElement(AnimationWrapper, null)),
33
27
  React.createElement(BodyText, { color: "white" }, afterSaveText))) : (React.createElement(BodyText, { color: "white" }, beforeSaveText)))));
34
28
  }
35
29
 
package/build/es/components/src/components/Button/SaveButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.124",
3
+ "version": "0.7.126",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "a95cb7fac8d476ed3d816b6f6b782e9b76abf186"
74
+ "gitHead": "3cabd5e21f17b46062d68c5c4accba897f0bad1a"
75
75
  }