ordering-components-external 13.2.13 → 13.2.14

package/example/components/ConfigsExample/index.js

@@ -1,118 +1,118 @@
-import React, { useState } from 'react'
-import { useConfig } from '../../../src/contexts/ConfigContext'
-import { useUtils } from '../../../src/contexts/UtilsContext'
-
-export const ConfigsExample = (props) => {
-  const [{ loading, configs }, { refreshConfigs }] = useConfig()
-  const [{ parsePrice, parseDate, parseDistance, getTimeAgo }] = useUtils()
-  const [numberParsed, setNumberParsed] = useState()
-  const [formatDate, setFormatDate] = useState()
-  const [numberOptions, setNumberOptions] = useState({})
-  const [dateOptions, setDateOptions] = useState({})
-  const [distance, setDistance] = useState()
-  const [distanceOptions, setDistanceOptions] = useState({})
-  const [timeAgoOptions, setTimeAgoOptions] = useState({})
-  const [timeAgo, setTimeAgo] = useState()
-  const hanldeChangeInput = (e) => {
-    setNumberParsed(parsePrice(e.target.value, numberOptions))
-  }
-  const hanldeChangeInputDate = (e) => {
-    setFormatDate(parseDate(e.target.value, dateOptions))
-  }
-  const hanldeChangeDistance = (e) => {
-    setDistance(parseDistance(e.target.value, distanceOptions))
-  }
-  const handleTimeAgo = (e) => {
-    setTimeAgo(getTimeAgo(e.target.value, timeAgoOptions))
-  }
-  const handleNumberOptions = (e) => {
-    setNumberOptions({
-      ...numberOptions,
-      [e.target.name]: e.target.value
-    })
-  }
-  const handleDateOptions = (e) => {
-    setDateOptions({
-      ...dateOptions,
-      [e.target.name]: e.target.name === 'utc' ? e.target.value === '1' : e.target.value
-    })
-  }
-  const handleAgoOptions = (e) => {
-    setTimeAgoOptions({
-      ...timeAgoOptions,
-      [e.target.name]: e.target.name === 'utc' ? e.target.value === '1' : e.target.value
-    })
-  }
-  const handlekmOptions = (e) => {
-    setDistanceOptions({
-      ...distanceOptions,
-      [e.target.name]: e.target.checked ? 'KM' : 'MI'
-    })
-  }
-
-  return (
-    <>
-      <h1>Configs</h1>
-      <ul>
-        {
-          Object.values(configs).map((config) => (
-            <li key={config.id || config.key}>
-              <strong>{config.key}:</strong> {config.value}
-            </li>
-          ))
-        }
-      </ul>
-      <button type='button' onClick={() => refreshConfigs()} disabled={loading}>Refresh configs</button>
-      <h2>Parse number Example</h2>
-      <form>
-        <label>Decimal Quiantity</label>
-        <input type='number' name='decimal' onChange={handleNumberOptions} />
-        <label>Decimal Separator</label>
-        <input type='text' name='separator' onChange={handleNumberOptions} />
-        <label>thousand Separator</label>
-        <input type='text' name='thousand' onChange={handleNumberOptions} />
-        <label>Currency</label>
-        <input type='text' name='currency' onChange={handleNumberOptions} />
-        <label>Currency Position</label>
-        <select name='currencyPosition' onChange={handleNumberOptions}>
-          <option value='left'>left</option>
-          <option value='right'>right</option>
-        </select>
-      </form>
-      <br />
-      <input type='number' name='numberParsed' onChange={hanldeChangeInput} /> <strong>number parsed:</strong> {numberParsed}
-      <h2>Parse date Example</h2>
-      <form>
-        <label>Input format</label>
-        <input type='text' name='inputFormat' onChange={handleDateOptions} />
-        <label>output format</label>
-        <input type='text' name='outputFormat' onChange={handleDateOptions} />
-        <label>utc</label>
-        <select name='utc' onChange={handleDateOptions}>
-          <option value='1'>TRUE</option>
-          <option value='0'>FALSE</option>
-        </select>
-        <label>format time</label>
-        <select name='formatTime' onChange={handleDateOptions}>
-          <option value='24'>24</option>
-          <option value='12'>12</option>
-        </select>
-      </form>
-      <input type='text' onChange={hanldeChangeInputDate} name='formatedTime' /> <strong>Formated date : </strong> {formatDate}
-      <h2>Parse Distance Example</h2>
-      <input type='checkbox' name='unit' defaultChecked='true' onChange={handlekmOptions} />
-      <input type='number' onChange={hanldeChangeDistance} name='distance' /> <strong>Distance : </strong> {distance}
-      <h2>GeT time Ago Example</h2>
-      <label>UTC</label>
-      <select name='utc' onChange={handleAgoOptions}>
-        <option value='1'>TRUE</option>
-        <option value='0'>FALSE</option>
-      </select>
-      <label> Time Format</label>
-      <input type='text' name='inputFormat' onChange={handleAgoOptions} />
-      <br />
-      <input type='text' onChange={handleTimeAgo} name='formatedDate' /> <strong>Formated date : </strong> {timeAgo}
-
-    </>
-  )
-}
+import React, { useState } from 'react'
+import { useConfig } from '../../../src/contexts/ConfigContext'
+import { useUtils } from '../../../src/contexts/UtilsContext'
+
+export const ConfigsExample = (props) => {
+  const [{ loading, configs }, { refreshConfigs }] = useConfig()
+  const [{ parsePrice, parseDate, parseDistance, getTimeAgo }] = useUtils()
+  const [numberParsed, setNumberParsed] = useState()
+  const [formatDate, setFormatDate] = useState()
+  const [numberOptions, setNumberOptions] = useState({})
+  const [dateOptions, setDateOptions] = useState({})
+  const [distance, setDistance] = useState()
+  const [distanceOptions, setDistanceOptions] = useState({})
+  const [timeAgoOptions, setTimeAgoOptions] = useState({})
+  const [timeAgo, setTimeAgo] = useState()
+  const hanldeChangeInput = (e) => {
+    setNumberParsed(parsePrice(e.target.value, numberOptions))
+  }
+  const hanldeChangeInputDate = (e) => {
+    setFormatDate(parseDate(e.target.value, dateOptions))
+  }
+  const hanldeChangeDistance = (e) => {
+    setDistance(parseDistance(e.target.value, distanceOptions))
+  }
+  const handleTimeAgo = (e) => {
+    setTimeAgo(getTimeAgo(e.target.value, timeAgoOptions))
+  }
+  const handleNumberOptions = (e) => {
+    setNumberOptions({
+      ...numberOptions,
+      [e.target.name]: e.target.value
+    })
+  }
+  const handleDateOptions = (e) => {
+    setDateOptions({
+      ...dateOptions,
+      [e.target.name]: e.target.name === 'utc' ? e.target.value === '1' : e.target.value
+    })
+  }
+  const handleAgoOptions = (e) => {
+    setTimeAgoOptions({
+      ...timeAgoOptions,
+      [e.target.name]: e.target.name === 'utc' ? e.target.value === '1' : e.target.value
+    })
+  }
+  const handlekmOptions = (e) => {
+    setDistanceOptions({
+      ...distanceOptions,
+      [e.target.name]: e.target.checked ? 'KM' : 'MI'
+    })
+  }
+
+  return (
+    <>
+      <h1>Configs</h1>
+      <ul>
+        {
+          Object.values(configs).map((config) => (
+            <li key={config.id || config.key}>
+              <strong>{config.key}:</strong> {config.value}
+            </li>
+          ))
+        }
+      </ul>
+      <button type='button' onClick={() => refreshConfigs()} disabled={loading}>Refresh configs</button>
+      <h2>Parse number Example</h2>
+      <form>
+        <label>Decimal Quiantity</label>
+        <input type='number' name='decimal' onChange={handleNumberOptions} />
+        <label>Decimal Separator</label>
+        <input type='text' name='separator' onChange={handleNumberOptions} />
+        <label>thousand Separator</label>
+        <input type='text' name='thousand' onChange={handleNumberOptions} />
+        <label>Currency</label>
+        <input type='text' name='currency' onChange={handleNumberOptions} />
+        <label>Currency Position</label>
+        <select name='currencyPosition' onChange={handleNumberOptions}>
+          <option value='left'>left</option>
+          <option value='right'>right</option>
+        </select>
+      </form>
+      <br />
+      <input type='number' name='numberParsed' onChange={hanldeChangeInput} /> <strong>number parsed:</strong> {numberParsed}
+      <h2>Parse date Example</h2>
+      <form>
+        <label>Input format</label>
+        <input type='text' name='inputFormat' onChange={handleDateOptions} />
+        <label>output format</label>
+        <input type='text' name='outputFormat' onChange={handleDateOptions} />
+        <label>utc</label>
+        <select name='utc' onChange={handleDateOptions}>
+          <option value='1'>TRUE</option>
+          <option value='0'>FALSE</option>
+        </select>
+        <label>format time</label>
+        <select name='formatTime' onChange={handleDateOptions}>
+          <option value='24'>24</option>
+          <option value='12'>12</option>
+        </select>
+      </form>
+      <input type='text' onChange={hanldeChangeInputDate} name='formatedTime' /> <strong>Formated date : </strong> {formatDate}
+      <h2>Parse Distance Example</h2>
+      <input type='checkbox' name='unit' defaultChecked='true' onChange={handlekmOptions} />
+      <input type='number' onChange={hanldeChangeDistance} name='distance' /> <strong>Distance : </strong> {distance}
+      <h2>GeT time Ago Example</h2>
+      <label>UTC</label>
+      <select name='utc' onChange={handleAgoOptions}>
+        <option value='1'>TRUE</option>
+        <option value='0'>FALSE</option>
+      </select>
+      <label> Time Format</label>
+      <input type='text' name='inputFormat' onChange={handleAgoOptions} />
+      <br />
+      <input type='text' onChange={handleTimeAgo} name='formatedDate' /> <strong>Formated date : </strong> {timeAgo}
+
+    </>
+  )
+}

