@zesty-io/material 0.0.4 → 0.1.2

package/src/FieldTypeUrl/index.tsx

@@ -1,6 +1,6 @@
-import React, { ChangeEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
+import { FormControl, FormLabel, Box } from '@mui/material';
 
 export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
    /**
@@ -11,39 +11,32 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
   value: string;
 }
 
-const FieldTypeUrl = ({maxLength = 2000, value, helperText, InputProps, InputLabelProps, inputProps, ...props }: FieldTypeUrlProps) => {
+const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
+    <FormControl fullWidth required={required}>
+      {/* Sets flex order to make appended required asterisk properly positioned */}
+      <FormLabel sx={{display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': {order: 2}}}>
+        <Box sx={{ order: 1}}>{label}</Box> 
+        <Box sx={{ order: 3, flex: 1, textAlign: 'right'}}>{value?.length}/{maxLength}</Box>
+      </FormLabel>
       <MuiTextField
         size="small"
         type='url'
         variant='outlined'
         value={value}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <>{value.length}/{maxLength}</>
-            </InputAdornment>
-          ),
-          // Spread props at the end to allow Input prop overrides
-          ...InputProps,
-        }}
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
         inputProps={{
           ref: inputRef,
           // Spread props at the end to allow inputProps prop overrides
           ...inputProps,
         }}
-        error={(value && !inputRef.current?.validity.valid) || value.length > maxLength}
-        helperText={value.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText}
+        error={(value && !inputRef.current?.validity.valid) || value?.length > maxLength}
+        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 

package/src/index.ts

@@ -1,2 +1,13 @@
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
+export { default as FieldTypeSort } from './FieldTypeSort';
+export { default as FieldTypeUrl } from './FieldTypeUrl';
+export { default as FieldTypeDate } from './FieldTypeDate';
+export { default as FieldTypeDateTime } from './FieldTypeDateTime';
+export { default as FieldTypeColor } from './FieldTypeColor';
+export { default as FieldTypeNumber } from './FieldTypeNumber';
+export { default as FieldTypeDropdown } from './FieldTypeDropdown';
+export { default as FieldTypeOneToOne} from './FieldTypeOneToOne';
+export { default as FieldTypeOneToMany} from './FieldTypeOneToMany';
+export { default as CopyButton } from './CopyButton';
+export { default as ConfirmDialog } from './ConfirmDialog';

package/src/theme/index.ts

@@ -13,8 +13,8 @@ theme = createTheme(theme, {
       styleOverrides: {
         root: {
           minWidth: 'auto',
-        }
-      }
+        },
+      },
     },
     MuiTooltip: {
       styleOverrides: {
@@ -36,9 +36,22 @@ theme = createTheme(theme, {
         },
       },
     },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.primary.dark,
+        },
+        asterisk: {
+          color: theme.palette.error.main,
+        }
+      },
+    },
     MuiToggleButton: {
       styleOverrides: {
         root: ({ ownerState, theme }: any) => ({
+          backgroundColor: `${
+            theme.palette[ownerState.color].contrastText
+          } !important`,
           ...(ownerState.selected && {
             color: `${theme.palette[ownerState.color].contrastText} !important`,
             backgroundColor: `${

package/src/utils/virtualization.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import ListSubheader from '@mui/material/ListSubheader';
+import { useTheme } from '@mui/material/styles';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
+import Typography from '@mui/material/Typography';
+
+const LISTBOX_PADDING = 8; // px
+
+function renderRow(props: ListChildComponentProps) {
+  const { data, index, style } = props;
+  const dataSet = data[index];
+  const inlineStyle = {
+    ...style,
+    top: (style.top as number) + LISTBOX_PADDING,
+  };
+
+  if (dataSet.hasOwnProperty('group')) {
+    return (
+      <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
+        {dataSet.group}
+      </ListSubheader>
+    );
+  }
+
+  return (
+    <Typography component="li" {...dataSet[0]} noWrap style={inlineStyle}>
+      {dataSet[1]}
+    </Typography>
+  );
+}
+
+const OuterElementContext = React.createContext({});
+
+const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
+  const outerProps = React.useContext(OuterElementContext);
+  return <div ref={ref} {...props} {...outerProps} />;
+});
+
+function useResetCache(data: any) {
+  const ref = React.useRef<VariableSizeList>(null);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+
+// Adapter for react-window
+export const ListboxComponent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLElement>
+>(function ListboxComponent(props, ref) {
+  const { children, ...other } = props;
+  const itemData: React.ReactChild[] = [];
+  (children as React.ReactChild[]).forEach(
+    (item: React.ReactChild & { children?: React.ReactChild[] }) => {
+      itemData.push(item);
+      itemData.push(...(item.children || []));
+    },
+  );
+
+  const theme = useTheme();
+  const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+    noSsr: true,
+  });
+  const itemCount = itemData.length;
+  const itemSize = smUp ? 36 : 48;
+
+  const getChildSize = (child: React.ReactChild) => {
+    if (child.hasOwnProperty('group')) {
+      return 48;
+    }
+
+    return itemSize;
+  };
+
+  const getHeight = () => {
+    if (itemCount > 8) {
+      return 8 * itemSize;
+    }
+    return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+  };
+
+  const gridRef = useResetCache(itemCount);
+
+  return (
+    <div ref={ref}>
+      <OuterElementContext.Provider value={other}>
+        <VariableSizeList
+          itemData={itemData}
+          height={getHeight() + 2 * LISTBOX_PADDING}
+          width="100%"
+          ref={gridRef}
+          outerElementType={OuterElementType}
+          innerElementType="ul"
+          itemSize={(index: any) => getChildSize(itemData[index])}
+          overscanCount={5}
+          itemCount={itemCount}
+        >
+          {renderRow}
+        </VariableSizeList>
+      </OuterElementContext.Provider>
+    </div>
+  );
+});