infinity-forge 7.3.6 → 7.3.7
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/dist/ui/components/form/input-range/index.d.ts +3 -3
- package/dist/ui/components/form/input-range/index.js +27 -5
- package/dist/ui/components/form/input-range/index.js.map +1 -1
- package/dist/ui/components/form/input-range/styles.js +1 -1
- package/dist/ui/components/form/input-range/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { InputProps } from '../../../../ui/index.js';
|
|
2
|
-
|
|
2
|
+
type InputRangeProps = InputProps & {
|
|
3
3
|
sufix?: string;
|
|
4
|
-
}
|
|
5
|
-
export declare function InputRange({ name, min, max, sufix }: InputRangeProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
};
|
|
5
|
+
export declare function InputRange({ name, min, max, sufix, ...props }: InputRangeProps): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export {};
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -32,6 +43,17 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
43
|
return result;
|
|
33
44
|
};
|
|
34
45
|
})();
|
|
46
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
+
var t = {};
|
|
48
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
+
t[p] = s[p];
|
|
50
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
+
t[p[i]] = s[p[i]];
|
|
54
|
+
}
|
|
55
|
+
return t;
|
|
56
|
+
};
|
|
35
57
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
58
|
exports.InputRange = InputRange;
|
|
37
59
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -39,7 +61,7 @@ var formik_1 = require("formik");
|
|
|
39
61
|
var ui_1 = require("../../../../ui/index.js");
|
|
40
62
|
var S = __importStar(require("./styles.js"));
|
|
41
63
|
function InputRange(_a) {
|
|
42
|
-
var name = _a.name, min = _a.min, max = _a.max, sufix = _a.sufix;
|
|
64
|
+
var name = _a.name, min = _a.min, max = _a.max, sufix = _a.sufix, props = __rest(_a, ["name", "min", "max", "sufix"]);
|
|
43
65
|
var _b = (0, formik_1.useField)({ name: name }), _ = _b[0], state = _b[1], utils = _b[2];
|
|
44
66
|
function handleRangeChange(event) {
|
|
45
67
|
var newValue = Number(event.target.value);
|
|
@@ -49,9 +71,9 @@ function InputRange(_a) {
|
|
|
49
71
|
var percent = isValid ? ((state.value - Number(min)) / (Number(max) - Number(min))) * 100 : 0;
|
|
50
72
|
var isEnd = percent >= 90;
|
|
51
73
|
var isStart = percent <= 10;
|
|
52
|
-
return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'InputRange', children: (0, jsx_runtime_1.jsx)(S.InputRange, { className: 'input_range', children: (0, jsx_runtime_1.jsxs)("div", { className: 'value-box', children: [state.value !== undefined && ((0, jsx_runtime_1.jsxs)("span", { className: 'value_actual', style: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'InputRange', children: (0, jsx_runtime_1.jsx)(S.InputRange, { className: 'input_range', children: (0, jsx_runtime_1.jsx)(ui_1.InputControl, __assign({ name: name }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'value-box', children: [state.value !== undefined && ((0, jsx_runtime_1.jsxs)("span", { className: 'value_actual', style: {
|
|
75
|
+
left: "".concat(percent, "%"),
|
|
76
|
+
transform: "translate(".concat(isEnd ? -100 : isStart ? 0 : -percent, "%, -100%)"),
|
|
77
|
+
}, children: [state.value, sufix] })), (0, jsx_runtime_1.jsx)("input", { id: name, min: min, max: max, type: 'range', onChange: handleRangeChange }), (0, jsx_runtime_1.jsxs)("div", { className: 'values_input_range', children: [(0, jsx_runtime_1.jsxs)("span", { children: [min, sufix] }), (0, jsx_runtime_1.jsxs)("span", { children: [max, sufix] })] })] }) })) }) }));
|
|
56
78
|
}
|
|
57
79
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-range/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-range/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,gCAoDC;;AA9DD,iCAAiC;AAEjC,2BAAsD;AAEtD,0CAA6B;AAM7B,SAAgB,UAAU,CAAC,EAAoD;IAAlD,IAAA,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,GAAG,SAAA,EAAE,KAAK,WAAA,EAAK,KAAK,cAAjC,+BAAmC,CAAF;IACpD,IAAA,KAAoB,IAAA,iBAAQ,EAAC,EAAE,IAAI,MAAA,EAAE,CAAC,EAArC,CAAC,QAAA,EAAE,KAAK,QAAA,EAAE,KAAK,QAAsB,CAAA;IAE5C,SAAS,iBAAiB,CAAC,KAAoC;QAC7D,IAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAE3C,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC;IAED,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,KAAK,CAAA;IAE1D,IAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IAE/F,IAAM,KAAK,GAAG,OAAO,IAAI,EAAE,CAAA;IAC3B,IAAM,OAAO,GAAG,OAAO,IAAI,EAAE,CAAA;IAE7B,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,YAAY,YACtB,uBAAC,CAAC,CAAC,UAAU,IAAC,SAAS,EAAC,aAAa,YACnC,uBAAC,iBAAY,aAAC,IAAI,EAAE,IAAI,IAAM,KAAK,cACjC,iCAAK,SAAS,EAAC,WAAW,aACvB,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,CAC5B,kCACE,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE;gCACL,IAAI,EAAE,UAAG,OAAO,MAAG;gCACnB,SAAS,EAAE,oBAAa,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,cAAW;6BACzE,aAEA,KAAK,CAAC,KAAK,EACX,KAAK,IACD,CACR,EAED,kCAAO,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,iBAAiB,GAAI,EAEjF,iCAAK,SAAS,EAAC,oBAAoB,aACjC,6CACG,GAAG,EACH,KAAK,IACD,EAEP,6CACG,GAAG,EACH,KAAK,IACD,IACH,IACF,IACO,GACF,GACT,CACT,CAAA;AACH,CAAC"}
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.InputRange = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.InputRange = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
12
|
+
exports.InputRange = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n label {\n margin-bottom: 20px;\n }\n\n input {\n padding: 0;\n border: none;\n }\n\n span {\n font-size: 14px;\n }\n\n .value-box {\n position: relative;\n }\n\n .value_actual {\n position: absolute;\n top: 0;\n }\n\n .values_input_range {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n input[type='range'] {\n font-size: 1.5rem;\n width: 100%;\n }\n\n input[type='range'] {\n color: ", ";\n --thumb-height: 14px;\n --track-height: 0.14em;\n --track-color: #dcdcdc;\n --brightness-hover: 180%;\n --brightness-down: 80%;\n --clip-edges: 0.125em;\n }\n\n input[type='range'] {\n position: relative;\n background: #fff0;\n overflow: hidden;\n }\n\n input[type='range']:active {\n cursor: grabbing;\n }\n\n input[type='range']:disabled {\n filter: grayscale(1);\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n /* === WebKit specific styles === */\n input[type='range'],\n input[type='range']::-webkit-slider-runnable-track,\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n transition: all ease 100ms;\n height: var(--thumb-height);\n }\n\n input[type='range']::-webkit-slider-thumb {\n --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);\n --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n --clip-further: calc(100% + 1px);\n --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;\n\n width: var(--thumb-width, var(--thumb-height));\n background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);\n background-color: currentColor;\n box-shadow: var(--box-fill);\n border-radius: var(--thumb-width, var(--thumb-height));\n height: 1.4rem;\n width: 1.4rem;\n\n filter: brightness(100%);\n clip-path: polygon(\n 100% -1px,\n var(--clip-edges) -1px,\n 0 var(--clip-top),\n -100vmax var(--clip-top),\n -100vmax var(--clip-bottom),\n 0 var(--clip-bottom),\n var(--clip-edges) 100%,\n var(--clip-further) var(--clip-further)\n );\n }\n\n input[type='range']::-webkit-slider-runnable-track {\n background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n cursor: not-allowed;\n }\n"], ["\n label {\n margin-bottom: 20px;\n }\n\n input {\n padding: 0;\n border: none;\n }\n\n span {\n font-size: 14px;\n }\n\n .value-box {\n position: relative;\n }\n\n .value_actual {\n position: absolute;\n top: 0;\n }\n\n .values_input_range {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n input[type='range'] {\n font-size: 1.5rem;\n width: 100%;\n }\n\n input[type='range'] {\n color: ", ";\n --thumb-height: 14px;\n --track-height: 0.14em;\n --track-color: #dcdcdc;\n --brightness-hover: 180%;\n --brightness-down: 80%;\n --clip-edges: 0.125em;\n }\n\n input[type='range'] {\n position: relative;\n background: #fff0;\n overflow: hidden;\n }\n\n input[type='range']:active {\n cursor: grabbing;\n }\n\n input[type='range']:disabled {\n filter: grayscale(1);\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n /* === WebKit specific styles === */\n input[type='range'],\n input[type='range']::-webkit-slider-runnable-track,\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n transition: all ease 100ms;\n height: var(--thumb-height);\n }\n\n input[type='range']::-webkit-slider-thumb {\n --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);\n --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n --clip-further: calc(100% + 1px);\n --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;\n\n width: var(--thumb-width, var(--thumb-height));\n background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);\n background-color: currentColor;\n box-shadow: var(--box-fill);\n border-radius: var(--thumb-width, var(--thumb-height));\n height: 1.4rem;\n width: 1.4rem;\n\n filter: brightness(100%);\n clip-path: polygon(\n 100% -1px,\n var(--clip-edges) -1px,\n 0 var(--clip-top),\n -100vmax var(--clip-top),\n -100vmax var(--clip-bottom),\n 0 var(--clip-bottom),\n var(--clip-edges) 100%,\n var(--clip-further) var(--clip-further)\n );\n }\n\n input[type='range']::-webkit-slider-runnable-track {\n background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n cursor: not-allowed;\n }\n"])), function (p) { return p.theme.primaryColor; });
|
|
13
13
|
var templateObject_1;
|
|
14
14
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-range/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,UAAU,GAAG,IAAA,2BAAM,EAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-range/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,UAAU,GAAG,IAAA,2BAAM,EAAC,KAAK,CAAC,6/EAAA,8dAmC1B,EAA2B,09DAoEvC,KApEY,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,YAAY,EAApB,CAAoB,EAoEvC"}
|