@cashub/ui 0.34.0 → 0.34.2
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.
package/alert/Alert.js
CHANGED
|
@@ -8,10 +8,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject;
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
11
|
-
const Alert = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: var(--color-background1);\n border-radius: var(--border-radius);\n color: var(--font-on-background);\n padding: var(--spacing);\n\n ", "\n"])), _ref => {
|
|
11
|
+
const Alert = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: var(--color-background1);\n border-radius: var(--border-radius);\n color: var(--font-on-background);\n padding: var(--spacing);\n\n ", "\n\n ", "\n"])), _ref => {
|
|
12
12
|
let {
|
|
13
13
|
backgroundReverse
|
|
14
14
|
} = _ref;
|
|
15
15
|
return backgroundReverse && 'background: var(--color-background2);';
|
|
16
|
+
}, _ref2 => {
|
|
17
|
+
let {
|
|
18
|
+
marginBottom
|
|
19
|
+
} = _ref2;
|
|
20
|
+
return marginBottom && 'margin-bottom: var(--spacing);';
|
|
16
21
|
});
|
|
17
22
|
var _default = exports.default = Alert;
|
|
@@ -29,7 +29,8 @@ const DatetimePicker = _ref => {
|
|
|
29
29
|
readOnly,
|
|
30
30
|
disabled,
|
|
31
31
|
onBlur,
|
|
32
|
-
allowClear = false
|
|
32
|
+
allowClear = false,
|
|
33
|
+
shouldCloseOnSelect = true
|
|
33
34
|
} = _ref;
|
|
34
35
|
const datepickerRef = (0, _react.useRef)(null);
|
|
35
36
|
const handleOnBlur = () => {
|
|
@@ -42,7 +43,8 @@ const DatetimePicker = _ref => {
|
|
|
42
43
|
selected: selected ? new Date(Date.parse(selected)) : '',
|
|
43
44
|
minDate: minDate ? new Date(Date.parse(minDate)) : '',
|
|
44
45
|
maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
|
|
45
|
-
isClearable: allowClear && selected
|
|
46
|
+
isClearable: allowClear && selected,
|
|
47
|
+
shouldCloseOnSelect
|
|
46
48
|
};
|
|
47
49
|
if (showTimeInput) {
|
|
48
50
|
datePickerProps.showTimeInput = true;
|
|
@@ -66,7 +68,7 @@ const DatetimePicker = _ref => {
|
|
|
66
68
|
}))
|
|
67
69
|
});
|
|
68
70
|
};
|
|
69
|
-
const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n width: 100%;\n\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n
|
|
71
|
+
const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n width: 100%;\n\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n\n > input + button {\n padding: 0;\n right: var(--spacing-s);\n &::after {\n color: var(--color-primary);\n background-color: transparent;\n font-size: 24px;\n padding: 0;\n }\n }\n }\n\n .react-datepicker-popper {\n z-index: 2;\n }\n\n .react-datepicker-popper[data-placement^='top'] {\n padding-bottom: var(--spacing-xs);\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n padding-top: var(--spacing-xs);\n }\n\n .react-datepicker {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n padding: var(--spacing-s);\n font-size: var(--font-body1);\n color: var(--font-on-background);\n background: var(--color-background1);\n\n .react-datepicker__triangle {\n &::before,\n &::after {\n display: none;\n }\n }\n\n .react-datepicker__header {\n border: none;\n padding: 0;\n background: var(--color-background1);\n }\n\n .react-datepicker__current-month {\n line-height: 36px;\n color: var(--font-on-background);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n }\n\n .react-datepicker__day-names {\n margin: 0;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day {\n width: 36px;\n height: 36px;\n line-height: 36px;\n color: var(--font-on-background);\n font-weight: var(--font-normal);\n margin: 0;\n border-radius: 4px;\n }\n\n .react-datepicker__day:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__day--disabled {\n color: var(--font-on-mute);\n background: none !important;\n }\n }\n\n .react-datepicker__month {\n margin: 0;\n }\n\n .react-datepicker__navigation {\n top: 0;\n width: 36px;\n height: 36px;\n margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n border-radius: 4px;\n\n &.react-datepicker__navigation--previous {\n left: 0;\n }\n\n &.react-datepicker__navigation--next {\n right: 0;\n }\n\n &:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__navigation-icon::before {\n border-color: var(--font-on-background);\n }\n\n .react-datepicker__navigation-icon--previous::before {\n right: -4px;\n }\n\n .react-datepicker__navigation-icon--next::before {\n left: -4px;\n }\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--selected,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--selected,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--selected,\n .react-datepicker__year-text--in-selecting-range,\n .react-datepicker__year-text--in-range {\n background: var(--color-primary) !important;\n }\n\n .react-datepicker__day--keyboard-selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected {\n background: none;\n }\n\n .react-datepicker__input-time-container {\n margin: 0;\n margin-top: var(--spacing-s);\n margin-left: var(--spacing-xs);\n\n .react-datepicker-time__input input {\n height: 36px;\n padding: 0 var(--spacing-xs);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n background: transparent;\n color: var(--font-on-background);\n outline: none;\n }\n }\n"])), _ref2 => {
|
|
70
72
|
let {
|
|
71
73
|
disabled
|
|
72
74
|
} = _ref2;
|