@mailstep/design-system 0.7.35 → 0.7.36-beta.0
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/package.json +1 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts +1 -1
- package/ui/Elements/Button/Button.d.ts +2 -2
- package/ui/Elements/Button/Button.js +3 -3
- package/ui/Elements/Button/stories/Button.stories.d.ts +1 -1
- package/ui/Elements/Button/styles.d.ts +0 -1
- package/ui/Elements/Button/styles.js +2 -5
- package/ui/Elements/Button/types.d.ts +0 -1
- package/ui/Elements/DatePicker/Datetime/components/Timepicker.d.ts +1 -5
- package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +43 -34
- package/ui/Forms/Input/Input.js +4 -4
- package/ui/Forms/Input/styles.d.ts +0 -2
- package/ui/Forms/Input/styles.js +1 -4
- package/ui/Forms/Input/types.d.ts +1 -2
- package/ui/index.es.js +10173 -10151
- package/ui/index.umd.js +520 -487
package/package.json
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
3
3
|
export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
4
4
|
export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
5
|
-
export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth,
|
|
5
|
+
export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../../../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth,
|
|
1
|
+
import { Props } from './types';
|
|
2
|
+
declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: Props) => JSX.Element;
|
|
3
3
|
export default Button;
|
|
@@ -21,10 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import { Spinner } from '../Spinner';
|
|
25
24
|
import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
|
|
25
|
+
import { Spinner } from '../Spinner';
|
|
26
26
|
var Button = function (_a) {
|
|
27
|
-
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e,
|
|
28
|
-
return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth,
|
|
27
|
+
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "buttonRef", "onClick"]);
|
|
28
|
+
return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
|
|
29
29
|
};
|
|
30
30
|
export default Button;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth,
|
|
5
|
+
component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
parameters: {
|
|
@@ -13,5 +13,4 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
|
|
|
13
13
|
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
14
14
|
iconPadding?: boolean | undefined;
|
|
15
15
|
fullWidth?: boolean | undefined;
|
|
16
|
-
height?: string | undefined;
|
|
17
16
|
}, never>;
|
|
@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import { Icon } from '../Icon';
|
|
6
5
|
import styled, { th } from '@xstyled/styled-components';
|
|
6
|
+
import { Icon } from '../Icon';
|
|
7
7
|
export var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
8
8
|
export var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & svg {\n margin-right: ", ";\n }\n"], ["\n & svg {\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
9
9
|
var $addMarginRight = _a.$addMarginRight;
|
|
@@ -16,13 +16,10 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height:
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
23
|
-
var height = _a.height;
|
|
24
|
-
return height || '38px';
|
|
25
|
-
}, function (_a) {
|
|
26
23
|
var iconPadding = _a.iconPadding;
|
|
27
24
|
return (iconPadding ? '9px' : '7px 18px');
|
|
28
25
|
}, function (_a) {
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import type { DateTimeOthers } from '../types';
|
|
1
|
+
import { type FC } from 'react';
|
|
3
2
|
interface TimepickerProps {
|
|
4
3
|
setTime: (type: string, value: number) => void;
|
|
5
4
|
value: Date | null;
|
|
6
5
|
disabled?: boolean;
|
|
7
|
-
others: DateTimeOthers;
|
|
8
|
-
onChangeOthers: (others: DateTimeOthers) => void;
|
|
9
|
-
isSecondDatePicker?: boolean;
|
|
10
6
|
}
|
|
11
7
|
export declare const Timepicker: FC<TimepickerProps>;
|
|
12
8
|
export {};
|
|
@@ -1,48 +1,57 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
11
4
|
};
|
|
12
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
6
|
import { useCallback, useEffect, useState } from 'react';
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
import { FooterRowLabel } from './FooterRowLabel';
|
|
21
|
-
import { TimeInput } from './TimeInput';
|
|
7
|
+
import styled, { x } from '@xstyled/styled-components';
|
|
8
|
+
import { th } from '@xstyled/system';
|
|
9
|
+
var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform: rotate(90deg);\n font-size: 24px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"], ["\n transform: rotate(90deg);\n font-size: 24px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
|
|
10
|
+
var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 0.7rem;\n padding: 4px 10px;\n margin: 0 10px;\n"], ["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 0.7rem;\n padding: 4px 10px;\n margin: 0 10px;\n"])), th('colors.lightGray2'));
|
|
11
|
+
var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 22px;\n font-weight: 700;\n width: 30px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 22px;\n font-weight: 700;\n width: 30px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
|
|
12
|
+
var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 16px;\n width: 25px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 700;\n font-size: 16px;\n width: 25px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
|
|
22
13
|
export var Timepicker = function (_a) {
|
|
23
14
|
var _b, _c, _d, _e;
|
|
24
|
-
var setTime = _a.setTime,
|
|
25
|
-
var initialHours = ((_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value))
|
|
26
|
-
var initialMinutes = ((_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value))
|
|
15
|
+
var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
|
|
16
|
+
var initialHours = (_c = (_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) !== null && _c !== void 0 ? _c : 0;
|
|
17
|
+
var initialMinutes = (_e = (_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) !== null && _e !== void 0 ? _e : 0;
|
|
18
|
+
var regExp = '^[0-9]*$';
|
|
27
19
|
var _f = useState(initialHours), hours = _f[0], setHours = _f[1];
|
|
28
20
|
var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
21
|
+
var increaseHour = useCallback(function () {
|
|
22
|
+
hours === 23 ? setHours(0) : setHours(hours + 1);
|
|
23
|
+
}, [hours]);
|
|
24
|
+
var decreaseHour = useCallback(function () {
|
|
25
|
+
hours === 0 ? setHours(23) : setHours(hours - 1);
|
|
26
|
+
}, [hours]);
|
|
27
|
+
var increaseMinutes = useCallback(function () {
|
|
28
|
+
minutes >= 55 ? setMinutes(minutes - 55) : setMinutes(minutes + 5);
|
|
29
|
+
}, [minutes]);
|
|
30
|
+
var decreaseMinutes = useCallback(function () {
|
|
31
|
+
minutes <= 5 ? setMinutes(minutes + 55) : setMinutes(minutes - 5);
|
|
32
|
+
}, [minutes]);
|
|
33
|
+
var onHoursChange = useCallback(function (e) {
|
|
34
|
+
if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
|
|
35
|
+
setHours(Number(e.target.value));
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
setHours(0);
|
|
39
|
+
}
|
|
40
|
+
}, []);
|
|
41
|
+
var onMinutesChange = useCallback(function (e) {
|
|
42
|
+
if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
|
|
43
|
+
setMinutes(Number(e.target.value));
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
setMinutes(0);
|
|
47
|
+
}
|
|
48
|
+
}, []);
|
|
36
49
|
useEffect(function () {
|
|
37
50
|
!!value && setTime('hours', hours);
|
|
38
51
|
}, [hours]);
|
|
39
52
|
useEffect(function () {
|
|
40
53
|
!!value && setTime('minutes', minutes);
|
|
41
54
|
}, [minutes]);
|
|
42
|
-
|
|
43
|
-
!!value && setHours(initialHours);
|
|
44
|
-
!!value && setMinutes(initialMinutes);
|
|
45
|
-
}, [!!value, initialHours, initialMinutes]);
|
|
46
|
-
var timeValue = "".concat(hours.toString().padStart(2, '0'), ":").concat(minutes.toString().padStart(2, '0'));
|
|
47
|
-
return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { disabled: disabled, children: [_jsxs(x.div, { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs("b", { children: [isSecondDatePicker ? TimePickerRepeatTrans[TimePickerRepeat.TO] : TimePickerRepeatTrans[TimePickerRepeat.FROM], ":", ' '] }), _jsx(TimeInput, { type: "time", onChange: onChange, disabled: disabled, value: timeValue })] })] }) }));
|
|
55
|
+
return (_jsx("td", { colSpan: 7, children: _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "1rem", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: hours < 10 ? "0".concat(hours) : hours, disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: minutes < 10 ? "0".concat(minutes) : minutes, disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, type: "button", children: "\u203A" })] })] }) }) }));
|
|
48
56
|
};
|
|
57
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/ui/Forms/Input/Input.js
CHANGED
|
@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
import { useCallback, useEffect, useRef } from 'react';
|
|
25
|
-
import {
|
|
26
|
-
import { Icon } from '../../Elements/Icon';
|
|
25
|
+
import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip, } from './styles';
|
|
27
26
|
import { FieldLabel } from '../../Elements/Label';
|
|
28
27
|
import { SpaceAroundWrap } from '../../Elements/SpaceAround';
|
|
28
|
+
import { ErrorMessage } from '../../Elements/ErrorMessage';
|
|
29
|
+
import { Icon } from '../../Elements/Icon';
|
|
29
30
|
import { Spinner } from '../../Elements/Spinner';
|
|
30
|
-
import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
|
|
31
31
|
var allowedInputTypes = ['text', 'number', 'password'];
|
|
32
32
|
export var Input = function (_a) {
|
|
33
33
|
var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
|
|
@@ -60,5 +60,5 @@ export var Input = function (_a) {
|
|
|
60
60
|
onEnter === null || onEnter === void 0 ? void 0 : onEnter();
|
|
61
61
|
}
|
|
62
62
|
}, [onEnter]);
|
|
63
|
-
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant,
|
|
63
|
+
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
|
|
64
64
|
};
|
|
@@ -10,7 +10,6 @@ type StyledInputProps = {
|
|
|
10
10
|
variant?: string;
|
|
11
11
|
value?: string | number;
|
|
12
12
|
$asTextArea?: boolean;
|
|
13
|
-
rows?: number;
|
|
14
13
|
};
|
|
15
14
|
type InputIconProps = {
|
|
16
15
|
right?: boolean;
|
|
@@ -36,7 +35,6 @@ export declare const InputRow: import("styled-components").StyledComponent<"div"
|
|
|
36
35
|
$icon?: string | undefined;
|
|
37
36
|
$isInvalid?: boolean | undefined;
|
|
38
37
|
variant?: string | undefined;
|
|
39
|
-
$asTextArea?: boolean | undefined;
|
|
40
38
|
}, never>;
|
|
41
39
|
export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
42
40
|
export {};
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -47,7 +47,7 @@ export var Suffix = styled.div(templateObject_10 || (templateObject_10 = __makeT
|
|
|
47
47
|
return $isPointer
|
|
48
48
|
? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))) : '';
|
|
49
49
|
});
|
|
50
|
-
export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height:
|
|
50
|
+
export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
|
|
51
51
|
var $isInvalid = _a.$isInvalid;
|
|
52
52
|
return ($isInvalid ? th.color('red1') : th.color('gray'));
|
|
53
53
|
}, function (_a) {
|
|
@@ -59,9 +59,6 @@ export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __mak
|
|
|
59
59
|
}, function (_a) {
|
|
60
60
|
var disabled = _a.disabled;
|
|
61
61
|
return (disabled ? th.color('lightGray3') : th.color('gray5'));
|
|
62
|
-
}, function (_a) {
|
|
63
|
-
var $asTextArea = _a.$asTextArea;
|
|
64
|
-
return ($asTextArea ? 'auto' : '38px');
|
|
65
62
|
}, InputIcon, InputIcon, function (_a) {
|
|
66
63
|
var $icon = _a.$icon;
|
|
67
64
|
return ($icon ? '3em' : '1em');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
|
|
2
2
|
export type SpaceAround = boolean | SpaceAroundProps;
|
|
3
3
|
export type SpaceAroundProps = {
|
|
4
4
|
marginTop?: number;
|
|
@@ -45,7 +45,6 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
|
45
45
|
forceFocus?: boolean;
|
|
46
46
|
autoFocus?: boolean;
|
|
47
47
|
asTextArea?: boolean;
|
|
48
|
-
rows?: number;
|
|
49
48
|
};
|
|
50
49
|
export type ModalData = {
|
|
51
50
|
[key: string]: any;
|