@licklist/design 0.59.0 → 0.60.0

package/dist/calendar/Calendar.d.ts

@@ -13,5 +13,5 @@ export type CalendarProps = {
     initialDate?: DateTime;
     getDateTimeButtonProps: (date: DateTime) => Pick<DateTimeButtonProps, "resources" | "showResources" | "shouldCalculateResources" | "isDisabled">;
 };
-export declare const Calendar: ({ initialDate, ...props }: CalendarProps) => JSX.Element;
+export declare const Calendar: (props: CalendarProps) => JSX.Element;
 //# sourceMappingURL=Calendar.d.ts.map

package/dist/calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAI3D,eAAO,MAAM,eAAe,UAK1B,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,sBAAsB,EAAE,CACtB,IAAI,EAAE,QAAQ,KACX,IAAI,CACP,mBAAmB,EACnB,WAAW,GAAG,eAAe,GAAG,0BAA0B,GAAG,YAAY,CAC1E,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,8BAGlB,aAAa,gBASf,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAK3D,eAAO,MAAM,eAAe,UAK1B,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,sBAAsB,EAAE,CACtB,IAAI,EAAE,QAAQ,KACX,IAAI,CACP,mBAAmB,EACnB,WAAW,GAAG,eAAe,GAAG,0BAA0B,GAAG,YAAY,CAC1E,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAW5C,CAAC"}

package/dist/calendar/Calendar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("luxon"),s=require("./components/CalendarButtons/CalendarButtons.js"),i=require("./components/CalendarDates/CalendarDates.js"),l=n.DateTime.now().set({millisecond:0,second:0,hour:0,minute:0});exports.Calendar=function(e){var t=e.initialDate,n=void 0===t?l:t,o=a.__rest(e,["initialDate"]);return r.createElement("div",{className:"calendar-wrapper"},r.createElement("div",{className:"calendar"},r.createElement(s.CalendarButtons,a.__assign({initialDate:n},o)),r.createElement(i.CalendarDates,a.__assign({},o))))},exports.defaultStartDay=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("../static/loader/LoaderIndicator.js"),i=require("luxon");require("../static/index.js");var s=require("./components/CalendarButtons/CalendarButtons.js"),l=require("./components/CalendarDates/CalendarDates.js"),o=i.DateTime.now().set({millisecond:0,second:0,hour:0,minute:0});exports.Calendar=function(e){var t=e.initialDate,i=void 0===t?o:t,d=e.isLoading;return r.createElement("div",{className:"calendar-wrapper"},r.createElement("div",{className:"calendar"},r.createElement(s.CalendarButtons,a.__assign({initialDate:i},e)),d?r.createElement(n.LoaderIndicator,null):r.createElement(l.CalendarDates,a.__assign({},e))))},exports.defaultStartDay=o;

package/dist/calendar/components/CalendarDates/CalendarDates.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CalendarProps } from "../../Calendar";
-export type CalendarDatesProps = Pick<CalendarProps, "isLoading" | "calendarDates" | "selectedDate" | "setSelectedDate" | "fromPrice" | "getDateTimeButtonProps">;
-export declare const CalendarDates: ({ isLoading, calendarDates, selectedDate, setSelectedDate, fromPrice, getDateTimeButtonProps, }: CalendarDatesProps) => JSX.Element;
+export type CalendarDatesProps = Pick<CalendarProps, "calendarDates" | "selectedDate" | "setSelectedDate" | "fromPrice" | "getDateTimeButtonProps">;
+export declare const CalendarDates: ({ calendarDates, selectedDate, setSelectedDate, fromPrice, getDateTimeButtonProps, }: CalendarDatesProps) => JSX.Element;
 //# sourceMappingURL=CalendarDates.d.ts.map

package/dist/calendar/components/CalendarDates/CalendarDates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,WAAW,GACX,eAAe,GACf,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,wBAAwB,CAC3B,CAAC;AAEF,eAAO,MAAM,aAAa,oGAOvB,kBAAkB,gBA+CpB,CAAC"}
+{"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,eAAe,GACf,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,wBAAwB,CAC3B,CAAC;AAEF,eAAO,MAAM,aAAa,yFAMvB,kBAAkB,gBA4CpB,CAAC"}

