npm - @chayns-components/core - Versions diffs - 5.0.0-beta.802 → 5.0.0-beta.803 - Mend

@chayns-components/core 5.0.0-beta.802 → 5.0.0-beta.803

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 (6) hide show

package/lib/cjs/components/amount-control/AmountControl.js CHANGED Viewed

@@ -19,13 +19,13 @@ const AmountControl = ({
   label,
   iconColor,
   maxAmount,
+  minAmount = 0,
   onChange,
   shouldShowWideInput = false
 }) => {
-  const [amountValue, setAmountValue] = (0, _react.useState)(0);
-  const [inputValue, setInputValue] = (0, _react.useState)('0');
+  const [amountValue, setAmountValue] = (0, _react.useState)(minAmount);
+  const [inputValue, setInputValue] = (0, _react.useState)(minAmount.toString());
   const [displayState, setDisplayState] = (0, _react.useState)('default');
-  const minAmount = 0;
   const inputRef = (0, _react.useRef)(null);
   /**
@@ -39,13 +39,13 @@ const AmountControl = ({
       case maxAmount && amountValue >= maxAmount:
         setDisplayState('maxAmount');
         return;
-      case amountValue > 0:
+      case amountValue > minAmount:
         setDisplayState('normal');
         return;
       default:
         setDisplayState('default');
     }
-  }, [amountValue, maxAmount]);
+  }, [amountValue, maxAmount, minAmount]);
   const hasFocus = (0, _react.useMemo)(() => displayState !== 'default', [displayState]);
   /**
@@ -77,6 +77,9 @@ const AmountControl = ({
     setInputValue(prevState => (Number(prevState) + 1).toString());
   }, [onChange]);
   const handleAmountRemove = (0, _react.useCallback)(() => {
+    if (displayState === 'default') {
+      return;
+    }
     setAmountValue(prevState => {
       const newAmount = prevState - 1;
       if (typeof onChange === 'function') {
@@ -85,17 +88,17 @@ const AmountControl = ({
       return newAmount;
     });
     setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [onChange]);
+  }, [displayState, onChange]);
   const handleFirstAmount = (0, _react.useCallback)(() => {
-    if (amountValue !== 0) {
+    if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(1);
+      onChange(minAmount + 1);
     }
-    setAmountValue(1);
-    setInputValue('1');
-  }, [amountValue, onChange]);
+    setAmountValue(minAmount + 1);
+    setInputValue((minAmount + 1).toString());
+  }, [amountValue, minAmount, onChange]);
   const handleDeleteIconClick = (0, _react.useCallback)(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -107,14 +110,14 @@ const AmountControl = ({
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = (0, _react.useCallback)(() => {
-    setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? 0 : Number(inputValue));
+      onChange(inputValue === '' ? minAmount : Number(inputValue));
     }
     if (inputValue === '') {
-      setInputValue('0');
+      setInputValue(minAmount.toString());
     }
-  }, [inputValue, onChange]);
+  }, [inputValue, minAmount, onChange]);
   const handleInputChange = (0, _react.useCallback)(event => {
     const {
       value

package/lib/cjs/components/amount-control/AmountControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","useRef","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","useCallback","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","StyledAmountControlPseudoInput","$shouldShowWideInput","StyledAmountControlInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n onChange,\n shouldShowWideInput = false,\n}) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState + 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n }, [onChange]);\n\n const handleAmountRemove = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState - 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n }, [onChange]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(1);\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue, onChange]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (typeof onChange === 'function') {\n onChange(inputValue === '' ? 0 : Number(inputValue));\n }\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue, onChange]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: valueBeforeCheck,\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon, iconColor]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width:\n displayState === 'normal' \|\| displayState === 'maxAmount'\n ? 40\n : 28,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\n )}\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","inputRef","useRef","useEffect","hasFocus","useMemo","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","StyledAmountControlPseudoInput","$shouldShowWideInput","StyledAmountControlInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldShowWideInput = false,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState + 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n }, [onChange]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = prevState - 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n }, [displayState, onChange]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + 1);\n }\n\n setAmountValue(minAmount + 1);\n setInputValue((minAmount + 1).toString());\n }, [amountValue, minAmount, onChange]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? minAmount : Number(inputValue));\n\n if (typeof onChange === 'function') {\n onChange(inputValue === '' ? minAmount : Number(inputValue));\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, minAmount, onChange]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: valueBeforeCheck,\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon, iconColor]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width:\n displayState === 'normal' \|\| displayState === 'maxAmount'\n ? 40\n : 28,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\n )}\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.js CHANGED Viewed

@@ -11,13 +11,13 @@ const AmountControl = _ref => {
     label,
     iconColor,
     maxAmount,
+    minAmount = 0,
     onChange,
     shouldShowWideInput = false
   } = _ref;
-  const [amountValue, setAmountValue] = useState(0);
-  const [inputValue, setInputValue] = useState('0');
+  const [amountValue, setAmountValue] = useState(minAmount);
+  const [inputValue, setInputValue] = useState(minAmount.toString());
   const [displayState, setDisplayState] = useState('default');
-  const minAmount = 0;
   const inputRef = useRef(null);
   /**
@@ -31,13 +31,13 @@ const AmountControl = _ref => {
       case maxAmount && amountValue >= maxAmount:
         setDisplayState('maxAmount');
         return;
-      case amountValue > 0:
+      case amountValue > minAmount:
         setDisplayState('normal');
         return;
       default:
         setDisplayState('default');
     }
-  }, [amountValue, maxAmount]);
+  }, [amountValue, maxAmount, minAmount]);
   const hasFocus = useMemo(() => displayState !== 'default', [displayState]);
   /**
@@ -69,6 +69,9 @@ const AmountControl = _ref => {
     setInputValue(prevState => (Number(prevState) + 1).toString());
   }, [onChange]);
   const handleAmountRemove = useCallback(() => {
+    if (displayState === 'default') {
+      return;
+    }
     setAmountValue(prevState => {
       const newAmount = prevState - 1;
       if (typeof onChange === 'function') {
@@ -77,17 +80,17 @@ const AmountControl = _ref => {
       return newAmount;
     });
     setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [onChange]);
+  }, [displayState, onChange]);
   const handleFirstAmount = useCallback(() => {
-    if (amountValue !== 0) {
+    if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(1);
+      onChange(minAmount + 1);
     }
-    setAmountValue(1);
-    setInputValue('1');
-  }, [amountValue, onChange]);
+    setAmountValue(minAmount + 1);
+    setInputValue((minAmount + 1).toString());
+  }, [amountValue, minAmount, onChange]);
   const handleDeleteIconClick = useCallback(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -98,14 +101,14 @@ const AmountControl = _ref => {
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
-    setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? 0 : Number(inputValue));
+      onChange(inputValue === '' ? minAmount : Number(inputValue));
     }
     if (inputValue === '') {
-      setInputValue('0');
+      setInputValue(minAmount.toString());
     }
-  }, [inputValue, onChange]);
+  }, [inputValue, minAmount, onChange]);
   const handleInputChange = useCallback(event => {
     const {
       value

package/lib/esm/components/amount-control/AmountControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","hasFocus","toString","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n onChange,\n shouldShowWideInput = false,\n}) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState + 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n }, [onChange]);\n\n const handleAmountRemove = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState - 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n }, [onChange]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(1);\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue, onChange]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (typeof onChange === 'function') {\n onChange(inputValue === '' ? 0 : Number(inputValue));\n }\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue, onChange]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: valueBeforeCheck,\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon, iconColor]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width:\n displayState === 'normal' \|\| displayState === 'maxAmount'\n ? 40\n : 28,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\n )}\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldShowWideInput = false,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState + 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n }, [onChange]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = prevState - 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n }, [displayState, onChange]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + 1);\n }\n\n setAmountValue(minAmount + 1);\n setInputValue((minAmount + 1).toString());\n }, [amountValue, minAmount, onChange]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? minAmount : Number(inputValue));\n\n if (typeof onChange === 'function') {\n onChange(inputValue === '' ? minAmount : Number(inputValue));\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, minAmount, onChange]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: valueBeforeCheck,\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon, iconColor]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width:\n displayState === 'normal' \|\| displayState === 'maxAmount'\n ? 40\n : 28,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\n )}\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n $isWide={displayState === 'normal' \|\| displayState === 'maxAmount'}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/amount-control/AmountControl.d.ts CHANGED Viewed

@@ -21,6 +21,10 @@ export type AmountControlProps = {
      * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.
      */
     maxAmount?: number;
+    /**
+     * The minimum allowed amount.
+     */
+    minAmount?: number;
     /**
      * A Function that is executed when the amount is changed
      */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.802",
+    "version": "5.0.0-beta.803",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4266d6a4156109be470eb992cee39c1d5a784ed7"
+    "gitHead": "79d11d059583a60b15ec393b8ba6438efa6a2233"
 }