@dcg-overseas/number-line 0.1.16 → 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 +10 -3
- package/dist/index.d.ts +3 -1
- package/dist/index.js +10 -3
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -263,6 +263,7 @@ function NumberLineProvider({
|
|
|
263
263
|
showLabelStep = false,
|
|
264
264
|
viewMin: controlledViewMin,
|
|
265
265
|
viewMax: controlledViewMax,
|
|
266
|
+
getShowLabelStep,
|
|
266
267
|
onViewChange,
|
|
267
268
|
children
|
|
268
269
|
}) {
|
|
@@ -453,6 +454,7 @@ function NumberLineProvider({
|
|
|
453
454
|
showMajorTicks,
|
|
454
455
|
showMinorTicks,
|
|
455
456
|
showLabelStep,
|
|
457
|
+
getShowLabelStep,
|
|
456
458
|
viewMin,
|
|
457
459
|
viewMax,
|
|
458
460
|
enableZoom,
|
|
@@ -564,7 +566,8 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
564
566
|
showGroupTicks,
|
|
565
567
|
showMajorTicks,
|
|
566
568
|
showMinorTicks,
|
|
567
|
-
showLabelStep
|
|
569
|
+
showLabelStep,
|
|
570
|
+
getShowLabelStep
|
|
568
571
|
}) {
|
|
569
572
|
const range = viewMax - viewMin;
|
|
570
573
|
if (range <= 0) return null;
|
|
@@ -584,6 +587,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
584
587
|
for (let v = startVal; v <= viewMax; v += iterStep) {
|
|
585
588
|
if (v >= viewMin && v <= viewMax) allTicks.push(v);
|
|
586
589
|
}
|
|
590
|
+
const length = allTicks.length;
|
|
587
591
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-axis-layer", children: [
|
|
588
592
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
589
593
|
"line",
|
|
@@ -609,6 +613,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
609
613
|
const renderAsGroup = isGroupBoundary && showGroupTicks;
|
|
610
614
|
const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
|
|
611
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 });
|
|
612
617
|
const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
|
|
613
618
|
const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : 1;
|
|
614
619
|
const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
|
|
@@ -624,7 +629,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
624
629
|
strokeWidth: strokeW
|
|
625
630
|
}
|
|
626
631
|
),
|
|
627
|
-
(showLabel || showLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
632
|
+
(showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
628
633
|
"text",
|
|
629
634
|
{
|
|
630
635
|
x,
|
|
@@ -962,6 +967,7 @@ function NumberLine({ className }) {
|
|
|
962
967
|
showMajorTicks,
|
|
963
968
|
showMinorTicks,
|
|
964
969
|
showLabelStep,
|
|
970
|
+
getShowLabelStep,
|
|
965
971
|
viewMin,
|
|
966
972
|
viewMax,
|
|
967
973
|
enableZoom,
|
|
@@ -1172,7 +1178,8 @@ function NumberLine({ className }) {
|
|
|
1172
1178
|
showGroupTicks,
|
|
1173
1179
|
showMajorTicks,
|
|
1174
1180
|
showMinorTicks,
|
|
1175
|
-
showLabelStep
|
|
1181
|
+
showLabelStep,
|
|
1182
|
+
getShowLabelStep
|
|
1176
1183
|
}
|
|
1177
1184
|
),
|
|
1178
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 {
|
|
@@ -71,9 +72,10 @@ export declare interface NumberLineProps {
|
|
|
71
72
|
viewMax?: number;
|
|
72
73
|
/** fired whenever internal viewport changes (uncontrolled mode) */
|
|
73
74
|
onViewChange?: (viewMin: number, viewMax: number) => void;
|
|
75
|
+
getShowLabelStep?: (params: unknown) => boolean;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
|
-
export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, 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;
|
|
77
79
|
|
|
78
80
|
declare interface NumberLineProviderProps extends NumberLineProps {
|
|
79
81
|
children: default_2.ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -261,6 +261,7 @@ function NumberLineProvider({
|
|
|
261
261
|
showLabelStep = false,
|
|
262
262
|
viewMin: controlledViewMin,
|
|
263
263
|
viewMax: controlledViewMax,
|
|
264
|
+
getShowLabelStep,
|
|
264
265
|
onViewChange,
|
|
265
266
|
children
|
|
266
267
|
}) {
|
|
@@ -451,6 +452,7 @@ function NumberLineProvider({
|
|
|
451
452
|
showMajorTicks,
|
|
452
453
|
showMinorTicks,
|
|
453
454
|
showLabelStep,
|
|
455
|
+
getShowLabelStep,
|
|
454
456
|
viewMin,
|
|
455
457
|
viewMax,
|
|
456
458
|
enableZoom,
|
|
@@ -562,7 +564,8 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
562
564
|
showGroupTicks,
|
|
563
565
|
showMajorTicks,
|
|
564
566
|
showMinorTicks,
|
|
565
|
-
showLabelStep
|
|
567
|
+
showLabelStep,
|
|
568
|
+
getShowLabelStep
|
|
566
569
|
}) {
|
|
567
570
|
const range = viewMax - viewMin;
|
|
568
571
|
if (range <= 0) return null;
|
|
@@ -582,6 +585,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
582
585
|
for (let v = startVal; v <= viewMax; v += iterStep) {
|
|
583
586
|
if (v >= viewMin && v <= viewMax) allTicks.push(v);
|
|
584
587
|
}
|
|
588
|
+
const length = allTicks.length;
|
|
585
589
|
return /* @__PURE__ */ jsxs("g", { className: "nl-axis-layer", children: [
|
|
586
590
|
/* @__PURE__ */ jsx(
|
|
587
591
|
"line",
|
|
@@ -607,6 +611,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
607
611
|
const renderAsGroup = isGroupBoundary && showGroupTicks;
|
|
608
612
|
const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
|
|
609
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 });
|
|
610
615
|
const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
|
|
611
616
|
const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : 1;
|
|
612
617
|
const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
|
|
@@ -622,7 +627,7 @@ const AxisLayer = React.memo(function AxisLayer2({
|
|
|
622
627
|
strokeWidth: strokeW
|
|
623
628
|
}
|
|
624
629
|
),
|
|
625
|
-
(showLabel || showLabelStep) && /* @__PURE__ */ jsx(
|
|
630
|
+
(showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsx(
|
|
626
631
|
"text",
|
|
627
632
|
{
|
|
628
633
|
x,
|
|
@@ -960,6 +965,7 @@ function NumberLine({ className }) {
|
|
|
960
965
|
showMajorTicks,
|
|
961
966
|
showMinorTicks,
|
|
962
967
|
showLabelStep,
|
|
968
|
+
getShowLabelStep,
|
|
963
969
|
viewMin,
|
|
964
970
|
viewMax,
|
|
965
971
|
enableZoom,
|
|
@@ -1170,7 +1176,8 @@ function NumberLine({ className }) {
|
|
|
1170
1176
|
showGroupTicks,
|
|
1171
1177
|
showMajorTicks,
|
|
1172
1178
|
showMinorTicks,
|
|
1173
|
-
showLabelStep
|
|
1179
|
+
showLabelStep,
|
|
1180
|
+
getShowLabelStep
|
|
1174
1181
|
}
|
|
1175
1182
|
),
|
|
1176
1183
|
/* @__PURE__ */ jsx(
|