package/dist/calendar/components/CalendarDates/CalendarDates.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("../../../date-time-button/DateTimeButton.js"),d=require("../CalendarWeekdays/CalendarWeekdays.js");exports.CalendarDates=function(e){var i=e.isLoading,l=void 0!==i&&i,s=e.calendarDates,u=e.selectedDate,o=e.setSelectedDate,c=e.fromPrice,m=e.getDateTimeButtonProps,v=t.useMemo((function(){var e,t,r=null!==(t=null===(e=s[0])||void 0===e?void 0:e.weekday)&&void 0!==t?t:0;if(1===r)return s;for(var n=[];r>1;)n.push(null),r-=1;return a.__spreadArray(a.__spreadArray([],a.__read(n),!1),a.__read(s),!1)}),[s]);return r.createElement("div",{className:"calendar-dates-wrapper"},r.createElement(d.CalendarWeekdays,null),r.createElement("div",{className:"calendar-dates"},v.map((function(e){if(null===e)return r.createElement("div",null);var t=m(e),d=l||t.isDisabled;return r.createElement(n.DateTimeButton,a.__assign({key:+e,isDisabled:d,isSelected:u?e.hasSame(u,"day"):void 0,date:e,onSelect:function(){return o(e)},price:c,variant:n.Variant.month},t))}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("../../../date-time-button/DateTimeButton.js"),l=require("../CalendarWeekdays/CalendarWeekdays.js");exports.CalendarDates=function(e){var d=e.calendarDates,i=e.selectedDate,u=e.setSelectedDate,s=e.fromPrice,c=e.getDateTimeButtonProps,o=t.useMemo((function(){var e,t,r=null!==(t=null===(e=d[0])||void 0===e?void 0:e.weekday)&&void 0!==t?t:0;if(1===r)return d;for(var n=[];r>1;)n.push(null),r-=1;return a.__spreadArray(a.__spreadArray([],a.__read(n),!1),a.__read(d),!1)}),[d]);return r.createElement("div",{className:"calendar-dates-wrapper"},r.createElement(l.CalendarWeekdays,null),r.createElement("div",{className:"calendar-dates"},o.map((function(e){if(null===e)return r.createElement("div",null);var t=c(e);return r.createElement(n.DateTimeButton,a.__assign({key:+e,isSelected:i?e.hasSame(i,"day"):void 0,date:e,onSelect:function(){return u(e)},price:s,variant:n.Variant.month},t))}))))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/calendar/Calendar.stories.tsx

@@ -38,3 +38,26 @@ Default.args = {
     isDisabled: false,
   }),
 };
+
+export const Loading: Story<CalendarProps> = (args) => {
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <Calendar {...args} />
+    </div>
+  );
+};
+
+Loading.args = {
+  isLoading: true,
+  fromPrice: "from £10",
+  selectedDate: null,
+  setSelectedDate: () => null,
+  calendarDates: getMonthCalendarDates(now),
+  currentDate: now,
+  getDateTimeButtonProps: () => ({
+    resources: [],
+    showResources: false,
+    shouldCalculateResources: false,
+    isDisabled: false,
+  }),
+};

package/src/calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import { DateTime } from "luxon";
 import { DateTimeButtonProps } from "src/date-time-button";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
+import { LoaderIndicator } from "../static";
 
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
@@ -28,15 +29,14 @@ export type CalendarProps = {
   >;
 };
 
-export const Calendar = ({
-  initialDate = defaultStartDay,
-  ...props
-}: CalendarProps) => {
+export const Calendar = (props: CalendarProps) => {
+  const { initialDate = defaultStartDay, isLoading } = props;
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
         <CalendarButtons initialDate={initialDate} {...props} />
-        <CalendarDates {...props} />
+
+        {isLoading ? <LoaderIndicator /> : <CalendarDates {...props} />}
       </div>
     </div>
   );

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -6,7 +6,6 @@ import { CalendarProps } from "../../Calendar";
 
 export type CalendarDatesProps = Pick<
   CalendarProps,
-  | "isLoading"
   | "calendarDates"
   | "selectedDate"
   | "setSelectedDate"
@@ -15,7 +14,6 @@ export type CalendarDatesProps = Pick<
 >;
 
 export const CalendarDates = ({
-  isLoading = false,
   calendarDates,
   selectedDate,
   setSelectedDate,
@@ -48,12 +46,9 @@ export const CalendarDates = ({
 
           const props = getDateTimeButtonProps(date);
 
-          const isDisabled = isLoading || props.isDisabled;
-
           return (
             <DateTimeButton
               key={+date}
-              isDisabled={isDisabled}
               isSelected={
                 selectedDate ? date.hasSame(selectedDate, "day") : undefined
               }