@via-profit/ui-kit 0.1.2 → 0.1.4

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 (3) hide show
  1. package/Calendar/index.d.ts +27 -27
  2. package/Calendar/index.js +56 -57
  3. package/package.json +1 -1
package/Calendar/index.d.ts CHANGED
@@ -1,28 +1,28 @@
1
- import React from 'react';
2
- import { CalendarBodyProps } from './CalendarBody';
3
- import { CalendarCellProps } from './CalendarCell';
4
- import { CalendarEmptyCellProps } from './CalendarEmptyCell';
5
- import { CalendarPaperProps } from './CalendarPaper';
6
- import { CalendarHeaderProps } from './CalendarHeader';
7
- import { CalendarWeekRowProps } from './CalendarWeekRow';
8
- import { CalendarDateContainerProps } from './CalendarDateContainer';
9
- import { CalendarToolbarProps } from './CalendarToolbar';
10
- import { CalendarYearsSelectorProps } from './CalendarYearsSelector';
11
- import { CalendarMonthsSelectorProps } from './CalendarMonthsSelector';
12
- import { CalendarMonthCellProps } from './CalendarMonthCell';
13
- import { CalendarYearCellProps } from './CalendarYearCell';
14
- import { CalendarDayBadgeProps } from './CalendarDayBadge';
15
- import { CalendarFooterProps } from './CalendarFooter';
16
- import { CalendarControlButtonProps } from './CalendarControlButton';
17
- import { CalendarHeadingProps } from './CalendarHeading';
18
- import { CalendarSubheadingProps } from './CalendarSubheading';
19
- import { CalendarIconPrevProps } from './CalendarIconPrev';
20
- import { CalendarIconNextProps } from './IconChevronRight';
21
- import { CalendarWeekDaysBarProps, WeekNameLabelFormat } from './CalendarWeekDaysBar';
22
- import { CalendarValue, WeekDayName } from './use-calendar';
23
- import { CalendarView as CalendarViewName } from './reducer';
24
- export * from './use-calendar';
25
- export * from './CalendarWeekDaysBar';
1
+ import React from "react";
2
+ import { CalendarBodyProps } from "./CalendarBody";
3
+ import { CalendarCellProps } from "./CalendarCell";
4
+ import { CalendarEmptyCellProps } from "./CalendarEmptyCell";
5
+ import { CalendarPaperProps } from "./CalendarPaper";
6
+ import { CalendarHeaderProps } from "./CalendarHeader";
7
+ import { CalendarWeekRowProps } from "./CalendarWeekRow";
8
+ import { CalendarDateContainerProps } from "./CalendarDateContainer";
9
+ import { CalendarToolbarProps } from "./CalendarToolbar";
10
+ import { CalendarYearsSelectorProps } from "./CalendarYearsSelector";
11
+ import { CalendarMonthsSelectorProps } from "./CalendarMonthsSelector";
12
+ import { CalendarMonthCellProps } from "./CalendarMonthCell";
13
+ import { CalendarYearCellProps } from "./CalendarYearCell";
14
+ import { CalendarDayBadgeProps } from "./CalendarDayBadge";
15
+ import { CalendarFooterProps } from "./CalendarFooter";
16
+ import { CalendarControlButtonProps } from "./CalendarControlButton";
17
+ import { CalendarHeadingProps } from "./CalendarHeading";
18
+ import { CalendarSubheadingProps } from "./CalendarSubheading";
19
+ import { CalendarIconPrevProps } from "./CalendarIconPrev";
20
+ import { CalendarIconNextProps } from "./IconChevronRight";
21
+ import { CalendarWeekDaysBarProps, WeekNameLabelFormat } from "./CalendarWeekDaysBar";
22
+ import { CalendarValue, WeekDayName } from "./use-calendar";
23
+ import { CalendarView as CalendarViewName } from "./reducer";
24
+ export * from "./use-calendar";
25
+ export * from "./CalendarWeekDaysBar";
26
26
  export type CalendarView = CalendarViewName;
