@chayns-components/core 5.0.26 → 5.0.27
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 +30 -27
- package/lib/cjs/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +4 -2
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.js +30 -27
- package/lib/esm/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +4 -2
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/types/components/progress-bar/ProgressBar.d.ts +4 -0
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +1 -0
- package/package.json +2 -2
|
@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
16
16
|
const ProgressBar = t0 => {
|
|
17
17
|
"use memo";
|
|
18
18
|
|
|
19
|
-
const $ = (0, _reactCompilerRuntime.c)(
|
|
19
|
+
const $ = (0, _reactCompilerRuntime.c)(30);
|
|
20
20
|
const {
|
|
21
21
|
percentage,
|
|
22
22
|
label,
|
|
@@ -25,7 +25,8 @@ const ProgressBar = t0 => {
|
|
|
25
25
|
steps,
|
|
26
26
|
colors,
|
|
27
27
|
thumbLabel,
|
|
28
|
-
showShine: t3
|
|
28
|
+
showShine: t3,
|
|
29
|
+
height
|
|
29
30
|
} = t0;
|
|
30
31
|
const shouldHideProgress = t1 === undefined ? false : t1;
|
|
31
32
|
const shouldShowLabelInline = t2 === undefined ? false : t2;
|
|
@@ -69,7 +70,7 @@ const ProgressBar = t0 => {
|
|
|
69
70
|
}
|
|
70
71
|
const shineEffect = t4;
|
|
71
72
|
let t5;
|
|
72
|
-
if ($[6] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[7] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[8] !== (colors === null || colors === void 0 ? void 0 : colors.progressColor) || $[9] !== (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.stepColor) || $[11] !==
|
|
73
|
+
if ($[6] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[7] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[8] !== (colors === null || colors === void 0 ? void 0 : colors.progressColor) || $[9] !== (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.stepColor) || $[11] !== height || $[12] !== label || $[13] !== percentage || $[14] !== shineEffect || $[15] !== shouldHideProgress || $[16] !== shouldShowLabelInline || $[17] !== showShine || $[18] !== steps || $[19] !== theme || $[20] !== thumbLabel || $[21] !== uuid) {
|
|
73
74
|
colors === null || colors === void 0 || colors.backgroundColor;
|
|
74
75
|
colors === null || colors === void 0 || colors.primaryTextColor;
|
|
75
76
|
colors === null || colors === void 0 || colors.progressColor;
|
|
@@ -106,7 +107,8 @@ const ProgressBar = t0 => {
|
|
|
106
107
|
}));
|
|
107
108
|
}
|
|
108
109
|
return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
|
|
109
|
-
$isBig: shouldShowLabelInline
|
|
110
|
+
$isBig: shouldShowLabelInline,
|
|
111
|
+
$height: height
|
|
110
112
|
}, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
|
|
111
113
|
$position: step,
|
|
112
114
|
key: `progress-step-${step}`,
|
|
@@ -163,42 +165,43 @@ const ProgressBar = t0 => {
|
|
|
163
165
|
$[8] = colors === null || colors === void 0 ? void 0 : colors.progressColor;
|
|
164
166
|
$[9] = colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor;
|
|
165
167
|
$[10] = colors === null || colors === void 0 ? void 0 : colors.stepColor;
|
|
166
|
-
$[11] =
|
|
167
|
-
$[12] =
|
|
168
|
-
$[13] =
|
|
169
|
-
$[14] =
|
|
170
|
-
$[15] =
|
|
171
|
-
$[16] =
|
|
172
|
-
$[17] =
|
|
173
|
-
$[18] =
|
|
174
|
-
$[19] =
|
|
175
|
-
$[20] =
|
|
176
|
-
$[21] =
|
|
168
|
+
$[11] = height;
|
|
169
|
+
$[12] = label;
|
|
170
|
+
$[13] = percentage;
|
|
171
|
+
$[14] = shineEffect;
|
|
172
|
+
$[15] = shouldHideProgress;
|
|
173
|
+
$[16] = shouldShowLabelInline;
|
|
174
|
+
$[17] = showShine;
|
|
175
|
+
$[18] = steps;
|
|
176
|
+
$[19] = theme;
|
|
177
|
+
$[20] = thumbLabel;
|
|
178
|
+
$[21] = uuid;
|
|
179
|
+
$[22] = t5;
|
|
177
180
|
} else {
|
|
178
|
-
t5 = $[
|
|
181
|
+
t5 = $[22];
|
|
179
182
|
}
|
|
180
183
|
const progressBar = t5;
|
|
181
184
|
colors === null || colors === void 0 || colors.primaryTextColor;
|
|
182
185
|
let t6;
|
|
183
|
-
if ($[
|
|
186
|
+
if ($[23] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[24] !== label || $[25] !== shouldShowLabelInline) {
|
|
184
187
|
t6 = label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
|
|
185
188
|
$primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
|
|
186
189
|
}, label);
|
|
187
|
-
$[
|
|
188
|
-
$[
|
|
189
|
-
$[
|
|
190
|
-
$[
|
|
190
|
+
$[23] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
|
|
191
|
+
$[24] = label;
|
|
192
|
+
$[25] = shouldShowLabelInline;
|
|
193
|
+
$[26] = t6;
|
|
191
194
|
} else {
|
|
192
|
-
t6 = $[
|
|
195
|
+
t6 = $[26];
|
|
193
196
|
}
|
|
194
197
|
let t7;
|
|
195
|
-
if ($[
|
|
198
|
+
if ($[27] !== progressBar || $[28] !== t6) {
|
|
196
199
|
t7 = /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, t6);
|
|
197
|
-
$[
|
|
198
|
-
$[
|
|
199
|
-
$[
|
|
200
|
+
$[27] = progressBar;
|
|
201
|
+
$[28] = t6;
|
|
202
|
+
$[29] = t7;
|
|
200
203
|
} else {
|
|
201
|
-
t7 = $[
|
|
204
|
+
t7 = $[29];
|
|
202
205
|
}
|
|
203
206
|
return t7;
|
|
204
207
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","useUuid","popupRef","useRef","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current","current","show","onAnimationComplete","_popupRef$current2","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current3","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t7","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\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 * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const popupRef = useRef<PopupRef | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const FULL_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\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: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\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 [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\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","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","useUuid","popupRef","useRef","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current","current","show","onAnimationComplete","_popupRef$current2","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current3","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t7","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\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 * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n /**\n * The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n */\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const popupRef = useRef<PopupRef | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const FULL_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\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} $height={height}>\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: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n height,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\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 [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -23,11 +23,13 @@ const StyledProgressBarProgressWrapper = exports.StyledProgressBarProgressWrappe
|
|
|
23
23
|
position: relative;
|
|
24
24
|
width: 100%;
|
|
25
25
|
height: ${({
|
|
26
|
+
$height,
|
|
26
27
|
$isBig
|
|
27
|
-
}) => $isBig ? 20 : 10}px;
|
|
28
|
+
}) => $height || ($isBig ? 20 : 10)}px;
|
|
28
29
|
border-radius: ${({
|
|
30
|
+
$height,
|
|
29
31
|
$isBig
|
|
30
|
-
}) => $isBig ? 20 :
|
|
32
|
+
}) => $isBig ? $height ?? 20 : ($height ?? 10) / 5}px;
|
|
31
33
|
`;
|
|
32
34
|
const shineMove = (0, _styledComponents.keyframes)`
|
|
33
35
|
from {
|
|
@@ -1 +1 @@
|
|
|
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","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } 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 :
|
|
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","$height","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } 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 $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height || ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => ($isBig ? ($height ?? 20) : ($height ?? 10) / 5)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-150%);\n }\n to {\n transform: translateX(150%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\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\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAA2D,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;AAGpD,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;AAOM,MAAME,gCAAgC,GAAAN,OAAA,CAAAM,gCAAA,GAAGL,yBAAM,CAACC,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,qBAAqB,CAAC;EAAED,OAAO;EAAEC;AAAO,CAAC,KAAMA,MAAM,GAAID,OAAO,IAAI,EAAE,GAAI,CAACA,OAAO,IAAI,EAAE,IAAI,CAAE;AAC9F,CAAC;AAID,MAAME,SAAS,GAAG,IAAAC,2BAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,sBAAsB,GAAAX,OAAA,CAAAW,sBAAA,GAAGV,yBAAM,CAACC,GAAG,CAACU,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBJ,SAAS,IAAI,CAAC;EAAEO,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAjB,OAAA,CAAAiB,+BAAA,GAAG,IAAAhB,yBAAM,EAACiB,aAAM,CAAChB,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACe,QAAQ;AAChC,CAAC;AASM,MAAMC,sBAAsB,GAAApB,OAAA,CAAAoB,sBAAA,GAAGnB,yBAAM,CAACC,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEiB;AAAoD,CAAC,KACpEA,sBAAsB,GAAGjB,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACe,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEpB;AAAM,CAAC,KAC7DkB,mBAAmB,IACnB,IAAAG,qBAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,aAAa,IAAInB,KAAK,CAAC,KAAK,CAAC,IAAIkB,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIpB,KAAK,CAAC,KAAK,CAAC,IAAIkB,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAEM,MAAMI,4BAA4B,GAAA1B,OAAA,CAAA0B,4BAAA,GAAGzB,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOM,MAAMyB,qBAAqB,GAAA3B,OAAA,CAAA2B,qBAAA,GAAG1B,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;EAAEwB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAEM,MAAMC,2BAA2B,GAAA7B,OAAA,CAAA6B,2BAAA,GAAG5B,yBAAM,CAACC,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -8,7 +8,7 @@ import Popup from '../popup/Popup';
|
|
|
8
8
|
const ProgressBar = t0 => {
|
|
9
9
|
"use memo";
|
|
10
10
|
|
|
11
|
-
const $ = _c(
|
|
11
|
+
const $ = _c(30);
|
|
12
12
|
const {
|
|
13
13
|
percentage,
|
|
14
14
|
label,
|
|
@@ -17,7 +17,8 @@ const ProgressBar = t0 => {
|
|
|
17
17
|
steps,
|
|
18
18
|
colors,
|
|
19
19
|
thumbLabel,
|
|
20
|
-
showShine: t3
|
|
20
|
+
showShine: t3,
|
|
21
|
+
height
|
|
21
22
|
} = t0;
|
|
22
23
|
const shouldHideProgress = t1 === undefined ? false : t1;
|
|
23
24
|
const shouldShowLabelInline = t2 === undefined ? false : t2;
|
|
@@ -61,7 +62,7 @@ const ProgressBar = t0 => {
|
|
|
61
62
|
}
|
|
62
63
|
const shineEffect = t4;
|
|
63
64
|
let t5;
|
|
64
|
-
if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !==
|
|
65
|
+
if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !== height || $[12] !== label || $[13] !== percentage || $[14] !== shineEffect || $[15] !== shouldHideProgress || $[16] !== shouldShowLabelInline || $[17] !== showShine || $[18] !== steps || $[19] !== theme || $[20] !== thumbLabel || $[21] !== uuid) {
|
|
65
66
|
colors?.backgroundColor;
|
|
66
67
|
colors?.primaryTextColor;
|
|
67
68
|
colors?.progressColor;
|
|
@@ -98,7 +99,8 @@ const ProgressBar = t0 => {
|
|
|
98
99
|
}));
|
|
99
100
|
}
|
|
100
101
|
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
|
|
101
|
-
$isBig: shouldShowLabelInline
|
|
102
|
+
$isBig: shouldShowLabelInline,
|
|
103
|
+
$height: height
|
|
102
104
|
}, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
|
|
103
105
|
$position: step,
|
|
104
106
|
key: `progress-step-${step}`,
|
|
@@ -146,42 +148,43 @@ const ProgressBar = t0 => {
|
|
|
146
148
|
$[8] = colors?.progressColor;
|
|
147
149
|
$[9] = colors?.secondaryTextColor;
|
|
148
150
|
$[10] = colors?.stepColor;
|
|
149
|
-
$[11] =
|
|
150
|
-
$[12] =
|
|
151
|
-
$[13] =
|
|
152
|
-
$[14] =
|
|
153
|
-
$[15] =
|
|
154
|
-
$[16] =
|
|
155
|
-
$[17] =
|
|
156
|
-
$[18] =
|
|
157
|
-
$[19] =
|
|
158
|
-
$[20] =
|
|
159
|
-
$[21] =
|
|
151
|
+
$[11] = height;
|
|
152
|
+
$[12] = label;
|
|
153
|
+
$[13] = percentage;
|
|
154
|
+
$[14] = shineEffect;
|
|
155
|
+
$[15] = shouldHideProgress;
|
|
156
|
+
$[16] = shouldShowLabelInline;
|
|
157
|
+
$[17] = showShine;
|
|
158
|
+
$[18] = steps;
|
|
159
|
+
$[19] = theme;
|
|
160
|
+
$[20] = thumbLabel;
|
|
161
|
+
$[21] = uuid;
|
|
162
|
+
$[22] = t5;
|
|
160
163
|
} else {
|
|
161
|
-
t5 = $[
|
|
164
|
+
t5 = $[22];
|
|
162
165
|
}
|
|
163
166
|
const progressBar = t5;
|
|
164
167
|
colors?.primaryTextColor;
|
|
165
168
|
let t6;
|
|
166
|
-
if ($[
|
|
169
|
+
if ($[23] !== colors?.primaryTextColor || $[24] !== label || $[25] !== shouldShowLabelInline) {
|
|
167
170
|
t6 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
|
|
168
171
|
$primaryColor: colors?.primaryTextColor
|
|
169
172
|
}, label);
|
|
170
|
-
$[
|
|
171
|
-
$[
|
|
172
|
-
$[
|
|
173
|
-
$[
|
|
173
|
+
$[23] = colors?.primaryTextColor;
|
|
174
|
+
$[24] = label;
|
|
175
|
+
$[25] = shouldShowLabelInline;
|
|
176
|
+
$[26] = t6;
|
|
174
177
|
} else {
|
|
175
|
-
t6 = $[
|
|
178
|
+
t6 = $[26];
|
|
176
179
|
}
|
|
177
180
|
let t7;
|
|
178
|
-
if ($[
|
|
181
|
+
if ($[27] !== progressBar || $[28] !== t6) {
|
|
179
182
|
t7 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t6);
|
|
180
|
-
$[
|
|
181
|
-
$[
|
|
182
|
-
$[
|
|
183
|
+
$[27] = progressBar;
|
|
184
|
+
$[28] = t6;
|
|
185
|
+
$[29] = t7;
|
|
183
186
|
} else {
|
|
184
|
-
t7 = $[
|
|
187
|
+
t7 = $[29];
|
|
185
188
|
}
|
|
186
189
|
return t7;
|
|
187
190
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["React","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\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 * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const popupRef = useRef<PopupRef | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const FULL_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\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: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\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 [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\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","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\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 * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n /**\n * The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n */\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const popupRef = useRef<PopupRef | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const FULL_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\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} $height={height}>\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: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n height,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\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 [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -16,11 +16,13 @@ export const StyledProgressBarProgressWrapper = styled.div`
|
|
|
16
16
|
position: relative;
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: ${({
|
|
19
|
+
$height,
|
|
19
20
|
$isBig
|
|
20
|
-
}) => $isBig ? 20 : 10}px;
|
|
21
|
+
}) => $height || ($isBig ? 20 : 10)}px;
|
|
21
22
|
border-radius: ${({
|
|
23
|
+
$height,
|
|
22
24
|
$isBig
|
|
23
|
-
}) => $isBig ? 20 :
|
|
25
|
+
}) => $isBig ? $height ?? 20 : ($height ?? 10) / 5}px;
|
|
24
26
|
`;
|
|
25
27
|
const shineMove = keyframes`
|
|
26
28
|
from {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } 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 :
|
|
1
|
+
{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } 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 $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height || ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => ($isBig ? ($height ?? 20) : ($height ?? 10) / 5)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-150%);\n }\n to {\n transform: translateX(150%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\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\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,qBAAqB,CAAC;EAAED,OAAO;EAAEC;AAAO,CAAC,KAAMA,MAAM,GAAID,OAAO,IAAI,EAAE,GAAI,CAACA,OAAO,IAAI,EAAE,IAAI,CAAE;AAC9F,CAAC;AAID,MAAME,SAAS,GAAGT,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,sBAAsB,GAAGZ,MAAM,CAACI,GAAG,CAACS,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGlB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACa,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGpB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEe;AAAoD,CAAC,KACpEA,sBAAsB,GAAGf,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACa,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAElB;AAAM,CAAC,KAC7DgB,mBAAmB,IACnBrB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBsB,aAAa,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIlB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGzB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMsB,qBAAqB,GAAG1B,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEqB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG5B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -41,6 +41,10 @@ export type ProgressBarProps = {
|
|
|
41
41
|
* Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.
|
|
42
42
|
*/
|
|
43
43
|
showShine?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.
|
|
46
|
+
*/
|
|
47
|
+
height?: number;
|
|
44
48
|
};
|
|
45
49
|
declare const ProgressBar: FC<ProgressBarProps>;
|
|
46
50
|
export default ProgressBar;
|
|
@@ -6,6 +6,7 @@ type StyledProgressBarBackgroundProps = WithTheme<{
|
|
|
6
6
|
export declare const StyledProgressBarBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarBackgroundProps>> & string;
|
|
7
7
|
type StyledProgressBarProgressWrapperProps = WithTheme<{
|
|
8
8
|
$isBig?: boolean;
|
|
9
|
+
$height?: number;
|
|
9
10
|
}>;
|
|
10
11
|
export declare const StyledProgressBarProgressWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarProgressWrapperProps>> & string;
|
|
11
12
|
type StyledProgressBarProgressProps = WithTheme<{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.27",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "da89ab43781279c12a460450c8a9533c0093ff1b"
|
|
90
90
|
}
|