Skip to content
This repository was archived by the owner on Dec 25, 2024. It is now read-only.

Commit c3db1a8

Browse files
javadbatjavadbat
committed
refactor: refactor validation model to new jb-component model
1 parent 29d0b92 commit c3db1a8

File tree

1 file changed

+62
-58
lines changed

1 file changed

+62
-58
lines changed

Diff for: ‎lib/JBDateInput.tsx

+62-58
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,64 @@
11
import React, { useEffect, useRef, useState, useImperativeHandle, useCallback, DOMAttributes } from 'react';
22
import 'jb-date-input';
33
// eslint-disable-next-line no-duplicate-imports
4-
import { JBDateInputWebComponent, JBDateInputInputTypes, JBDateInputValidationItem, JBDDateInputInboxElementWebComponent,JBDateInputValueObject } from 'jb-date-input';
4+
import { JBDateInputWebComponent, JBDateInputInputTypes, ValidationItem, JBDDateInputInboxElementWebComponent, JBDateInputValueObject } from 'jb-date-input';
55
import { useEvent } from '../../../common/hooks/use-event';
6+
import { JBDateInputValidationValue } from 'jb-date-input/dist/web-component/jb-date-input/lib/types';
67

7-
export {JBDateInputInputTypes,JBDateInputValueObject};
8+
export { JBDateInputInputTypes, JBDateInputValueObject };
89

9-
type CustomEvents<K extends string> = { [key in K] : (event: CustomEvent) => void };
10+
type CustomEvents<K extends string> = { [key in K]: (event: CustomEvent) => void };
1011

1112
type CustomElement<T, K extends string> = Partial<T & DOMAttributes<T> & { children: any } & CustomEvents<`on${K}`>>;
1213
declare global {
13-
// eslint-disable-next-line @typescript-eslint/no-namespace
14-
namespace JSX {
15-
interface IntrinsicElements {
16-
'jb-date-input': JBDateInputType;
17-
'jb-date-input-inbox-element':CustomElement<JBDDateInputInboxElementWebComponent,'Click'>;
18-
}
19-
interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
20-
class?:string,
21-
label?: string,
22-
name?:string,
23-
"value-type"?: string,
24-
"input-type"?:string,
25-
// ref:React.RefObject<JBDateInputWebComponent>,
26-
}
27-
}
14+
// eslint-disable-next-line @typescript-eslint/no-namespace
15+
namespace JSX {
16+
interface IntrinsicElements {
17+
'jb-date-input': JBDateInputType;
18+
'jb-date-input-inbox-element': CustomElement<JBDDateInputInboxElementWebComponent, 'Click'>;
19+
}
20+
interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
21+
class?: string,
22+
label?: string,
23+
name?: string,
24+
"value-type"?: string,
25+
"input-type"?: string,
26+
// ref:React.RefObject<JBDateInputWebComponent>,
27+
}
28+
}
2829
}
2930
export type JBDateInputEventType<T> = T & {
30-
target: JBDateInputWebComponent
31+
target: JBDateInputWebComponent
3132
}
3233
export type JBDateInputProps = {
33-
label?: string,
34-
style?:string,
35-
name?:string,
36-
min?: string | null | undefined | Date,
37-
max?: string | null | undefined | Date,
38-
format?: string,
39-
className?:string,
40-
onKeyup?: (e:JBDateInputEventType<KeyboardEvent>)=>void,
41-
onChange?: (e:JBDateInputEventType<Event>)=>void,
42-
onSelect?: (e:JBDateInputEventType<CustomEvent>)=>void,
43-
valueType?: 'GREGORIAN'|'JALALI'|'TIME_STAMP',
44-
inputType?: 'GREGORIAN'|'JALALI',
45-
direction?: 'ltr'|'rtl',
46-
value?: string | Date | null | undefined,
47-
validationList?: JBDateInputValidationItem[],
48-
required?: boolean,
49-
calendarDefaultDateView?:{ year:number, month: number, dateType:JBDateInputInputTypes},
50-
usePersianNumber?: boolean,
51-
placeholder?:string | null | undefined,
52-
jalaliMonthList?:string[] | null | undefined,
53-
gregorianMonthList?:string[] | null | undefined,
54-
children?:React.ReactNode | React.ReactNode[],
34+
label?: string,
35+
style?: string,
36+
name?: string,
37+
min?: string | null | undefined | Date,
38+
max?: string | null | undefined | Date,
39+
format?: string,
40+
className?: string,
41+
onKeyup?: (e: JBDateInputEventType<KeyboardEvent>) => void,
42+
onChange?: (e: JBDateInputEventType<Event>) => void,
43+
onSelect?: (e: JBDateInputEventType<CustomEvent>) => void,
44+
valueType?: 'GREGORIAN' | 'JALALI' | 'TIME_STAMP',
45+
inputType?: 'GREGORIAN' | 'JALALI',
46+
direction?: 'ltr' | 'rtl',
47+
value?: string | Date | null | undefined,
48+
validationList?: ValidationItem<JBDateInputValidationValue>[],
49+
required?: boolean,
50+
calendarDefaultDateView?: { year: number, month: number, dateType: JBDateInputInputTypes },
51+
usePersianNumber?: boolean,
52+
placeholder?: string | null | undefined,
53+
jalaliMonthList?: string[] | null | undefined,
54+
gregorianMonthList?: string[] | null | undefined,
55+
children?: React.ReactNode | React.ReactNode[],
5556
}
5657

