Skip to content

Commit

Permalink
feat(Accordion, Cards, Carousel, Feedback, Sheet, Slider): replace Ar…
Browse files Browse the repository at this point in the history 
…ray with ReadonlyArray in props (#1098)

Issue: [Link](https://jira.tid.es/browse/WEB-1656)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Apr 29, 2024
1 parent dfccad5 commit 22ee93a
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 38 deletions.
32 changes: 17 additions & 15 deletions src/accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import type {TouchableElement} from './touchable';
const ACCORDION_TRANSITION_DURATION_IN_MS = 400;

type AccordionContextType = {
index: Array<number>;
index: ReadonlyArray<number>;
toogle: (item: number) => void;
};
const AccordionContext = React.createContext<AccordionContextType>({
Expand All @@ -50,43 +50,45 @@ const useAccordionState = ({
onChange,
singleOpen,
}: {
value?: number | Array<number>;
defaultValue?: number | Array<number>;
value?: number | ReadonlyArray<number>;
defaultValue?: number | ReadonlyArray<number>;
onChange?: (item: number, value: boolean) => void;
singleOpen?: boolean;
}): [Array<number>, (value: number) => void] => {
}): [ReadonlyArray<number>, (value: number) => void] => {
const isControlledByParent = value !== undefined;

const getValueAsList = (value?: number | Array<number>) => {
const getValueAsList = (value?: number | ReadonlyArray<number>) => {
return value === undefined ? [] : typeof value === 'number' ? [value] : value;
};

const [index, setIndex] = React.useState<Array<number>>(getValueAsList(defaultValue));
const [index, setIndex] = React.useState<ReadonlyArray<number>>(getValueAsList(defaultValue));

React.useEffect(() => {
if (index.length > 1 && singleOpen) {
index.splice(1);
setIndex([...index]);
const newIndex = [...index];
newIndex.splice(1);
setIndex(newIndex);
}
}, [singleOpen, index]);

const updateIndexOnToogle = (item: number, index?: Array<number>) => {
const updateIndexOnToogle = (item: number, index?: ReadonlyArray<number>) => {
if (!index) {
return [item];
}

const valueIndex = index.indexOf(item);
let newIndex = [...index];
if (valueIndex === -1) {
if (singleOpen) {
index = [item];
newIndex = [item];
} else {
index.push(item);
newIndex.push(item);
}
} else {
index.splice(valueIndex, 1);
newIndex.splice(valueIndex, 1);
}

return [...index];
return newIndex;
};

const toggle = (item: number) => {
Expand Down Expand Up @@ -215,8 +217,8 @@ type SingleOpenProps = {

type MultipleOpenProps = {
singleOpen?: false;
index?: number | Array<number>;
defaultIndex?: number | Array<number>;
index?: number | ReadonlyArray<number>;
defaultIndex?: number | ReadonlyArray<number>;
};

type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
Expand Down
12 changes: 6 additions & 6 deletions src/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export type CardAction = {
trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
} & ExclusifyUnion<IconButtonAction | ToggleIconButtonAction>;

const useTopActions = (actions?: Array<CardAction | React.ReactElement>, onClose?: () => void) => {
const useTopActions = (actions?: ReadonlyArray<CardAction | React.ReactElement>, onClose?: () => void) => {
const {texts} = useTheme();
const finalActions = actions ? [...actions] : [];

Expand All @@ -83,7 +83,7 @@ const useTopActions = (actions?: Array<CardAction | React.ReactElement>, onClose
const CardActionTypeContext = React.createContext<'default' | 'inverse' | 'media'>('default');

type CardActionsGroupProps = {
actions?: Array<CardAction | React.ReactElement>;
actions?: ReadonlyArray<CardAction | React.ReactElement>;
onClose?: () => void;
padding?: number;
type?: 'default' | 'inverse' | 'media';
Expand Down Expand Up @@ -475,7 +475,7 @@ interface MediaCardBaseProps {
description?: string;
descriptionLinesMax?: number;
extra?: React.ReactNode;
actions?: Array<CardAction | React.ReactElement>;
actions?: ReadonlyArray<CardAction | React.ReactElement>;
children?: void;
dataAttributes?: DataAttributes;
'aria-label'?: string;
Expand Down Expand Up @@ -772,7 +772,7 @@ interface DataCardBaseProps {
description?: string;
descriptionLinesMax?: number;
extra?: React.ReactNode;
actions?: Array<CardAction | React.ReactElement>;
actions?: ReadonlyArray<CardAction | React.ReactElement>;
aspectRatio?: AspectRatio | number;
children?: void;
/** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
Expand Down Expand Up @@ -986,7 +986,7 @@ interface CommonDisplayCardProps {
* Typically a mistica-icons component element
*/
icon?: React.ReactElement;
actions?: Array<CardAction | React.ReactElement>;
actions?: ReadonlyArray<CardAction | React.ReactElement>;
onClose?: () => void;
dataAttributes?: DataAttributes;
headline?: React.ReactComponentElement<typeof Tag>;
Expand Down Expand Up @@ -1270,7 +1270,7 @@ interface PosterCardBaseProps {
width?: number | string;
height?: number | string;
icon?: React.ReactElement;
actions?: Array<CardAction | React.ReactElement>;
actions?: ReadonlyArray<CardAction | React.ReactElement>;
onClose?: () => void;
dataAttributes?: DataAttributes;
headline?: string | RendersNullableElement<typeof Tag>;
Expand Down
4 changes: 2 additions & 2 deletions src/carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ const normalizeItemsPerPage = (
};
};

const calcPagesScrollPositions = (itemsScrollPosition: ReadonlyArray<number>, numPages: number) => {
const calcPagesScrollPositions = (itemsScrollPosition: Array<number>, numPages: number) => {
if (itemsScrollPosition.length === 0) {
return [];
}
Expand All @@ -220,7 +220,7 @@ const calcPagesScrollPositions = (itemsScrollPosition: ReadonlyArray<number>, nu
return pagesScrollPositions;
};

const calcCurrentPageIndex = (scrollPosition: number, pagesScrollPositions: ReadonlyArray<number>) => {
const calcCurrentPageIndex = (scrollPosition: number, pagesScrollPositions: Array<number>) => {
const middlePageScrollPositions = [];
for (let i = 0; i < pagesScrollPositions.length; i++) {
if (i === 0) {
Expand Down
4 changes: 2 additions & 2 deletions src/community/advanced-data-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,15 +240,15 @@ type AdvancedDataCardProps = MaybeTouchableCard<{
subtitleLinesMax?: number;
description?: string;
descriptionLinesMax?: number;
extra?: Array<RendersNullableElement<AllowedExtra>>;
extra?: ReadonlyArray<RendersNullableElement<AllowedExtra>>;
extraDividerPadding?: 8 | 24;
button?: RendersNullableElement<typeof ButtonPrimary>;
footerImage?: RendersNullableElement<typeof Image>;
footerText?: string;
footerTextLinesMax?: number;
buttonLink?: RendersNullableElement<typeof ButtonLink>;
dataAttributes?: DataAttributes;
actions?: Array<CardAction | React.ReactElement>;
actions?: ReadonlyArray<CardAction | React.ReactElement>;
'aria-label'?: string;
onClose?: () => void;
}>;
Expand Down
2 changes: 1 addition & 1 deletion src/feedback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ type FeedbackButtonsProps = ButtonGroupProps;

interface FeedbackProps extends FeedbackButtonsProps {
title: string;
description?: string | Array<string>;
description?: string | ReadonlyArray<string>;
/**
* @deprecated This field is deprecated, please use extra instead.
*/
Expand Down
4 changes: 2 additions & 2 deletions src/loading-screen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ type TextProps = ExclusifyUnion<
description?: string;
}
| {
texts: Array<{
texts: ReadonlyArray<{
title?: string;
description?: string;
duration?: number;
Expand All @@ -42,7 +42,7 @@ type LoadingScreenTextsProps = {
animateText?: boolean;
isLoading?: boolean;
onClose?: () => void;
texts: Array<{
texts: ReadonlyArray<{
title?: string;
description?: string;
duration?: number;
Expand Down
16 changes: 8 additions & 8 deletions src/sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ const paddingX = {
type SheetBodyProps = {
title?: string;
subtitle?: string;
description?: string | Array<string>;
description?: string | ReadonlyArray<string>;
button?: RendersNullableElement<typeof ButtonPrimary>;
secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
link?: RendersNullableElement<typeof ButtonLink>;
Expand Down Expand Up @@ -393,8 +393,8 @@ export const SheetBody = ({
type RadioListSheetProps = {
title?: string;
subtitle?: string;
description?: string | Array<string>;
items: Array<{
description?: string | ReadonlyArray<string>;
items: ReadonlyArray<{
id: string;
title?: string;
description?: string;
Expand Down Expand Up @@ -487,8 +487,8 @@ export const RadioListSheet = React.forwardRef<HTMLDivElement, RadioListSheetPro
type ActionsListSheetProps = {
title?: string;
subtitle?: string;
description?: string | Array<string>;
items: Array<{
description?: string | ReadonlyArray<string>;
items: ReadonlyArray<{
id: string;
title: string;
style?: 'normal' | 'destructive'; // "normal" by default
Expand Down Expand Up @@ -582,8 +582,8 @@ export const ActionsListSheet = React.forwardRef<HTMLDivElement, ActionsListShee
type InfoSheetProps = {
title?: string;
subtitle?: string;
description?: string | Array<string>;
items: Array<{
description?: string | ReadonlyArray<string>;
items: ReadonlyArray<{
id?: string;
title: string;
description?: string;
Expand Down Expand Up @@ -674,7 +674,7 @@ type ButtonProps = {
type ActionsSheetProps = {
title?: string;
subtitle?: string;
description?: string | Array<string>;
description?: string | ReadonlyArray<string>;
button: ButtonProps;
secondaryButton?: ButtonProps;
buttonLink?: ButtonProps & {withChevron?: boolean};
Expand Down
4 changes: 2 additions & 2 deletions src/slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ interface BaseSliderProps {
}

interface SliderWithValuesProps {
values: Array<number>;
values: ReadonlyArray<number>;
}

interface SliderWithStepProps {
Expand Down Expand Up @@ -69,7 +69,7 @@ const getValueInRange = (isPercentage: boolean, min: number, max: number, step:
: valueRoundedDown;
};

const getClosestValidValue = (min: number, value?: number, values?: Array<number>) => {
const getClosestValidValue = (min: number, value?: number, values?: ReadonlyArray<number>) => {
if (!values) {
return value;
}
Expand Down

1 comment on commit 22ee93a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-3pz7qejlh-flows-projects-65bb050e.vercel.app

Built with commit 22ee93a.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.