@acusti/date-picker 0.0.1 → 0.0.3

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.
Files changed (7) hide show
  1. package/dist/MonthCalendar.js +27 -29
  2. package/dist/MonthCalendar.js.map +1 -1
  3. package/dist/styles/month-calendar.js +0 -8
  4. package/dist/styles/month-calendar.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/MonthCalendar.tsx +50 -53
  7. package/src/styles/month-calendar.ts +0 -9
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-item` },
28
- React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-title` },
29
- React.createElement("h3", { className: `${ROOT_CLASS_NAME}-month-title-text` }, title)),
30
- React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-week` },
31
- React.createElement("div", { className: "week-day-item" },
32
- React.createElement("span", { className: "week-day-item-text" }, "Su")),
33
- React.createElement("div", { className: "week-day-item" },
34
- React.createElement("span", { className: "week-day-item-text" }, "Mo")),
35
- React.createElement("div", { className: "week-day-item" },
36
- React.createElement("span", { className: "week-day-item-text" }, "Tu")),
37
- React.createElement("div", { className: "week-day-item" },
38
- React.createElement("span", { className: "week-day-item-text" }, "We")),
39
- React.createElement("div", { className: "week-day-item" },
40
- React.createElement("span", { className: "week-day-item-text" }, "Th")),
41
- React.createElement("div", { className: "week-day-item" },
42
- React.createElement("span", { className: "week-day-item-text" }, "Fr")),
43
- React.createElement("div", { className: "week-day-item" },
44
- React.createElement("span", { className: "week-day-item-text" }, "Sa"))),
45
- React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.ceil(daySpaces / 7))
46
- .fill(null)
47
- .map((_, weekIndex) => (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-row`, key: `MonthRow-${weekIndex}` }, DAYS.map((_, dayIndex) => {
48
- dayIndex += weekIndex * 7;
49
- const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
50
- return (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-day-item`, key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay },
51
- React.createElement("span", { className: "month-day-item-text" }, dayNumber < 1 ||
52
- dayNumber > totalDays
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
package/dist/MonthCalendar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
package/dist/styles/month-calendar.js CHANGED
@@ -1,14 +1,6 @@
1
- import { SYSTEM_UI_FONT } from '@acusti/styling';
2
1
  export const ROOT_CLASS_NAME = 'uktmonthcalendar';
3
2
  export const STYLES = `
4
3
  .${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
4
  display: flex;
13
5
  flex-direction: column;
14
6
  flex: 1 1 auto;
package/dist/styles/month-calendar.js.map CHANGED
@@ -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;;;;mBAIC,cAAc;;;GAG9B,eAAe;;;;;;;;GAQf,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"}
1
+ {"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;GAQf,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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acusti/date-picker",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "React component that renders a date picker with the option to choose a range",
5
5
  "keywords": [
6
6
  "react",
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-item`}>
44
- <div className={`${ROOT_CLASS_NAME}-month-title`}>
45
- <h3 className={`${ROOT_CLASS_NAME}-month-title-text`}>{title}</h3>
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={`${ROOT_CLASS_NAME}-month-week`}>
48
- <div className="week-day-item">
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={`${ROOT_CLASS_NAME}-month-days`}>
71
- {Array(Math.ceil(daySpaces / 7))
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>
package/src/styles/month-calendar.ts CHANGED
@@ -1,16 +1,7 @@
1
- import { SYSTEM_UI_FONT } from '@acusti/styling';
2
-
3
1
  export const ROOT_CLASS_NAME = 'uktmonthcalendar';
4
2
 
5
3
  export const STYLES = `
6
4
  .${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
5
  display: flex;
15
6
  flex-direction: column;
16
7
  flex: 1 1 auto;