@chayns-components/core 5.0.0-beta.1244 → 5.0.0-beta.1245
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/lib/cjs/components/progress-bar/ProgressBar.js +28 -6
- package/lib/cjs/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +69 -13
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.js +29 -7
- package/lib/esm/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +67 -11
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/types/components/progress-bar/ProgressBar.d.ts +22 -1
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +27 -10
- package/package.json +2 -2
|
@@ -11,7 +11,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
11
11
|
const ProgressBar = ({
|
|
12
12
|
percentage,
|
|
13
13
|
label,
|
|
14
|
-
shouldHideProgress = false
|
|
14
|
+
shouldHideProgress = false,
|
|
15
|
+
shouldShowLabelInline = false,
|
|
16
|
+
steps,
|
|
17
|
+
colors
|
|
15
18
|
}) => {
|
|
16
19
|
const [internalPercentage, setInternalPercentage] = (0, _react.useState)(0);
|
|
17
20
|
const uuid = (0, _uuid.useUuid)();
|
|
@@ -30,6 +33,7 @@ const ProgressBar = ({
|
|
|
30
33
|
if (typeof percentage !== 'number') {
|
|
31
34
|
return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
|
|
32
35
|
key: `progress-bar-loop__${uuid}`,
|
|
36
|
+
$color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
|
|
33
37
|
initial: {
|
|
34
38
|
width: '200px',
|
|
35
39
|
left: '-200px'
|
|
@@ -48,9 +52,18 @@ const ProgressBar = ({
|
|
|
48
52
|
repeatDelay: 0,
|
|
49
53
|
duration: 1
|
|
50
54
|
}
|
|
51
|
-
}), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground,
|
|
55
|
+
}), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
|
|
56
|
+
$color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
|
|
57
|
+
}));
|
|
52
58
|
}
|
|
53
|
-
return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper,
|
|
59
|
+
return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
|
|
60
|
+
$isBig: shouldShowLabelInline
|
|
61
|
+
}, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
|
|
62
|
+
$position: step,
|
|
63
|
+
key: `progress-step-${step}`,
|
|
64
|
+
$color: colors === null || colors === void 0 ? void 0 : colors.stepColor
|
|
65
|
+
}))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
|
|
66
|
+
$color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
|
|
54
67
|
key: `progress-bar__${uuid}`,
|
|
55
68
|
initial: {
|
|
56
69
|
width: '0%'
|
|
@@ -64,9 +77,18 @@ const ProgressBar = ({
|
|
|
64
77
|
transition: {
|
|
65
78
|
type: 'tween'
|
|
66
79
|
}
|
|
67
|
-
}), /*#__PURE__*/_react.default.createElement(_ProgressBar.
|
|
68
|
-
|
|
69
|
-
|
|
80
|
+
}), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
|
|
81
|
+
$shouldShowLabelInline: shouldShowLabelInline,
|
|
82
|
+
$primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
|
|
83
|
+
$secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
|
|
84
|
+
$colorSplitPosition: internalPercentage
|
|
85
|
+
}, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
|
|
86
|
+
$color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
|
|
87
|
+
}));
|
|
88
|
+
}, [colors, internalPercentage, label, percentage, shouldHideProgress, shouldShowLabelInline, steps, uuid]);
|
|
89
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
|
|
90
|
+
$primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
|
|
91
|
+
}, label)), [progressBar, label, shouldShowLabelInline, colors === null || colors === void 0 ? void 0 : colors.primaryTextColor, colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor]);
|
|
70
92
|
};
|
|
71
93
|
ProgressBar.displayName = 'ProgressBar';
|
|
72
94
|
var _default = exports.default = ProgressBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","useState","uuid","useUuid","useEffect","progressBar","useMemo","createElement","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","key","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","StyledProgressBar","StyledProgressBarLabel","displayName","_default","exports"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: number;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\n const [internalPercentage, setInternalPercentage] = useState(0);\n const uuid = useUuid();\n\n useEffect(() => {\n if (typeof percentage !== 'number') {\n return;\n }\n\n if (percentage >= 0 && percentage <= 100) {\n setInternalPercentage(percentage);\n }\n }, [percentage]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (typeof percentage !== 'number') {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${internalPercentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n />\n <StyledProgressBarBackground />\n </StyledProgressBarProgressWrapper>\n );\n }, [internalPercentage, percentage, shouldHideProgress, uuid]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && <StyledProgressBarLabel>{label}</StyledProgressBarLabel>}\n </StyledProgressBar>\n ),\n [progressBar, label],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","internalPercentage","setInternalPercentage","useState","uuid","useUuid","useEffect","progressBar","useMemo","createElement","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","key","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","backgroundColor","$isBig","length","StyledProgressBarStepWrapper","map","step","StyledProgressBarStep","$position","stepColor","StyledProgressBarLabel","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","secondaryTextColor","$colorSplitPosition","StyledProgressBar","displayName","_default","exports"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n} from './ProgressBar.styles';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n /**\n * The colors of the ProgressBar.\n */\n colors?: Colors;\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: Range<0, 101>;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n /**\n * Whether the label should be displayed inside the ProgressBar.\n */\n shouldShowLabelInline?: boolean;\n /**\n * Visual marked steps.\n */\n steps?: Range<0, 101>[];\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n}) => {\n const [internalPercentage, setInternalPercentage] = useState(0);\n const uuid = useUuid();\n\n useEffect(() => {\n if (typeof percentage !== 'number') {\n return;\n }\n\n if (percentage >= 0 && percentage <= 100) {\n setInternalPercentage(percentage);\n }\n }, [percentage]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (typeof percentage !== 'number') {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${internalPercentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n />\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={internalPercentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors,\n internalPercentage,\n label,\n percentage,\n shouldHideProgress,\n shouldShowLabelInline,\n steps,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [\n progressBar,\n label,\n shouldShowLabelInline,\n colors?.primaryTextColor,\n colors?.secondaryTextColor,\n ],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,42 +3,98 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledProgressBarProgressWrapper = exports.StyledProgressBarLabel = exports.StyledProgressBarBackground = exports.StyledProgressBar = exports.StyledMotionProgressBarProgress = void 0;
|
|
6
|
+
exports.StyledProgressBarStepWrapper = exports.StyledProgressBarStep = exports.StyledProgressBarProgressWrapper = exports.StyledProgressBarLabel = exports.StyledProgressBarBackground = exports.StyledProgressBar = exports.StyledMotionProgressBarProgress = void 0;
|
|
7
7
|
var _react = require("motion/react");
|
|
8
|
-
var _styledComponents =
|
|
9
|
-
function
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
10
|
const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.div`
|
|
11
11
|
position: relative;
|
|
12
12
|
`;
|
|
13
13
|
const StyledProgressBarBackground = exports.StyledProgressBarBackground = _styledComponents.default.div`
|
|
14
|
-
height:
|
|
14
|
+
height: 100%;
|
|
15
15
|
width: 100%;
|
|
16
|
-
border-radius: 2px;
|
|
17
16
|
background-color: ${({
|
|
18
|
-
theme
|
|
19
|
-
|
|
17
|
+
theme,
|
|
18
|
+
$color
|
|
19
|
+
}) => $color ?? theme['104']};
|
|
20
20
|
`;
|
|
21
21
|
const StyledProgressBarProgressWrapper = exports.StyledProgressBarProgressWrapper = _styledComponents.default.div`
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
position: relative;
|
|
24
24
|
width: 100%;
|
|
25
|
-
height:
|
|
26
|
-
|
|
25
|
+
height: ${({
|
|
26
|
+
$isBig
|
|
27
|
+
}) => $isBig ? 20 : 10}px;
|
|
28
|
+
border-radius: ${({
|
|
29
|
+
$isBig
|
|
30
|
+
}) => $isBig ? 20 : 2}px;
|
|
27
31
|
`;
|
|
28
32
|
const StyledMotionProgressBarProgress = exports.StyledMotionProgressBarProgress = (0, _styledComponents.default)(_react.motion.div)`
|
|
29
|
-
height:
|
|
33
|
+
height: 100%;
|
|
30
34
|
position: absolute;
|
|
31
35
|
top: 0;
|
|
32
36
|
left: 0;
|
|
33
37
|
z-index: 2;
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
padding-left: 12px;
|
|
34
41
|
background-color: ${({
|
|
35
|
-
theme
|
|
36
|
-
|
|
42
|
+
theme,
|
|
43
|
+
$color
|
|
44
|
+
}) => $color ?? theme.headline};
|
|
37
45
|
`;
|
|
38
46
|
const StyledProgressBarLabel = exports.StyledProgressBarLabel = _styledComponents.default.div`
|
|
39
47
|
font-size: 85%;
|
|
40
48
|
color: ${({
|
|
49
|
+
theme,
|
|
50
|
+
$shouldShowLabelInline
|
|
51
|
+
}) => $shouldShowLabelInline ? theme['100'] : theme.headline};
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
|
|
54
|
+
${({
|
|
55
|
+
$colorSplitPosition,
|
|
56
|
+
$primaryColor,
|
|
57
|
+
$secondaryColor,
|
|
41
58
|
theme
|
|
42
|
-
}) =>
|
|
59
|
+
}) => $colorSplitPosition && (0, _styledComponents.css)`
|
|
60
|
+
position: absolute;
|
|
61
|
+
z-index: 2;
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
|
|
68
|
+
padding-left: 8px;
|
|
69
|
+
|
|
70
|
+
font-weight: bold;
|
|
71
|
+
|
|
72
|
+
-webkit-background-clip: text;
|
|
73
|
+
|
|
74
|
+
color: transparent;
|
|
75
|
+
background-image: linear-gradient(
|
|
76
|
+
90deg,
|
|
77
|
+
${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,
|
|
78
|
+
${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%
|
|
79
|
+
);
|
|
80
|
+
`}
|
|
81
|
+
`;
|
|
82
|
+
const StyledProgressBarStepWrapper = exports.StyledProgressBarStepWrapper = _styledComponents.default.div`
|
|
83
|
+
height: 100%;
|
|
84
|
+
width: 100%;
|
|
85
|
+
position: absolute;
|
|
86
|
+
`;
|
|
87
|
+
const StyledProgressBarStep = exports.StyledProgressBarStep = _styledComponents.default.div`
|
|
88
|
+
background-color: ${({
|
|
89
|
+
theme,
|
|
90
|
+
$color
|
|
91
|
+
}) => $color ?? theme['102']};
|
|
92
|
+
height: 100%;
|
|
93
|
+
width: 2px;
|
|
94
|
+
position: absolute;
|
|
95
|
+
top: 0;
|
|
96
|
+
left: ${({
|
|
97
|
+
$position
|
|
98
|
+
}) => $position}%;
|
|
43
99
|
`;
|
|
44
100
|
//# sourceMappingURL=ProgressBar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","
|
|
1
|
+
{"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC3C;AACA,CAAC;AAIM,MAAMC,2BAA2B,GAAAH,OAAA,CAAAG,2BAAA,GAAGF,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMM,MAAME,gCAAgC,GAAAN,OAAA,CAAAM,gCAAA,GAAGL,yBAAM,CAACC,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAIM,MAAMC,+BAA+B,GAAAR,OAAA,CAAAQ,+BAAA,GAAG,IAAAP,yBAAM,EAACQ,aAAM,CAACP,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACM,QAAQ;AAChC,CAAC;AASM,MAAMC,sBAAsB,GAAAX,OAAA,CAAAW,sBAAA,GAAGV,yBAAM,CAACC,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEQ;AAAoD,CAAC,KACpEA,sBAAsB,GAAGR,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACM,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEX;AAAM,CAAC,KAC7DS,mBAAmB,IACnB,IAAAG,qBAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,aAAa,IAAIV,KAAK,CAAC,KAAK,CAAC,IAAIS,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIX,KAAK,CAAC,KAAK,CAAC,IAAIS,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAEM,MAAMI,4BAA4B,GAAAjB,OAAA,CAAAiB,4BAAA,GAAGhB,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOM,MAAMgB,qBAAqB,GAAAlB,OAAA,CAAAkB,qBAAA,GAAGjB,yBAAM,CAACC,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEe;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC","ignoreList":[]}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { useUuid } from '../../hooks/uuid';
|
|
3
|
-
import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
|
|
3
|
+
import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarStep, StyledProgressBarStepWrapper } from './ProgressBar.styles';
|
|
4
4
|
const ProgressBar = ({
|
|
5
5
|
percentage,
|
|
6
6
|
label,
|
|
7
|
-
shouldHideProgress = false
|
|
7
|
+
shouldHideProgress = false,
|
|
8
|
+
shouldShowLabelInline = false,
|
|
9
|
+
steps,
|
|
10
|
+
colors
|
|
8
11
|
}) => {
|
|
9
12
|
const [internalPercentage, setInternalPercentage] = useState(0);
|
|
10
13
|
const uuid = useUuid();
|
|
@@ -23,6 +26,7 @@ const ProgressBar = ({
|
|
|
23
26
|
if (typeof percentage !== 'number') {
|
|
24
27
|
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
|
|
25
28
|
key: `progress-bar-loop__${uuid}`,
|
|
29
|
+
$color: colors?.progressColor,
|
|
26
30
|
initial: {
|
|
27
31
|
width: '200px',
|
|
28
32
|
left: '-200px'
|
|
@@ -41,9 +45,18 @@ const ProgressBar = ({
|
|
|
41
45
|
repeatDelay: 0,
|
|
42
46
|
duration: 1
|
|
43
47
|
}
|
|
44
|
-
}), /*#__PURE__*/React.createElement(StyledProgressBarBackground,
|
|
48
|
+
}), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
|
|
49
|
+
$color: colors?.backgroundColor
|
|
50
|
+
}));
|
|
45
51
|
}
|
|
46
|
-
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper,
|
|
52
|
+
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
|
|
53
|
+
$isBig: shouldShowLabelInline
|
|
54
|
+
}, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
|
|
55
|
+
$position: step,
|
|
56
|
+
key: `progress-step-${step}`,
|
|
57
|
+
$color: colors?.stepColor
|
|
58
|
+
}))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
|
|
59
|
+
$color: colors?.progressColor,
|
|
47
60
|
key: `progress-bar__${uuid}`,
|
|
48
61
|
initial: {
|
|
49
62
|
width: '0%'
|
|
@@ -57,9 +70,18 @@ const ProgressBar = ({
|
|
|
57
70
|
transition: {
|
|
58
71
|
type: 'tween'
|
|
59
72
|
}
|
|
60
|
-
}), /*#__PURE__*/React.createElement(
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
}), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
|
|
74
|
+
$shouldShowLabelInline: shouldShowLabelInline,
|
|
75
|
+
$primaryColor: colors?.primaryTextColor,
|
|
76
|
+
$secondaryColor: colors?.secondaryTextColor,
|
|
77
|
+
$colorSplitPosition: internalPercentage
|
|
78
|
+
}, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
|
|
79
|
+
$color: colors?.backgroundColor
|
|
80
|
+
}));
|
|
81
|
+
}, [colors, internalPercentage, label, percentage, shouldHideProgress, shouldShowLabelInline, steps, uuid]);
|
|
82
|
+
return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
|
|
83
|
+
$primaryColor: colors?.primaryTextColor
|
|
84
|
+
}, label)), [progressBar, label, shouldShowLabelInline, colors?.primaryTextColor, colors?.secondaryTextColor]);
|
|
63
85
|
};
|
|
64
86
|
ProgressBar.displayName = 'ProgressBar';
|
|
65
87
|
export default ProgressBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","ProgressBar","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?:
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarStep","StyledProgressBarStepWrapper","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","backgroundColor","$isBig","length","map","step","$position","stepColor","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","secondaryTextColor","$colorSplitPosition","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n} from './ProgressBar.styles';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n /**\n * The colors of the ProgressBar.\n */\n colors?: Colors;\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: Range<0, 101>;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n /**\n * Whether the label should be displayed inside the ProgressBar.\n */\n shouldShowLabelInline?: boolean;\n /**\n * Visual marked steps.\n */\n steps?: Range<0, 101>[];\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n}) => {\n const [internalPercentage, setInternalPercentage] = useState(0);\n const uuid = useUuid();\n\n useEffect(() => {\n if (typeof percentage !== 'number') {\n return;\n }\n\n if (percentage >= 0 && percentage <= 100) {\n setInternalPercentage(percentage);\n }\n }, [percentage]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (typeof percentage !== 'number') {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${internalPercentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n />\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={internalPercentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors,\n internalPercentage,\n label,\n percentage,\n shouldHideProgress,\n shouldShowLabelInline,\n steps,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [\n progressBar,\n label,\n shouldShowLabelInline,\n colors?.primaryTextColor,\n colors?.secondaryTextColor,\n ],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,37 +1,93 @@
|
|
|
1
1
|
import { motion } from 'motion/react';
|
|
2
|
-
import styled from 'styled-components';
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
3
|
export const StyledProgressBar = styled.div`
|
|
4
4
|
position: relative;
|
|
5
5
|
`;
|
|
6
6
|
export const StyledProgressBarBackground = styled.div`
|
|
7
|
-
height:
|
|
7
|
+
height: 100%;
|
|
8
8
|
width: 100%;
|
|
9
|
-
border-radius: 2px;
|
|
10
9
|
background-color: ${({
|
|
11
|
-
theme
|
|
12
|
-
|
|
10
|
+
theme,
|
|
11
|
+
$color
|
|
12
|
+
}) => $color ?? theme['104']};
|
|
13
13
|
`;
|
|
14
14
|
export const StyledProgressBarProgressWrapper = styled.div`
|
|
15
15
|
overflow: hidden;
|
|
16
16
|
position: relative;
|
|
17
17
|
width: 100%;
|
|
18
|
-
height:
|
|
19
|
-
|
|
18
|
+
height: ${({
|
|
19
|
+
$isBig
|
|
20
|
+
}) => $isBig ? 20 : 10}px;
|
|
21
|
+
border-radius: ${({
|
|
22
|
+
$isBig
|
|
23
|
+
}) => $isBig ? 20 : 2}px;
|
|
20
24
|
`;
|
|
21
25
|
export const StyledMotionProgressBarProgress = styled(motion.div)`
|
|
22
|
-
height:
|
|
26
|
+
height: 100%;
|
|
23
27
|
position: absolute;
|
|
24
28
|
top: 0;
|
|
25
29
|
left: 0;
|
|
26
30
|
z-index: 2;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
padding-left: 12px;
|
|
27
34
|
background-color: ${({
|
|
28
|
-
theme
|
|
29
|
-
|
|
35
|
+
theme,
|
|
36
|
+
$color
|
|
37
|
+
}) => $color ?? theme.headline};
|
|
30
38
|
`;
|
|
31
39
|
export const StyledProgressBarLabel = styled.div`
|
|
32
40
|
font-size: 85%;
|
|
33
41
|
color: ${({
|
|
42
|
+
theme,
|
|
43
|
+
$shouldShowLabelInline
|
|
44
|
+
}) => $shouldShowLabelInline ? theme['100'] : theme.headline};
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
|
|
47
|
+
${({
|
|
48
|
+
$colorSplitPosition,
|
|
49
|
+
$primaryColor,
|
|
50
|
+
$secondaryColor,
|
|
34
51
|
theme
|
|
35
|
-
}) =>
|
|
52
|
+
}) => $colorSplitPosition && css`
|
|
53
|
+
position: absolute;
|
|
54
|
+
z-index: 2;
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 100%;
|
|
57
|
+
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
|
|
61
|
+
padding-left: 8px;
|
|
62
|
+
|
|
63
|
+
font-weight: bold;
|
|
64
|
+
|
|
65
|
+
-webkit-background-clip: text;
|
|
66
|
+
|
|
67
|
+
color: transparent;
|
|
68
|
+
background-image: linear-gradient(
|
|
69
|
+
90deg,
|
|
70
|
+
${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,
|
|
71
|
+
${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%
|
|
72
|
+
);
|
|
73
|
+
`}
|
|
74
|
+
`;
|
|
75
|
+
export const StyledProgressBarStepWrapper = styled.div`
|
|
76
|
+
height: 100%;
|
|
77
|
+
width: 100%;
|
|
78
|
+
position: absolute;
|
|
79
|
+
`;
|
|
80
|
+
export const StyledProgressBarStep = styled.div`
|
|
81
|
+
background-color: ${({
|
|
82
|
+
theme,
|
|
83
|
+
$color
|
|
84
|
+
}) => $color ?? theme['102']};
|
|
85
|
+
height: 100%;
|
|
86
|
+
width: 2px;
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 0;
|
|
89
|
+
left: ${({
|
|
90
|
+
$position
|
|
91
|
+
}) => $position}%;
|
|
36
92
|
`;
|
|
37
93
|
//# sourceMappingURL=ProgressBar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","StyledProgressBar","div","StyledProgressBarBackground","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<
|
|
1
|
+
{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGJ,MAAM,CAACG,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGP,MAAM,CAACG,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACK,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGX,MAAM,CAACG,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEO;AAAoD,CAAC,KACpEA,sBAAsB,GAAGP,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACK,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEV;AAAM,CAAC,KAC7DQ,mBAAmB,IACnBZ,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBa,aAAa,IAAIT,KAAK,CAAC,KAAK,CAAC,IAAIQ,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIV,KAAK,CAAC,KAAK,CAAC,IAAIQ,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGhB,MAAM,CAACG,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMc,qBAAqB,GAAGjB,MAAM,CAACG,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEa;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
|
|
3
|
+
type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
|
|
4
|
+
interface Colors {
|
|
5
|
+
backgroundColor?: string;
|
|
6
|
+
progressColor?: string;
|
|
7
|
+
stepColor?: string;
|
|
8
|
+
primaryTextColor?: string;
|
|
9
|
+
secondaryTextColor?: string;
|
|
10
|
+
}
|
|
2
11
|
export type ProgressBarProps = {
|
|
12
|
+
/**
|
|
13
|
+
* The colors of the ProgressBar.
|
|
14
|
+
*/
|
|
15
|
+
colors?: Colors;
|
|
3
16
|
/**
|
|
4
17
|
* The label that should be displayed under the progressbar.
|
|
5
18
|
*/
|
|
@@ -7,11 +20,19 @@ export type ProgressBarProps = {
|
|
|
7
20
|
/**
|
|
8
21
|
* The percentage of the progress. Number between 0 and 100.
|
|
9
22
|
*/
|
|
10
|
-
percentage?:
|
|
23
|
+
percentage?: Range<0, 101>;
|
|
11
24
|
/**
|
|
12
25
|
* Whether the progress should be hide and just display the label.
|
|
13
26
|
*/
|
|
14
27
|
shouldHideProgress?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the label should be displayed inside the ProgressBar.
|
|
30
|
+
*/
|
|
31
|
+
shouldShowLabelInline?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Visual marked steps.
|
|
34
|
+
*/
|
|
35
|
+
steps?: Range<0, 101>[];
|
|
15
36
|
};
|
|
16
37
|
declare const ProgressBar: FC<ProgressBarProps>;
|
|
17
38
|
export default ProgressBar;
|
|
@@ -1,13 +1,30 @@
|
|
|
1
|
+
import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
1
2
|
export declare const StyledProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
export declare const
|
|
3
|
+
type StyledProgressBarBackgroundProps = WithTheme<{
|
|
4
|
+
$color?: string;
|
|
5
|
+
}>;
|
|
6
|
+
export declare const StyledProgressBarBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarBackgroundProps>> & string;
|
|
7
|
+
type StyledProgressBarProgressWrapperProps = WithTheme<{
|
|
8
|
+
$isBig?: boolean;
|
|
9
|
+
}>;
|
|
10
|
+
export declare const StyledProgressBarProgressWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarProgressWrapperProps>> & string;
|
|
11
|
+
type StyledProgressBarProgressProps = WithTheme<{
|
|
12
|
+
$color?: string;
|
|
13
|
+
}>;
|
|
6
14
|
export declare const StyledMotionProgressBarProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
7
15
|
ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
|
|
8
|
-
}, {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
}, StyledProgressBarProgressProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
17
|
+
type StyledProgressBarLabelProps = WithTheme<{
|
|
18
|
+
$shouldShowLabelInline?: boolean;
|
|
19
|
+
$primaryColor?: string;
|
|
20
|
+
$secondaryColor?: string;
|
|
21
|
+
$colorSplitPosition?: number;
|
|
22
|
+
}>;
|
|
23
|
+
export declare const StyledProgressBarLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarLabelProps>> & string;
|
|
24
|
+
export declare const StyledProgressBarStepWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
25
|
+
type StyledProgressBarStepProps = WithTheme<{
|
|
26
|
+
$position: number;
|
|
27
|
+
$color?: string;
|
|
28
|
+
}>;
|
|
29
|
+
export declare const StyledProgressBarStep: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarStepProps>> & string;
|
|
30
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1245",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "1c089dcb06440d098f4a048b2b2b7cd00116772a"
|
|
89
89
|
}
|