5758
export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
5859
const element = useRef<JBDateInputWebComponent>(null);
5960
const [refChangeCount, refChangeCountSetter] = useState(0);
60-
const onFormatChangeCallBackQueueRef = useRef<(()=>void)[]>([]);
61+
const onFormatChangeCallBackQueueRef = useRef<(() => void)[]>([]);
6162
useImperativeHandle(
6263
ref,
6364
() => (element ? element.current : {}),
@@ -66,17 +67,17 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
6667
useEffect(() => {
6768
refChangeCountSetter(refChangeCount + 1);
6869
}, [element.current]);
69-
const onchange = useCallback((e:JBDateInputEventType<Event>) => {
70+
const onchange = useCallback((e: JBDateInputEventType<Event>) => {
7071
if (props.onChange) {
7172
props.onChange(e);
7273
}
7374
}, [props.onChange]);
74-
const onKeyup = useCallback((e:JBDateInputEventType<KeyboardEvent>) => {
75+
const onKeyup = useCallback((e: JBDateInputEventType<KeyboardEvent>) => {
7576
if (props.onKeyup) {
7677
props.onKeyup(e);
7778
}
7879
}, [props.onKeyup]);
79-
const onSelect = useCallback((e:JBDateInputEventType<CustomEvent>) => {
80+
const onSelect = useCallback((e: JBDateInputEventType<CustomEvent>) => {
8081
if (props.onSelect) {
8182
props.onSelect(e);
8283
}
@@ -90,7 +91,7 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
9091
element.current?.setAttribute('format', props.format);
9192
}
9293
if (onFormatChangeCallBackQueueRef.current.length > 0) {
93-
onFormatChangeCallBackQueueRef.current.forEach((callBack:()=>void) => {
94+
onFormatChangeCallBackQueueRef.current.forEach((callBack: () => void) => {
9495
callBack();
9596
});
9697
onFormatChangeCallBackQueueRef.current = [];
@@ -102,7 +103,7 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
102103
if (props.max) {
103104
if (props.format && props.format !== element.current?.valueFormat) {
104105
onFormatChangeCallBackQueueRef.current.push(() => {
105-
if(props.max){element.current?.setMaxDate(props.max);}
106+
if (props.max) { element.current?.setMaxDate(props.max); }
106107
});
107108
} else {
108109
element.current?.setMaxDate(props.max);
@@ -128,12 +129,12 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
128129
}, [props.value]);
129130
useEffect(() => {
130131
if (element.current && Array.isArray(props.jalaliMonthList)) {
131-
element.current.setMonthList("JALALI",props.jalaliMonthList);
132+
element.current.setMonthList("JALALI", props.jalaliMonthList);
132133
}
133134
}, [props.jalaliMonthList]);
134135
useEffect(() => {
135136
if (element.current && Array.isArray(props.gregorianMonthList)) {
136-
element.current.setMonthList("GREGORIAN",props.gregorianMonthList);
137+
element.current.setMonthList("GREGORIAN", props.gregorianMonthList);
137138
}
138139
}, [props.gregorianMonthList]);
139140
useEffect(() => {
@@ -143,28 +144,31 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
143144
}, [props.placeholder]);
144145
useEffect(() => {
145146
if (element.current) {
146-
if(typeof props.style == "string"){
147-
element.current.setAttribute("style",props.style);
147+
if (typeof props.style == "string") {
148+
element.current.setAttribute("style", props.style);
148149
}
149150
}
150151
}, [props.style]);
151152
useEffect(() => {
152153
if (element.current && Array.isArray(props.validationList)) {
153-
element.current.validationList = props.validationList;
154+
element.current.validation.list = props.validationList;
154155
}
155156
}, [props.validationList]);
156157
useEffect(() => {
157158
if (element.current && props.direction) {
158159
element.current.setAttribute('direction', props.direction);
159160
}
160-
},[props.direction]);
161+
}, [props.direction]);
161162
useEffect(() => {
162-
if (props.required) {
163-
element.current?.setAttribute('required', "true");
164-
} else {
165-
element.current?.removeAttribute('required');
163+
if (element.current) {
164+
if (props.required) {
165+
element.current.required = true;
166+
} else {
167+
element.current.required = false;
168+
}
166169
}
167-
}, [props.required]);
170+
171+
}, [props.required,element.current]);
168172
useEffect(() => {
169173
if (typeof props.calendarDefaultDateView == "object" && props.calendarDefaultDateView.year && props.calendarDefaultDateView.month) {
170174
element.current?.setCalendarDefaultDateView(props.calendarDefaultDateView.year, props.calendarDefaultDateView.month, props.calendarDefaultDateView.dateType);

0 commit comments

Comments
 (0)