ordering-components-external 13.1.7 → 13.1.8

package/example/components/ProductComponentUI/index.js

@@ -1,113 +1,113 @@
-import React, { useState } from 'react'
-
-export const ProductComponentUI = (props, ref) => {
-  const {
-    onShare,
-    onClose,
-    productName,
-    productLogo,
-    productCount,
-    productPrice,
-    ingredients,
-    options,
-    note,
-    onChangedIngredient,
-    onChangedOption,
-    onChangedNote,
-    onClickedButtonPlus,
-    onClickedButtonMinus,
-    onClickedButtonAdd
-  } = props
-
-  const ingredientList = () => {
-    let iElementList = [];
-    if (typeof ingredients != 'undefined') {
-      for (let idx = 0; idx < ingredients.length; idx++) {
-        let item = ingredients[idx];
-        let element = (
-          <div key={item.id}>
-            <label>
-              <input type="checkbox" checked={item.isChecked} onChange={() => onChangedIngredient(idx)} /> {item.name}
-            </label>
-          </div>
-        )
-        iElementList.push(element);
-      }
-    }
-    return iElementList;
-  }
-
-  const subOptionItemList = (index, option) => {
-    let subOptionElementList = [];
-    let subOptions = option.suboptions;
-    for (let sIdx = 0; sIdx < subOptions.length; sIdx++) {
-      let subOption = subOptions[sIdx];
-      if (option.min == 1 && option.max == 1) {
-        let element = (
-          <div key={subOption.id}>
-            <label>
-              <input type="radio" checked={subOption.isChecked} onChange={() => onChangedOption(index, sIdx, true)} /> {subOption.name} +${subOption.price}
-            </label>
-          </div>
-        )
-        subOptionElementList.push(element);
-      }
-      else {
-        let element = (
-          <div key={subOption.id}>
-            <label>
-              <input type="checkbox" checked={subOption.isChecked} onChange={() => onChangedOption(index, sIdx, false)} /> {subOption.name} +${subOption.price}
-            </label>
-          </div>
-        )
-        subOptionElementList.push(element);
-      }
-    }
-    return subOptionElementList;
-  }
-
-  const optionList = () => {
-    let oElementList = [];
-    if (typeof options != 'undefined') {
-      for (let oIdx = 0; oIdx < options.length; oIdx++) {
-        let item = options[oIdx];
-        if (item.isDisplay) {
-          let element = (
-            <div key={item.id}>
-              <div>{item.name}</div>
-              {subOptionItemList(oIdx, item)}
-            </div>
-          )
-          oElementList.push(element);
-        }
-      }
-    }
-    return oElementList;
-  }
-
-  return (
-    <>
-      <div>
-        {productName}
-        {' '}
-        <button onClick={onShare}>share</button> {' '} <button onClick={onClose}>close</button>
-      </div>
-      <div>Photo Gallery</div>
-      <img src={productLogo} style={{ "width": "320px", "height": "240px" }} />
-      {typeof ingredients != 'undefined' && ingredients.length > 0 && <div>
-        <div>Ingredients</div>
-        {ingredientList()}
-      </div>}
-      {optionList()}
-      <div>Special Instructions</div>
-      <textarea value={note} onChange={onChangedNote} />
-      <div>
-        <button onClick={onClickedButtonMinus}>-</button>
-        {' '}{productCount}{' '}
-        <button onClick={onClickedButtonPlus}>+</button>
-      </div>
-      <div>${productPrice}</div>
-      <button onClick={onClickedButtonAdd}>Add</button>
-    </>
-  )
-}
+import React, { useState } from 'react'
+
+export const ProductComponentUI = (props, ref) => {
+  const {
+    onShare,
+    onClose,
+    productName,
+    productLogo,
+    productCount,
+    productPrice,
+    ingredients,
+    options,
+    note,
+    onChangedIngredient,
+    onChangedOption,
+    onChangedNote,
+    onClickedButtonPlus,
+    onClickedButtonMinus,
+    onClickedButtonAdd
+  } = props
+
+  const ingredientList = () => {
+    let iElementList = [];
+    if (typeof ingredients != 'undefined') {
+      for (let idx = 0; idx < ingredients.length; idx++) {
+        let item = ingredients[idx];
+        let element = (
+          <div key={item.id}>
+            <label>
+              <input type="checkbox" checked={item.isChecked} onChange={() => onChangedIngredient(idx)} /> {item.name}
+            </label>
+          </div>
+        )
+        iElementList.push(element);
+      }
+    }
+    return iElementList;
+  }
+
+  const subOptionItemList = (index, option) => {
+    let subOptionElementList = [];
+    let subOptions = option.suboptions;
+    for (let sIdx = 0; sIdx < subOptions.length; sIdx++) {
+      let subOption = subOptions[sIdx];
+      if (option.min == 1 && option.max == 1) {
+        let element = (
+          <div key={subOption.id}>
+            <label>
+              <input type="radio" checked={subOption.isChecked} onChange={() => onChangedOption(index, sIdx, true)} /> {subOption.name} +${subOption.price}
+            </label>
+          </div>
+        )
+        subOptionElementList.push(element);
+      }
+      else {
+        let element = (
+          <div key={subOption.id}>
+            <label>
+              <input type="checkbox" checked={subOption.isChecked} onChange={() => onChangedOption(index, sIdx, false)} /> {subOption.name} +${subOption.price}
+            </label>
+          </div>
+        )
+        subOptionElementList.push(element);
+      }
+    }
+    return subOptionElementList;
+  }
+
+  const optionList = () => {
+    let oElementList = [];
+    if (typeof options != 'undefined') {
+      for (let oIdx = 0; oIdx < options.length; oIdx++) {
+        let item = options[oIdx];
+        if (item.isDisplay) {
+          let element = (
+            <div key={item.id}>
+              <div>{item.name}</div>
+              {subOptionItemList(oIdx, item)}
+            </div>
+          )
+          oElementList.push(element);
+        }
+      }
+    }
+    return oElementList;
+  }
+
+  return (
+    <>
+      <div>
+        {productName}
+        {' '}
+        <button onClick={onShare}>share</button> {' '} <button onClick={onClose}>close</button>
+      </div>
+      <div>Photo Gallery</div>
+      <img src={productLogo} style={{ "width": "320px", "height": "240px" }} />
+      {typeof ingredients != 'undefined' && ingredients.length > 0 && <div>
+        <div>Ingredients</div>
+        {ingredientList()}
+      </div>}
+      {optionList()}
+      <div>Special Instructions</div>
+      <textarea value={note} onChange={onChangedNote} />
+      <div>
+        <button onClick={onClickedButtonMinus}>-</button>
+        {' '}{productCount}{' '}
+        <button onClick={onClickedButtonPlus}>+</button>
+      </div>
+      <div>${productPrice}</div>
+      <button onClick={onClickedButtonAdd}>Add</button>
+    </>
+  )
+}

