react-battery-level 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -54
- package/demo/demo.gif +0 -0
- package/dist/index.d.ts +2 -18
- package/dist/index.js +29 -12
- package/dist/types.d.ts +30 -0
- package/dist/types.js +1 -0
- package/package.json +6 -4
- package/demo/demo1.gif +0 -0
- package/demo/demo2.gif +0 -0
- package/demo/demo3.gif +0 -0
package/README.md
CHANGED
|
@@ -2,83 +2,88 @@
|
|
|
2
2
|
|
|
3
3
|
## Simple customizable battery component!
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 목차
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
|
|
7
|
+
- [Installation](#installation)
|
|
8
|
+
- [Usage](#usage)
|
|
9
|
+
- [Props](#props)
|
|
10
|
+
- [License](#license)
|
|
11
|
+
|
|
12
|
+
### Features
|
|
12
13
|
|
|
13
14
|
<div align="center">
|
|
14
|
-
<img width="300px" src="/demo/
|
|
15
|
-
<img width="300px" src="/demo/demo2.gif">
|
|
16
|
-
<img width="300px" src="/demo/demo3.gif">
|
|
15
|
+
<img width="300px" src="/demo/demo.gif">
|
|
17
16
|
</div>
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
### Installation
|
|
20
19
|
|
|
21
20
|
```bash
|
|
22
|
-
npm
|
|
21
|
+
npm i react-battery-level
|
|
23
22
|
```
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
### Usage
|
|
26
25
|
|
|
27
26
|
```jsx
|
|
28
|
-
import
|
|
29
|
-
import BatteryLevel from "react-battery-level";
|
|
27
|
+
import BatteryLevel from 'react-battery-level';
|
|
30
28
|
|
|
31
29
|
function App() {
|
|
32
|
-
const [gauge, setGauge] = useState(75);
|
|
33
30
|
return (
|
|
34
|
-
//Adjust only width to maintain aspect ratio.
|
|
35
31
|
<BatteryLevel
|
|
36
|
-
width="
|
|
37
|
-
gauge={
|
|
38
|
-
gaugeColor=
|
|
39
|
-
isCharging
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
fill: gauge <= 20 ? "#FF5713" : "#6EF47A",
|
|
43
|
-
stroke: "white",
|
|
44
|
-
strokeWidth: 0.5,
|
|
32
|
+
width="250"
|
|
33
|
+
gauge={75}
|
|
34
|
+
gaugeColor="#34C759"
|
|
35
|
+
isCharging
|
|
36
|
+
borderStyles={{
|
|
37
|
+
color: '#000',
|
|
45
38
|
}}
|
|
46
39
|
/>
|
|
47
40
|
);
|
|
48
41
|
}
|
|
42
|
+
|
|
49
43
|
export default App;
|
|
50
44
|
```
|
|
51
45
|
|
|
52
46
|
## Props
|
|
53
47
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
| `
|
|
73
|
-
| `strokeWidth` | `number`
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
| `
|
|
81
|
-
|
|
82
|
-
|
|
48
|
+
`BatteryLevel` 컴포넌트는 다음과 같은 props를 받습니다:
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
| ------------------ | -------------------- | ----------- | ------------------------------------------------------ |
|
|
52
|
+
| `width` | `number` \| `string` | `"150"` | Optional. The width of the battery icon. |
|
|
53
|
+
| `height` | `number` \| `string` | `"100%"` | Optional. The height of the battery icon. |
|
|
54
|
+
| `gauge` | `number` | None | Required. The charge level of the battery (0-100). |
|
|
55
|
+
| `gaugeColor` | `string` | `"#6EF47A"` | Optional. The color of the battery fill. |
|
|
56
|
+
| `isCharging` | `boolean` | `false` | Optional. Indicates if the battery is charging. |
|
|
57
|
+
| `showPercentage` | `boolean` | `false` | Optional. Shows the battery percentage inside the SVG. |
|
|
58
|
+
| `borderStyles` | `object` | `{}` | Optional. Styling for the border. |
|
|
59
|
+
| `lightningStyles` | `object` | `{}` | Optional. Styling for the lightning bolt. |
|
|
60
|
+
| `percentageStyles` | `object` | `{}` | Optional. Styling for the battery percentage text. |
|
|
61
|
+
|
|
62
|
+
### `borderStyles` Object
|
|
63
|
+
|
|
64
|
+
| Key | Type | Default | Description |
|
|
65
|
+
| ------------- | -------- | --------- | ------------------------------------ |
|
|
66
|
+
| `color` | `string` | `"black"` | Stroke color for the battery border. |
|
|
67
|
+
| `strokeWidth` | `number` | `1` | Stroke width for the battery border. |
|
|
68
|
+
| `radius` | `number` | `5` | Border radius for the battery. |
|
|
69
|
+
|
|
70
|
+
### `lightningStyles` Object
|
|
71
|
+
|
|
72
|
+
| Key | Type | Default | Description |
|
|
73
|
+
| ------------- | -------- | -------------------------- | -------------------------------------------- |
|
|
74
|
+
| `fill` | `string` | `"yellow"` | Fill color for the lightning bolt. |
|
|
75
|
+
| `stroke` | `string` | `none` | Stroke color for the lightning bolt. |
|
|
76
|
+
| `strokeWidth` | `number` | `0.5` | Stroke width for the lightning bolt. |
|
|
77
|
+
| `position` | `object` | `{ x: 15, y: -1 }` | Position of the lightning bolt. |
|
|
78
|
+
| `transform` | `object` | `{ scale: 1, rotate: 10 }` | Transform properties for the lightning bolt. |
|
|
79
|
+
|
|
80
|
+
### `percentageStyles` Object
|
|
81
|
+
|
|
82
|
+
| Key | Type | Default | Description |
|
|
83
|
+
| ---------- | -------- | --------- | ------------------------------------------ |
|
|
84
|
+
| `fontSize` | `number` | `8` | Font size for the battery percentage text. |
|
|
85
|
+
| `color` | `string` | `"black"` | Color for the battery percentage text. |
|
|
86
|
+
|
|
87
|
+
### License
|
|
83
88
|
|
|
84
89
|
MIT
|
package/demo/demo.gif
ADDED
|
Binary file
|
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
height?: number | string;
|
|
4
|
-
gauge: number;
|
|
5
|
-
gaugeColor?: string;
|
|
6
|
-
isCharging: boolean;
|
|
7
|
-
isShowGaugePercentage: boolean;
|
|
8
|
-
lightningBoltStyles?: {
|
|
9
|
-
fill?: string;
|
|
10
|
-
stroke?: string;
|
|
11
|
-
strokeWidth?: string | number;
|
|
12
|
-
};
|
|
13
|
-
gaugePercentageStyles?: {
|
|
14
|
-
fontSize: string | number;
|
|
15
|
-
color: string;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
declare const BatteryLevel: ({ gauge, width, height, isCharging, isShowGaugePercentage, gaugeColor, lightningBoltStyles, gaugePercentageStyles, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { BatteryProps } from './types';
|
|
2
|
+
declare const BatteryLevel: ({ width, height, gauge, gaugeColor, isCharging, lightningStyles, showPercentage, percentageStyles, borderStyles, }: BatteryProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
3
|
export default BatteryLevel;
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
|
|
1
3
|
var __assign = (this && this.__assign) || function () {
|
|
2
4
|
__assign = Object.assign || function(t) {
|
|
3
5
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -9,19 +11,34 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
11
|
};
|
|
10
12
|
return __assign.apply(this, arguments);
|
|
11
13
|
};
|
|
12
|
-
|
|
14
|
+
|
|
13
15
|
var BatteryLevel = function (_a) {
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
var _b = _a.width, width = _b === void 0 ? '150' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, gauge = _a.gauge, _d = _a.gaugeColor, gaugeColor = _d === void 0 ? '#6EF47A' : _d, _e = _a.isCharging, isCharging = _e === void 0 ? false : _e, _f = _a.lightningStyles, lightningStyles = _f === void 0 ? {} : _f, _g = _a.showPercentage, showPercentage = _g === void 0 ? false : _g, _h = _a.percentageStyles, percentageStyles = _h === void 0 ? {} : _h, _j = _a.borderStyles, borderStyles = _j === void 0 ? {} : _j;
|
|
17
|
+
var BATTERY_WIDTH = 42;
|
|
18
|
+
var BATTERY_HEIGHT = 22;
|
|
19
|
+
var BATTERY_X = 1;
|
|
20
|
+
var BATTERY_Y = 1;
|
|
21
|
+
var PADDING = 2;
|
|
22
|
+
var GAUGE_MAX_WIDTH = BATTERY_WIDTH - PADDING * 2;
|
|
23
|
+
var defaultBorderStyles = {
|
|
24
|
+
color: 'black',
|
|
25
|
+
strokeWidth: 1,
|
|
26
|
+
radius: 5,
|
|
27
|
+
};
|
|
28
|
+
var defaultLightningStyles = {
|
|
29
|
+
fill: 'yellow',
|
|
30
|
+
stroke: 'none',
|
|
17
31
|
strokeWidth: 0.5,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
32
|
+
position: { x: 15, y: -1 },
|
|
33
|
+
transform: { scale: 1, rotate: 10 },
|
|
34
|
+
};
|
|
35
|
+
var defaultPercentageStyles = {
|
|
36
|
+
fontSize: 8,
|
|
37
|
+
color: 'black',
|
|
38
|
+
};
|
|
39
|
+
var appliedBorderStyles = __assign(__assign({}, defaultBorderStyles), borderStyles);
|
|
40
|
+
var appliedLightningStyles = __assign(__assign(__assign({}, defaultLightningStyles), lightningStyles), { position: __assign(__assign({}, defaultLightningStyles.position), lightningStyles.position), transform: __assign(__assign({}, defaultLightningStyles.transform), lightningStyles.transform) });
|
|
41
|
+
var appliedPercentageStyles = __assign(__assign({}, defaultPercentageStyles), percentageStyles);
|
|
42
|
+
return (_jsxs("svg", __assign({ width: width, height: height, viewBox: "0 0 50 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1", y: "1", width: BATTERY_WIDTH, height: BATTERY_HEIGHT, rx: appliedBorderStyles.radius, stroke: appliedBorderStyles.color, strokeWidth: appliedBorderStyles.strokeWidth }), _jsx("path", { d: "M44.6 8V16C46.2094 15.32244 47.256 13.74626 47.256 12C47.256 10.25374 46.2094 8.67756 44.6 8Z", fill: appliedBorderStyles.color, fillOpacity: "1" }), _jsx("rect", { x: BATTERY_X + PADDING, y: BATTERY_Y + PADDING, width: GAUGE_MAX_WIDTH * (gauge / 100), height: "18", rx: "3", fill: gaugeColor }), showPercentage && (_jsxs("text", __assign({ x: BATTERY_X + 22, y: BATTERY_Y + 11, fontSize: appliedPercentageStyles.fontSize, color: appliedPercentageStyles.color, textAnchor: "middle", alignmentBaseline: "central", fill: "black" }, { children: [gauge, "%"] }))), isCharging && (_jsx("g", __assign({ transform: "\n translate(".concat(appliedLightningStyles.position.x, ", ").concat(appliedLightningStyles.position.y, ") \n scale(").concat(appliedLightningStyles.transform.scale, ") \n rotate(").concat(appliedLightningStyles.transform.rotate, ")\n ") }, { children: _jsx("path", { d: "M12 0L4 12H10L5 24L16 10H9L12 0Z", fill: appliedLightningStyles.fill, stroke: appliedLightningStyles.stroke, strokeWidth: appliedLightningStyles.strokeWidth }) })))] })));
|
|
26
43
|
};
|
|
27
44
|
export default BatteryLevel;
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export type BatteryProps = {
|
|
2
|
+
width?: number | string;
|
|
3
|
+
height?: number | string;
|
|
4
|
+
gauge: number;
|
|
5
|
+
gaugeColor?: string;
|
|
6
|
+
isCharging?: boolean;
|
|
7
|
+
lightningStyles?: {
|
|
8
|
+
fill?: string;
|
|
9
|
+
stroke?: string;
|
|
10
|
+
strokeWidth?: number;
|
|
11
|
+
position?: {
|
|
12
|
+
x?: number;
|
|
13
|
+
y?: number;
|
|
14
|
+
};
|
|
15
|
+
transform?: {
|
|
16
|
+
scale?: number;
|
|
17
|
+
rotate?: number;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
showPercentage?: boolean;
|
|
21
|
+
percentageStyles?: {
|
|
22
|
+
fontSize?: number;
|
|
23
|
+
color?: string;
|
|
24
|
+
};
|
|
25
|
+
borderStyles?: {
|
|
26
|
+
color?: string;
|
|
27
|
+
strokeWidth?: number;
|
|
28
|
+
radius?: number;
|
|
29
|
+
};
|
|
30
|
+
};
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-battery-level",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Simple customizable react battery component",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
},
|
|
26
26
|
"license": "MIT",
|
|
27
27
|
"keywords": [
|
|
28
|
-
"react",
|
|
29
28
|
"battery",
|
|
30
|
-
"battery svg",
|
|
31
29
|
"battery indicator",
|
|
32
|
-
"battery level"
|
|
30
|
+
"battery level",
|
|
31
|
+
"react battery",
|
|
32
|
+
"react battery level",
|
|
33
|
+
"react battery gauge",
|
|
34
|
+
"react battery indicator"
|
|
33
35
|
],
|
|
34
36
|
"scripts": {
|
|
35
37
|
"start": "react-scripts start",
|
package/demo/demo1.gif
DELETED
|
Binary file
|
package/demo/demo2.gif
DELETED
|
Binary file
|
package/demo/demo3.gif
DELETED
|
Binary file
|