Skip to content

Commit

Permalink
Re-use types from AutoFill to InfiniteAutoFill
Browse files Browse the repository at this point in the history
  • Loading branch information
tworrisb committed Jan 29, 2024
1 parent c5af9cd commit 09c9721
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 16 deletions.
2 changes: 2 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=ad280b89-8fbf-46fa-9867-302322778e1b
2 changes: 1 addition & 1 deletion src/components/AutoFill/AutoFill.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Fills components vertically.
function DemoComponent() {
return (
<div style={{ height: 1000, outline: '1px solid black' }}>
<AutoFill>
<AutoFill axis="y">
<div style={{ padding: 15 }}>
<div style={{ width: 50, outline: '1px solid red' }}>Child</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/AutoFill/AutoFill.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ type AutoFillChildrenProps = {
ref: RefCallback<unknown>;
};

type AutoFillProps = {
export type AutoFillProps = {
children:
| ReactElement<AutoFillChildrenProps>
| ReadonlyArray<ReactElement<AutoFillChildrenProps>>;
Expand Down
5 changes: 3 additions & 2 deletions src/components/InfiniteAutoFill/InfiniteAutoFill.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import * as stories from './InfiniteAutoFill.stories';
# InfiniteAutoFill

Uses the AutoFill to repeat children to fill the parent element in given axis. In addition to that
it adds the children one more time to the end of the list. This can be useful for example marquee's.
it adds the children one more time to the end of the list. This can be useful for example marquees
or infinite carousels.

## Reference

Expand Down Expand Up @@ -49,7 +50,7 @@ Fills components vertically + one extra.
function DemoComponent() {
return (
<div style={{ height: 1000, outline: '1px solid black' }}>
<InfiniteAutoFill>
<InfiniteAutoFill axis="y">
<div style={{ padding: 15 }}>
<div style={{ width: 50, outline: '1px solid red' }}>Child</div>
</div>
Expand Down
15 changes: 3 additions & 12 deletions src/components/InfiniteAutoFill/InfiniteAutoFill.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import { type ReactElement, type RefCallback } from 'react';
import { type ComponentProps, type ReactElement } from 'react';
import { AutoFill } from '../../index.js';

type InfiniteAutoFillChildrenProps = {
ref: RefCallback<unknown>;
};

type InfiniteAutoFillProps = {
children:
| ReactElement<InfiniteAutoFillChildrenProps>
| ReadonlyArray<ReactElement<InfiniteAutoFillChildrenProps>>;
axis?: 'x' | 'y';
};
type InfiniteAutoFillProps = ComponentProps<typeof AutoFill>;

/**
* Repeats children to fill the parent element in given axis.
*/
export function InfiniteAutoFill({ children, axis = 'x' }: InfiniteAutoFillProps): ReactElement {
export function InfiniteAutoFill({ children, axis }: InfiniteAutoFillProps): ReactElement {
return (
<>
<AutoFill axis={axis}>{children}</AutoFill>
Expand Down

0 comments on commit 09c9721

Please sign in to comment.