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

Commit c4b3818

Browse files
committed
update sample
1 parent d90f669 commit c4b3818

File tree

3 files changed

+4
-21
lines changed

3 files changed

+4
-21
lines changed

README.md

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -288,17 +288,9 @@ this list may be outdated so i suggest you to read [jb-date-input](https://githu
288288
## add custom element in input box
289289

290290
in jb-input you can put icon or any other custom html DOM in input box. to doing so you just have to place custom element in `JBDateInput` tag and add `slot="start-section"` or `slot="end-section"` to place it before or after input field.
291-
for better result i suggest you use `jb-date-input-inbox-element` tag but its optional and you can use your own custom tag too.
292-
`jb-date-input-inbox-element` will add some style to make sure your icon will place in center and will not overflow nad make your job easier if you want more controll you can skip it and use your own tag.
293-
example:
294-
295291
```jsx
296292
<JBDateInput>
297-
<jb-date-input-inbox-element slot="end-section">
298-
<div>after</div>
299-
</jb-date-input-inbox-element>
300-
<jb-date-input-inbox-element slot="start-section">
301-
<div>before</div>
302-
</jb-date-input-inbox-element>
293+
<div slot="end-section">after</div>
294+
<div slot="start-section">before</div>
303295
</JBDateInput>
304296
```

docs/src/components/samples/Samples.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,8 @@ function Samples() {
6262
</div>
6363
</JBDateInput>
6464
<JBDateInput label="with inner-box section">
65-
<jb-date-input-inbox-element slot="end-section">
66-
<div>a</div>
67-
</jb-date-input-inbox-element>
68-
<jb-date-input-inbox-element slot="start-section">
69-
<div>b</div>
70-
</jb-date-input-inbox-element>
65+
<div slot="end-section">a</div>
66+
<div slot="start-section">b</div>
7167
</JBDateInput>
7268
<JBDateInput label='with custom month name' jalaliMonthList={["حَمَل","ثَور","جَوزا","سَرَطان","اَسَد","سُنبُله","میزان","عَقرَب","قَوس","جَدْی","دَلو","حوت"]}></JBDateInput>
7369
<FormalTheme label="more formal look">{ }</FormalTheme>

lib/JBDateInput.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,11 @@ import { useEvent } from '../../../common/hooks/use-event';
66
import { type ValidationValue } from 'jb-date-input/types';
77

88
export { JBDateInputInputTypes, JBDateInputValueObject };
9-
10-
type CustomEvents<K extends string> = { [key in K]: (event: CustomEvent) => void };
11-
12-
type CustomElement<T, K extends string> = Partial<T & DOMAttributes<T> & { children: any } & CustomEvents<`on${K}`>>;
139
declare global {
1410
// eslint-disable-next-line @typescript-eslint/no-namespace
1511
namespace JSX {
1612
interface IntrinsicElements {
1713
'jb-date-input': JBDateInputType;
18-
'jb-date-input-inbox-element': CustomElement<JBDDateInputInboxElementWebComponent, 'Click'>;
1914
}
2015
interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
2116
class?: string,

0 commit comments

Comments
 (0)