Skip to content

Commit

Permalink
update sample
Browse files Browse the repository at this point in the history
  • Loading branch information
javadbat committed Jul 22, 2024
1 parent d90f669 commit c4b3818
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 21 deletions.
12 changes: 2 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -288,17 +288,9 @@ this list may be outdated so i suggest you to read [jb-date-input](https://githu
## add custom element in input box

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.
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.
`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.
example:

```jsx
<JBDateInput>
<jb-date-input-inbox-element slot="end-section">
<div>after</div>
</jb-date-input-inbox-element>
<jb-date-input-inbox-element slot="start-section">
<div>before</div>
</jb-date-input-inbox-element>
<div slot="end-section">after</div>
<div slot="start-section">before</div>
</JBDateInput>
```
8 changes: 2 additions & 6 deletions docs/src/components/samples/Samples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,8 @@ function Samples() {
</div>
</JBDateInput>
<JBDateInput label="with inner-box section">
<jb-date-input-inbox-element slot="end-section">
<div>a</div>
</jb-date-input-inbox-element>
<jb-date-input-inbox-element slot="start-section">
<div>b</div>
</jb-date-input-inbox-element>
<div slot="end-section">a</div>
<div slot="start-section">b</div>
</JBDateInput>
<JBDateInput label='with custom month name' jalaliMonthList={["حَمَل","ثَور","جَوزا","سَرَطان","اَسَد","سُنبُله","میزان","عَقرَب","قَوس","جَدْی","دَلو","حوت"]}></JBDateInput>
<FormalTheme label="more formal look">{ }</FormalTheme>
Expand Down
5 changes: 0 additions & 5 deletions lib/JBDateInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,11 @@ import { useEvent } from '../../../common/hooks/use-event';
import { type ValidationValue } from 'jb-date-input/types';

export { JBDateInputInputTypes, JBDateInputValueObject };

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

type CustomElement<T, K extends string> = Partial<T & DOMAttributes<T> & { children: any } & CustomEvents<`on${K}`>>;
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'jb-date-input': JBDateInputType;
'jb-date-input-inbox-element': CustomElement<JBDDateInputInboxElementWebComponent, 'Click'>;
}
interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
class?: string,
Expand Down

0 comments on commit c4b3818

Please sign in to comment.