midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

QR

This commit is contained in:
rizky 2024-09-05 00:50:03 -07:00
parent 7c3d24255b
commit 69200c0ae5
5 changed files with 540 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
comps/custom/Datepicker/components/Calendar/Days.tsx
View File

@ -4,7 +4,12 @@ import React, { useCallback, useContext } from "react";
import { BG_COLOR, TEXT_COLOR } from "../../constants";
import DatepickerContext from "../../contexts/DatepickerContext";
import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
import {
formatDate,
nextMonth,
previousMonth,
classNames as cn,
} from "../../helpers";
import { Period } from "../../types";
dayjs.extend(isBetween);
@ -21,13 +26,15 @@ interface Props {
onClickPreviousDays: (day: number) => void;
onClickDay: (day: number) => void;
onClickNextDays: (day: number) => void;
onIcon?: (day: number, date: Date) => any;
}
const Days: React.FC<Props> = ({
calendarData,
onClickPreviousDays,
onClickDay,
onClickNextDays
onClickNextDays,
onIcon,
}) => {
// Contexts
const {
@ -38,17 +45,19 @@ const Days: React.FC<Props> = ({
changeDayHover,
minDate,
maxDate,
disabledDates
disabledDates,
} = useContext(DatepickerContext);
// Functions
const currentDateClass = useCallback(
(item: number) => {
const itemDate = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${
item >= 10 ? item : "0" + item
}`;
const itemDate = `${calendarData.date.year()}-${
calendarData.date.month() + 1
}-${item >= 10 ? item : "0" + item}`;
if (formatDate(dayjs()) === formatDate(dayjs(itemDate)))
return TEXT_COLOR["500"][primaryColor as keyof (typeof TEXT_COLOR)["500"]];
return TEXT_COLOR["500"][
primaryColor as keyof (typeof TEXT_COLOR)["500"]
];
return "";
},
[calendarData.date, primaryColor]
@ -56,19 +65,28 @@ const Days: React.FC<Props> = ({
const activeDateData = useCallback(
(day: number) => {
const fullDay = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${day}`;
const fullDay = `${calendarData.date.year()}-${
calendarData.date.month() + 1
}-${day}`;
let className = "";
if (dayjs(fullDay).isSame(period.start) && dayjs(fullDay).isSame(period.end)) {
if (
dayjs(fullDay).isSame(period.start) &&
dayjs(fullDay).isSame(period.end)
) {
className = ` ${BG_COLOR["500"][primaryColor]} c-text-white c-font-medium rounded-full`;
} else if (dayjs(fullDay).isSame(period.start)) {
className = ` ${BG_COLOR["500"][primaryColor]} c-text-white c-font-medium ${
className = ` ${
BG_COLOR["500"][primaryColor]
} c-text-white c-font-medium ${
dayjs(fullDay).isSame(dayHover) && !period.end
? "c-rounded-full"
: "c-rounded-l-full"
}`;
} else if (dayjs(fullDay).isSame(period.end)) {
className = ` ${BG_COLOR["500"][primaryColor]} c-text-white c-font-medium ${
className = ` ${
BG_COLOR["500"][primaryColor]
} c-text-white c-font-medium ${
dayjs(fullDay).isSame(dayHover) && !period.start
? "c-rounded-full"
: "c-rounded-r-full"
@ -76,8 +94,10 @@ const Days: React.FC<Props> = ({
}
return {
active: dayjs(fullDay).isSame(period.start) || dayjs(fullDay).isSame(period.end),
className: className
active:
dayjs(fullDay).isSame(period.start) ||
dayjs(fullDay).isSame(period.end),
className: className,
};
},
[calendarData.date, dayHover, period.end, period.start, primaryColor]
@ -86,9 +106,9 @@ const Days: React.FC<Props> = ({
const hoverClassByDay = useCallback(
(day: number) => {
let className = currentDateClass(day);
const fullDay = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${
day >= 10 ? day : "0" + day
}`;
const fullDay = `${calendarData.date.year()}-${
calendarData.date.month() + 1
}-${day >= 10 ? day : "0" + day}`;
if (period.start && period.end) {
if (dayjs(fullDay).isBetween(period.start, period.end, "day", "[)")) {
@ -102,13 +122,19 @@ const Days: React.FC<Props> = ({
return className;
}
if (period.start && dayjs(fullDay).isBetween(period.start, dayHover, "day", "[)")) {
if (
period.start &&
dayjs(fullDay).isBetween(period.start, dayHover, "day", "[)")
) {
className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
day
)} dark:bg-white/10`;
}
if (period.end && dayjs(fullDay).isBetween(dayHover, period.end, "day", "[)")) {
if (
period.end &&
dayjs(fullDay).isBetween(dayHover, period.end, "day", "[)")
) {
className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
day
)} dark:bg-white/10`;
@ -123,7 +149,14 @@ const Days: React.FC<Props> = ({
return className;
},
[calendarData.date, currentDateClass, dayHover, period.end, period.start, primaryColor]
[
calendarData.date,
currentDateClass,
dayHover,
period.end,
period.start,
primaryColor,
]
);
const isDateTooEarly = useCallback(
@ -134,7 +167,7 @@ const Days: React.FC<Props> = ({
const object = {
previous: previousMonth(calendarData.date),
current: calendarData.date,
next: nextMonth(calendarData.date)
next: nextMonth(calendarData.date),
};
const newDate = object[type as keyof typeof object];
const formattedDate = newDate.set("date", day);
@ -153,7 +186,7 @@ const Days: React.FC<Props> = ({
const object = {
previous: previousMonth(calendarData.date),
current: calendarData.date,
next: nextMonth(calendarData.date)
next: nextMonth(calendarData.date),
};
const newDate = object[type as keyof typeof object];
const formattedDate = newDate.set("date", day);
@ -172,19 +205,22 @@ const Days: React.FC<Props> = ({
const object = {
previous: previousMonth(calendarData.date),
current: calendarData.date,
next: nextMonth(calendarData.date)
next: nextMonth(calendarData.date),
};
const newDate = object[type as keyof typeof object];
const formattedDate = `${newDate.year()}-${newDate.month() + 1}-${
day >= 10 ? day : "0" + day
}`;
if (!disabledDates || (Array.isArray(disabledDates) && !disabledDates.length)) {
if (
!disabledDates ||
(Array.isArray(disabledDates) && !disabledDates.length)
) {
return false;
}
let matchingCount = 0;
disabledDates?.forEach(dateRange => {
disabledDates?.forEach((dateRange) => {
if (
dayjs(formattedDate).isAfter(dateRange.startDate) &&
dayjs(formattedDate).isBefore(dateRange.endDate)
@ -205,7 +241,8 @@ const Days: React.FC<Props> = ({
const buttonClass = useCallback(
(day: number, type: "current" | "next" | "previous") => {
const baseClass = "c-flex c-items-center c-justify-center c-w-12 c-h-12 lg:c-w-10 lg:c-h-10";
const baseClass =
"c-flex c-items-center c-justify-center c-w-12 c-h-12 lg:c-w-10 lg:c-h-10 c-relative";
if (type === "current") {
return cn(
baseClass,
@ -215,7 +252,11 @@ const Days: React.FC<Props> = ({
isDateDisabled(day, type) && "c-text-gray-400 c-cursor-not-allowed"
);
}
return cn(baseClass, isDateDisabled(day, type) && "c-cursor-not-allowed", "c-text-gray-400");
return cn(
baseClass,
isDateDisabled(day, type) && "c-cursor-not-allowed",
"c-text-gray-400"
);
},
[activeDateData, hoverClassByDay, isDateDisabled]
);
@ -242,7 +283,7 @@ const Days: React.FC<Props> = ({
return {
previous: previousMonth(calendarData.date),
current: calendarData.date,
next: nextMonth(calendarData.date)
next: nextMonth(calendarData.date),
};
}, [calendarData.date]);
@ -262,7 +303,7 @@ const Days: React.FC<Props> = ({
if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
changePeriod({
start: null,
end: period.start
end: period.start,
});
}
}
@ -279,7 +320,7 @@ const Days: React.FC<Props> = ({
if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
changePeriod({
start: period.end,
end: null
end: null,
});
}
}
@ -293,7 +334,7 @@ const Days: React.FC<Props> = ({
changePeriod,
checkIfHoverPeriodContainsDisabledPeriod,
getMetaData,
period
period,
]
);
@ -339,10 +380,28 @@ const Days: React.FC<Props> = ({
onClickNextDays,
onClickPreviousDays,
period.end,
period.start
period.start,
]
);
const load_marker = (day: number, type: string) => {
let fullDay = `${calendarData.date.year()}-${
calendarData.date.month() + 1
}-${day >= 10 ? day : "0" + day}`;
if (type === "previous") {
const newDate = previousMonth(calendarData.date);
fullDay = `${newDate.year()}-${newDate.month() + 1}-${
day >= 10 ? day : "0" + day
}`;
}
if (type === "next") {
const newDate = nextMonth(calendarData.date);
fullDay = `${newDate.year()}-${newDate.month() + 1}-${
day >= 10 ? day : "0" + day
}`;
}
const res = new Date(fullDay);
return typeof onIcon === "function" ? onIcon(day, res) : null;
};
return (
<div className="c-grid c-grid-cols-7 c-gap-y-0.5 c-my-1">
{calendarData.days.previous.map((item, index) => (
@ -356,7 +415,10 @@ const Days: React.FC<Props> = ({
hoverDay(item, "previous");
}}
>
<span className="c-relative">
{item}
<span className="c-relative">{load_marker(item, "previous")}</span>
</span>
</button>
))}
@ -365,13 +427,19 @@ const Days: React.FC<Props> = ({
type="button"
key={index}
disabled={isDateDisabled(item, "current")}
className={cx(`${buttonClass(item, "current")}`, item === 1 && "highlight")}
className={cx(
`${buttonClass(item, "current")}`,
item === 1 && "highlight"
)}
onClick={() => handleClickDay(item, "current")}
onMouseOver={() => {
hoverDay(item, "current");
}}
>
<span className="c-relative">
{item}
<span className="c-relative">{load_marker(item, "current")}</span>
</span>
</button>
))}
@ -386,7 +454,10 @@ const Days: React.FC<Props> = ({
hoverDay(item, "next");
}}
>
<span className="c-relative">
{item}
<span className="c-relative">{load_marker(item, "next")}</span>
</span>
</button>
))}
</div>

17
comps/custom/Datepicker/components/Calendar/index.tsx
View File

@ -44,6 +44,7 @@ interface Props {
changeMonth: (month: number) => void;
changeYear: (year: number) => void;
mode?: "monthly" | "daily";
onMark?: (day: number, date: Date) => any;
}
const Calendar: React.FC<Props> = ({
@ -54,6 +55,7 @@ const Calendar: React.FC<Props> = ({
onClickNext,
changeMonth,
changeYear,
onMark,
mode = "daily",
}) => {
// Contexts
@ -366,6 +368,21 @@ const Calendar: React.FC<Props> = ({
onClickPreviousDays={clickPreviousDays}
onClickDay={clickDay}
onClickNextDays={clickNextDays}
onIcon={(day, date) => {
if(typeof onMark === "function"){
return onMark(day, date)
}
return <></>
if (new Date().getDate() === day)
return (
<div className="c-absolute c-inset-y-0 c-left-0 -c-translate-y-1/2 -c-translate-x-1/2">
<div className="c-w-full c-h-full c-flex c-flex-row c-items-center c-justif-center c-px-0.5">
!
</div>
</div>
);
return <></>
}}
/>
</>
)}

5
comps/custom/Datepicker/types/index.ts
View File

@ -82,7 +82,10 @@ export interface DatepickerType {
disabledDates?: DateRangeType[] | null;
startWeekOn?: string | null;
popoverDirection?: PopoverDirectionType;
mode?: "daily" | "monthly"
mode?: "daily" | "monthly";
onMark?: (day: number, date: Date) => any;
onLoad?: () => Promise<void>
}
export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"

18
comps/custom/QrLabel.tsx Normal file
View File

@ -0,0 +1,18 @@
import { FC } from "react";
import QRCode from 'react-qr-code';
export const QrLabel: FC<{
value: string,
bgcolor: string,
fgcolor: string,
size: number
}> = ({ value, bgcolor, fgcolor, size }) => {
return (
<div>
<QRCode value={value} size={size}
bgColor={bgcolor}
fgColor={fgcolor}
level={"L"} />
</div>
)
}

78
comps/custom/QrReader.tsx Normal file
View File

@ -0,0 +1,78 @@
import { useEffect, useRef, useState } from "react";
import QrScanner from "qr-scanner";
export const QrReader = () => {
const scanner = useRef<QrScanner>();
const videoEl = useRef<HTMLVideoElement>(null);
const qrBoxEl = useRef<HTMLDivElement>(null);
const [qrOn, setQrOn] = useState<boolean>(true);
const [scannedResult, setScannedResult] = useState<string | undefined>("");
// Success
const onScanSuccess = (result: QrScanner.ScanResult) => {
console.log(result);
setScannedResult(result?.data);
};
// Fail
const onScanFail = (err: string | Error) => {
console.log(err);
};
useEffect(() => {
if (videoEl?.current && !scanner.current) {
scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
onDecodeError: onScanFail,
preferredCamera: "environment",
highlightScanRegion: true,
highlightCodeOutline: true,
overlay: qrBoxEl?.current || undefined,
});
scanner?.current
?.start()
.then(() => setQrOn(true))
.catch((err) => {
if (err) setQrOn(false);
});
}
return () => {
if (!videoEl?.current) {
scanner?.current?.stop();
}
};
}, []);
useEffect(() => {
if (!qrOn)
alert(
"Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
);
}, [qrOn]);
return (
<div className="qr-reader">
{/* QR */}
<video ref={videoEl}></video>
<div ref={qrBoxEl} className="qr-box">
</div>
{/* Show Data Result if scan is success */}
{scannedResult && (
<p
style={{
position: "absolute",
top: 0,
left: 0,
zIndex: 99999,
color: "white",
}}
>
Scanned Result: {scannedResult}
</p>
)}
</div>
);
};