oolib 2.173.2 → 2.174.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 (6) hide show
  1. package/dist/components/DatePicker/index.js +30 -7
  2. package/dist/icons/index.d.ts +4 -0
  3. package/dist/icons/index.js +2 -0
  4. package/dist/v2/components/Buttons/index.js +2 -2
  5. package/dist/v2/components/Buttons/styled.js +13 -12
  6. package/package.json +1 -1
package/dist/components/DatePicker/index.js CHANGED
@@ -125,17 +125,32 @@ function DatePicker(props) {
125
125
  (0, handlePos_1.handleHorizontalPos)(calenderRef, id);
126
126
  }, 500);
127
127
  }, [screenWidth]);
128
+ var isValidDateInput = function (value) {
129
+ if (!value)
130
+ return false;
131
+ var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
132
+ // Check if we have all parts
133
+ if (!day || !month || !year)
134
+ return false;
135
+ var dateObj = new Date(year, month - 1, day);
136
+ return !isNaN(dateObj.getTime()) &&
137
+ dateObj.getDate() === parseInt(day) &&
138
+ dateObj.getMonth() === parseInt(month) - 1 &&
139
+ dateObj.getFullYear() === parseInt(year);
140
+ };
128
141
  (0, react_1.useEffect)(function () {
129
142
  // buildDateinput return date string in dd/mm/yyyy format if you pass date object
130
143
  if (readOnly)
131
144
  return;
132
- if (value) {
133
- inputRef.current.value =
134
- value === "Ongoing" ? value : buildDateInput(new Date(value));
135
- }
136
- else {
137
- inputRef.current.value = "";
138
- setRange(null);
145
+ if (!isValidDateInput(inputRef.current.value)) {
146
+ if (value) {
147
+ inputRef.current.value =
148
+ value === "Ongoing" ? value : buildDateInput(new Date(value));
149
+ }
150
+ else {
151
+ inputRef.current.value = "";
152
+ setRange(null);
153
+ }
139
154
  }
140
155
  if (from) {
141
156
  setRange(new Date(calender.year, calender.month, calender.today));
@@ -155,12 +170,14 @@ function DatePicker(props) {
155
170
  }, [value]);
156
171
  // handle on change month
157
172
  var handleChangeMonth = function (e, month) {
173
+ console.log('change month fired');
158
174
  e.preventDefault();
159
175
  monthNumber += month;
160
176
  setMonthNumber(monthNumber < 0 ? 0 : monthNumber); // if
161
177
  (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
162
178
  };
163
179
  var handleDayClick = function (e, item) {
180
+ console.log('day click fired');
164
181
  var clickedDate = item;
165
182
  inputRef.current.value = buildDateInput(clickedDate);
166
183
  monthNumber = 0;
@@ -196,6 +213,8 @@ function DatePicker(props) {
196
213
  };
197
214
  var handleFocusOut = function () {
198
215
  var _a;
216
+ console.log('focus out fired');
217
+ console.log({ from: from });
199
218
  if (from && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[1]) == calender.month + 1) {
200
219
  setRange(new Date(calender.year, calender.month, calender.today));
201
220
  }
@@ -206,9 +225,11 @@ function DatePicker(props) {
206
225
  dateObj = from;
207
226
  }
208
227
  inputRef.current.value = buildDateInput(dateObj);
228
+ console.log({ dateObj: dateObj, inpuRefVal: inputRef.current.value });
209
229
  onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
210
230
  };
211
231
  var handleOnChange = function () {
232
+ console.log('input onchange fired');
212
233
  autoFormatter();
213
234
  setMonthNumber(0);
214
235
  var dateObj = (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
@@ -217,6 +238,7 @@ function DatePicker(props) {
217
238
  }
218
239
  };
219
240
  var handleKeyDown = function (e) {
241
+ console.log('key down fired');
220
242
  if (e.keyCode === 8) {
221
243
  flag = false;
222
244
  }
@@ -225,6 +247,7 @@ function DatePicker(props) {
225
247
  }
226
248
  };
227
249
  var handlePointerEnter = function (item) {
250
+ console.log('pointer enter fired');
228
251
  setRange(item);
229
252
  };
230
253
  var wrapCaretLeft = react_1.default.useCallback(function () {
package/dist/icons/index.d.ts CHANGED
@@ -119,6 +119,8 @@ export namespace icons {
119
119
  export { Star };
120
120
  export { ArrowsVertical };
121
121
  export { CirclesFour };
122
+ export { ArrowLineDown };
123
+ export { PaperPlaneTilt };
122
124
  export { OkeGoogleIcon };
123
125
  export { LetterH };
124
126
  export { IndexIcon };
@@ -303,6 +305,8 @@ import { Warning } from 'phosphor-react';
303
305
  import { Star } from 'phosphor-react';
304
306
  import { ArrowsVertical } from 'phosphor-react';
305
307
  import { CirclesFour } from 'phosphor-react';
308
+ import { ArrowLineDown } from 'phosphor-react';
309
+ import { PaperPlaneTilt } from 'phosphor-react';
306
310
  import { OkeGoogleIcon } from "./custom";
307
311
  import { LetterH } from "./custom";
308
312
  import { IndexIcon } from "./custom";
package/dist/icons/index.js CHANGED
@@ -124,6 +124,8 @@ exports.icons = {
124
124
  Star: phosphor_react_1.Star,
125
125
  ArrowsVertical: phosphor_react_1.ArrowsVertical,
126
126
  CirclesFour: phosphor_react_1.CirclesFour,
127
+ ArrowLineDown: phosphor_react_1.ArrowLineDown,
128
+ PaperPlaneTilt: phosphor_react_1.PaperPlaneTilt,
127
129
  //custom icons
128
130
  OkeGoogleIcon: custom_1.OkeGoogleIcon,
129
131
  LetterH: custom_1.LetterH,
package/dist/v2/components/Buttons/index.js CHANGED
@@ -20,7 +20,7 @@ var styled_1 = require("./styled");
20
20
  var react_router_dom_1 = require("react-router-dom");
21
21
  var lodash_1 = require("lodash");
22
22
  var icons_1 = require("../../../icons");
23
- var themes_1 = require("../../../themes");
23
+ var colors_1 = require("../../themes/colors");
24
24
  var Typo2_1 = require("../Typo2");
25
25
  var mixins_1 = require("../../../themes/mixins");
26
26
  var DisplayIcon = function (_a) {
@@ -51,7 +51,7 @@ var ButtonStyledWrapper = function (_a) {
51
51
  var thisSize = iconSize || size;
52
52
  return typeof thisSize === 'number' ? thisSize : (thisSize === 'S' && responsive_) ? 18 : (thisSize === 'S' && !responsive_) ? 16 : 20;
53
53
  };
54
- var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
54
+ var iconColor = !disabled ? _iconColor : colors_1.colors.grey40;
55
55
  var DisplayTextTypo = Typos[typo] || Typo2_1.UI_BODY_SEMIBOLD_SM_DF;
56
56
  return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
57
57
  stopPropagation && e.stopPropagation();
package/dist/v2/components/Buttons/styled.js CHANGED
@@ -43,6 +43,7 @@ var mixins_1 = require("../../../themes/mixins");
43
43
  var utils_1 = require("../../themes/utils");
44
44
  var styled_components_1 = __importStar(require("styled-components"));
45
45
  var Typo2_1 = require("../Typo2");
46
+ var grey40 = colors_1.colors.grey40, grey10 = colors_1.colors.grey10, grey80 = colors_1.colors.grey80, primaryContainer = colors_1.colors.primaryContainer, onPrimary = colors_1.colors.onPrimary, secondaryContainer = colors_1.colors.secondaryContainer, onSecondary = colors_1.colors.onSecondary;
46
47
  // Constants
47
48
  var BUTTON_SIZES = {
48
49
  S: '3rem',
@@ -61,28 +62,28 @@ var BUTTON_PADDING_DF = {
61
62
  // Hover Effects
62
63
  var createHoverEffect = function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::before {\n content: '';\n background-color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n ", "\n }\n\n &:hover::before {\n background-color: rgba(0, 0, 0, 0.1);\n }\n"], ["\n &::before {\n content: '';\n background-color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n ", "\n }\n\n &:hover::before {\n background-color: rgba(0, 0, 0, 0.1);\n }\n"])), (0, mixins_1.transition)("background-color")); };
63
64
  // Disabled States
64
- var disabledStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n"], ["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n"])), colors_1.colors.grey10, colors_1.colors.grey40);
65
+ var disabledStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n"], ["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n"])), grey10, grey40);
65
66
  // Variant Styles
66
67
  var variants = {
67
68
  primary: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), function (_a) {
68
69
  var colors = _a.theme.colors;
69
- return colors ? (0, utils_1.getPrimaryContainer)(colors) : colors_1.colors.primaryContainer;
70
+ return colors ? (0, utils_1.getPrimaryContainer)(colors) : primaryContainer;
70
71
  }, function (_a) {
71
72
  var colors = _a.theme.colors;
72
- return colors ? (0, utils_1.getOnPrimary)(colors) : colors_1.colors.onPrimary;
73
- }, function (_a) {
74
- var disabled = _a.disabled;
75
- return disabled && disabledStyles;
73
+ return colors ? (0, utils_1.getOnPrimary)(colors) : onPrimary;
76
74
  }, function (_a) {
77
75
  var forceHover = _a.forceHover;
78
76
  return forceHover && createHoverEffect();
77
+ }, function (_a) {
78
+ var disabled = _a.disabled;
79
+ return disabled && disabledStyles;
79
80
  }, createHoverEffect()),
80
81
  secondary: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), function (_a) {
81
82
  var colors = _a.theme.colors;
82
- return colors ? (0, utils_1.getSecondaryContainer)(colors) : colors_1.colors.secondaryContainer;
83
+ return colors ? (0, utils_1.getSecondaryContainer)(colors) : secondaryContainer;
83
84
  }, function (_a) {
84
85
  var colors = _a.theme.colors;
85
- return colors ? (0, utils_1.getOnSecondary)(colors) : colors_1.colors.onSecondary;
86
+ return colors ? (0, utils_1.getOnSecondary)(colors) : onSecondary;
86
87
  }, function (_a) {
87
88
  var disabled = _a.disabled;
88
89
  return disabled && disabledStyles;
@@ -90,16 +91,16 @@ var variants = {
90
91
  var forceHover = _a.forceHover;
91
92
  return forceHover && createHoverEffect();
92
93
  }, createHoverEffect()),
93
- tertiary: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n /* border: 1px solid ", "; */\n box-sizing: border-box;\n outline: 1px solid ", ";\n ", "\n\n ", "\n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: transparent;\n color: ", ";\n /* border: 1px solid ", "; */\n box-sizing: border-box;\n outline: 1px solid ", ";\n ", "\n\n ", "\n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), colors_1.colors.grey80, colors_1.colors.grey10, colors_1.colors.grey10, function (_a) {
94
+ tertiary: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n /* border: 1px solid ", "; */\n box-sizing: border-box;\n outline: 1px solid ", ";\n ", "\n\n ", "\n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: transparent;\n color: ", ";\n /* border: 1px solid ", "; */\n box-sizing: border-box;\n outline: 1px solid ", ";\n ", "\n\n ", "\n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), grey80, colors_1.colors.grey10, grey10, function (_a) {
94
95
  var disabled = _a.disabled;
95
- return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), colors_1.colors.grey80);
96
+ return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), grey40);
96
97
  }, function (_a) {
97
98
  var forceHover = _a.forceHover;
98
99
  return forceHover && createHoverEffect();
99
100
  }, createHoverEffect()),
100
- ghost: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n \n ", "\n \n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: transparent;\n color: ", ";\n \n ", "\n \n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), colors_1.colors.grey80, function (_a) {
101
+ ghost: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n\n ", "\n \n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: transparent;\n color: ", ";\n\n ", "\n \n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), grey80, function (_a) {
101
102
  var disabled = _a.disabled;
102
- return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), colors_1.colors.grey80);
103
+ return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), grey40);
103
104
  }, function (_a) {
104
105
  var forceHover = _a.forceHover;
105
106
  return forceHover && createHoverEffect();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.173.2",
3
+ "version": "2.174.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",