@licklist/design 0.46.0 → 0.47.0

package/dist/product-set/control/DateAndRecurrenceInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateAndRecurrenceInput.d.ts","sourceRoot":"","sources":["../../../src/product-set/control/DateAndRecurrenceInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO1C,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAuB7G,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;CACnD;AAED,UAAU,2BAA2B;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,4BAA4B,EAAE,OAAO,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,mFAKhC,2BAA2B,gBA8Q7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAC5C,WAAW,EACX,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBxB,CAAC"}
+{"version":3,"file":"DateAndRecurrenceInput.d.ts","sourceRoot":"","sources":["../../../src/product-set/control/DateAndRecurrenceInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO1C,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAuB7G,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;CACnD;AAED,UAAU,2BAA2B;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,4BAA4B,EAAE,OAAO,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,mFAKhC,2BAA2B,gBA+Q7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAC5C,WAAW,EACX,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBxB,CAAC"}

package/dist/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { SyntheticEvent } from "react";
 type Sizes = "big" | "small";
 interface NumberInputHorizontalProps {
     disabled?: boolean;
@@ -7,6 +7,8 @@ interface NumberInputHorizontalProps {
     onChange: (value: number) => void;
     onPlusClick: (value: number) => void;
     onMinusClick: (value: number) => void;
+    onSelect?: (e: SyntheticEvent) => void;
+    step?: number;
     min?: number;
     max?: number;
     size?: Sizes;

package/dist/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputHorizontal.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,KAAK,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC;AAE7B,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,qBAAqB,qGAuGjC,CAAC"}
+{"version":3,"file":"NumberInputHorizontal.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAK1D,KAAK,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC;AAE7B,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,qBAAqB,qGAkHjC,CAAC"}

package/dist/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),i=e(t),n=require("react-i18next"),a=require("react-bootstrap"),l=require("../../../static/Icon.js"),s=e(require("clsx"));require("../../../static/index.js");var r=t.forwardRef((function(e,t){var r=e.disabled,o=void 0!==r&&r,u=e.className,c=void 0===u?"":u,m=e.value,d=e.size,b=void 0===d?"small":d,p=e.hasCurrency,v=e.onChange,f=e.onPlusClick,N=e.onMinusClick,z=e.min,g=e.max,y=e.defaultValue,_=e.isLoading,x=void 0!==_&&_,C=(0,n.useTranslation(["Sale"]).t)("Sale:soldOut"),k="big"===b,E=s(c,"licklist-number-input-horizontal");return i.createElement("div",{className:E},i.createElement("button",{type:"button",onClick:function(){void 0!==z&&m>z&&N(m-1),void 0===z&&N(m-1)},className:["licklist-number-input-horizontal__btn-minus",k?"big-sizes-btn":"small-sizes-btn"].join(" "),disabled:o},i.createElement(l.default,{type:"minus",className:k?"big_icon":"small_icon"})),i.createElement("div",{className:["position-relative d-flex",o&&k&&"w-100"].join(" ")},p&&i.createElement("div",{className:"currency"},"£"),i.createElement(a.FormControl,{ref:t,onClick:function(e){return e.target.select()},type:o&&k?"text":"number",className:k?"big-sizes-input":"small-sizes-input",onChange:function(e){return v(Number(e.target.value))},value:o&&k&&!x?C:m,min:z,max:g,defaultValue:y,disabled:o})),i.createElement("button",{type:"button",onClick:function(){void 0!==g&&m<g&&f(m+1),void 0===g&&f(m+1)},className:["licklist-number-input-horizontal__btn-plus",k?"big-sizes-btn":"small-sizes-btn"].join(" "),disabled:o},i.createElement(l.default,{type:"plus",className:k?"big_icon":"small_icon"})))}));r.displayName="NumberInputHorizontal",exports.NumberInputHorizontal=r;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),i=e(t),n=require("react-i18next"),a=require("react-bootstrap"),l=require("../../../static/Icon.js"),s=e(require("clsx"));require("../../../static/index.js");var r=t.forwardRef((function(e,t){var r=e.disabled,o=void 0!==r&&r,u=e.className,c=void 0===u?"":u,m=e.value,d=e.step,b=e.size,p=void 0===b?"small":b,v=e.hasCurrency,f=e.onChange,N=e.onPlusClick,z=e.onMinusClick,g=e.onSelect,y=e.min,_=e.max,x=e.defaultValue,C=e.isLoading,k=void 0!==C&&C,E=(0,n.useTranslation(["Sale"]).t)("Sale:soldOut"),j="big"===p,h=s(c,"licklist-number-input-horizontal");return i.createElement("div",{className:h},i.createElement("button",{type:"button",onClick:function(){void 0!==y&&m>y&&z(m-1),void 0===y&&z(m-1)},className:["licklist-number-input-horizontal__btn-minus",j?"big-sizes-btn":"small-sizes-btn"].join(" "),disabled:o},i.createElement(l.default,{type:"minus",className:j?"big_icon":"small_icon"})),i.createElement("div",{className:["position-relative d-flex",o&&j&&"w-100"].join(" ")},v&&i.createElement("div",{className:"currency"},"£"),i.createElement(a.FormControl,{ref:t,onClick:function(e){g&&g(e),e.target.select()},type:o&&j?"text":"number",className:s(j?"big-sizes-input":"small-sizes-input",o&&"border-0"),onChange:function(e){return f(Number(e.target.value))},value:o&&j&&!k?E:m,min:y,max:_,step:d,defaultValue:x,disabled:o&&!g})),i.createElement("button",{type:"button",onClick:function(){void 0!==_&&m<_&&N(m+1),void 0===_&&N(m+1)},className:["licklist-number-input-horizontal__btn-plus",j?"big-sizes-btn":"small-sizes-btn"].join(" "),disabled:o},i.createElement(l.default,{type:"plus",className:j?"big_icon":"small_icon"})))}));r.displayName="NumberInputHorizontal",exports.NumberInputHorizontal=r;

package/package.json

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

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -126,7 +126,8 @@ export const DateAndRecurrenceInput = ({
       }
     }
 
-    const availableTime = availableTimesFormRef?.current?.getValues()?.availableTimes || null;
+    const availableTime =
+      availableTimesFormRef?.current?.getValues()?.availableTimes || null;
 
     const values = {
       rrule: next.rrule,

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { NumberInputHorizontal } from "./NumberInputHorizontal";
+
+export default {
+  title: "Manual Booking/NumberInputHorizontal",
+} as Meta;
+
+export const Default: Story<any> = (args) => {
+  const ref = useRef(null);
+  const [value, setValue] = useState(0);
+  const [isDisabled, setDisabled] = useState(true);
+
+  const onPriceClick = (e) => {
+    if (!isDisabled) {
+      return;
+    }
+    console.log("click");
+    setDisabled(false);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onPriceClick}
+      onKeyDown={onPriceClick}
+      style={{ height: "250px", width: "370px" }}
+    >
+      <NumberInputHorizontal
+        ref={ref}
+        hasCurrency
+        onSelect={onPriceClick}
+        onChange={(val) => {
+          setValue(val);
+        }}
+        onMinusClick={() => {
+          setValue(value - 1 || 0);
+        }}
+        onPlusClick={() => {
+          setValue((value ?? 0) + 1);
+        }}
+        value={value}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+};

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { forwardRef } from "react";
+import React, { SyntheticEvent, forwardRef } from "react";
 import { FormControl } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../../static";
@@ -13,6 +13,8 @@ interface NumberInputHorizontalProps {
   onChange: (value: number) => void;
   onPlusClick: (value: number) => void;
   onMinusClick: (value: number) => void;
+  onSelect?: (e: SyntheticEvent) => void;
+  step?: number;
   min?: number;
   max?: number;
   size?: Sizes;
@@ -30,11 +32,13 @@ export const NumberInputHorizontal = forwardRef<
       disabled = false,
       className = "",
       value,
+      step,
       size = "small",
       hasCurrency,
       onChange,
       onPlusClick,
       onMinusClick,
+      onSelect,
       min,
       max,
       defaultValue,
@@ -54,7 +58,12 @@ export const NumberInputHorizontal = forwardRef<
       }
     };
 
-    const onClick = (e) => e.target.select();
+    const onClick = (e) => {
+      if (onSelect) {
+        onSelect(e);
+      }
+      e.target.select();
+    };
 
     const handleArrowDownClick = () => {
       if (min !== undefined && value > min) {
@@ -98,13 +107,17 @@ export const NumberInputHorizontal = forwardRef<
             ref={ref}
             onClick={onClick}
             type={disabled && hasBigSize ? "text" : "number"}
-            className={hasBigSize ? "big-sizes-input" : "small-sizes-input"}
+            className={clsx(
+              hasBigSize ? "big-sizes-input" : "small-sizes-input",
+              disabled && "border-0"
+            )}
             onChange={(e) => onChange(Number(e.target.value))}
             value={disabled && hasBigSize && !isLoading ? soldOut : value}
             min={min}
             max={max}
+            step={step}
             defaultValue={defaultValue}
-            disabled={disabled}
+            disabled={disabled && !onSelect}
           />
         </div>
         <button