package/example/components/ProductFormUI/index.js

@@ -1,131 +1,131 @@
-import React from 'react'
-import { ProductOptionSuboptionUI } from '../ProductOptionSuboptionUI'
-import { ProductIngredientUI } from '../ProductIngredientUI'
-import { ProductOptionUI } from '../ProductOptionUI'
-import { ProductIngredient } from '../../../src/components/ProductIngredient'
-import { ProductOption } from '../../../src/components/ProductOption'
-import { ProductOptionSuboption } from '../../../src/components/ProductOptionSuboption'
-
-export const ProductFormUI = (props) => {
-  const {
-    editMode,
-    isSoldOut,
-    productObject,
-    productCart,
-    increment,
-    decrement,
-    showOption,
-    maxProductQuantity,
-    errors,
-    handleSave,
-    handleChangeIngredientState,
-    handleChangeSuboptionState,
-    handleChangeCommentState
-  } = props
-
-  const { product, loading, error } = productObject
-
-  const productSuboptionProps = {
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: ProductOptionSuboptionUI,
-    /**
-     * Function to get suboption changes
-     */
-    onChange: handleChangeSuboptionState
-  }
-
-  const producOptionProps = {
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: ProductOptionUI
-  }
-
-  const productIngredientProps = {
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: ProductIngredientUI,
-    /**
-     * Function to get ingredient changes
-     */
-    onChange: handleChangeIngredientState
-  }
-  return (
-    <>
-      {
-        product && <h1>{product.id}. {product.name}</h1>
-      }
-      {
-        product?.ingredients.map(ingredient => (
-          <ProductIngredient
-            key={ingredient.id}
-            {...productIngredientProps}
-            state={productCart.ingredients[`id:${ingredient.id}`]}
-            ingredient={ingredient}
-          />
-        ))
-      }
-      {
-        product?.extras.map(extra => extra.options.map(option => {
-          const currentState = productCart.options[`id:${option.id}`] || {}
-          return (
-            <React.Fragment key={option.id}>
-              {
-                showOption(option) && (
-                  <ProductOption {...producOptionProps} option={option} currentState={currentState} error={errors[`id:${option.id}`]}>
-                    {
-                      option.suboptions.map(suboption => {
-                        const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
-                        const balance = productCart.options[`id:${option.id}`]?.balance || 0
-                        return (
-                          <ProductOptionSuboption
-                            key={suboption.id}
-                            {...productSuboptionProps}
-                            balance={balance}
-                            option={option}
-                            suboption={suboption}
-                            state={currentState}
-                          />
-                        )
-                      })
-                    }
-                  </ProductOption>
-                )
-              }
-            </React.Fragment>
-          )
-        }))
-      }
-      <div>
-        Special comment:<br />
-        <textarea
-          rows={4}
-          style={{ width: '100%' }}
-          defaultValue={productCart.comment}
-          onChange={handleChangeCommentState}
-        />
-      </div>
-      Total: {productCart.total}
-      {
-        productCart && (
-          <>
-            <button type='button' name='add' onClick={decrement} disabled={productCart.quantity === 1}>-</button>
-            {productCart.quantity}
-            <button type='button' name='decrease' onClick={increment} disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity}>+</button>
-          </>
-        )
-      }
-      {
-        productCart && !isSoldOut && <button type='button' name='save' onClick={handleSave} disabled={maxProductQuantity === 0}>{editMode ? 'Save' : 'Add'}</button>
-      }
-      {
-        isSoldOut && <button type='button' name='sold' disabled>Sold out</button>
-      }
-      <p>Max: {maxProductQuantity}</p>
-      <p>Sold out: {isSoldOut ? 'Yes' : 'No'}</p>
-    </>
-  )
-}
+import React from 'react'
+import { ProductOptionSuboptionUI } from '../ProductOptionSuboptionUI'
+import { ProductIngredientUI } from '../ProductIngredientUI'
+import { ProductOptionUI } from '../ProductOptionUI'
+import { ProductIngredient } from '../../../src/components/ProductIngredient'
+import { ProductOption } from '../../../src/components/ProductOption'
+import { ProductOptionSuboption } from '../../../src/components/ProductOptionSuboption'
+
+export const ProductFormUI = (props) => {
+  const {
+    editMode,
+    isSoldOut,
+    productObject,
+    productCart,
+    increment,
+    decrement,
+    showOption,
+    maxProductQuantity,
+    errors,
+    handleSave,
+    handleChangeIngredientState,
+    handleChangeSuboptionState,
+    handleChangeCommentState
+  } = props
+
+  const { product, loading, error } = productObject
+
+  const productSuboptionProps = {
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: ProductOptionSuboptionUI,
+    /**
+     * Function to get suboption changes
+     */
+    onChange: handleChangeSuboptionState
+  }
+
+  const producOptionProps = {
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: ProductOptionUI
+  }
+
+  const productIngredientProps = {
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: ProductIngredientUI,
+    /**
+     * Function to get ingredient changes
+     */
+    onChange: handleChangeIngredientState
+  }
+  return (
+    <>
+      {
+        product && <h1>{product.id}. {product.name}</h1>
+      }
+      {
+        product?.ingredients.map(ingredient => (
+          <ProductIngredient
+            key={ingredient.id}
+            {...productIngredientProps}
+            state={productCart.ingredients[`id:${ingredient.id}`]}
+            ingredient={ingredient}
+          />
+        ))
+      }
+      {
+        product?.extras.map(extra => extra.options.map(option => {
+          const currentState = productCart.options[`id:${option.id}`] || {}
+          return (
+            <React.Fragment key={option.id}>
+              {
+                showOption(option) && (
+                  <ProductOption {...producOptionProps} option={option} currentState={currentState} error={errors[`id:${option.id}`]}>
+                    {
+                      option.suboptions.map(suboption => {
+                        const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
+                        const balance = productCart.options[`id:${option.id}`]?.balance || 0
+                        return (
+                          <ProductOptionSuboption
+                            key={suboption.id}
+                            {...productSuboptionProps}
+                            balance={balance}
+                            option={option}
+                            suboption={suboption}
+                            state={currentState}
+                          />
+                        )
+                      })
+                    }
+                  </ProductOption>
+                )
+              }
+            </React.Fragment>
+          )
+        }))
+      }
+      <div>
+        Special comment:<br />
+        <textarea
+          rows={4}
+          style={{ width: '100%' }}
+          defaultValue={productCart.comment}
+          onChange={handleChangeCommentState}
+        />
+      </div>
+      Total: {productCart.total}
+      {
+        productCart && (
+          <>
+            <button type='button' name='add' onClick={decrement} disabled={productCart.quantity === 1}>-</button>
+            {productCart.quantity}
+            <button type='button' name='decrease' onClick={increment} disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity}>+</button>
+          </>
+        )
+      }
+      {
+        productCart && !isSoldOut && <button type='button' name='save' onClick={handleSave} disabled={maxProductQuantity === 0}>{editMode ? 'Save' : 'Add'}</button>
+      }
+      {
+        isSoldOut && <button type='button' name='sold' disabled>Sold out</button>
+      }
+      <p>Max: {maxProductQuantity}</p>
+      <p>Sold out: {isSoldOut ? 'Yes' : 'No'}</p>
+    </>
+  )
+}

