Skip to content

Commit

Permalink
Merge pull request #2387 from gluestack/fix/icon-fill
Browse files Browse the repository at this point in the history 
feat: updated primitiveIcon component
  • Loading branch information
@Viraj-10
Viraj-10 authored Aug 20, 2024
2 parents a2e218b + d93b6f2 commit bdc3b5e
Show file tree
Hide file tree
Showing 10 changed files with 244 additions and 464 deletions.
70 changes: 24 additions & 46 deletions example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,54 +119,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
const PrimitiveIcon = React.forwardRef<
React.ElementRef<typeof Svg>,
IPrimitiveIcon
>(
(
{
height,
width,
fill,
color,
size,
stroke = 'currentColor',
as: AsComp,
...props
},
ref
) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

const colorProps =
stroke === 'currentColor' && color !== undefined ? color : stroke;
>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

if (AsComp) {
return (
<AsComp
ref={ref}
fill={fill}
{...props}
{...sizeProps}
stroke={colorProps}
/>
);
}
return (
<Svg
ref={ref}
height={height}
width={width}
fill={fill}
stroke={colorProps}
{...props}
/>
);
let colorProps = {};
if (color) {
colorProps = { ...colorProps, color: color };
}
);
if (stroke) {
colorProps = { ...colorProps, stroke: stroke };
}
if (fill) {
colorProps = { ...colorProps, fill: fill };
}
if (AsComp) {
return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
}
return (
<Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
);
});

const IconWrapper = React.forwardRef<
React.ElementRef<typeof PrimitiveIcon>,
Expand Down
72 changes: 25 additions & 47 deletions example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,54 +107,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
const PrimitiveIcon = React.forwardRef<
React.ElementRef<typeof Svg>,
IPrimitiveIcon
>(
(
{
height,
width,
fill,
color,
size,
stroke = 'currentColor',
as: AsComp,
...props
},
ref
) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

const colorProps =
stroke === 'currentColor' && color !== undefined ? color : stroke;

if (AsComp) {
return (
<AsComp
ref={ref}
fill={fill}
{...props}
{...sizeProps}
stroke={colorProps}
/>
);
}
return (
<Svg
ref={ref}
height={height}
width={width}
fill={fill}
stroke={colorProps}
{...props}
/>
);
>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

let colorProps = {};
if (color) {
colorProps = { ...colorProps, color: color };
}
if (stroke) {
colorProps = { ...colorProps, stroke: stroke };
}
if (fill) {
colorProps = { ...colorProps, fill: fill };
}
if (AsComp) {
return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
}
);
return (
<Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
);
});

const ContextView = withStyleContext(View, SCOPE);
cssInterop(ContextView, { className: 'style' });
Expand Down
70 changes: 24 additions & 46 deletions example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,54 +49,32 @@ const IconWrapper = React.forwardRef<
const PrimitiveIcon = React.forwardRef<
React.ElementRef<typeof Svg>,
IPrimitiveIcon
>(
(
{
height,
width,
fill,
color,
size,
stroke = 'currentColor',
as: AsComp,
...props
},
ref
) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

const colorProps =
stroke === 'currentColor' && color !== undefined ? color : stroke;
>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

if (AsComp) {
return (
<AsComp
ref={ref}
fill={fill}
{...props}
{...sizeProps}
stroke={colorProps}
/>
);
}
return (
<Svg
ref={ref}
height={height}
width={width}
fill={fill}
stroke={colorProps}
{...props}
/>
);
let colorProps = {};
if (color) {
colorProps = { ...colorProps, color: color };
}
);
if (stroke) {
colorProps = { ...colorProps, stroke: stroke };
}
if (fill) {
colorProps = { ...colorProps, fill: fill };
}
if (AsComp) {
return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
}
return (
<Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
);
});

const SCOPE = 'CHECKBOX';
const UICheckbox = createCheckbox({
Expand Down
70 changes: 24 additions & 46 deletions example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,54 +27,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
const PrimitiveIcon = React.forwardRef<
React.ElementRef<typeof Svg>,
IPrimitiveIcon
>(
(
{
height,
width,
fill,
color,
size,
stroke = 'currentColor',
as: AsComp,
...props
},
ref
) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

const colorProps =
stroke === 'currentColor' && color !== undefined ? color : stroke;
>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

if (AsComp) {
return (
<AsComp
ref={ref}
fill={fill}
{...props}
{...sizeProps}
stroke={colorProps}
/>
);
}
return (
<Svg
ref={ref}
height={height}
width={width}
fill={fill}
stroke={colorProps}
{...props}
/>
);
let colorProps = {};
if (color) {
colorProps = { ...colorProps, color: color };
}
);
if (stroke) {
colorProps = { ...colorProps, stroke: stroke };
}
if (fill) {
colorProps = { ...colorProps, fill: fill };
}
if (AsComp) {
return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
}
return (
<Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
);
});

const SCOPE = 'FAB';
const UIFab = createFab({
Expand Down
72 changes: 25 additions & 47 deletions example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,54 +27,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
const PrimitiveIcon = React.forwardRef<
React.ElementRef<typeof Svg>,
IPrimitiveIcon
>(
(
{
height,
width,
fill,
color,
size,
stroke = 'currentColor',
as: AsComp,
...props
},
ref
) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

const colorProps =
stroke === 'currentColor' && color !== undefined ? color : stroke;

if (AsComp) {
return (
<AsComp
ref={ref}
fill={fill}
{...props}
{...sizeProps}
stroke={colorProps}
/>
);
}
return (
<Svg
ref={ref}
height={height}
width={width}
fill={fill}
stroke={colorProps}
{...props}
/>
);
>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
const sizeProps = useMemo(() => {
if (size) return { size };
if (height && width) return { height, width };
if (height) return { height };
if (width) return { width };
return {};
}, [size, height, width]);

let colorProps = {};
if (color) {
colorProps = { ...colorProps, color: color };
}
if (stroke) {
colorProps = { ...colorProps, stroke: stroke };
}
);
if (fill) {
colorProps = { ...colorProps, fill: fill };
}
if (AsComp) {
return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
}
return (
<Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
);
});

const formControlStyle = tva({
base: 'flex flex-col',
Expand Down
Loading

0 comments on commit bdc3b5e

Please sign in to comment.