Skip to content

Commit

Permalink
Merge branch 'new-feature-primefaces#4134' of https://github.com/user…
Browse files Browse the repository at this point in the history
  • Loading branch information
userkks committed May 31, 2023
2 parents 063f973 + cedd4a6 commit e78e22d
Show file tree
Hide file tree
Showing 201 changed files with 15,294 additions and 1,760 deletions.
111 changes: 111 additions & 0 deletions components/doc/autocomplete/pt/ptdoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import { useState } from 'react';
import { AutoComplete } from '../../../lib/autocomplete/AutoComplete';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const [value, setValue] = useState('');
const [items, setItems] = useState([]);

const search = (event) => {
setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
};

const code = {
basic: `
<AutoComplete
value={value}
suggestions={items}
completeMethod={search}
onChange={(e) => setValue(e.value)}
pt={{
input: { root: { className: 'w-16rem' } },
item: ({ context }) => ({
className: context.selected ? 'bg-primary-300' : undefined
})
}}
/>
`,
javascript: `
import React, { useState } from "react";
import { AutoComplete } from "primereact/autocomplete";
export default function PTDemo() {
const [value, setValue] = useState('');
const [items, setItems] = useState([]);
const search = (event) => {
setItems([...Array(10).keys()].map(item => event.query + '-' + item));
}
return (
<div className="card flex justify-content-center">
<AutoComplete
value={value}
suggestions={items}
completeMethod={search}
onChange={(e) => setValue(e.value)}
pt={{
input: { root: { className: 'w-16rem' } },
item: ({ context }) => ({
className: context.selected ? 'bg-primary-300' : undefined
})
}}
/>
</div>
)
}
`,
typescript: `
import React, { useState } from "react";
import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
export default function PTDemo() {
const [value, setValue] = useState<string>('');
const [items, setItems] = useState<string[]>([]);
const search = (event: AutoCompleteCompleteEvent) => {
setItems([...Array(10).keys()].map(item => event.query + '-' + item));
}
return (
<div className="card flex justify-content-center">
<AutoComplete
value={value}
suggestions={items}
completeMethod={search}
onChange={(e) => setValue(e.value)}
pt={{
input: { root: { className: 'w-16rem' } },
item: ({ context }) => ({
className: context.selected ? 'bg-primary-300' : undefined
})
}}
/>
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card flex justify-content-center">
<AutoComplete
value={value}
suggestions={items}
completeMethod={search}
onChange={(e) => setValue(e.value)}
pt={{
input: { root: { className: 'w-16rem' } },
item: ({ context }) => ({
className: context.selected ? 'bg-primary-300' : undefined
})
}}
/>
</div>
<DocSectionCode code={code} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/autocomplete/pt/wireframe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {
return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="autocomplete" />
</div>
</>
);
};
92 changes: 92 additions & 0 deletions components/doc/calendar/pt/ptdoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { useState } from 'react';
import { Calendar } from '../../../lib/calendar/Calendar';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const [date, setDate] = useState(null);

const code = {
basic: `
<Calendar
value={date}
onChange={(e) => setDate(e.value)}
showIcon
pt={{
input: { className: 'w-16rem' },
dropdownButton: {
root: { className: 'bg-teal-500 border-teal-500' }
}
}}
/>
`,
javascript: `
import React, { useState } from "react";
import { Calendar } from 'primereact/calendar';
export default function PTDemo() {
const [date, setDate] = useState(null);
return (
<div className="card flex justify-content-center">
<Calendar
value={date}
onChange={(e) => setDate(e.value)}
showIcon
pt={{
input: { className: 'w-16rem' },
dropdownButton: {
root: { className: 'bg-teal-500 border-teal-500' }
}
}}
/>
</div>
)
}
`,
typescript: `
import React, { useState } from "react";
import { Calendar, CalendarChangeEvent } from 'primereact/calendar';
export default function PTDemo() {
const [date, setDate] = useState<string | Date | Date[] | null>(null);
return (
<div className="card flex justify-content-center">
<Calendar
value={date}
onChange={(e) => setDate(e.value)}
showIcon
pt={{
input: { className: 'w-16rem' },
dropdownButton: {
root: { className: 'bg-teal-500 border-teal-500' }
}
}}
/>
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card flex justify-content-center">
<Calendar
value={date}
onChange={(e) => setDate(e.value)}
showIcon
pt={{
input: { className: 'w-16rem' },
dropdownButton: {
root: { className: 'bg-teal-500 border-teal-500' }
}
}}
/>
</div>
<DocSectionCode code={code} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/calendar/pt/wireframe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {
return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="calendar" />
</div>
</>
);
};
Loading

0 comments on commit e78e22d

Please sign in to comment.