package/example/components/ProductImagesUI/index.js

@@ -1,82 +1,82 @@
-import React, { useState } from 'react'
-import { Popup } from '../../../src/components/Popup'
-import { ModalUI } from '../ModalUI'
-
-export const ProductImagesUI = (props) => {
-  const {
-    hero,
-    gallery,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const [modalIsOpen, setIsOpen] = useState(false)
-  const [imageToOpen, setImageToOpen] = useState(null)
-
-  const customStyles = {
-    content: {
-      padding: '20px',
-      margin: '40px 30px',
-      overflow: 'auto',
-      backgroundColor: '#D1D1D1'
-    }
-  }
-
-  const openModal = (img) => {
-    setIsOpen(true)
-    setImageToOpen(img)
-  }
-
-  const closeModal = () => {
-    setIsOpen(false)
-    setImageToOpen(null)
-  }
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      <div id='product-image'>
-        <img className='img-hero' src={hero} alt='hero' height='110' width='110' onClick={() => openModal(hero)} />&nbsp;
-        {gallery.length && gallery.map((photo, i) => (
-          <img className='img' key={i} src={photo} alt={`photo-${i}`} height='110' width='110' onClick={() => openModal(photo)} />
-        ))}
-      </div>
-
-      <Popup
-        className='modal-info'
-        style={customStyles}
-        UIComponent={ModalUI}
-        open={modalIsOpen}
-        onAccept={() => closeModal()}
-        onClose={() => closeModal()}
-        title='Product image'
-      >
-        <button onClick={closeModal}>x</button>
-        <div className='image-modal' style={{ display: 'flex', justifyContent: 'center' }}>
-          <img src={imageToOpen} alt='img' height='510' width='510' />
-        </div>
-      </Popup>
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React, { useState } from 'react'
+import { Popup } from '../../../src/components/Popup'
+import { ModalUI } from '../ModalUI'
+
+export const ProductImagesUI = (props) => {
+  const {
+    hero,
+    gallery,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const [modalIsOpen, setIsOpen] = useState(false)
+  const [imageToOpen, setImageToOpen] = useState(null)
+
+  const customStyles = {
+    content: {
+      padding: '20px',
+      margin: '40px 30px',
+      overflow: 'auto',
+      backgroundColor: '#D1D1D1'
+    }
+  }
+
+  const openModal = (img) => {
+    setIsOpen(true)
+    setImageToOpen(img)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+    setImageToOpen(null)
+  }
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      <div id='product-image'>
+        <img className='img-hero' src={hero} alt='hero' height='110' width='110' onClick={() => openModal(hero)} />&nbsp;
+        {gallery.length && gallery.map((photo, i) => (
+          <img className='img' key={i} src={photo} alt={`photo-${i}`} height='110' width='110' onClick={() => openModal(photo)} />
+        ))}
+      </div>
+
+      <Popup
+        className='modal-info'
+        style={customStyles}
+        UIComponent={ModalUI}
+        open={modalIsOpen}
+        onAccept={() => closeModal()}
+        onClose={() => closeModal()}
+        title='Product image'
+      >
+        <button onClick={closeModal}>x</button>
+        <div className='image-modal' style={{ display: 'flex', justifyContent: 'center' }}>
+          <img src={imageToOpen} alt='img' height='510' width='510' />
+        </div>
+      </Popup>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}