Skip to content

Commit

Permalink
fix: created Autocomplete wrapper component
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinGhadyani-Okta committed Apr 17, 2023
1 parent ff432c0 commit dbb1210
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 52 deletions.
83 changes: 83 additions & 0 deletions packages/odyssey-react-mui/src/Autocomplete.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*!
* Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
*
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*
* See the License for the specific language governing permissions and limitations under the License.
*/

import {
Autocomplete as MuiAutocomplete,
AutocompleteProps as MuiAutocompleteProps,
InputBase,
} from "@mui/material";
import { memo, useCallback } from "react";

import { Field } from "./Field";

export type AutocompleteProps<OptionType> = {
isDisabled?: boolean;
hint?: string;
label: string;
onChange?: MuiAutocompleteProps<OptionType, undefined, undefined, undefined>;
options: OptionType[];
value?: OptionType | null;
};

// <TextField
// {...params}
// endAdornment={params.InputProps.endAdornment}
// hint={hint}
// label={label}
// ref={params.InputProps.ref}
// startAdornment={params.InputProps.startAdornment}
// />

const Autocomplete = <OptionType,>({
isDisabled,
hint,
label,
onChange,
options,
value,
}: AutocompleteProps<OptionType>) => {
const renderInput = useCallback(
(params) => (
<Field
hasVisibleLabel
hint={hint}
// id={params.InputLabelProps.id} // Pretty sure this is unnecessary -Kevin
label={label}
renderFieldComponent={({ ariaDescribedBy, id }) => (
<InputBase
{...params}
{...params.InputProps}
aria-describedby={ariaDescribedBy}
id={id}
/>
)}
/>
),
[hint, label]
);

return (
<MuiAutocomplete
disabled={isDisabled}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
/* @ts-ignore TEMP */ // PLEASE REMOVE once we figure out the correct type.
onChange={onChange}
options={options}
renderInput={renderInput}
value={value}
/>
);
};

const MemoizedAutocomplete = memo(Autocomplete);

export { MemoizedAutocomplete as Autocomplete };
3 changes: 1 addition & 2 deletions packages/odyssey-react-mui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
export {
Alert,
AlertTitle,
Autocomplete,
Box,
Button,
Chip,
Expand Down Expand Up @@ -67,7 +66,6 @@ export {
export type {
AlertProps,
AlertTitleProps,
AutocompleteProps,
BoxProps,
ButtonProps,
ChipProps,
Expand Down Expand Up @@ -126,6 +124,7 @@ export { default as FavoriteIcon } from "@mui/icons-material/Favorite";

export { deepmerge, visuallyHidden } from "@mui/utils";

export * from "./Autocomplete";
export * from "./Banner";
export * from "./Checkbox";
export * from "./CheckboxGroup";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

import { Autocomplete, TextField, TextFieldMui } from "@okta/odyssey-react-mui";
import { Autocomplete } from "@okta/odyssey-react-mui";
import { ComponentMeta, ComponentStory } from "@storybook/react";

import { MuiThemeDecorator } from "../../../../.storybook/components";
Expand All @@ -25,30 +25,30 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
},
},
argTypes: {
disabled: {
control: "boolean",
defaultValue: false,
},
freeSolo: {
control: "boolean",
defaultValue: false,
},
includeInputInList: {
control: "boolean",
defaultValue: false,
},
loading: {
control: "boolean",
defaultValue: false,
},
multiple: {
control: "boolean",
defaultValue: false,
},
readOnly: {
isDisabled: {
control: "boolean",
defaultValue: false,
},
// freeSolo: {
// control: "boolean",
// defaultValue: false,
// },
// includeInputInList: {
// control: "boolean",
// defaultValue: false,
// },
// loading: {
// control: "boolean",
// defaultValue: false,
// },
// multiple: {
// control: "boolean",
// defaultValue: false,
// },
// readOnly: {
// control: "boolean",
// defaultValue: false,
// },
},
decorators: [MuiThemeDecorator],
};
Expand Down Expand Up @@ -188,17 +188,9 @@ const Template: ComponentStory<typeof Autocomplete> = (args) => {
return (
<Autocomplete
{...args}
hint="Select your favorite movie"
label="Movie"
options={top100Films}
renderInput={(params) => (
<TextField
{...params}
endAdornment={params.InputProps.endAdornment}
hint="Select your favorite movie"
label="Movie"
ref={params.InputProps.ref}
startAdornment={params.InputProps.startAdornment}
/>
)}
/>
);
};
Expand All @@ -208,16 +200,16 @@ const EmptyTemplate: ComponentStory<typeof Autocomplete> = (args) => {
<Autocomplete
{...args}
options={[]}
renderInput={(params) => (
<TextField
{...params}
endAdornment={params.InputProps.endAdornment}
hint="Select your favorite movie"
label="Movie"
ref={params.InputProps.ref}
startAdornment={params.InputProps.startAdornment}
/>
)}
// renderInput={(params) => (
// <TextField
// {...params}
// endAdornment={params.InputProps.endAdornment}
// hint="Select your favorite movie"
// label="Movie"
// ref={params.InputProps.ref}
// startAdornment={params.InputProps.startAdornment}
// />
// )}
/>
);
};
Expand All @@ -227,7 +219,7 @@ const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
<Autocomplete
{...args}
options={top100Films}
renderInput={(params) => <TextFieldMui {...params} label="Movie" />}
// renderInput={(params) => <MuiTextField {...params} label="Movie" />}
/>
);
};
Expand All @@ -237,33 +229,33 @@ Default.args = {};

export const disabled = Template.bind({});
disabled.args = {
disabled: true,
// disabled: true,
value: "The Godfather",
};

export const freeSolo = Template.bind({});
freeSolo.args = {
freeSolo: true,
// freeSolo: true,
};

export const includeInputInList = Template.bind({});
includeInputInList.args = {
includeInputInList: true,
// includeInputInList: true,
};

export const loading = EmptyTemplate.bind({});
loading.args = {
loading: true,
// loading: true,
};

export const multiple = Template.bind({});
multiple.args = {
multiple: true,
// multiple: true,
};

export const readOnly = Template.bind({});
readOnly.args = {
readOnly: true,
// readOnly: true,
value: "The Godfather",
};

Expand All @@ -272,5 +264,5 @@ MaterialSingle.args = {};

export const MaterialMultiple = MuiTemplate.bind({});
MaterialMultiple.args = {
multiple: true,
// multiple: true,
};

0 comments on commit dbb1210

Please sign in to comment.