package/example/components/CouponControlUI/index.js

@@ -1,63 +1,63 @@
-import React from 'react'
-
-export const CouponControlUI = (props) => {
-  const {
-    couponDefault,
-    couponInput,
-    handleButtonApplyClick,
-    handleRemoveCouponClick,
-    onChangeInputCoupon,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      {couponDefault && (
-        <>
-          <p>You have the coupon <strong style={{ color: 'red', fontSize: '24px' }}>{couponDefault}</strong> assigned</p>
-          <button onClick={() => handleRemoveCouponClick()}>
-            Remove {couponDefault} coupon
-          </button>
-        </>
-      )}
-
-      {!couponDefault && (
-        <>
-          <input
-            type='text'
-            name='coupon'
-            style={{ width: '50%' }}
-            placeholder='Discount coupon'
-            onChange={(e) => onChangeInputCoupon(e.target.value)}
-          />
-          <button type='button' disabled={!couponInput} onClick={handleButtonApplyClick}>
-            Apply
-          </button>
-        </>
-      )}
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+export const CouponControlUI = (props) => {
+  const {
+    couponDefault,
+    couponInput,
+    handleButtonApplyClick,
+    handleRemoveCouponClick,
+    onChangeInputCoupon,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      {couponDefault && (
+        <>
+          <p>You have the coupon <strong style={{ color: 'red', fontSize: '24px' }}>{couponDefault}</strong> assigned</p>
+          <button onClick={() => handleRemoveCouponClick()}>
+            Remove {couponDefault} coupon
+          </button>
+        </>
+      )}
+
+      {!couponDefault && (
+        <>
+          <input
+            type='text'
+            name='coupon'
+            style={{ width: '50%' }}
+            placeholder='Discount coupon'
+            onChange={(e) => onChangeInputCoupon(e.target.value)}
+          />
+          <button type='button' disabled={!couponInput} onClick={handleButtonApplyClick}>
+            Apply
+          </button>
+        </>
+      )}
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/DriverTipsUI/index.js

@@ -1,58 +1,58 @@
-import React from 'react'
-
-export const DriverTipsUI = (props) => {
-  const {
-    driverTipAmount,
-    optionSelected,
-    driverTipsOptions,
-    handlerChangeOption,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const selectOption = {
-    background: 'red',
-    color: 'white'
-  }
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      <span>Driver tip: </span>
-      <span className='result'>{driverTipAmount}</span><br /><br />
-
-      <div className='tips-list' style={{ display: 'flex' }}>
-        {driverTipsOptions?.length > 0 && driverTipsOptions.map((option, i) => (
-          <div key={i} style={{ textTransform: 'capitalize', marginRight: '10px' }}>
-            <button style={option === optionSelected ? selectOption : {}} onClick={() => handlerChangeOption(option)}>
-              {option}%
-            </button>
-          </div>
-        ))}
-      </div>
-      <br />
-      <span>100% of the tip goes to your driver</span>
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+export const DriverTipsUI = (props) => {
+  const {
+    driverTipAmount,
+    optionSelected,
+    driverTipsOptions,
+    handlerChangeOption,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const selectOption = {
+    background: 'red',
+    color: 'white'
+  }
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      <span>Driver tip: </span>
+      <span className='result'>{driverTipAmount}</span><br /><br />
+
+      <div className='tips-list' style={{ display: 'flex' }}>
+        {driverTipsOptions?.length > 0 && driverTipsOptions.map((option, i) => (
+          <div key={i} style={{ textTransform: 'capitalize', marginRight: '10px' }}>
+            <button style={option === optionSelected ? selectOption : {}} onClick={() => handlerChangeOption(option)}>
+              {option}%
+            </button>
+          </div>
+        ))}
+      </div>
+      <br />
+      <span>100% of the tip goes to your driver</span>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/FacebookLoginButtonUI/index.js

@@ -1,48 +1,48 @@
-import React from 'react'
-
-export const FacebookLoginButtonUI = (props) => {
-  const {
-    formState,
-    facebookStatus,
-    handleFacebookLogin,
-    handleFacebookLogout,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  return (
-    <>
-      {
-        beforeElements.map((BeforeElement, i) => (
-          <React.Fragment key={i}>
-            {BeforeElement}
-          </React.Fragment>
-        ))
-      }
-      {
-        beforeComponents.map((BeforeComponent, i) => <BeforeComponent key={i} {...props} />)
-      }
-      {
-        !facebookStatus.logged && <button type='button' onClick={handleFacebookLogin} disabled={!facebookStatus.ready || formState.loading}>Login with Facebook</button>
-      }
-      {
-        facebookStatus.logged && <button type='button' onClick={handleFacebookLogout} disabled={!facebookStatus.ready || formState.loading}>Logout with Facebook</button>
-      }
-      {
-        !formState.loading && formState.result && formState.result.error && <p style={{ color: '#c10000' }}>{formState.result.result}</p>
-      }
-      {
-        afterComponents.map((AfterComponent, i) => <AfterComponent key={i} {...props} />)
-      }
-      {
-        afterElements.map((AfterElement, i) => (
-          <React.Fragment key={i}>
-            {AfterElement}
-          </React.Fragment>
-        ))
-      }
-    </>
-  )
-}
+import React from 'react'
+
+export const FacebookLoginButtonUI = (props) => {
+  const {
+    formState,
+    facebookStatus,
+    handleFacebookLogin,
+    handleFacebookLogout,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  return (
+    <>
+      {
+        beforeElements.map((BeforeElement, i) => (
+          <React.Fragment key={i}>
+            {BeforeElement}
+          </React.Fragment>
+        ))
+      }
+      {
+        beforeComponents.map((BeforeComponent, i) => <BeforeComponent key={i} {...props} />)
+      }
+      {
+        !facebookStatus.logged && <button type='button' onClick={handleFacebookLogin} disabled={!facebookStatus.ready || formState.loading}>Login with Facebook</button>
+      }
+      {
+        facebookStatus.logged && <button type='button' onClick={handleFacebookLogout} disabled={!facebookStatus.ready || formState.loading}>Logout with Facebook</button>
+      }
+      {
+        !formState.loading && formState.result && formState.result.error && <p style={{ color: '#c10000' }}>{formState.result.result}</p>
+      }
+      {
+        afterComponents.map((AfterComponent, i) => <AfterComponent key={i} {...props} />)
+      }
+      {
+        afterElements.map((AfterElement, i) => (
+          <React.Fragment key={i}>
+            {AfterElement}
+          </React.Fragment>
+        ))
+      }
+    </>
+  )
+}