@acusti/date-picker 0.0.1 → 0.0.2
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/MonthCalendar.js
CHANGED
|
@@ -24,34 +24,32 @@ export default function MonthCalendar({ className, month, onChange, title }) {
|
|
|
24
24
|
return (React.createElement(Fragment, null,
|
|
25
25
|
React.createElement(Style, null, STYLES),
|
|
26
26
|
React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className) },
|
|
27
|
-
React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-
|
|
28
|
-
React.createElement("
|
|
29
|
-
|
|
30
|
-
React.createElement("div", { className:
|
|
31
|
-
React.createElement("
|
|
32
|
-
|
|
33
|
-
React.createElement("
|
|
34
|
-
|
|
35
|
-
React.createElement("
|
|
36
|
-
|
|
37
|
-
React.createElement("
|
|
38
|
-
|
|
39
|
-
React.createElement("
|
|
40
|
-
|
|
41
|
-
React.createElement("
|
|
42
|
-
|
|
43
|
-
React.createElement("
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
: dayNumber)));
|
|
55
|
-
})))))))));
|
|
27
|
+
React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-title` },
|
|
28
|
+
React.createElement("h3", { className: `${ROOT_CLASS_NAME}-month-title-text` }, title)),
|
|
29
|
+
React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-week` },
|
|
30
|
+
React.createElement("div", { className: "week-day-item" },
|
|
31
|
+
React.createElement("span", { className: "week-day-item-text" }, "Su")),
|
|
32
|
+
React.createElement("div", { className: "week-day-item" },
|
|
33
|
+
React.createElement("span", { className: "week-day-item-text" }, "Mo")),
|
|
34
|
+
React.createElement("div", { className: "week-day-item" },
|
|
35
|
+
React.createElement("span", { className: "week-day-item-text" }, "Tu")),
|
|
36
|
+
React.createElement("div", { className: "week-day-item" },
|
|
37
|
+
React.createElement("span", { className: "week-day-item-text" }, "We")),
|
|
38
|
+
React.createElement("div", { className: "week-day-item" },
|
|
39
|
+
React.createElement("span", { className: "week-day-item-text" }, "Th")),
|
|
40
|
+
React.createElement("div", { className: "week-day-item" },
|
|
41
|
+
React.createElement("span", { className: "week-day-item-text" }, "Fr")),
|
|
42
|
+
React.createElement("div", { className: "week-day-item" },
|
|
43
|
+
React.createElement("span", { className: "week-day-item-text" }, "Sa"))),
|
|
44
|
+
React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.ceil(daySpaces / 7))
|
|
45
|
+
.fill(null)
|
|
46
|
+
.map((_, weekIndex) => (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-row`, key: `MonthRow-${weekIndex}` }, DAYS.map((_, dayIndex) => {
|
|
47
|
+
dayIndex += weekIndex * 7;
|
|
48
|
+
const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
|
|
49
|
+
return (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-day-item`, key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay },
|
|
50
|
+
React.createElement("span", { className: "month-day-item-text" }, dayNumber < 1 || dayNumber > totalDays
|
|
51
|
+
? ''
|
|
52
|
+
: dayNumber)));
|
|
53
|
+
}))))))));
|
|
56
54
|
}
|
|
57
55
|
//# sourceMappingURL=MonthCalendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AASrE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAExC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAS;IAC9E,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACrC,KAAK,GAAG,KAAK,IAAI,GAAG,qBAAqB,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;IAC3D,MAAM,eAAe,GAAG,KAAK,GAAG,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IAC1E,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;IACpC,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB;IAC1E,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAE5D,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,KAAwC,EAAE,EAAE;QACzC,IAAI,QAAQ;YAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,KAAK,QAAE,MAAM,CAAS;QACvB,6BAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;YAC5C,6BAAK,SAAS,EAAE,GAAG,eAAe,
|
|
1
|
+
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,18 +2,12 @@ import { SYSTEM_UI_FONT } from '@acusti/styling';
|
|
|
2
2
|
export const ROOT_CLASS_NAME = 'uktmonthcalendar';
|
|
3
3
|
export const STYLES = `
|
|
4
4
|
.${ROOT_CLASS_NAME} {
|
|
5
|
-
display: flex;
|
|
6
|
-
flex: 1 1 auto;
|
|
7
|
-
justify-content: space-between;
|
|
8
|
-
font-family: ${SYSTEM_UI_FONT};
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.${ROOT_CLASS_NAME}-month-item {
|
|
12
5
|
display: flex;
|
|
13
6
|
flex-direction: column;
|
|
14
7
|
flex: 1 1 auto;
|
|
15
8
|
box-sizing: border-box;
|
|
16
9
|
max-width: 325px;
|
|
10
|
+
font-family: ${SYSTEM_UI_FONT};
|
|
17
11
|
}
|
|
18
12
|
|
|
19
13
|
.${ROOT_CLASS_NAME}-month-title {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe
|
|
1
|
+
{"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;mBAMC,cAAc;;;GAG9B,eAAe;;;;;;;;;KASb,eAAe;;;;;;;;;GASjB,eAAe;;;;;;;;;;GAUf,eAAe;;;;;;;GAOf,eAAe;;;;;;;;GAQf,eAAe;;;;;;GAMf,eAAe;;;;;;;;;GASf,eAAe;;;;;;;;;;GAUf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;;;;;;CASjB,CAAC"}
|
package/package.json
CHANGED
package/src/MonthCalendar.tsx
CHANGED
|
@@ -40,62 +40,59 @@ export default function MonthCalendar({ className, month, onChange, title }: Pro
|
|
|
40
40
|
<Fragment>
|
|
41
41
|
<Style>{STYLES}</Style>
|
|
42
42
|
<div className={clsx(ROOT_CLASS_NAME, className)}>
|
|
43
|
-
<div className={`${ROOT_CLASS_NAME}-month-
|
|
44
|
-
<
|
|
45
|
-
|
|
43
|
+
<div className={`${ROOT_CLASS_NAME}-month-title`}>
|
|
44
|
+
<h3 className={`${ROOT_CLASS_NAME}-month-title-text`}>{title}</h3>
|
|
45
|
+
</div>
|
|
46
|
+
<div className={`${ROOT_CLASS_NAME}-month-week`}>
|
|
47
|
+
<div className="week-day-item">
|
|
48
|
+
<span className="week-day-item-text">Su</span>
|
|
49
|
+
</div>
|
|
50
|
+
<div className="week-day-item">
|
|
51
|
+
<span className="week-day-item-text">Mo</span>
|
|
52
|
+
</div>
|
|
53
|
+
<div className="week-day-item">
|
|
54
|
+
<span className="week-day-item-text">Tu</span>
|
|
46
55
|
</div>
|
|
47
|
-
<div className=
|
|
48
|
-
<
|
|
49
|
-
<span className="week-day-item-text">Su</span>
|
|
50
|
-
</div>
|
|
51
|
-
<div className="week-day-item">
|
|
52
|
-
<span className="week-day-item-text">Mo</span>
|
|
53
|
-
</div>
|
|
54
|
-
<div className="week-day-item">
|
|
55
|
-
<span className="week-day-item-text">Tu</span>
|
|
56
|
-
</div>
|
|
57
|
-
<div className="week-day-item">
|
|
58
|
-
<span className="week-day-item-text">We</span>
|
|
59
|
-
</div>
|
|
60
|
-
<div className="week-day-item">
|
|
61
|
-
<span className="week-day-item-text">Th</span>
|
|
62
|
-
</div>
|
|
63
|
-
<div className="week-day-item">
|
|
64
|
-
<span className="week-day-item-text">Fr</span>
|
|
65
|
-
</div>
|
|
66
|
-
<div className="week-day-item">
|
|
67
|
-
<span className="week-day-item-text">Sa</span>
|
|
68
|
-
</div>
|
|
56
|
+
<div className="week-day-item">
|
|
57
|
+
<span className="week-day-item-text">We</span>
|
|
69
58
|
</div>
|
|
70
|
-
<div className=
|
|
71
|
-
|
|
72
|
-
.fill(null)
|
|
73
|
-
.map((_, weekIndex) => (
|
|
74
|
-
<div
|
|
75
|
-
className={`${ROOT_CLASS_NAME}-month-row`}
|
|
76
|
-
key={`MonthRow-${weekIndex}`}
|
|
77
|
-
>
|
|
78
|
-
{DAYS.map((_, dayIndex) => {
|
|
79
|
-
dayIndex += weekIndex * 7;
|
|
80
|
-
const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
|
|
81
|
-
return (
|
|
82
|
-
<div
|
|
83
|
-
className={`${ROOT_CLASS_NAME}-month-day-item`}
|
|
84
|
-
key={`MonthDayItem-${dayNumber}`}
|
|
85
|
-
onClick={handleClickDay}
|
|
86
|
-
>
|
|
87
|
-
<span className="month-day-item-text">
|
|
88
|
-
{dayNumber < 1 ||
|
|
89
|
-
dayNumber > totalDays
|
|
90
|
-
? ''
|
|
91
|
-
: dayNumber}
|
|
92
|
-
</span>
|
|
93
|
-
</div>
|
|
94
|
-
);
|
|
95
|
-
})}
|
|
96
|
-
</div>
|
|
97
|
-
))}
|
|
59
|
+
<div className="week-day-item">
|
|
60
|
+
<span className="week-day-item-text">Th</span>
|
|
98
61
|
</div>
|
|
62
|
+
<div className="week-day-item">
|
|
63
|
+
<span className="week-day-item-text">Fr</span>
|
|
64
|
+
</div>
|
|
65
|
+
<div className="week-day-item">
|
|
66
|
+
<span className="week-day-item-text">Sa</span>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div className={`${ROOT_CLASS_NAME}-month-days`}>
|
|
70
|
+
{Array(Math.ceil(daySpaces / 7))
|
|
71
|
+
.fill(null)
|
|
72
|
+
.map((_, weekIndex) => (
|
|
73
|
+
<div
|
|
74
|
+
className={`${ROOT_CLASS_NAME}-month-row`}
|
|
75
|
+
key={`MonthRow-${weekIndex}`}
|
|
76
|
+
>
|
|
77
|
+
{DAYS.map((_, dayIndex) => {
|
|
78
|
+
dayIndex += weekIndex * 7;
|
|
79
|
+
const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
|
|
80
|
+
return (
|
|
81
|
+
<div
|
|
82
|
+
className={`${ROOT_CLASS_NAME}-month-day-item`}
|
|
83
|
+
key={`MonthDayItem-${dayNumber}`}
|
|
84
|
+
onClick={handleClickDay}
|
|
85
|
+
>
|
|
86
|
+
<span className="month-day-item-text">
|
|
87
|
+
{dayNumber < 1 || dayNumber > totalDays
|
|
88
|
+
? ''
|
|
89
|
+
: dayNumber}
|
|
90
|
+
</span>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
})}
|
|
94
|
+
</div>
|
|
95
|
+
))}
|
|
99
96
|
</div>
|
|
100
97
|
</div>
|
|
101
98
|
</Fragment>
|
|
@@ -4,18 +4,12 @@ export const ROOT_CLASS_NAME = 'uktmonthcalendar';
|
|
|
4
4
|
|
|
5
5
|
export const STYLES = `
|
|
6
6
|
.${ROOT_CLASS_NAME} {
|
|
7
|
-
display: flex;
|
|
8
|
-
flex: 1 1 auto;
|
|
9
|
-
justify-content: space-between;
|
|
10
|
-
font-family: ${SYSTEM_UI_FONT};
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.${ROOT_CLASS_NAME}-month-item {
|
|
14
7
|
display: flex;
|
|
15
8
|
flex-direction: column;
|
|
16
9
|
flex: 1 1 auto;
|
|
17
10
|
box-sizing: border-box;
|
|
18
11
|
max-width: 325px;
|
|
12
|
+
font-family: ${SYSTEM_UI_FONT};
|
|
19
13
|
}
|
|
20
14
|
|
|
21
15
|
.${ROOT_CLASS_NAME}-month-title {
|