27
27
  export type CalendarProps<Range extends boolean | undefined = undefined> = {
28
28
  readonly range?: Range;
@@ -82,7 +82,7 @@ export type CalendarProps<Range extends boolean | undefined = undefined> = {
82
82
  * Cell accent color\
83
83
  * **Default:** `primary`
84
84
  */
85
- readonly accentColor?: 'primary' | 'secondary' | string;
85
+ readonly accentColor?: "primary" | "secondary" | string;
86
86
  /**
87
87
  * Tooltip for the Prev month button
88
88
  */
@@ -214,7 +214,7 @@ export interface CalendarOverrides {
214
214
  export type CalendarBadge = {
215
215
  readonly date: Date;
216
216
  readonly badgeContent: React.ReactNode;
217
- readonly accentColor?: 'primary' | 'secondary' | string;
217
+ readonly accentColor?: "primary" | "secondary" | string;
218
218
  };
219
219
  declare const Calendar: <Range_1 extends boolean | undefined = undefined>(props: CalendarProps<Range_1>) => React.ReactNode;
220
220
  export default Calendar;
package/Calendar/index.js CHANGED
@@ -43,9 +43,9 @@ const reducer_1 = require("./reducer");
43
43
  __exportStar(require("./use-calendar"), exports);
44
44
  __exportStar(require("./CalendarWeekDaysBar"), exports);
45
45
  const Calendar = (props) => {
46
- const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView = (0, reducer_1.createDefaultState)(false).calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
47
- if (typeof value !== 'undefined' && typeof onChange === 'undefined') {
48
- throw new Error('You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.');
46
+ const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = "monday", locale = "ru-RU", displayLeadingZero = false, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = "short", accentColor = "primary", prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView = (0, reducer_1.createDefaultState)(false).calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, range = false } = props;
47
+ if (typeof value !== "undefined" && typeof onChange === "undefined") {
48
+ throw new Error("You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.");
49
49
  }
50
50
  const overridesMap = react_1.default.useMemo(() => ({
51
51
  Body: (overrides === null || overrides === void 0 ? void 0 : overrides.Body) || CalendarBody_1.default,
@@ -67,48 +67,48 @@ const Calendar = (props) => {
67
67
  Subheading: (overrides === null || overrides === void 0 ? void 0 : overrides.Subheading) || CalendarSubheading_1.default,
68
68
  IconPrev: (overrides === null || overrides === void 0 ? void 0 : overrides.IconPrev) || CalendarIconPrev_1.default,
69
69
  IconNext: (overrides === null || overrides === void 0 ? void 0 : overrides.IconNext) || IconChevronRight_1.default,
70
- WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || CalendarWeekDaysBar_1.default,
70
+ WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || CalendarWeekDaysBar_1.default
71
71
  }), [overrides]);
72
- const realValue = react_1.default.useMemo(() => typeof value !== 'undefined'
72
+ const realValue = react_1.default.useMemo(() => typeof value !== "undefined"
73
73
  ? value
74
- : typeof defaultValue !== 'undefined'
74
+ : typeof defaultValue !== "undefined"
75
75
  ? defaultValue
76
76
  : new Date(), [value, defaultValue]);
77
77
  const initialProps = react_1.default.useRef({
78
78
  value: realValue,
79
79
  badges,
80
- initialView,
80
+ initialView
81
81
  });
82
82
  const initialState = Object.assign(Object.assign({}, (0, reducer_1.createDefaultState)(range)), { calendarValue: realValue, calendarDate: Array.isArray(realValue) ? realValue[0] : realValue, calendarCurrentView: initialView });
83
83
  const [state, dispatch] = react_1.default.useReducer(reducer_1.reducer, initialState);
84
- const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange, } = (0, use_calendar_1.useCalendar)({
84
+ const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange } = (0, use_calendar_1.useCalendar)({
85
85
  minDate,
86
86
  maxDate,
87
87
  weekStartDay,
88
88
  locale,
89
- displayLeadingZero,
89
+ displayLeadingZero
90
90
  });
91
91
  const { calendarCurrentView, calendarViewVariants, calendarValue, calendarDate } = state;
92
92
  /**
93
93
  * Prev and next month buttons
94
94
  */
95
95
  const handleChangeMonthClick = react_1.default.useCallback((type) => () => {
96
- const newDate = type === 'prev'
96
+ const newDate = type === "prev"
97
97
  ? new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1)
98
98
  : new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
99
- dispatch({ type: 'setPartial', payload: { calendarDate: newDate } });
99
+ dispatch({ type: "setPartial", payload: { calendarDate: newDate } });
100
100
  }, [calendarDate]);
101
101
  /**
102
102
  * Date props was changed
103
103
  */
104
104
  react_1.default.useEffect(() => {
105
- if (typeof value !== 'undefined') {
105
+ if (typeof value !== "undefined") {
106
106
  dispatch({
107
- type: 'setPartial',
107
+ type: "setPartial",
108
108
  payload: {
109
- calendarValue: value,
109
+ calendarValue: value
110
110
  // calendarDate: Array.isArray(value) ? value[0] : value,
111
- },
111
+ }
112
112
  });
113
113
  }
114
114
  }, [value, calendarValue, isSameDay, dispatch]);
@@ -116,12 +116,12 @@ const Calendar = (props) => {
116
116
  * Handle click on Day button
117
117
  */
118
118
  const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
119
- if (typeof onChange === 'function') {
119
+ if (typeof onChange === "function") {
120
120
  if (range) {
121
121
  const [fromDate, toDate] = calendarValue;
122
122
  dispatch({
123
- type: 'setPartial',
124
- payload: { calendarDate: selectedDate },
123
+ type: "setPartial",
124
+ payload: { calendarDate: selectedDate }
125
125
  });
126
126
  if (selectedDate.getTime() >= toDate.getTime()) {
127
127
  onChange([fromDate, selectedDate]);
@@ -145,7 +145,7 @@ const Calendar = (props) => {
145
145
  return;
146
146
  }
147
147
  }
148
- throw new Error('Oooops. I don`t know whats is it');
148
+ throw new Error("Oooops. I don`t know whats is it");
149
149
  }
150
150
  else {
151
151
  onChange(selectedDate);
@@ -153,10 +153,10 @@ const Calendar = (props) => {
153
153
  }
154
154
  if (!calendarValue) {
155
155
  dispatch({
156
- type: 'setPartial',
156
+ type: "setPartial",
157
157
  payload: {
158
- calendarValue: selectedDate,
159
- },
158
+ calendarValue: selectedDate
159
+ }
160
160
  });
161
161
  }
162
162
  }, [onChange, calendarValue, range]);
@@ -173,11 +173,11 @@ const Calendar = (props) => {
173
173
  newDate.setMilliseconds(0);
174
174
  if (calendarDate.getFullYear() !== newDate.getFullYear()) {
175
175
  dispatch({
176
- type: 'setPartial',
176
+ type: "setPartial",
177
177
  payload: {
178
178
  calendarDate: newDate,
179
- calendarCurrentView: 'days',
180
- },
179
+ calendarCurrentView: "days"
180
+ }
181
181
  });
182
182
  }
183
183
  }, [calendarDate]);
@@ -193,11 +193,11 @@ const Calendar = (props) => {
193
193
  newDate.setMilliseconds(0);
194
194
  if (calendarDate.getMonth() !== newDate.getMonth()) {
195
195
  dispatch({
196
- type: 'setPartial',
196
+ type: "setPartial",
197
197
  payload: {
198
198
  calendarDate: newDate,
199
- calendarCurrentView: 'days',
200
- },
199
+ calendarCurrentView: "days"
200
+ }
201
201
  });
202
202
  }
203
203
  }, [calendarDate]);
@@ -206,10 +206,10 @@ const Calendar = (props) => {
206
206
  */
207
207
  const handleChangeView = react_1.default.useCallback((selectedView) => () => {
208
208
  dispatch({
209
- type: 'setPartial',
209
+ type: "setPartial",
210
210
  payload: {
211
- calendarCurrentView: selectedView,
212
- },
211
+ calendarCurrentView: selectedView
212
+ }
213
213
  });
214
214
  }, []);
215
215
  /**
@@ -217,14 +217,14 @@ const Calendar = (props) => {
217
217
  */
218
218
  const handleReset = react_1.default.useCallback(() => {
219
219
  dispatch({
220
- type: 'setPartial',
220
+ type: "setPartial",
221
221
  payload: {
222
222
  calendarCurrentView: initialProps.current.initialView,
223
223
  calendarDate: initialProps.current.value,
224
- calendarValue: initialProps.current.value,
225
- },
224
+ calendarValue: initialProps.current.value
225
+ }
226
226
  });
227
- if (typeof onChange === 'function') {
227
+ if (typeof onChange === "function") {
228
228
  onChange(initialProps.current.value);
229
229
  }
230
230
  }, [onChange]);
@@ -238,40 +238,39 @@ const Calendar = (props) => {
238
238
  today.setSeconds(0);
239
239
  today.setMilliseconds(0);
240
240
  dispatch({
241
- type: 'setPartial',
241
+ type: "setPartial",
242
242
  payload: {
243
- calendarDate: today,
244
- },
243
+ calendarDate: today
244
+ }
245
245
  });
246
246
  }, []);
