Match Demos

components/doc/autocomplete/filleddoc.js

@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function FilledDoc(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)} variant="filled" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function FilledDemo() {
+    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)} variant="filled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function FilledDemo() {
+    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)} variant="filled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}