react-led-digit 0.0.18 → 0.0.20
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.
|
@@ -129,8 +129,13 @@ const Display = (_a) => {
|
|
|
129
129
|
fontSize: `${scale * 100}%`,
|
|
130
130
|
},
|
|
131
131
|
segmentStyle: {
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
spacing: '.01em',
|
|
133
|
+
color: 'black',
|
|
134
|
+
colorOff: 'orange',
|
|
135
|
+
opacityOff: 0.25,
|
|
136
|
+
thickness: '.35em',
|
|
137
|
+
cornerCutoff: '-.025em',
|
|
138
|
+
transitionDuration: '1s',
|
|
134
139
|
},
|
|
135
140
|
};
|
|
136
141
|
if (digit === ':') {
|
|
@@ -170,7 +175,7 @@ const SegmentShapeTest = (args) => {
|
|
|
170
175
|
thickness: `${args.thickness}em`,
|
|
171
176
|
spacing: `${args.spacing}em`,
|
|
172
177
|
shiftAD: `${args.shiftAD}em`,
|
|
173
|
-
|
|
178
|
+
cornerCutoff: `${args.cornerCutoff}em`,
|
|
174
179
|
} }));
|
|
175
180
|
return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign({}, grid), children: [(0, jsx_runtime_1.jsx)(Dgt, { shape: 'default' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'rect' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'round' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'pill' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'calculator' })] }));
|
|
176
181
|
};
|
|
@@ -213,14 +218,14 @@ exports.Shape = {
|
|
|
213
218
|
thickness: 2,
|
|
214
219
|
spacing: 0.1,
|
|
215
220
|
shiftAD: 0,
|
|
216
|
-
|
|
221
|
+
cornerCutoff: 0,
|
|
217
222
|
},
|
|
218
223
|
argTypes: {
|
|
219
224
|
length: { control: { type: 'range', min: 1, max: 20, step: 0.5 } },
|
|
220
225
|
thickness: { control: { type: 'range', min: 0.5, max: 10, step: 0.25 } },
|
|
221
226
|
spacing: { control: { type: 'range', min: -0.5, max: 2, step: 0.05 } },
|
|
222
227
|
shiftAD: { control: { type: 'range', min: -1, max: 1, step: 0.05 } },
|
|
223
|
-
|
|
228
|
+
cornerCutoff: { control: { type: 'range', min: -5, max: 5, step: 0.1 } },
|
|
224
229
|
},
|
|
225
230
|
render: SegmentShapeTest,
|
|
226
231
|
};
|
|
@@ -18,7 +18,7 @@ type SegmentStyle = {
|
|
|
18
18
|
opacityOn?: CSSProperties['opacity'];
|
|
19
19
|
opacityOff?: CSSProperties['opacity'];
|
|
20
20
|
transitionDuration?: CSSProperties['transitionDuration'];
|
|
21
|
-
|
|
21
|
+
cornerCutoff?: CSSProperties['width'];
|
|
22
22
|
};
|
|
23
23
|
export type Digit = DivProps & DigitProps & {
|
|
24
24
|
segmentStyle?: SegmentStyle;
|
|
@@ -24,7 +24,7 @@ const Digit = (_a) => {
|
|
|
24
24
|
const v = value.toString();
|
|
25
25
|
const type = valueToType(value);
|
|
26
26
|
const segments = type && valueToSegments(value); // {A: true, ...}
|
|
27
|
-
const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-
|
|
27
|
+
const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-cutoff': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerCutoff }, rest.style);
|
|
28
28
|
if (type === 'digit')
|
|
29
29
|
return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
|
|
30
30
|
if (type === 'colon')
|
package/lib/Digit/digit.css
CHANGED
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
--ad: calc(
|
|
15
15
|
var(--segment-shift-ad, 0em) * var(--scale)
|
|
16
16
|
); /* moves segments A, D in vertical direction */
|
|
17
|
-
--corner-
|
|
18
|
-
--segment-corner-
|
|
17
|
+
--corner-cutoff: var(
|
|
18
|
+
--segment-corner-cutoff,
|
|
19
19
|
0em
|
|
20
20
|
); /* distortion of outer corners of a digit */
|
|
21
21
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
--thk-half: calc(var(--thk) / 2);
|
|
35
35
|
|
|
36
36
|
--spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
|
|
37
|
-
--crn: var(--corner-
|
|
37
|
+
--crn: var(--corner-cutoff);
|
|
38
38
|
|
|
39
39
|
--radius-round: calc(var(--thk) * 0.33);
|
|
40
40
|
--radius-pill: var(--thk, 10em);
|
|
@@ -255,23 +255,71 @@
|
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
257
|
|
|
258
|
-
/*
|
|
259
|
-
&.
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
258
|
+
/* digit shape */
|
|
259
|
+
&.digit .opacity-wrapper {
|
|
260
|
+
clip-path: polygon(
|
|
261
|
+
0px 0px,
|
|
262
|
+
0px 0px,
|
|
263
|
+
0px 0px,
|
|
264
|
+
0px 0px,
|
|
265
|
+
0px 0px,
|
|
266
|
+
0px 0px,
|
|
267
|
+
100% 0px,
|
|
268
|
+
100% 0px,
|
|
269
|
+
100% 0px,
|
|
270
|
+
100% 0px,
|
|
271
|
+
100% 0px,
|
|
272
|
+
100% 0px,
|
|
273
|
+
100% 100%,
|
|
274
|
+
100% 100%,
|
|
275
|
+
100% 100%,
|
|
276
|
+
100% 100%,
|
|
277
|
+
100% 100%,
|
|
278
|
+
100% 100%,
|
|
279
|
+
0px 100%,
|
|
280
|
+
0px 100%,
|
|
281
|
+
0px 100%,
|
|
282
|
+
0px 100%,
|
|
283
|
+
0px 100%,
|
|
284
|
+
0px 100%
|
|
285
|
+
);
|
|
268
286
|
}
|
|
269
|
-
|
|
270
|
-
|
|
287
|
+
|
|
288
|
+
&.shape-default .opacity-wrapper {
|
|
289
|
+
--crn-2: calc(var(--crn) * -1 + var(--spc) + var(--thk));
|
|
290
|
+
|
|
291
|
+
clip-path: polygon(
|
|
292
|
+
0px var(--crn-2),
|
|
293
|
+
0px var(--crn-2),
|
|
294
|
+
0px var(--crn-2),
|
|
295
|
+
var(--crn-2) 0px,
|
|
296
|
+
var(--crn-2) 0px,
|
|
297
|
+
var(--crn-2) 0px,
|
|
298
|
+
calc(100% - var(--crn-2)) 0px,
|
|
299
|
+
calc(100% - var(--crn-2)) 0px,
|
|
300
|
+
calc(100% - var(--crn-2)) 0px,
|
|
301
|
+
100% var(--crn-2),
|
|
302
|
+
100% var(--crn-2),
|
|
303
|
+
100% var(--crn-2),
|
|
304
|
+
100% calc(100% - var(--crn-2)),
|
|
305
|
+
100% calc(100% - var(--crn-2)),
|
|
306
|
+
100% calc(100% - var(--crn-2)),
|
|
307
|
+
calc(100% - var(--crn-2)) 100%,
|
|
308
|
+
calc(100% - var(--crn-2)) 100%,
|
|
309
|
+
calc(100% - var(--crn-2)) 100%,
|
|
310
|
+
var(--crn-2) 100%,
|
|
311
|
+
var(--crn-2) 100%,
|
|
312
|
+
var(--crn-2) 100%,
|
|
313
|
+
0px calc(100% - var(--crn-2)),
|
|
314
|
+
0px calc(100% - var(--crn-2)),
|
|
315
|
+
0px calc(100% - var(--crn-2))
|
|
316
|
+
);
|
|
271
317
|
}
|
|
272
|
-
& {
|
|
273
|
-
--r: calc(var(--thk) * 0);
|
|
274
318
|
|
|
319
|
+
&.shape-calculator .opacity-wrapper {
|
|
320
|
+
--r: calc(var(--thk) * 1.35);
|
|
321
|
+
|
|
322
|
+
/* rounded corners */
|
|
275
323
|
clip-path: polygon(
|
|
276
324
|
/* top-left corner */ 0px var(--r),
|
|
277
325
|
calc(var(--r) * 0.0495) calc(var(--r) * 0.691),
|
|
@@ -298,11 +346,22 @@
|
|
|
298
346
|
calc(var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
|
|
299
347
|
0px calc(var(--dh) - var(--r))
|
|
300
348
|
);
|
|
349
|
+
}
|
|
301
350
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
351
|
+
/* segment shapes */
|
|
352
|
+
&.shape-default .segment.segment,
|
|
353
|
+
&.shape-rect .segment.segment {
|
|
354
|
+
border-radius: 0;
|
|
355
|
+
}
|
|
356
|
+
&.shape-round .segment.segment {
|
|
357
|
+
border-radius: var(--radius-round);
|
|
358
|
+
}
|
|
359
|
+
&.shape-pill .segment.segment {
|
|
360
|
+
border-radius: var(--radius-pill);
|
|
361
|
+
}
|
|
362
|
+
&.shape-calculator .segment.segment {
|
|
363
|
+
--crn: var(--thk);
|
|
364
|
+
--shft: calc(var(--thk) * 1);
|
|
306
365
|
}
|
|
307
366
|
|
|
308
367
|
&.shape-rect,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const css = {
|
|
4
4
|
src: `src/Digit/digit.css`,
|
|
5
|
-
hash: `
|
|
5
|
+
hash: `38bchlriaf`,
|
|
6
6
|
content: `
|
|
7
7
|
/**
|
|
8
8
|
* A
|
|
@@ -20,8 +20,8 @@ const css = {
|
|
|
20
20
|
--ad: calc(
|
|
21
21
|
var(--segment-shift-ad, 0em) * var(--scale)
|
|
22
22
|
); /* moves segments A, D in vertical direction */
|
|
23
|
-
--corner-
|
|
24
|
-
--segment-corner-
|
|
23
|
+
--corner-cutoff: var(
|
|
24
|
+
--segment-corner-cutoff,
|
|
25
25
|
0em
|
|
26
26
|
); /* distortion of outer corners of a digit */
|
|
27
27
|
|
|
@@ -40,7 +40,7 @@ const css = {
|
|
|
40
40
|
--thk-half: calc(var(--thk) / 2);
|
|
41
41
|
|
|
42
42
|
--spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
|
|
43
|
-
--crn: var(--corner-
|
|
43
|
+
--crn: var(--corner-cutoff);
|
|
44
44
|
|
|
45
45
|
--radius-round: calc(var(--thk) * 0.33);
|
|
46
46
|
--radius-pill: var(--thk, 10em);
|
|
@@ -261,23 +261,71 @@ const css = {
|
|
|
261
261
|
}
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
-
/*
|
|
265
|
-
&.
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
264
|
+
/* digit shape */
|
|
265
|
+
&.digit .opacity-wrapper {
|
|
266
|
+
clip-path: polygon(
|
|
267
|
+
0px 0px,
|
|
268
|
+
0px 0px,
|
|
269
|
+
0px 0px,
|
|
270
|
+
0px 0px,
|
|
271
|
+
0px 0px,
|
|
272
|
+
0px 0px,
|
|
273
|
+
100% 0px,
|
|
274
|
+
100% 0px,
|
|
275
|
+
100% 0px,
|
|
276
|
+
100% 0px,
|
|
277
|
+
100% 0px,
|
|
278
|
+
100% 0px,
|
|
279
|
+
100% 100%,
|
|
280
|
+
100% 100%,
|
|
281
|
+
100% 100%,
|
|
282
|
+
100% 100%,
|
|
283
|
+
100% 100%,
|
|
284
|
+
100% 100%,
|
|
285
|
+
0px 100%,
|
|
286
|
+
0px 100%,
|
|
287
|
+
0px 100%,
|
|
288
|
+
0px 100%,
|
|
289
|
+
0px 100%,
|
|
290
|
+
0px 100%
|
|
291
|
+
);
|
|
274
292
|
}
|
|
275
|
-
|
|
276
|
-
|
|
293
|
+
|
|
294
|
+
&.shape-default .opacity-wrapper {
|
|
295
|
+
--crn-2: calc(var(--crn) * -1 + var(--spc) + var(--thk));
|
|
296
|
+
|
|
297
|
+
clip-path: polygon(
|
|
298
|
+
0px var(--crn-2),
|
|
299
|
+
0px var(--crn-2),
|
|
300
|
+
0px var(--crn-2),
|
|
301
|
+
var(--crn-2) 0px,
|
|
302
|
+
var(--crn-2) 0px,
|
|
303
|
+
var(--crn-2) 0px,
|
|
304
|
+
calc(100% - var(--crn-2)) 0px,
|
|
305
|
+
calc(100% - var(--crn-2)) 0px,
|
|
306
|
+
calc(100% - var(--crn-2)) 0px,
|
|
307
|
+
100% var(--crn-2),
|
|
308
|
+
100% var(--crn-2),
|
|
309
|
+
100% var(--crn-2),
|
|
310
|
+
100% calc(100% - var(--crn-2)),
|
|
311
|
+
100% calc(100% - var(--crn-2)),
|
|
312
|
+
100% calc(100% - var(--crn-2)),
|
|
313
|
+
calc(100% - var(--crn-2)) 100%,
|
|
314
|
+
calc(100% - var(--crn-2)) 100%,
|
|
315
|
+
calc(100% - var(--crn-2)) 100%,
|
|
316
|
+
var(--crn-2) 100%,
|
|
317
|
+
var(--crn-2) 100%,
|
|
318
|
+
var(--crn-2) 100%,
|
|
319
|
+
0px calc(100% - var(--crn-2)),
|
|
320
|
+
0px calc(100% - var(--crn-2)),
|
|
321
|
+
0px calc(100% - var(--crn-2))
|
|
322
|
+
);
|
|
277
323
|
}
|
|
278
|
-
& {
|
|
279
|
-
--r: calc(var(--thk) * 0);
|
|
280
324
|
|
|
325
|
+
&.shape-calculator .opacity-wrapper {
|
|
326
|
+
--r: calc(var(--thk) * 1.35);
|
|
327
|
+
|
|
328
|
+
/* rounded corners */
|
|
281
329
|
clip-path: polygon(
|
|
282
330
|
/* top-left corner */ 0px var(--r),
|
|
283
331
|
calc(var(--r) * 0.0495) calc(var(--r) * 0.691),
|
|
@@ -304,11 +352,22 @@ const css = {
|
|
|
304
352
|
calc(var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
|
|
305
353
|
0px calc(var(--dh) - var(--r))
|
|
306
354
|
);
|
|
355
|
+
}
|
|
307
356
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
357
|
+
/* segment shapes */
|
|
358
|
+
&.shape-default .segment.segment,
|
|
359
|
+
&.shape-rect .segment.segment {
|
|
360
|
+
border-radius: 0;
|
|
361
|
+
}
|
|
362
|
+
&.shape-round .segment.segment {
|
|
363
|
+
border-radius: var(--radius-round);
|
|
364
|
+
}
|
|
365
|
+
&.shape-pill .segment.segment {
|
|
366
|
+
border-radius: var(--radius-pill);
|
|
367
|
+
}
|
|
368
|
+
&.shape-calculator .segment.segment {
|
|
369
|
+
--crn: var(--thk);
|
|
370
|
+
--shft: calc(var(--thk) * 1);
|
|
312
371
|
}
|
|
313
372
|
|
|
314
373
|
&.shape-rect,
|