247
247
  return (react_1.default.createElement(overridesMap.Paper, null,
248
- JSON.stringify(calendarDate),
249
248
  react_1.default.createElement(overridesMap.Header, null,
250
- typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
251
- typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
249
+ typeof heading !== "undefined" && react_1.default.createElement(overridesMap.Heading, null, heading),
250
+ typeof subheading !== "undefined" && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
252
251
  react_1.default.createElement(overridesMap.Toolbar, null,
253
- react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('prev'), title: prevMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
252
+ react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick("prev"), title: prevMonthButtonTooltip, disabled: calendarCurrentView !== "days" },
254
253
  react_1.default.createElement(overridesMap.IconPrev, null)),
255
- react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === 'months', disabled: !calendarViewVariants.includes('months'), onClick: handleChangeView(calendarCurrentView === 'months' ? 'days' : 'months') }, getMonthLabel(calendarDate)),
256
- react_1.default.createElement(overridesMap.ControlButton, { isActive: calendarCurrentView === 'years', disabled: !calendarViewVariants.includes('years'), title: changeYearButtonTooltip, onClick: handleChangeView(calendarCurrentView === 'years' ? 'days' : 'years') }, getYearLabel(calendarDate)),
257
- react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('next'), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
254
+ react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === "months", disabled: !calendarViewVariants.includes("months"), onClick: handleChangeView(calendarCurrentView === "months" ? "days" : "months") }, getMonthLabel(calendarDate)),
255
+ react_1.default.createElement(overridesMap.ControlButton, { isActive: calendarCurrentView === "years", disabled: !calendarViewVariants.includes("years"), title: changeYearButtonTooltip, onClick: handleChangeView(calendarCurrentView === "years" ? "days" : "years") }, getYearLabel(calendarDate)),
256
+ react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick("next"), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== "days" },
258
257
  react_1.default.createElement(overridesMap.IconNext, null)))),
