@licklist/design 0.44.485-dev.89 → 0.44.485-dev.90
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/dist/zone/form/components/AvailableTimesControl.d.ts.map +1 -1
- package/dist/zone/form/components/AvailableTimesControl.js +1 -1
- package/dist/zone/form/utils/dates.d.ts +1 -0
- package/dist/zone/form/utils/dates.d.ts.map +1 -1
- package/dist/zone/form/utils/dates.js +1 -1
- package/package.json +1 -1
- package/src/zone/form/components/AvailableTimesControl.tsx +12 -5
- package/src/zone/form/utils/dates.ts +24 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvailableTimesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/AvailableTimesControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;
|
|
1
|
+
{"version":3,"file":"AvailableTimesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/AvailableTimesControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAMtF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CAC/C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,qBAAqB,6GA4FhC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),l=require("react-bootstrap"),n=require("react-hook-form"),s=require("@react-aria/utils"),o=require("../utils/dates.js"),u=a.forwardRef((function(e,u){var c,m=e.isLoading,d=e.workHours,f=e.defaultValues,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),l=require("react-bootstrap"),n=require("react-hook-form"),s=require("@react-aria/utils"),o=require("../utils/dates.js"),u=a.forwardRef((function(e,u){var c,m=e.isLoading,d=e.workHours,f=e.defaultValues,v=void 0===f?[]:f,b=s.useId(),g=i.useTranslation(["Design","Validation"]).t,h=n.useForm({mode:"onChange"}),p=h.register,T=h.formState.errors,k=h.reset,_=h.trigger,E=h.getValues,q=h.setValue,y=(0,h.watch)("availableTimes")||[],C=a.useMemo((function(){return o.getCheckboxesByWorkHours(d)}),[d]);a.useImperativeHandle(u,(function(){return{trigger:_,getValues:E}}));return a.useEffect((function(){v&&k({availableTimes:v})}),[v]),t.createElement(l.Form.Group,{controlId:b},t.createElement(l.Form.Label,null,g("Design:startTimes")),t.createElement("div",{className:"zone-available-times"},C.map((function(e){return t.createElement(l.Form.Check,{key:e,inline:!0,custom:!0,id:e},t.createElement(l.Form.Check.Input,{type:"checkbox",value:e,checked:y.includes(o.calculateTimeWithOffset(e)),onChange:function(){return function(e){var a=o.calculateTimeWithOffset(e);y.includes(a)?q("availableTimes",y.filter((function(e){return e!==a}))):q("availableTimes",r.__spreadArray(r.__spreadArray([],r.__read(y),!1),[a],!1))}(e)},disabled:m}),t.createElement(l.Form.Check.Label,null,e))}))),t.createElement(l.Form.Control,r.__assign({type:"hidden"},p("availableTimes",{required:{value:!0,message:g("Validation:fieldMinNumber",{attribute:g("startTimes"),min:1})}}))),t.createElement("div",{className:"manual-form-error"},null===(c=T.availableTimes)||void 0===c?void 0:c.message))}));exports.AvailableTimesControl=u;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
|
|
2
2
|
export declare const getTimeCheckboxRanges: (startTime: string, endTime: string, range?: number) => string[];
|
|
3
3
|
export declare const getCheckboxesByWorkHours: (workHours?: WorkHour[]) => string[];
|
|
4
|
+
export declare const calculateTimeWithOffset: (time: string) => string;
|
|
4
5
|
//# sourceMappingURL=dates.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAKtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BA8ChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aA0C9D,CAAC"}
|
|
1
|
+
{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAKtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BA8ChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aA0C9D,CAAC;AAGF,eAAO,MAAM,uBAAuB,SAAU,MAAM,KAAG,MAStD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("@licklist/core/dist/Services/Date"),t="00:00",a="23:59",n=function(t,a,n){void 0===n&&(n=5);for(var i=new Date,u=e.__read(t.split(r.TIME_SEPARATOR),2),o=u[0],s=u[1],_=e.__read(a.split(r.TIME_SEPARATOR),2),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("@licklist/core/dist/Services/Date"),t="00:00",a="23:59",n=function(t,a,n){void 0===n&&(n=5);for(var i=new Date,u=e.__read(t.split(r.TIME_SEPARATOR),2),o=u[0],s=u[1],_=e.__read(a.split(r.TIME_SEPARATOR),2),c=_[0],l=_[1],d=r.datetime(i.getFullYear(),i.getMonth()+1,i.getDate(),Number(o),Number(s)),f=r.datetime(i.getFullYear(),i.getMonth()+1,i.getDate(),Number(c),Number(l)),p={},g=0;f>=d;)d=new Date(d.getTime()+60*n*1e3),p[g]=d,g+=1;var v=Object.keys(p).map((function(t){var a=p[t];if(a<f){var n=e.__read(a.toISOString().split("T"),2)[1],i=e.__read(n.split(r.TIME_SEPARATOR),2);return[i[0],i[1]].join(r.TIME_SEPARATOR)}return null})).filter(Boolean);return v},i=function(e){var r=e+(new Date).getTimezoneOffset()/60;return r>24?r-24:r<0?r+24:r};exports.calculateTimeWithOffset=function(r){var t=e.__read(r.split(":"),2),a=t[0],n=t[1],u=i(+a).toString().padStart(2,"0");return"".concat(u,":").concat(n)},exports.getCheckboxesByWorkHours=function(r){if(!r||!r.length)return n(t,a);var i=r.reduce((function(r,t){var a=t.start,n=t.end;return a&&n?e.__spreadArray(e.__spreadArray([],e.__read(r),!1),[{start:a,end:n}],!1):r}),[]);if(7!==i.length)return n(t,a);var u=i.reduce((function(r,t){var a=t.start,n=t.end;return e.__spreadArray(e.__spreadArray([],e.__read(r),!1),[a,n],!1)}),[]).sort((function(e,r){return e.localeCompare(r)}));return n(u[0]||t,u[u.length-1]||a)},exports.getTimeCheckboxRanges=n;
|
package/package.json
CHANGED
|
@@ -9,7 +9,10 @@ import { Form } from "react-bootstrap";
|
|
|
9
9
|
import { useForm } from "react-hook-form";
|
|
10
10
|
import { useId } from "@react-aria/utils";
|
|
11
11
|
import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
|
|
12
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
calculateTimeWithOffset,
|
|
14
|
+
getCheckboxesByWorkHours,
|
|
15
|
+
} from "../utils/dates";
|
|
13
16
|
|
|
14
17
|
export type AvailableTimesControlRef = {
|
|
15
18
|
trigger: () => Promise<boolean>;
|
|
@@ -56,18 +59,20 @@ export const AvailableTimesControl = forwardRef<
|
|
|
56
59
|
});
|
|
57
60
|
|
|
58
61
|
const onChange = (option: string) => {
|
|
59
|
-
const
|
|
62
|
+
const timeWithOffset = calculateTimeWithOffset(option);
|
|
63
|
+
|
|
64
|
+
const isAlreadyChecked = availableTimes.includes(timeWithOffset);
|
|
60
65
|
|
|
61
66
|
if (isAlreadyChecked) {
|
|
62
67
|
setValue(
|
|
63
68
|
"availableTimes",
|
|
64
|
-
availableTimes.filter((value) => value !==
|
|
69
|
+
availableTimes.filter((value) => value !== timeWithOffset)
|
|
65
70
|
);
|
|
66
71
|
|
|
67
72
|
return;
|
|
68
73
|
}
|
|
69
74
|
|
|
70
|
-
setValue("availableTimes", [...availableTimes,
|
|
75
|
+
setValue("availableTimes", [...availableTimes, timeWithOffset]);
|
|
71
76
|
};
|
|
72
77
|
|
|
73
78
|
useEffect(() => {
|
|
@@ -87,7 +92,9 @@ export const AvailableTimesControl = forwardRef<
|
|
|
87
92
|
<Form.Check.Input
|
|
88
93
|
type="checkbox"
|
|
89
94
|
value={option}
|
|
90
|
-
checked={availableTimes.includes(
|
|
95
|
+
checked={availableTimes.includes(
|
|
96
|
+
calculateTimeWithOffset(option)
|
|
97
|
+
)}
|
|
91
98
|
onChange={() => onChange(option)}
|
|
92
99
|
disabled={isLoading}
|
|
93
100
|
/>
|
|
@@ -97,3 +97,27 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
|
|
|
97
97
|
DEFAULT_END_DAY_TIME
|
|
98
98
|
);
|
|
99
99
|
};
|
|
100
|
+
|
|
101
|
+
// adds time zone offset to times selected by user
|
|
102
|
+
export const calculateTimeWithOffset = (time: string): string => {
|
|
103
|
+
// time has format "HH:mm"
|
|
104
|
+
const [hours, minutes] = time.split(":");
|
|
105
|
+
|
|
106
|
+
const hoursWithOffset = addOffsetToHours(+hours);
|
|
107
|
+
|
|
108
|
+
const hoursWithPadding = hoursWithOffset.toString().padStart(2, "0");
|
|
109
|
+
|
|
110
|
+
return `${hoursWithPadding}:${minutes}`;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const addOffsetToHours = (hours: number): number => {
|
|
114
|
+
const timeZoneOffset = new Date().getTimezoneOffset() / 60;
|
|
115
|
+
|
|
116
|
+
const hoursWithOffset = hours + timeZoneOffset;
|
|
117
|
+
|
|
118
|
+
if (hoursWithOffset > 24) return hoursWithOffset - 24;
|
|
119
|
+
|
|
120
|
+
if (hoursWithOffset < 0) return hoursWithOffset + 24;
|
|
121
|
+
|
|
122
|
+
return hoursWithOffset;
|
|
123
|
+
};
|