@mailstep/design-system 0.7.37 → 0.7.38-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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js +1 -1
  3. package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +6 -2
  4. package/ui/index.es.js +6014 -6012
  5. package/ui/index.umd.js +360 -360
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.37",
3
+ "version": "0.7.38-beta.0",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js CHANGED
@@ -27,5 +27,5 @@ export var DateRepeater = function (_a) {
27
27
  }
28
28
  onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
29
29
  }, [onChangeOthers, reset, others]);
30
- return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "center", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, border: "1px solid lightgray", borderRadius: "6px", padding: "2px", background: "white", cursor: "pointer", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
30
+ return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, background: "white", cursor: "pointer", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
31
31
  };
package/ui/Elements/DatePicker/Datetime/components/Timepicker.js CHANGED
@@ -4,8 +4,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
6
  import { useCallback, useEffect, useState } from 'react';
7
+ import Icon from '../../../Icon/Icon';
8
+ import { i18n } from '@lingui/core';
7
9
  import styled, { x } from '@xstyled/styled-components';
8
10
  import { th } from '@xstyled/system';
11
+ import { FooterRow } from './FooterRow';
12
+ import { FooterRowLabel } from './FooterRowLabel';
9
13
  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
14
  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
15
  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"])));
@@ -28,7 +32,7 @@ export var Timepicker = function (_a) {
28
32
  setMinutes(function (prev) { return (prev + 5) % 60; });
29
33
  }, []);
30
34
  var decreaseMinutes = useCallback(function () {
31
- setMinutes(function (prev) { return (prev === 0 ? 55 : prev - 5); });
35
+ setMinutes(function (prev) { return (prev - 5 + 60) % 60; });
32
36
  }, []);
33
37
  var onHoursChange = useCallback(function (e) {
34
38
  if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
@@ -52,6 +56,6 @@ export var Timepicker = function (_a) {
52
56
  useEffect(function () {
53
57
  !!value && setTime('minutes', minutes);
54
58
  }, [minutes]);
55
- return (_jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "4px", 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: String(hours).padStart(2, '0'), disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: String(minutes).padStart(2, '0'), 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" })] })] }) }));
59
+ return (_jsxs(FooterRow, { disabled: disabled, children: [_jsxs("div", { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "4px", 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: String(hours).padStart(2, '0'), disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: String(minutes).padStart(2, '0'), 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" })] })] }) })] }));
56
60
  };
57
61
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;