@dcg-overseas/number-line 0.1.15 → 0.1.17
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/index.cjs +12 -3
- package/dist/index.d.ts +5 -1
- package/dist/index.js +12 -3
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -260,8 +260,10 @@ function NumberLineProvider({
|
|
|
260
260
|
enableZoom = false,
|
|
261
261
|
minZoom = 1,
|
|
262
262
|
maxZoom = 50,
|
|
263
|
+
showLabelStep = false,
|
|
263
264
|
viewMin: controlledViewMin,
|
|
264
265
|
viewMax: controlledViewMax,
|
|
266
|
+
getShowLabelStep,
|
|
265
267
|
onViewChange,
|
|
266
268
|
children
|
|
267
269
|
}) {
|
|
@@ -451,6 +453,8 @@ function NumberLineProvider({
|
|
|
451
453
|
showGroupTicks,
|
|
452
454
|
showMajorTicks,
|
|
453
455
|
showMinorTicks,
|
|
456
|
+
showLabelStep,
|
|
457
|
+
getShowLabelStep,
|
|
454
458
|
viewMin,
|
|
455
459
|
viewMax,
|
|
456
460
|
enableZoom,
|
|
@@ -562,7 +566,8 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
562
566
|
showGroupTicks,
|
|
563
567
|
showMajorTicks,
|
|
564
568
|
showMinorTicks,
|
|
565
|
-
showLabelStep
|
|
569
|
+
showLabelStep,
|
|
570
|
+
getShowLabelStep
|
|
566
571
|
}) {
|
|
567
572
|
const range = viewMax - viewMin;
|
|
568
573
|
if (range <= 0) return null;
|
|
@@ -582,6 +587,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
582
587
|
for (let v = startVal; v <= viewMax; v += iterStep) {
|
|
583
588
|
if (v >= viewMin && v <= viewMax) allTicks.push(v);
|
|
584
589
|
}
|
|
590
|
+
const length = allTicks.length;
|
|
585
591
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-axis-layer", children: [
|
|
586
592
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
587
593
|
"line",
|
|
@@ -607,6 +613,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
607
613
|
const renderAsGroup = isGroupBoundary && showGroupTicks;
|
|
608
614
|
const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
|
|
609
615
|
const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
|
|
616
|
+
const currentShowLabelStep = typeof getShowLabelStep !== "function" ? false : getShowLabelStep == null ? void 0 : getShowLabelStep({ viewMin, viewMax, offset, labelStep, length, v });
|
|
610
617
|
const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
|
|
611
618
|
const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : 1;
|
|
612
619
|
const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
|
|
@@ -622,7 +629,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
622
629
|
strokeWidth: strokeW
|
|
623
630
|
}
|
|
624
631
|
),
|
|
625
|
-
(showLabel || showLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
632
|
+
(showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
626
633
|
"text",
|
|
627
634
|
{
|
|
628
635
|
x,
|
|
@@ -960,6 +967,7 @@ function NumberLine({ className }) {
|
|
|
960
967
|
showMajorTicks,
|
|
961
968
|
showMinorTicks,
|
|
962
969
|
showLabelStep,
|
|
970
|
+
getShowLabelStep,
|
|
963
971
|
viewMin,
|
|
964
972
|
viewMax,
|
|
965
973
|
enableZoom,
|
|
@@ -1170,7 +1178,8 @@ function NumberLine({ className }) {
|
|
|
1170
1178
|
showGroupTicks,
|
|
1171
1179
|
showMajorTicks,
|
|
1172
1180
|
showMinorTicks,
|
|
1173
|
-
showLabelStep
|
|
1181
|
+
showLabelStep,
|
|
1182
|
+
getShowLabelStep
|
|
1174
1183
|
}
|
|
1175
1184
|
),
|
|
1176
1185
|
/* @__PURE__ */ jsxRuntime.jsx(
|
package/dist/index.d.ts
CHANGED
|
@@ -43,6 +43,7 @@ export declare interface NumberLineContextValue {
|
|
|
43
43
|
onDelete: () => void;
|
|
44
44
|
onReset: () => void;
|
|
45
45
|
onUndo: () => void;
|
|
46
|
+
getShowLabelStep?: (params: unknown) => boolean;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
export declare interface NumberLineProps {
|
|
@@ -58,6 +59,8 @@ export declare interface NumberLineProps {
|
|
|
58
59
|
showMajorTicks?: boolean;
|
|
59
60
|
/** show minor ticks (in-between). Default: false */
|
|
60
61
|
showMinorTicks?: boolean;
|
|
62
|
+
/** show label step. Default: false */
|
|
63
|
+
showLabelStep?: boolean;
|
|
61
64
|
/** enable mouse-wheel / pinch zoom + drag-to-pan. Default: false */
|
|
62
65
|
enableZoom?: boolean;
|
|
63
66
|
/** minimum zoom level. 1 = full [min, max] range. Default: 1 */
|
|
@@ -69,9 +72,10 @@ export declare interface NumberLineProps {
|
|
|
69
72
|
viewMax?: number;
|
|
70
73
|
/** fired whenever internal viewport changes (uncontrolled mode) */
|
|
71
74
|
onViewChange?: (viewMin: number, viewMax: number) => void;
|
|
75
|
+
getShowLabelStep?: (params: unknown) => boolean;
|
|
72
76
|
}
|
|
73
77
|
|
|
74
|
-
export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, viewMin: controlledViewMin, viewMax: controlledViewMax, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
|
|
78
|
+
export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
|
|
75
79
|
|
|
76
80
|
declare interface NumberLineProviderProps extends NumberLineProps {
|
|
77
81
|
children: default_2.ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -258,8 +258,10 @@ function NumberLineProvider({
|
|
|
258
258
|
enableZoom = false,
|
|
259
259
|
minZoom = 1,
|
|
260
260
|
maxZoom = 50,
|
|
261
|
+
showLabelStep = false,
|
|
261
262
|
viewMin: controlledViewMin,
|
|
262
263
|
viewMax: controlledViewMax,
|
|
264
|
+
getShowLabelStep,
|
|
263
265
|
onViewChange,
|
|
264
266
|
children
|
|
265
267
|
}) {
|
|
@@ -449,6 +451,8 @@ function NumberLineProvider({
|
|
|
449
451
|
showGroupTicks,
|
|
450
452
|
showMajorTicks,
|
|
451
453
|
showMinorTicks,
|
|
454
|
+
showLabelStep,
|
|
455
|
+
getShowLabelStep,
|
|
452
456
|
viewMin,
|
|
453
457
|
viewMax,
|
|
454
458
|
enableZoom,
|
|
@@ -560,7 +564,8 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
560
564
|
showGroupTicks,
|
|
561
565
|
showMajorTicks,
|
|
562
566
|
showMinorTicks,
|
|
563
|
-
showLabelStep
|
|
567
|
+
showLabelStep,
|
|
568
|
+
getShowLabelStep
|
|
564
569
|
}) {
|
|
565
570
|
const range = viewMax - viewMin;
|
|
566
571
|
if (range <= 0) return null;
|
|
@@ -580,6 +585,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
580
585
|
for (let v = startVal; v <= viewMax; v += iterStep) {
|
|
581
586
|
if (v >= viewMin && v <= viewMax) allTicks.push(v);
|
|
582
587
|
}
|
|
588
|
+
const length = allTicks.length;
|
|
583
589
|
return /* @__PURE__ */ jsxs("g", { className: "nl-axis-layer", children: [
|
|
584
590
|
/* @__PURE__ */ jsx(
|
|
585
591
|
"line",
|
|
@@ -605,6 +611,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
605
611
|
const renderAsGroup = isGroupBoundary && showGroupTicks;
|
|
606
612
|
const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
|
|
607
613
|
const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
|
|
614
|
+
const currentShowLabelStep = typeof getShowLabelStep !== "function" ? false : getShowLabelStep == null ? void 0 : getShowLabelStep({ viewMin, viewMax, offset, labelStep, length, v });
|
|
608
615
|
const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
|
|
609
616
|
const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : 1;
|
|
610
617
|
const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
|
|
@@ -620,7 +627,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
620
627
|
strokeWidth: strokeW
|
|
621
628
|
}
|
|
622
629
|
),
|
|
623
|
-
(showLabel || showLabelStep) && /* @__PURE__ */ jsx(
|
|
630
|
+
(showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsx(
|
|
624
631
|
"text",
|
|
625
632
|
{
|
|
626
633
|
x,
|
|
@@ -958,6 +965,7 @@ function NumberLine({ className }) {
|
|
|
958
965
|
showMajorTicks,
|
|
959
966
|
showMinorTicks,
|
|
960
967
|
showLabelStep,
|
|
968
|
+
getShowLabelStep,
|
|
961
969
|
viewMin,
|
|
962
970
|
viewMax,
|
|
963
971
|
enableZoom,
|
|
@@ -1168,7 +1176,8 @@ function NumberLine({ className }) {
|
|
|
1168
1176
|
showGroupTicks,
|
|
1169
1177
|
showMajorTicks,
|
|
1170
1178
|
showMinorTicks,
|
|
1171
|
-
showLabelStep
|
|
1179
|
+
showLabelStep,
|
|
1180
|
+
getShowLabelStep
|
|
1172
1181
|
}
|
|
1173
1182
|
),
|
|
1174
1183
|
/* @__PURE__ */ jsx(
|