@datalayer/core
Version:
[](https://datalayer.io)
29 lines (28 loc) • 2.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useState } from 'react';
import { Box, FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading, } from '@primer/react';
export const FormMock = (props) => {
const { title } = props;
const [tokens, setTokens] = useState([
{ text: 'zero', id: '0' },
{ text: 'one', id: '1' },
{ text: 'two', id: '2' },
]);
const onTokenRemove = tokenId => {
setTokens(tokens.filter(token => token.id !== tokenId));
};
return (_jsxs(Box, { display: "grid", sx: { gap: 3 }, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
{ text: 'css', id: '0' },
{ text: 'css-in-js', id: '1' },
{ text: 'styled-system', id: '2' },
{ text: 'javascript', id: '3' },
{ text: 'typescript', id: '4' },
{ text: 'react', id: '5' },
{ text: 'design-systems', id: '6' },
], selectedItemIds: [], "aria-labelledby": "" }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select" }), _jsxs(Select, { children: [_jsx(Select.Option, { value: "figma", children: "Figma" }), _jsx(Select.Option, { value: "css", children: "Primer CSS" }), _jsx(Select.Option, { value: "prc", children: "Primer React components" }), _jsx(Select.Option, { value: "pvc", children: "Primer ViewComponents" })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Textarea" }), _jsx(Textarea, {})] })] }));
};
export default FormMock;