Skip to content

Commit

Permalink
fix: repair spin classname is invalid without tip
Browse files Browse the repository at this point in the history
  • Loading branch information
@zyfwudi
zyfwudi committed Oct 30, 2024
1 parent ee3ee5b commit fa8a069
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 32 deletions.
4 changes: 2 additions & 2 deletions packages/base/src/spin/base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { BaseSpinProps } from './spin.type';
const { range } = util;

const Spin = (props: BaseSpinProps) => {
const { count = 0, render, size: sizeProps, className, jssStyle } = props;
const { count = 0, render, size: sizeProps, className, uniqueClassName, jssStyle } = props;
const styles = jssStyle?.spin?.();
const config = useConfig();

Expand All @@ -28,7 +28,7 @@ const Spin = (props: BaseSpinProps) => {
props.style,
);

const classname = classNames(className, styles?.spin);
const classname = classNames(className, styles?.spin, uniqueClassName);

if (count < 1 || !render) {
return <div style={style} className={classname} />;
Expand Down
2 changes: 1 addition & 1 deletion packages/base/src/spin/spin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const Spin = (props: SpinProps = {}) => {
const n = name as keyof typeof Spins;
if (Spins[n]) {
const Comp = Spins[n];
return <Comp {...props} color={color} style={style} />;
return <Comp {...props} color={color} style={style} className={!tip ? className : undefined} />;
}

return null;
Expand Down
1 change: 1 addition & 0 deletions packages/base/src/spin/spin.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export interface BaseSpinProps {
itemClass?: string;
itemSize?: number | string;
className?: string;
uniqueClassName?: string
}

export interface SpinProps extends Pick<CommonType, 'className' | 'style'> {
Expand Down
26 changes: 13 additions & 13 deletions packages/base/src/spin/spins.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Default = (props: SpinProps) => {
return (
<BaseSpin
{...props}
className={spinStyles.default}
uniqueClassName={spinStyles.default}
count={12}
itemStyle={{ width: sizeSet, borderRadius: sizeSet }}
render={renderItem}
Expand All @@ -60,7 +60,7 @@ const ChasingDots = (props: SpinProps) => {
<BaseSpin
{...props}
count={2}
className={spinStyles.chasingDots}
uniqueClassName={spinStyles.chasingDots}
render={renderSvgItem}
></BaseSpin>
);
Expand All @@ -71,7 +71,7 @@ const CubeGrid = (props: SpinProps) => {
const spinStyles = jssStyle?.spin?.() || ({} as SpinClasses);

return (
<BaseSpin {...props} count={9} className={spinStyles.cubeGrid} render={renderSimpleItem} />
<BaseSpin {...props} count={9} uniqueClassName={spinStyles.cubeGrid} render={renderSimpleItem} />
);
};

Expand All @@ -80,7 +80,7 @@ const DoubleBounce = (props: SpinProps) => {
const spinStyles = jssStyle?.spin?.() || ({} as SpinClasses);

return (
<BaseSpin {...props} count={2} className={spinStyles.doubleBounce} render={renderSimpleItem} />
<BaseSpin {...props} count={2} uniqueClassName={spinStyles.doubleBounce} render={renderSimpleItem} />
);
};

Expand All @@ -94,7 +94,7 @@ const FadingCircle = (props: SpinProps) => {
<BaseSpin
{...props}
count={12}
className={spinStyles.fadingCircle}
uniqueClassName={spinStyles.fadingCircle}
itemSize={itemSize}
itemClass={classNames(spinStyles.fade)}
render={renderSvgItem}
Expand All @@ -112,7 +112,7 @@ const ScaleCircle = (props: SpinProps) => {
<BaseSpin
{...props}
count={12}
className={spinStyles.fadingCircle}
uniqueClassName={spinStyles.fadingCircle}
itemSize={itemSize}
itemClass={classNames(spinStyles.scaleCircle)}
render={renderSvgItem}
Expand All @@ -124,7 +124,7 @@ const FourDots = (props: SpinProps) => {
const { jssStyle } = props;
const spinStyles = jssStyle?.spin?.() || ({} as SpinClasses);

return <BaseSpin {...props} count={4} className={spinStyles.fourDots} render={renderSvgItem} />;
return <BaseSpin {...props} count={4} uniqueClassName={spinStyles.fourDots} render={renderSvgItem} />;
};

const Plane = (props: SpinProps) => {
Expand All @@ -134,7 +134,7 @@ const Plane = (props: SpinProps) => {
};
const spinStyles = jssStyle?.spin?.() || ({} as SpinClasses);

return <BaseSpin {...props} count={0} style={style} className={spinStyles.plane} />;
return <BaseSpin {...props} count={0} style={style} uniqueClassName={spinStyles.plane} />;
};

const Pulse = (props: SpinProps) => {
Expand All @@ -144,7 +144,7 @@ const Pulse = (props: SpinProps) => {
};
const spinStyles = jssStyle?.spin?.() || ({} as SpinClasses);

return <BaseSpin {...props} count={0} style={style} className={spinStyles.pulse} />;
return <BaseSpin {...props} count={0} style={style} uniqueClassName={spinStyles.pulse} />;
};

const Ring = (props: SpinProps) => {
Expand All @@ -161,7 +161,7 @@ const Ring = (props: SpinProps) => {
fontSize: value / 10 + unit,
};

return <BaseSpin {...props} count={0} style={style} className={spinStyles.ring} />;
return <BaseSpin {...props} count={0} style={style} uniqueClassName={spinStyles.ring} />;
};

const ThreeBounce = (props: SpinProps) => {
Expand All @@ -175,7 +175,7 @@ const ThreeBounce = (props: SpinProps) => {
count={3}
itemSize={value / 2 + unit}
style={{ width: value * 2 + unit, height: 'auto' }}
className={spinStyles.threeBounce}
uniqueClassName={spinStyles.threeBounce}
render={renderSvgItem}
/>
);
Expand All @@ -201,7 +201,7 @@ const Wave = (props: SpinProps) => {
{...props}
itemStyle={{ width: width + unit, marginRight: margin }}
count={5}
className={spinStyles.wave}
uniqueClassName={spinStyles.wave}
render={renderSimpleItem}
/>
);
Expand All @@ -220,7 +220,7 @@ const ChasingRing = (props: SpinProps) => {
{...props}
count={4}
itemStyle={style}
className={spinStyles.chasingRing}
uniqueClassName={spinStyles.chasingRing}
render={renderSimpleItem}
/>
);
Expand Down
32 changes: 16 additions & 16 deletions packages/shineout/src/spin/__test__/__snapshots__/spin.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Spin[Base] should render correctly 1`] = `
style="width: 20px;"
>
<div
class="soui-spin-chasing-dots soui-spin-spin"
class="soui-spin-spin soui-spin-chasing-dots"
style="width: 40px; height: 40px;"
>
<div
Expand Down Expand Up @@ -52,7 +52,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-chasing-dots soui-spin-spin"
class="soui-spin-spin soui-spin-chasing-dots"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -100,7 +100,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-cube-grid soui-spin-spin"
class="soui-spin-spin soui-spin-cube-grid"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -149,7 +149,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-double-bounce soui-spin-spin"
class="soui-spin-spin soui-spin-double-bounce"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-fading-circle soui-spin-spin"
class="soui-spin-spin soui-spin-fading-circle"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -379,7 +379,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-four-dots soui-spin-spin"
class="soui-spin-spin soui-spin-four-dots"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -453,7 +453,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-plane soui-spin-spin"
class="soui-spin-spin soui-spin-plane"
style="width: 16px; height: 16px;"
/>
<div
Expand All @@ -478,7 +478,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-pulse soui-spin-spin"
class="soui-spin-spin soui-spin-pulse"
style="width: 16px; height: 16px;"
/>
<div
Expand All @@ -499,7 +499,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-ring soui-spin-spin"
class="soui-spin-spin soui-spin-ring"
style="width: 16px; height: 16px; border-width: 1.6px; font-size: 1.6px;"
/>
<div
Expand All @@ -520,7 +520,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-fading-circle soui-spin-spin"
class="soui-spin-spin soui-spin-fading-circle"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -722,7 +722,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-three-bounce soui-spin-spin"
class="soui-spin-spin soui-spin-three-bounce"
style="width: 32px; height: auto;"
>
<div
Expand Down Expand Up @@ -789,7 +789,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-wave soui-spin-spin"
class="soui-spin-spin soui-spin-wave"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -831,7 +831,7 @@ exports[`Spin[Base] should render correctly 2`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-chasing-ring soui-spin-spin"
class="soui-spin-spin soui-spin-chasing-ring"
style="width: 16px; height: 16px;"
>
<div
Expand Down Expand Up @@ -877,7 +877,7 @@ exports[`Spin[Mode] should render correctly 1`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-ring soui-spin-spin"
class="soui-spin-spin soui-spin-ring"
style="width: 16px; height: 16px; border-width: 1.6px; font-size: 1.6px;"
/>
<div
Expand All @@ -898,7 +898,7 @@ exports[`Spin[Mode] should render correctly 1`] = `
class="soui-spin-content soui-spin-horizontal"
>
<div
class="soui-spin-ring soui-spin-spin"
class="soui-spin-spin soui-spin-ring"
style="width: 16px; height: 16px; border-width: 1.6px; font-size: 1.6px;"
/>
<div
Expand All @@ -923,7 +923,7 @@ exports[`Spin[Tip] should render correctly 1`] = `
class="soui-spin-content soui-spin-vertical"
>
<div
class="soui-spin-ring soui-spin-spin"
class="soui-spin-spin soui-spin-ring"
style="width: 24px; height: 24px; border-width: 2.4px; font-size: 2.4px;"
/>
<div
Expand Down

0 comments on commit fa8a069

Please sign in to comment.