@huin-core/react-progress 1.0.1 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +30 -0
- package/dist/index.d.ts +30 -0
- package/dist/index.js +134 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +102 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +3 -3
package/dist/index.d.mts
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
|
5
|
+
type Scope<C = any> = {
|
6
|
+
[scopeName: string]: React.Context<C>[];
|
7
|
+
} | undefined;
|
8
|
+
type ScopeHook = (scope: Scope) => {
|
9
|
+
[__scopeProp: string]: Scope;
|
10
|
+
};
|
11
|
+
interface CreateScope {
|
12
|
+
scopeName: string;
|
13
|
+
(): ScopeHook;
|
14
|
+
}
|
15
|
+
|
16
|
+
declare const createProgressScope: CreateScope;
|
17
|
+
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
|
18
|
+
interface ProgressProps extends PrimitiveDivProps {
|
19
|
+
value?: number | null | undefined;
|
20
|
+
max?: number;
|
21
|
+
getValueLabel?(value: number, max: number): string;
|
22
|
+
}
|
23
|
+
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
24
|
+
declare const Root: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
25
|
+
|
26
|
+
interface ProgressIndicatorProps extends PrimitiveDivProps {
|
27
|
+
}
|
28
|
+
declare const ProgressIndicator: React__default.ForwardRefExoticComponent<ProgressIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
|
29
|
+
|
30
|
+
export { Progress, ProgressIndicator, type ProgressIndicatorProps, type ProgressProps, Root, createProgressScope };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
|
5
|
+
type Scope<C = any> = {
|
6
|
+
[scopeName: string]: React.Context<C>[];
|
7
|
+
} | undefined;
|
8
|
+
type ScopeHook = (scope: Scope) => {
|
9
|
+
[__scopeProp: string]: Scope;
|
10
|
+
};
|
11
|
+
interface CreateScope {
|
12
|
+
scopeName: string;
|
13
|
+
(): ScopeHook;
|
14
|
+
}
|
15
|
+
|
16
|
+
declare const createProgressScope: CreateScope;
|
17
|
+
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
|
18
|
+
interface ProgressProps extends PrimitiveDivProps {
|
19
|
+
value?: number | null | undefined;
|
20
|
+
max?: number;
|
21
|
+
getValueLabel?(value: number, max: number): string;
|
22
|
+
}
|
23
|
+
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
24
|
+
declare const Root: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
25
|
+
|
26
|
+
interface ProgressIndicatorProps extends PrimitiveDivProps {
|
27
|
+
}
|
28
|
+
declare const ProgressIndicator: React__default.ForwardRefExoticComponent<ProgressIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
|
29
|
+
|
30
|
+
export { Progress, ProgressIndicator, type ProgressIndicatorProps, type ProgressProps, Root, createProgressScope };
|
package/dist/index.js
ADDED
@@ -0,0 +1,134 @@
|
|
1
|
+
"use strict";
|
2
|
+
"use client";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// packages/react/progress/src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
Progress: () => Progress,
|
35
|
+
ProgressIndicator: () => ProgressIndicator,
|
36
|
+
Root: () => Root,
|
37
|
+
createProgressScope: () => createProgressScope
|
38
|
+
});
|
39
|
+
module.exports = __toCommonJS(src_exports);
|
40
|
+
|
41
|
+
// packages/react/progress/src/Progress.tsx
|
42
|
+
var React = __toESM(require("react"));
|
43
|
+
var import_react_context = require("@huin-core/react-context");
|
44
|
+
var import_react_primitive = require("@huin-core/react-primitive");
|
45
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
46
|
+
var PROGRESS_NAME = "Progress";
|
47
|
+
var DEFAULT_MAX = 100;
|
48
|
+
var [createProgressContext, createProgressScope] = (0, import_react_context.createContextScope)(PROGRESS_NAME);
|
49
|
+
var [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
50
|
+
var Progress = React.forwardRef(
|
51
|
+
(props, forwardedRef) => {
|
52
|
+
const {
|
53
|
+
__scopeProgress,
|
54
|
+
value: valueProp = null,
|
55
|
+
max: maxProp,
|
56
|
+
getValueLabel = defaultGetValueLabel,
|
57
|
+
...progressProps
|
58
|
+
} = props;
|
59
|
+
if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {
|
60
|
+
console.error(getInvalidMaxError(`${maxProp}`, "Progress"));
|
61
|
+
}
|
62
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
63
|
+
if (valueProp !== null && !isValidValueNumber(valueProp, max)) {
|
64
|
+
console.error(getInvalidValueError(`${valueProp}`, "Progress"));
|
65
|
+
}
|
66
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
67
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, { scope: __scopeProgress, value, max, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
69
|
+
import_react_primitive.Primitive.div,
|
70
|
+
{
|
71
|
+
"aria-valuemax": max,
|
72
|
+
"aria-valuemin": 0,
|
73
|
+
"aria-valuenow": isNumber(value) ? value : void 0,
|
74
|
+
"aria-valuetext": valueLabel,
|
75
|
+
role: "progressbar",
|
76
|
+
"data-state": getProgressState(value, max),
|
77
|
+
"data-value": value ?? void 0,
|
78
|
+
"data-max": max,
|
79
|
+
...progressProps,
|
80
|
+
ref: forwardedRef
|
81
|
+
}
|
82
|
+
) });
|
83
|
+
}
|
84
|
+
);
|
85
|
+
Progress.displayName = PROGRESS_NAME;
|
86
|
+
function defaultGetValueLabel(value, max) {
|
87
|
+
return `${Math.round(value / max * 100)}%`;
|
88
|
+
}
|
89
|
+
function getProgressState(value, maxValue) {
|
90
|
+
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
91
|
+
}
|
92
|
+
function isNumber(value) {
|
93
|
+
return typeof value === "number";
|
94
|
+
}
|
95
|
+
function isValidMaxNumber(max) {
|
96
|
+
return isNumber(max) && !isNaN(max) && max > 0;
|
97
|
+
}
|
98
|
+
function isValidValueNumber(value, max) {
|
99
|
+
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
100
|
+
}
|
101
|
+
function getInvalidMaxError(propValue, componentName) {
|
102
|
+
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
103
|
+
}
|
104
|
+
function getInvalidValueError(propValue, componentName) {
|
105
|
+
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
106
|
+
- a positive number
|
107
|
+
- less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
|
108
|
+
- \`null\` or \`undefined\` if the progress is indeterminate.
|
109
|
+
|
110
|
+
Defaulting to \`null\`.`;
|
111
|
+
}
|
112
|
+
var Root = Progress;
|
113
|
+
|
114
|
+
// packages/react/progress/src/ProgressIndicator.tsx
|
115
|
+
var import_react = __toESM(require("react"));
|
116
|
+
var import_react_primitive2 = require("@huin-core/react-primitive");
|
117
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
118
|
+
var INDICATOR_NAME = "ProgressIndicator";
|
119
|
+
var ProgressIndicator = import_react.default.forwardRef((props, forwardedRef) => {
|
120
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
121
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
123
|
+
import_react_primitive2.Primitive.div,
|
124
|
+
{
|
125
|
+
"data-state": getProgressState(context.value, context.max),
|
126
|
+
"data-value": context.value ?? void 0,
|
127
|
+
"data-max": context.max,
|
128
|
+
...indicatorProps,
|
129
|
+
ref: forwardedRef
|
130
|
+
}
|
131
|
+
);
|
132
|
+
});
|
133
|
+
ProgressIndicator.displayName = INDICATOR_NAME;
|
134
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/Progress.tsx", "../src/ProgressIndicator.tsx"],
|
4
|
+
"sourcesContent": ["\"use client\";\nexport { createProgressScope, Progress, Root } from \"./Progress\";\nexport { ProgressIndicator } from \"./ProgressIndicator\";\nexport type { ProgressProps } from \"./Progress\";\nexport type { ProgressIndicatorProps } from \"./ProgressIndicator\";\n", "import * as React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport type { Scope } from \"@huin-core/react-context\";\n\n/* -------------------------------------------------------------------------------------------------\n * Progress\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROGRESS_NAME = \"Progress\";\nconst DEFAULT_MAX = 100;\n\nexport type ScopedProps<P> = P & { __scopeProgress?: Scope };\nconst [createProgressContext, createProgressScope] =\n createContextScope(PROGRESS_NAME);\n\ntype ProgressState = \"indeterminate\" | \"complete\" | \"loading\";\ntype ProgressContextValue = { value: number | null; max: number };\nexport const [ProgressProvider, useProgressContext] =\n createProgressContext<ProgressContextValue>(PROGRESS_NAME);\n\ntype ProgressElement = React.ElementRef<typeof Primitive.div>;\nexport type PrimitiveDivProps = React.ComponentPropsWithoutRef<\n typeof Primitive.div\n>;\ninterface ProgressProps extends PrimitiveDivProps {\n value?: number | null | undefined;\n max?: number;\n getValueLabel?(value: number, max: number): string;\n}\n\nconst Progress = React.forwardRef<ProgressElement, ProgressProps>(\n (props: ScopedProps<ProgressProps>, forwardedRef) => {\n const {\n __scopeProgress,\n value: valueProp = null,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n ...progressProps\n } = props;\n\n if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {\n console.error(getInvalidMaxError(`${maxProp}`, \"Progress\"));\n }\n\n const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;\n\n if (valueProp !== null && !isValidValueNumber(valueProp, max)) {\n console.error(getInvalidValueError(`${valueProp}`, \"Progress\"));\n }\n\n const value = isValidValueNumber(valueProp, max) ? valueProp : null;\n const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined;\n\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max}>\n <Primitive.div\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={isNumber(value) ? value : undefined}\n aria-valuetext={valueLabel}\n role=\"progressbar\"\n data-state={getProgressState(value, max)}\n data-value={value ?? undefined}\n data-max={max}\n {...progressProps}\n ref={forwardedRef}\n />\n </ProgressProvider>\n );\n }\n);\n\nProgress.displayName = PROGRESS_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`;\n}\n\nexport function getProgressState(\n value: number | undefined | null,\n maxValue: number\n): ProgressState {\n return value == null\n ? \"indeterminate\"\n : value === maxValue\n ? \"complete\"\n : \"loading\";\n}\n\nfunction isNumber(value: any): value is number {\n return typeof value === \"number\";\n}\n\nfunction isValidMaxNumber(max: any): max is number {\n // prettier-ignore\n return (\n isNumber(max) &&\n !isNaN(max) &&\n max > 0\n );\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n // prettier-ignore\n return (\n isNumber(value) &&\n !isNaN(value) &&\n value <= max &&\n value >= 0\n );\n}\n\n// Split this out for clearer readability of the error message.\nfunction getInvalidMaxError(propValue: string, componentName: string) {\n return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`;\n}\n\nfunction getInvalidValueError(propValue: string, componentName: string) {\n return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`;\n}\n\nconst Root = Progress;\n\nexport {\n createProgressScope,\n //\n Progress,\n //\n Root,\n};\nexport type { ProgressProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n getProgressState,\n PrimitiveDivProps,\n ScopedProps,\n useProgressContext,\n} from \"./Progress\";\n\nconst INDICATOR_NAME = \"ProgressIndicator\";\n\ntype ProgressIndicatorElement = React.ElementRef<typeof Primitive.div>;\ninterface ProgressIndicatorProps extends PrimitiveDivProps {}\n\nconst ProgressIndicator = React.forwardRef<\n ProgressIndicatorElement,\n ProgressIndicatorProps\n>((props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {\n const { __scopeProgress, ...indicatorProps } = props;\n const context = useProgressContext(INDICATOR_NAME, __scopeProgress);\n return (\n <Primitive.div\n data-state={getProgressState(context.value, context.max)}\n data-value={context.value ?? undefined}\n data-max={context.max}\n {...indicatorProps}\n ref={forwardedRef}\n />\n );\n});\n\nProgressIndicator.displayName = INDICATOR_NAME;\n\nexport { ProgressIndicator };\nexport type { ProgressIndicatorProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["import_react_primitive", "import_jsx_runtime", "React"]
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,102 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// packages/react/progress/src/Progress.tsx
|
4
|
+
import * as React from "react";
|
5
|
+
import { createContextScope } from "@huin-core/react-context";
|
6
|
+
import { Primitive } from "@huin-core/react-primitive";
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
8
|
+
var PROGRESS_NAME = "Progress";
|
9
|
+
var DEFAULT_MAX = 100;
|
10
|
+
var [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
11
|
+
var [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
12
|
+
var Progress = React.forwardRef(
|
13
|
+
(props, forwardedRef) => {
|
14
|
+
const {
|
15
|
+
__scopeProgress,
|
16
|
+
value: valueProp = null,
|
17
|
+
max: maxProp,
|
18
|
+
getValueLabel = defaultGetValueLabel,
|
19
|
+
...progressProps
|
20
|
+
} = props;
|
21
|
+
if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {
|
22
|
+
console.error(getInvalidMaxError(`${maxProp}`, "Progress"));
|
23
|
+
}
|
24
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
25
|
+
if (valueProp !== null && !isValidValueNumber(valueProp, max)) {
|
26
|
+
console.error(getInvalidValueError(`${valueProp}`, "Progress"));
|
27
|
+
}
|
28
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
29
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
30
|
+
return /* @__PURE__ */ jsx(ProgressProvider, { scope: __scopeProgress, value, max, children: /* @__PURE__ */ jsx(
|
31
|
+
Primitive.div,
|
32
|
+
{
|
33
|
+
"aria-valuemax": max,
|
34
|
+
"aria-valuemin": 0,
|
35
|
+
"aria-valuenow": isNumber(value) ? value : void 0,
|
36
|
+
"aria-valuetext": valueLabel,
|
37
|
+
role: "progressbar",
|
38
|
+
"data-state": getProgressState(value, max),
|
39
|
+
"data-value": value ?? void 0,
|
40
|
+
"data-max": max,
|
41
|
+
...progressProps,
|
42
|
+
ref: forwardedRef
|
43
|
+
}
|
44
|
+
) });
|
45
|
+
}
|
46
|
+
);
|
47
|
+
Progress.displayName = PROGRESS_NAME;
|
48
|
+
function defaultGetValueLabel(value, max) {
|
49
|
+
return `${Math.round(value / max * 100)}%`;
|
50
|
+
}
|
51
|
+
function getProgressState(value, maxValue) {
|
52
|
+
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
53
|
+
}
|
54
|
+
function isNumber(value) {
|
55
|
+
return typeof value === "number";
|
56
|
+
}
|
57
|
+
function isValidMaxNumber(max) {
|
58
|
+
return isNumber(max) && !isNaN(max) && max > 0;
|
59
|
+
}
|
60
|
+
function isValidValueNumber(value, max) {
|
61
|
+
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
62
|
+
}
|
63
|
+
function getInvalidMaxError(propValue, componentName) {
|
64
|
+
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
65
|
+
}
|
66
|
+
function getInvalidValueError(propValue, componentName) {
|
67
|
+
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
68
|
+
- a positive number
|
69
|
+
- less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
|
70
|
+
- \`null\` or \`undefined\` if the progress is indeterminate.
|
71
|
+
|
72
|
+
Defaulting to \`null\`.`;
|
73
|
+
}
|
74
|
+
var Root = Progress;
|
75
|
+
|
76
|
+
// packages/react/progress/src/ProgressIndicator.tsx
|
77
|
+
import React2 from "react";
|
78
|
+
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
79
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
80
|
+
var INDICATOR_NAME = "ProgressIndicator";
|
81
|
+
var ProgressIndicator = React2.forwardRef((props, forwardedRef) => {
|
82
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
83
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
84
|
+
return /* @__PURE__ */ jsx2(
|
85
|
+
Primitive2.div,
|
86
|
+
{
|
87
|
+
"data-state": getProgressState(context.value, context.max),
|
88
|
+
"data-value": context.value ?? void 0,
|
89
|
+
"data-max": context.max,
|
90
|
+
...indicatorProps,
|
91
|
+
ref: forwardedRef
|
92
|
+
}
|
93
|
+
);
|
94
|
+
});
|
95
|
+
ProgressIndicator.displayName = INDICATOR_NAME;
|
96
|
+
export {
|
97
|
+
Progress,
|
98
|
+
ProgressIndicator,
|
99
|
+
Root,
|
100
|
+
createProgressScope
|
101
|
+
};
|
102
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/Progress.tsx", "../src/ProgressIndicator.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport type { Scope } from \"@huin-core/react-context\";\n\n/* -------------------------------------------------------------------------------------------------\n * Progress\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROGRESS_NAME = \"Progress\";\nconst DEFAULT_MAX = 100;\n\nexport type ScopedProps<P> = P & { __scopeProgress?: Scope };\nconst [createProgressContext, createProgressScope] =\n createContextScope(PROGRESS_NAME);\n\ntype ProgressState = \"indeterminate\" | \"complete\" | \"loading\";\ntype ProgressContextValue = { value: number | null; max: number };\nexport const [ProgressProvider, useProgressContext] =\n createProgressContext<ProgressContextValue>(PROGRESS_NAME);\n\ntype ProgressElement = React.ElementRef<typeof Primitive.div>;\nexport type PrimitiveDivProps = React.ComponentPropsWithoutRef<\n typeof Primitive.div\n>;\ninterface ProgressProps extends PrimitiveDivProps {\n value?: number | null | undefined;\n max?: number;\n getValueLabel?(value: number, max: number): string;\n}\n\nconst Progress = React.forwardRef<ProgressElement, ProgressProps>(\n (props: ScopedProps<ProgressProps>, forwardedRef) => {\n const {\n __scopeProgress,\n value: valueProp = null,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n ...progressProps\n } = props;\n\n if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {\n console.error(getInvalidMaxError(`${maxProp}`, \"Progress\"));\n }\n\n const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;\n\n if (valueProp !== null && !isValidValueNumber(valueProp, max)) {\n console.error(getInvalidValueError(`${valueProp}`, \"Progress\"));\n }\n\n const value = isValidValueNumber(valueProp, max) ? valueProp : null;\n const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined;\n\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max}>\n <Primitive.div\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={isNumber(value) ? value : undefined}\n aria-valuetext={valueLabel}\n role=\"progressbar\"\n data-state={getProgressState(value, max)}\n data-value={value ?? undefined}\n data-max={max}\n {...progressProps}\n ref={forwardedRef}\n />\n </ProgressProvider>\n );\n }\n);\n\nProgress.displayName = PROGRESS_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`;\n}\n\nexport function getProgressState(\n value: number | undefined | null,\n maxValue: number\n): ProgressState {\n return value == null\n ? \"indeterminate\"\n : value === maxValue\n ? \"complete\"\n : \"loading\";\n}\n\nfunction isNumber(value: any): value is number {\n return typeof value === \"number\";\n}\n\nfunction isValidMaxNumber(max: any): max is number {\n // prettier-ignore\n return (\n isNumber(max) &&\n !isNaN(max) &&\n max > 0\n );\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n // prettier-ignore\n return (\n isNumber(value) &&\n !isNaN(value) &&\n value <= max &&\n value >= 0\n );\n}\n\n// Split this out for clearer readability of the error message.\nfunction getInvalidMaxError(propValue: string, componentName: string) {\n return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`;\n}\n\nfunction getInvalidValueError(propValue: string, componentName: string) {\n return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`;\n}\n\nconst Root = Progress;\n\nexport {\n createProgressScope,\n //\n Progress,\n //\n Root,\n};\nexport type { ProgressProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n getProgressState,\n PrimitiveDivProps,\n ScopedProps,\n useProgressContext,\n} from \"./Progress\";\n\nconst INDICATOR_NAME = \"ProgressIndicator\";\n\ntype ProgressIndicatorElement = React.ElementRef<typeof Primitive.div>;\ninterface ProgressIndicatorProps extends PrimitiveDivProps {}\n\nconst ProgressIndicator = React.forwardRef<\n ProgressIndicatorElement,\n ProgressIndicatorProps\n>((props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {\n const { __scopeProgress, ...indicatorProps } = props;\n const context = useProgressContext(INDICATOR_NAME, __scopeProgress);\n return (\n <Primitive.div\n data-state={getProgressState(context.value, context.max)}\n data-value={context.value ?? undefined}\n data-max={context.max}\n {...indicatorProps}\n ref={forwardedRef}\n />\n );\n});\n\nProgressIndicator.displayName = INDICATOR_NAME;\n\nexport { ProgressIndicator };\nexport type { ProgressIndicatorProps };\n"],
|
5
|
+
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAsDlB;AA/CR,IAAM,gBAAgB;AACtB,IAAM,cAAc;AAGpB,IAAM,CAAC,uBAAuB,mBAAmB,IAC/C,mBAAmB,aAAa;AAI3B,IAAM,CAAC,kBAAkB,kBAAkB,IAChD,sBAA4C,aAAa;AAY3D,IAAM,WAAiB;AAAA,EACrB,CAAC,OAAmC,iBAAiB;AACnD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO,YAAY;AAAA,MACnB,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL,IAAI;AAEJ,SAAK,WAAW,YAAY,MAAM,CAAC,iBAAiB,OAAO,GAAG;AAC5D,cAAQ,MAAM,mBAAmB,GAAG,OAAO,IAAI,UAAU,CAAC;AAAA,IAC5D;AAEA,UAAM,MAAM,iBAAiB,OAAO,IAAI,UAAU;AAElD,QAAI,cAAc,QAAQ,CAAC,mBAAmB,WAAW,GAAG,GAAG;AAC7D,cAAQ,MAAM,qBAAqB,GAAG,SAAS,IAAI,UAAU,CAAC;AAAA,IAChE;AAEA,UAAM,QAAQ,mBAAmB,WAAW,GAAG,IAAI,YAAY;AAC/D,UAAM,aAAa,SAAS,KAAK,IAAI,cAAc,OAAO,GAAG,IAAI;AAEjE,WACE,oBAAC,oBAAiB,OAAO,iBAAiB,OAAc,KACtD;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,SAAS,KAAK,IAAI,QAAQ;AAAA,QACzC,kBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,cAAY,iBAAiB,OAAO,GAAG;AAAA,QACvC,cAAY,SAAS;AAAA,QACrB,YAAU;AAAA,QACT,GAAG;AAAA,QACJ,KAAK;AAAA;AAAA,IACP,GACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAIvB,SAAS,qBAAqB,OAAe,KAAa;AACxD,SAAO,GAAG,KAAK,MAAO,QAAQ,MAAO,GAAG,CAAC;AAC3C;AAEO,SAAS,iBACd,OACA,UACe;AACf,SAAO,SAAS,OACZ,kBACA,UAAU,WACV,aACA;AACN;AAEA,SAAS,SAAS,OAA6B;AAC7C,SAAO,OAAO,UAAU;AAC1B;AAEA,SAAS,iBAAiB,KAAyB;AAEjD,SACE,SAAS,GAAG,KACZ,CAAC,MAAM,GAAG,KACV,MAAM;AAEV;AAEA,SAAS,mBAAmB,OAAY,KAA8B;AAEpE,SACE,SAAS,KAAK,KACd,CAAC,MAAM,KAAK,KACZ,SAAS,OACT,SAAS;AAEb;AAGA,SAAS,mBAAmB,WAAmB,eAAuB;AACpE,SAAO,mCAAmC,SAAS,oBAAoB,aAAa,yEAAyE,WAAW;AAC1K;AAEA,SAAS,qBAAqB,WAAmB,eAAuB;AACtE,SAAO,qCAAqC,SAAS,oBAAoB,aAAa;AAAA;AAAA,gDAExC,WAAW;AAAA;AAAA;AAAA;AAI3D;AAEA,IAAM,OAAO;;;ACjIb,OAAOA,YAAW;AAClB,SAAS,aAAAC,kBAAiB;AAoBtB,gBAAAC,YAAA;AAZJ,IAAM,iBAAiB;AAKvB,IAAM,oBAAoBC,OAAM,WAG9B,CAAC,OAA4C,iBAAiB;AAC9D,QAAM,EAAE,iBAAiB,GAAG,eAAe,IAAI;AAC/C,QAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,SACE,gBAAAD;AAAA,IAACE,WAAU;AAAA,IAAV;AAAA,MACC,cAAY,iBAAiB,QAAQ,OAAO,QAAQ,GAAG;AAAA,MACvD,cAAY,QAAQ,SAAS;AAAA,MAC7B,YAAU,QAAQ;AAAA,MACjB,GAAG;AAAA,MACJ,KAAK;AAAA;AAAA,EACP;AAEJ,CAAC;AAED,kBAAkB,cAAc;",
|
6
|
+
"names": ["React", "Primitive", "jsx", "React", "Primitive"]
|
7
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@huin-core/react-progress",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.3",
|
4
4
|
"license": "MIT",
|
5
5
|
"exports": {
|
6
6
|
".": {
|
@@ -28,8 +28,8 @@
|
|
28
28
|
"version": "yarn version"
|
29
29
|
},
|
30
30
|
"dependencies": {
|
31
|
-
"@huin-core/react-context": "
|
32
|
-
"@huin-core/react-primitive": "
|
31
|
+
"@huin-core/react-context": "latest",
|
32
|
+
"@huin-core/react-primitive": "latest"
|
33
33
|
},
|
34
34
|
"peerDependencies": {
|
35
35
|
"@types/react": "*",
|