259
- react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: getWeeks(calendarDate)[0], format: weekDayLabelFormat || 'short' }),
258
+ react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: getWeeks(calendarDate)[0], format: weekDayLabelFormat || "short" }),
260
259
  react_1.default.createElement(overridesMap.Body, null,
261
- calendarCurrentView === 'years' && (react_1.default.createElement(overridesMap.YearsSelector, null, getYearsRange(minDate, maxDate).map(year => {
260
+ calendarCurrentView === "years" && (react_1.default.createElement(overridesMap.YearsSelector, null, getYearsRange(minDate, maxDate).map(year => {
262
261
  const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
263
262
  const isSelected = a.find(d => d.getFullYear() === year) !== undefined;
264
263
  return (react_1.default.createElement(overridesMap.YearCell, { key: year, accentColor: accentColor, isSelected: isSelected, onClick: handleYearSelected(year) }, getYearLabel(new Date(year, calendarDate.getMonth(), calendarDate.getDate(), 0, 0, 0, 0))));
265
264
  }))),
266
- calendarCurrentView === 'months' && (react_1.default.createElement(overridesMap.MonthsSelector, null, getMonthsRange(minDate, maxDate).map(monthIndex => {
265
+ calendarCurrentView === "months" && (react_1.default.createElement(overridesMap.MonthsSelector, null, getMonthsRange(minDate, maxDate).map(monthIndex => {
267
266
  const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
268
267
  const isSelected = a.find(d => d.getMonth() === monthIndex) !== undefined;
269
268
  return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
270
269
  }))),
271
- calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber.toString() }, week.days.map(day => {
270
+ calendarCurrentView === "days" && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber.toString() }, week.days.map(day => {
272
271
  if (day.date.getMonth() === calendarDate.getMonth()) {
273
272
  const badge = badges.find(b => isSameDay(b.date, day.date));
274
- const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
273
+ const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue, calendarValue];
275
274
  const isSelected = isSameDay(a[0], day.date) || isSameDay(a[1], day.date);
276
275
  const fill = Array.isArray(calendarValue)
277
276
  ? day.date.getTime() > calendarValue[0].getTime() &&
@@ -279,15 +278,15 @@ const Calendar = (props) => {
279
278
  : false;
280
279
  return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, onClick: handleCellDateClick(day.date), fill: fill },
281
280
  getDayLabel(day.date),
282
- typeof badge !== 'undefined' && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
281
+ typeof badge !== "undefined" && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
283
282
  }
284
283
  return react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() });
285
284
  }))))))),
286
- (typeof resetButtonLabel !== 'undefined' ||
287
- typeof toodayButtonLabel !== 'undefined' ||
288
- typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,
289
- typeof footer !== 'undefined' && react_1.default.createElement(react_1.default.Fragment, null, footer),
290
- typeof toodayButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, toodayButtonLabel)),
291
- typeof resetButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
285
+ (typeof resetButtonLabel !== "undefined" ||
286
+ typeof toodayButtonLabel !== "undefined" ||
287
+ typeof footer !== "undefined") && (react_1.default.createElement(overridesMap.Footer, null,
288
+ typeof footer !== "undefined" && react_1.default.createElement(react_1.default.Fragment, null, footer),
289
+ typeof toodayButtonLabel !== "undefined" && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, toodayButtonLabel)),
290
+ typeof resetButtonLabel !== "undefined" && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
292
291
  };
293
292
  exports.default = Calendar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@via-profit/ui-kit",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "UI Kit",
5
5
  "repository": {
6
6
  "type": "git",