Skip to content

fix compatibilities for IE/MSEdge #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix compatibilities for IE/MSEdge #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a71ea4d
fix compatibilities for IE/MSEdge
somarlyonks Sep 17, 2018
5387c4b
remove the ua pattern tests and add verticleSpacing
somarlyonks Sep 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ import Circle from 'react-circle';
// All avaliable props for customization(illustrated by default values):
// Details are ordered as: `<Type>: <Description>`
<Circle
animate={true} // Boolean: Animated/Static progress
animationDuration="1s" // String: Length of animation
responsive={false} // Boolean: Make SVG adapt to parent size
animate={true} // Boolean: Animated/Static progress.
animationDuration="1s" // String: Length of animation.
responsive={false} // Boolean: Make SVG adapt to parent size.
size="100" // String: Defines the size of the circle.
lineWidth="25" // String: Defines the thickness of the circle's stroke.
progress="0" // String: Update to change the progress and percentage.
Expand All @@ -54,7 +54,8 @@ import Circle from 'react-circle';
font: 'bold 4rem Helvetica, Arial, sans-serif' // CSSProperties: Custom styling for percentage.
}}
percentSpacing={10} // Number: Adjust spacing of "%" symbol and number.
roundedStroke={false} // Boolean: Rounded/Flat line ends
verticleSpacing="0.34em" // Number/String: Adjust verticle spacing of the text.
roundedStroke={false} // Boolean: Rounded/Flat line ends.
showPercentage={true} // Boolean: Show/hide percentage.
showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.
/>
Expand Down
6 changes: 4 additions & 2 deletions src/circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface CircleProps {
size?: string;
lineWidth?: string;
percentSpacing?: number;
verticleSpacing?: number | string;
textStyle?: CSSProperties;
roundedStroke?: boolean;
responsive?: boolean;
Expand Down Expand Up @@ -40,15 +41,16 @@ export class Circle extends Component<CircleProps, CircleState> {
size: '100',
lineWidth: '25',
percentSpacing: 10,
verticleSpacing: "0.34em",
textStyle: { font: 'bold 4rem Helvetica, Arial, sans-serif' }
}

get text() {
const { progress, showPercentage, textColor, textStyle, percentSpacing, showPercentageSymbol } = this.props;
const { progress, showPercentage, textColor, textStyle, percentSpacing, verticleSpacing, showPercentageSymbol } = this.props;
if (!showPercentage) return;

return (
<text style={textStyle} fill={textColor} x={radius} y={radius} textAnchor="middle" dominantBaseline="central">
<text style={textStyle} fill={textColor} x={radius} y={radius} dy={verticleSpacing} textAnchor="middle">
{progress}{showPercentageSymbol && <tspan dx={percentSpacing}>%</tspan>}
</text>
);
Expand Down