@x-plat/design-system 0.5.6 → 0.5.8
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/components/Chart/index.cjs +33 -24
- package/dist/components/Chart/index.js +33 -24
- package/dist/components/DatePicker/index.cjs +38 -22
- package/dist/components/DatePicker/index.css +14 -1
- package/dist/components/DatePicker/index.d.cts +2 -1
- package/dist/components/DatePicker/index.d.ts +2 -1
- package/dist/components/DatePicker/index.js +38 -22
- package/dist/components/Video/index.cjs +1 -1
- package/dist/components/Video/index.css +7 -0
- package/dist/components/Video/index.js +1 -1
- package/dist/components/index.cjs +72 -47
- package/dist/components/index.css +21 -1
- package/dist/components/index.js +72 -47
- package/dist/index.cjs +72 -47
- package/dist/index.css +21 -1
- package/dist/index.js +72 -47
- package/package.json +1 -1
|
@@ -37,23 +37,30 @@ module.exports = __toCommonJS(Chart_exports);
|
|
|
37
37
|
// src/components/Chart/Chart.tsx
|
|
38
38
|
var import_react = __toESM(require("react"), 1);
|
|
39
39
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
[
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
40
|
+
var CATEGORICAL_COUNT = 8;
|
|
41
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
|
|
42
|
+
const n = i + 1;
|
|
43
|
+
return [
|
|
44
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
45
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
46
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
47
|
+
`var(--semantic-categorical-${n}-text)`
|
|
48
|
+
];
|
|
49
|
+
});
|
|
50
|
+
var PIE_COLORS = Array.from(
|
|
51
|
+
{ length: CATEGORICAL_COUNT },
|
|
52
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
53
|
+
);
|
|
54
|
+
var hashString = (str) => {
|
|
55
|
+
let hash = 0;
|
|
56
|
+
for (let i = 0; i < str.length; i++) {
|
|
57
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
58
|
+
}
|
|
59
|
+
return Math.abs(hash);
|
|
60
|
+
};
|
|
61
|
+
var getPalette = (palettes, index, key) => {
|
|
62
|
+
const offset = key ? hashString(key) : 0;
|
|
63
|
+
return palettes[(index + offset) % palettes.length];
|
|
57
64
|
};
|
|
58
65
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
59
66
|
var useChartTooltip = (enabled) => {
|
|
@@ -123,8 +130,8 @@ var LineChart = import_react.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
123
130
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
124
131
|
}),
|
|
125
132
|
entries.map(([key], di) => {
|
|
126
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
127
|
-
const color = palette[
|
|
133
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
134
|
+
const color = palette[2];
|
|
128
135
|
const points = seriesPoints[di];
|
|
129
136
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
|
|
130
137
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -189,8 +196,8 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
|
|
|
189
196
|
}),
|
|
190
197
|
labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
191
198
|
entries.map(([key], di) => {
|
|
192
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
193
|
-
const color = palette[
|
|
199
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
200
|
+
const color = palette[2];
|
|
194
201
|
return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
195
202
|
"rect",
|
|
196
203
|
{
|
|
@@ -213,13 +220,15 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
|
|
|
213
220
|
BarChart.displayName = "BarChart";
|
|
214
221
|
var PieDonutChart = import_react.default.memo(
|
|
215
222
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
216
|
-
const
|
|
223
|
+
const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
|
|
224
|
+
const values = import_react.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
217
225
|
const total = import_react.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
218
226
|
const cx = 150;
|
|
219
227
|
const cy = 150;
|
|
220
228
|
const r = 120;
|
|
221
229
|
const innerR = isDoughnut ? 60 : 0;
|
|
222
|
-
const
|
|
230
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
231
|
+
const colorOffset = hashString(firstKey);
|
|
223
232
|
const sliceData = import_react.default.useMemo(() => {
|
|
224
233
|
let angle0 = -Math.PI / 2;
|
|
225
234
|
return values.map((v, i) => {
|
|
@@ -254,7 +263,7 @@ var PieDonutChart = import_react.default.memo(
|
|
|
254
263
|
"path",
|
|
255
264
|
{
|
|
256
265
|
d: s.d,
|
|
257
|
-
fill:
|
|
266
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
258
267
|
className: "chart-slice",
|
|
259
268
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
260
269
|
onMouseMove: onMove,
|
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
// src/components/Chart/Chart.tsx
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
4
|
+
var CATEGORICAL_COUNT = 8;
|
|
5
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
|
|
6
|
+
const n = i + 1;
|
|
7
|
+
return [
|
|
8
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
9
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
10
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
11
|
+
`var(--semantic-categorical-${n}-text)`
|
|
12
|
+
];
|
|
13
|
+
});
|
|
14
|
+
var PIE_COLORS = Array.from(
|
|
15
|
+
{ length: CATEGORICAL_COUNT },
|
|
16
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
17
|
+
);
|
|
18
|
+
var hashString = (str) => {
|
|
19
|
+
let hash = 0;
|
|
20
|
+
for (let i = 0; i < str.length; i++) {
|
|
21
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
22
|
+
}
|
|
23
|
+
return Math.abs(hash);
|
|
24
|
+
};
|
|
25
|
+
var getPalette = (palettes, index, key) => {
|
|
26
|
+
const offset = key ? hashString(key) : 0;
|
|
27
|
+
return palettes[(index + offset) % palettes.length];
|
|
21
28
|
};
|
|
22
29
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
23
30
|
var useChartTooltip = (enabled) => {
|
|
@@ -87,8 +94,8 @@ var LineChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
87
94
|
return /* @__PURE__ */ jsx("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
88
95
|
}),
|
|
89
96
|
entries.map(([key], di) => {
|
|
90
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
91
|
-
const color = palette[
|
|
97
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
98
|
+
const color = palette[2];
|
|
92
99
|
const points = seriesPoints[di];
|
|
93
100
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
94
101
|
/* @__PURE__ */ jsx(
|
|
@@ -153,8 +160,8 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
153
160
|
}),
|
|
154
161
|
labels.map((label, i) => /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
155
162
|
entries.map(([key], di) => {
|
|
156
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
157
|
-
const color = palette[
|
|
163
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
164
|
+
const color = palette[2];
|
|
158
165
|
return bars[di].map((b, i) => /* @__PURE__ */ jsx(
|
|
159
166
|
"rect",
|
|
160
167
|
{
|
|
@@ -177,13 +184,15 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
177
184
|
BarChart.displayName = "BarChart";
|
|
178
185
|
var PieDonutChart = React.memo(
|
|
179
186
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
180
|
-
const
|
|
187
|
+
const entries = React.useMemo(() => Object.entries(data), [data]);
|
|
188
|
+
const values = React.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
181
189
|
const total = React.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
182
190
|
const cx = 150;
|
|
183
191
|
const cy = 150;
|
|
184
192
|
const r = 120;
|
|
185
193
|
const innerR = isDoughnut ? 60 : 0;
|
|
186
|
-
const
|
|
194
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
195
|
+
const colorOffset = hashString(firstKey);
|
|
187
196
|
const sliceData = React.useMemo(() => {
|
|
188
197
|
let angle0 = -Math.PI / 2;
|
|
189
198
|
return values.map((v, i) => {
|
|
@@ -218,7 +227,7 @@ var PieDonutChart = React.memo(
|
|
|
218
227
|
"path",
|
|
219
228
|
{
|
|
220
229
|
d: s.d,
|
|
221
|
-
fill:
|
|
230
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
222
231
|
className: "chart-slice",
|
|
223
232
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
224
233
|
onMouseMove: onMove,
|
|
@@ -1624,13 +1624,14 @@ var SingleDatePicker_default = SingleDatePicker;
|
|
|
1624
1624
|
// src/components/DatePicker/InputDatePicker/index.tsx
|
|
1625
1625
|
var import_jsx_runtime299 = require("react/jsx-runtime");
|
|
1626
1626
|
var formatDate = (date) => {
|
|
1627
|
+
if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
|
|
1627
1628
|
const y = date.getFullYear();
|
|
1628
1629
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
1629
1630
|
const d = String(date.getDate()).padStart(2, "0");
|
|
1630
1631
|
return `${y}/${m}/${d}`;
|
|
1631
1632
|
};
|
|
1632
1633
|
var InputDatePicker = (props) => {
|
|
1633
|
-
const { value, onChange, minDate, maxDate, disabled, locale } = props;
|
|
1634
|
+
const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
|
|
1634
1635
|
const [isOpen, setIsOpen] = import_react7.default.useState(false);
|
|
1635
1636
|
const containerRef = import_react7.default.useRef(null);
|
|
1636
1637
|
const calendarRef = import_react7.default.useRef(null);
|
|
@@ -1640,27 +1641,42 @@ var InputDatePicker = (props) => {
|
|
|
1640
1641
|
onChange?.(date);
|
|
1641
1642
|
setIsOpen(false);
|
|
1642
1643
|
};
|
|
1643
|
-
return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(
|
|
1645
|
+
"div",
|
|
1646
|
+
{
|
|
1647
|
+
className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
|
|
1648
|
+
ref: containerRef,
|
|
1649
|
+
children: [
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
|
|
1651
|
+
"div",
|
|
1652
|
+
{
|
|
1653
|
+
className: "input-datepicker-trigger",
|
|
1654
|
+
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
1655
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
|
|
1656
|
+
Input_default,
|
|
1657
|
+
{
|
|
1658
|
+
value: formatDate(value),
|
|
1659
|
+
placeholder,
|
|
1660
|
+
suffix: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(CalenderIcon_default, {}),
|
|
1661
|
+
disabled,
|
|
1662
|
+
readOnly: true
|
|
1663
|
+
}
|
|
1664
|
+
)
|
|
1665
|
+
}
|
|
1666
|
+
),
|
|
1667
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
|
|
1668
|
+
SingleDatePicker_default,
|
|
1669
|
+
{
|
|
1670
|
+
value: value ?? /* @__PURE__ */ new Date(),
|
|
1671
|
+
onChange: handleSelect,
|
|
1672
|
+
minDate,
|
|
1673
|
+
maxDate,
|
|
1674
|
+
locale
|
|
1675
|
+
}
|
|
1676
|
+
) })
|
|
1677
|
+
]
|
|
1678
|
+
}
|
|
1679
|
+
);
|
|
1664
1680
|
};
|
|
1665
1681
|
InputDatePicker.displayName = "InputDatePicker";
|
|
1666
1682
|
var InputDatePicker_default = InputDatePicker;
|
|
@@ -261,6 +261,7 @@
|
|
|
261
261
|
.lib-xplat-datepicker.range {
|
|
262
262
|
display: flex;
|
|
263
263
|
flex-direction: column;
|
|
264
|
+
container-type: inline-size;
|
|
264
265
|
}
|
|
265
266
|
.lib-xplat-datepicker .datepicker-range-tabs {
|
|
266
267
|
display: none;
|
|
@@ -303,7 +304,7 @@
|
|
|
303
304
|
color: var(--semantic-text-muted);
|
|
304
305
|
margin-bottom: var(--spacing-space-2);
|
|
305
306
|
}
|
|
306
|
-
@
|
|
307
|
+
@container (max-width: 600px) {
|
|
307
308
|
.lib-xplat-datepicker .datepicker-range-tabs {
|
|
308
309
|
display: flex;
|
|
309
310
|
}
|
|
@@ -320,6 +321,18 @@
|
|
|
320
321
|
.lib-xplat-datepicker.input-datepicker {
|
|
321
322
|
position: relative;
|
|
322
323
|
}
|
|
324
|
+
.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger {
|
|
325
|
+
cursor: pointer;
|
|
326
|
+
}
|
|
327
|
+
.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger input {
|
|
328
|
+
cursor: pointer;
|
|
329
|
+
}
|
|
330
|
+
.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger {
|
|
331
|
+
cursor: not-allowed;
|
|
332
|
+
}
|
|
333
|
+
.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger input {
|
|
334
|
+
cursor: not-allowed;
|
|
335
|
+
}
|
|
323
336
|
.lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
|
|
324
337
|
position: absolute;
|
|
325
338
|
top: 100%;
|
|
@@ -2,12 +2,13 @@ import React from 'react';
|
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
interface InputDatePickerProps {
|
|
5
|
-
value
|
|
5
|
+
value?: Date | null;
|
|
6
6
|
onChange?: (date: Date) => void;
|
|
7
7
|
minDate?: Date;
|
|
8
8
|
maxDate?: Date;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
locale?: "ko" | "en";
|
|
11
|
+
placeholder?: string;
|
|
11
12
|
}
|
|
12
13
|
declare const InputDatePicker: React.FC<InputDatePickerProps>;
|
|
13
14
|
|
|
@@ -2,12 +2,13 @@ import React from 'react';
|
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
interface InputDatePickerProps {
|
|
5
|
-
value
|
|
5
|
+
value?: Date | null;
|
|
6
6
|
onChange?: (date: Date) => void;
|
|
7
7
|
minDate?: Date;
|
|
8
8
|
maxDate?: Date;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
locale?: "ko" | "en";
|
|
11
|
+
placeholder?: string;
|
|
11
12
|
}
|
|
12
13
|
declare const InputDatePicker: React.FC<InputDatePickerProps>;
|
|
13
14
|
|
|
@@ -1585,13 +1585,14 @@ var SingleDatePicker_default = SingleDatePicker;
|
|
|
1585
1585
|
// src/components/DatePicker/InputDatePicker/index.tsx
|
|
1586
1586
|
import { jsx as jsx299, jsxs as jsxs192 } from "react/jsx-runtime";
|
|
1587
1587
|
var formatDate = (date) => {
|
|
1588
|
+
if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
|
|
1588
1589
|
const y = date.getFullYear();
|
|
1589
1590
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
1590
1591
|
const d = String(date.getDate()).padStart(2, "0");
|
|
1591
1592
|
return `${y}/${m}/${d}`;
|
|
1592
1593
|
};
|
|
1593
1594
|
var InputDatePicker = (props) => {
|
|
1594
|
-
const { value, onChange, minDate, maxDate, disabled, locale } = props;
|
|
1595
|
+
const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
|
|
1595
1596
|
const [isOpen, setIsOpen] = React6.useState(false);
|
|
1596
1597
|
const containerRef = React6.useRef(null);
|
|
1597
1598
|
const calendarRef = React6.useRef(null);
|
|
@@ -1601,27 +1602,42 @@ var InputDatePicker = (props) => {
|
|
|
1601
1602
|
onChange?.(date);
|
|
1602
1603
|
setIsOpen(false);
|
|
1603
1604
|
};
|
|
1604
|
-
return /* @__PURE__ */ jsxs192(
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1605
|
+
return /* @__PURE__ */ jsxs192(
|
|
1606
|
+
"div",
|
|
1607
|
+
{
|
|
1608
|
+
className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
|
|
1609
|
+
ref: containerRef,
|
|
1610
|
+
children: [
|
|
1611
|
+
/* @__PURE__ */ jsx299(
|
|
1612
|
+
"div",
|
|
1613
|
+
{
|
|
1614
|
+
className: "input-datepicker-trigger",
|
|
1615
|
+
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
1616
|
+
children: /* @__PURE__ */ jsx299(
|
|
1617
|
+
Input_default,
|
|
1618
|
+
{
|
|
1619
|
+
value: formatDate(value),
|
|
1620
|
+
placeholder,
|
|
1621
|
+
suffix: /* @__PURE__ */ jsx299(CalenderIcon_default, {}),
|
|
1622
|
+
disabled,
|
|
1623
|
+
readOnly: true
|
|
1624
|
+
}
|
|
1625
|
+
)
|
|
1626
|
+
}
|
|
1627
|
+
),
|
|
1628
|
+
isOpen && /* @__PURE__ */ jsx299("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx299(
|
|
1629
|
+
SingleDatePicker_default,
|
|
1630
|
+
{
|
|
1631
|
+
value: value ?? /* @__PURE__ */ new Date(),
|
|
1632
|
+
onChange: handleSelect,
|
|
1633
|
+
minDate,
|
|
1634
|
+
maxDate,
|
|
1635
|
+
locale
|
|
1636
|
+
}
|
|
1637
|
+
) })
|
|
1638
|
+
]
|
|
1639
|
+
}
|
|
1640
|
+
);
|
|
1625
1641
|
};
|
|
1626
1642
|
InputDatePicker.displayName = "InputDatePicker";
|
|
1627
1643
|
var InputDatePicker_default = InputDatePicker;
|
|
@@ -634,7 +634,7 @@ var Video = import_react.default.forwardRef((props, ref) => {
|
|
|
634
634
|
onTimeUpdate: handleTimeUpdate,
|
|
635
635
|
onVolumeChange: handleVolumeChange,
|
|
636
636
|
onRateChange: handleRateChange,
|
|
637
|
-
onClick: togglePlay,
|
|
637
|
+
onClick: showControls || showCenterPlay ? togglePlay : void 0,
|
|
638
638
|
...rest,
|
|
639
639
|
children
|
|
640
640
|
}
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
max-height: 100%;
|
|
15
15
|
object-fit: contain;
|
|
16
16
|
vertical-align: middle;
|
|
17
|
+
}
|
|
18
|
+
.lib-xplat-video.has-controls > video,
|
|
19
|
+
.lib-xplat-video:has(> .center-play) > video {
|
|
17
20
|
cursor: pointer;
|
|
18
21
|
}
|
|
19
22
|
.lib-xplat-video > .center-play {
|
|
@@ -176,6 +179,9 @@
|
|
|
176
179
|
appearance: none;
|
|
177
180
|
background: transparent;
|
|
178
181
|
cursor: pointer;
|
|
182
|
+
margin: 0;
|
|
183
|
+
padding: 0;
|
|
184
|
+
align-self: center;
|
|
179
185
|
}
|
|
180
186
|
.lib-xplat-video .seekbar:focus,
|
|
181
187
|
.lib-xplat-video .volume-slider:focus {
|
|
@@ -187,6 +193,7 @@
|
|
|
187
193
|
appearance: none;
|
|
188
194
|
width: 12px;
|
|
189
195
|
height: 12px;
|
|
196
|
+
margin-top: -4px;
|
|
190
197
|
border-radius: 50%;
|
|
191
198
|
background: #fff;
|
|
192
199
|
border: none;
|
|
@@ -598,7 +598,7 @@ var Video = React.forwardRef((props, ref) => {
|
|
|
598
598
|
onTimeUpdate: handleTimeUpdate,
|
|
599
599
|
onVolumeChange: handleVolumeChange,
|
|
600
600
|
onRateChange: handleRateChange,
|
|
601
|
-
onClick: togglePlay,
|
|
601
|
+
onClick: showControls || showCenterPlay ? togglePlay : void 0,
|
|
602
602
|
...rest,
|
|
603
603
|
children
|
|
604
604
|
}
|