@zesty-io/material 0.1.4 → 0.2.0

package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { VirtualizedAutocompleteProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<VirtualizedAutocompleteProps>;

package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import VirtualizedAutocomplete from './';
+export default {
+    title: 'VirtualizedAutocomplete',
+    component: VirtualizedAutocomplete,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState({ component: '- None -', value: '0', inputLabel: '- None -' });
+    const [options, setOptions] = useState([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: _jsx("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, option) => {
+        setValue(option);
+    };
+    return (_jsx(VirtualizedAutocomplete, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    helperText: 'OneToOne helperText',
+    placeholder: 'OneToOne placeholder'
+};

package/es/VitualizedAutocomplete/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { AutocompleteProps } from '@mui/material';
+export interface VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
+    helperText?: string;
+    placeholder?: string;
+    error?: boolean;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    /**
+     * Structure for option
+     */
+    options: {
+        /**
+         * Component to be rendered in the dropdown
+         */
+        component: ReactNode | string;
+        /**
+         * Value of option
+         */
+        value: string;
+        /**
+         * Label that should display in the input when selected
+         */
+        inputLabel: string;
+    }[];
+}
+declare const VirtualizedAutocomplete: ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => JSX.Element;
+export default VirtualizedAutocomplete;

package/es/VitualizedAutocomplete/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popper, styled, TextField, InputAdornment } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+const VirtualizedAutocomplete = ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }) => {
+    return (_jsx(Autocomplete, { fullWidth: true, disableListWrap: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
+                ...params.InputProps,
+                startAdornment: _jsx(InputAdornment, { position: 'end', children: startAdornment }),
+                endAdornment: _jsxs(_Fragment, { children: [params.InputProps.endAdornment, _jsx(InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
+            } })), getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props }));
+};
+export default VirtualizedAutocomplete;
+const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/es/index.d.ts

@@ -6,8 +6,8 @@ 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';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/es/index.js

@@ -6,8 +6,8 @@ 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';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",

package/src/VitualizedAutocomplete/VirtualizedAutocomplete.stories.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, SyntheticEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import VirtualizedAutocomplete, { VirtualizedAutocompleteProps } from './';
+
+export default {
+  title: 'VirtualizedAutocomplete',
+  component: VirtualizedAutocomplete,
+  argType: {},
+} as Meta;
+
+const Template: Story<VirtualizedAutocompleteProps> = (args) => {
+  const [value, setValue] = useState<{component: string | ReactNode, value: string, inputLabel: string}>({component: '- None -', value: '0', inputLabel: '- None -'});
+
+  const [options, setOptions] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
+
+  const handleOnOpen = async () => {
+    const largeArr = new Array(1000).fill(null);
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+    const data = largeArr.map((_, idx) => ({component: <div>{`Test ${idx}`}</div>, value: String(Math.random()), inputLabel: `Test ${idx}`}));
+    setOptions(data);
+  }
+
+  const handleOnChange = (e: SyntheticEvent<Element, Event>, option: {component: string | ReactNode, value: string, inputLabel: string}) => {
+    setValue(option);
+  }
+
+  return (
+    <VirtualizedAutocomplete
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+      onOpen={handleOnOpen}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  helperText: 'OneToOne helperText',
+  placeholder: 'OneToOne placeholder'
+};
+
+
+

package/src/VitualizedAutocomplete/index.tsx

@@ -0,0 +1,69 @@
+import { ReactNode, useState } from 'react';
+import { AutocompleteProps, Popper, styled, TextField, FormLabel, FormControl, InputAdornment } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+
+export interface VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
+  helperText?: string;
+  placeholder?: string;
+  error?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  /**
+   * Structure for option
+   */
+  options: {
+    /**
+     * Component to be rendered in the dropdown
+     */
+    component: ReactNode | string;
+    /**
+     * Value of option
+     */
+    value: string;
+    /**
+     * Label that should display in the input when selected
+     */
+    inputLabel: string;
+  }[]
+}
+
+const VirtualizedAutocomplete = ({helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => {
+  return (
+      <Autocomplete
+        fullWidth
+        disableListWrap
+        size='small'
+        PopperComponent={StyledPopper}
+        ListboxComponent={ListboxComponent}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            helperText={helperText}
+            error={error}
+            placeholder={placeholder}
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: <InputAdornment position='end'>{startAdornment}</InputAdornment>,
+              endAdornment: <>{params.InputProps.endAdornment}<InputAdornment sx={{ position: 'relative', right: '40px'}} position='end'>{endAdornment}</InputAdornment></>
+            }}
+          />
+        )}
+        getOptionLabel={(option) => option.inputLabel}
+        renderOption={(props, option) => [props, option.component]}
+        {...props}
+      />
+  );
+};
+
+export default VirtualizedAutocomplete;
+
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
+    boxSizing: 'border-box',
+    '& ul': {
+      padding: 0,
+      margin: 0,
+    },
+  },
+});

package/src/index.ts

@@ -6,8 +6,8 @@ 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';
+export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/src/FieldTypeDropdown/FieldTypeDropwdon.stories.tsx

@@ -1,52 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import FieldTypeDropdown, { FieldTypeDropdownProps } from './';
-import { MenuItem } from '@mui/material';
-
-export default {
-  title: 'FieldTypeDropdown',
-  component: FieldTypeDropdown,
-  argType: {},
-} as Meta;
-
-const options = [
-  {
-    value: 'option1',
-    label: 'Option 1',
-  },
-  {
-    value: 'option2',
-    label: 'Option 2',
-  },
-  {
-    value: 'option3',
-    label: 'Option 3',
-  },
-];
-
-const Template: Story<FieldTypeDropdownProps> = (args) => {
-  const [value, setValue] = useState('');
-
-  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  }
-
-  return (
-    <FieldTypeDropdown
-      {...args}
-      value={value}
-      onChange={handleOnChange}
-      options={options}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Placeholder Text...',
-  label: 'Dropdown label',
-  helperText: 'Dropdown helper text',
-};
-
-
-

package/src/FieldTypeDropdown/index.tsx

@@ -1,41 +0,0 @@
-import { MenuItem } from '@mui/material';
-import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { FormControl, FormLabel } from '@mui/material';
-
-interface Option {
-  label: string;
-  value: any;
-}
-
-export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-  options: Option[];
-}
-
-const FieldTypeDropdown = ({label, options, required, ...props }: FieldTypeDropdownProps) => {
-
-  return (
-    <FormControl fullWidth required={required}>
-      <FormLabel>{label}</FormLabel>
-      <MuiTextField
-        size="small"
-        variant='outlined'
-        select
-        SelectProps={{
-          displayEmpty: true,
-        }}
-        {...props}
-      >
-        <MenuItem key={''} value={''}>
-          - None -
-        </MenuItem>
-        {options.map((option) => (
-          <MenuItem key={option.value} value={option.value}>
-            {option.label}
-          </MenuItem>
-      ))}
-      </MuiTextField>
-    </FormControl>
-  );
-};
-
-export default FieldTypeDropdown;