import { TypedField, FieldType, OneButton } from "react-declarative";
declare var StockChart;
const HEADER_HEIGHT = 48;
const header_fields: TypedField[] = [
{
type: FieldType.Box,
sx: {
display: 'grid',
gridTemplateColumns: 'auto 1fr auto',
alignItems: 'center',
mb: 1,
},
fields: [
{
type: FieldType.Typography,
fieldBottomMargin: "0",
placeholder: "Stonks",
typoVariant: 'h6',
style: {
fontWeight: 'bold',
},
},
{
type: FieldType.Div,
},
{
type: FieldType.Box,
desktopHidden: true,
child: {
type: FieldType.Component,
sx: {
display: {
xs: "inherit",
md: "none",
},
},
element: ({
_fieldData,
onChange,
}) => (
Filters
),
},
}
],
},
];
const filter_fields: TypedField[] = [
{
name: "PERCENT_PRICE",
type: FieldType.Text,
},
{
name: "LOT_SIZE",
type: FieldType.Text,
},
{
name: "MARKET_LOT_SIZE",
type: FieldType.Text,
},
{
name: "MIN_NOTIONAL",
type: FieldType.Text,
},
{
name: "PRICE_FILTER",
type: FieldType.Text,
},
{
name: "MAX_NUM_ORDERS",
type: FieldType.Text,
}
];
export const fields: TypedField[] = [
{
type: FieldType.Group,
sx: {
height: 'calc(100dvh - 16px)',
},
fields: [
...header_fields,
{
type: FieldType.Outline,
fieldRightMargin: '1',
innerPadding: '4px',
desktopColumns: '4',
tabletHidden: true,
phoneHidden: true,
fields: filter_fields,
},
{
type: FieldType.Component,
desktopColumns: '8',
tabletColumns: '12',
phoneColumns: '12',
sx: {
height: `calc(100% - ${HEADER_HEIGHT}px)`,
},
element: () => (
),
}
]
},
];