ordering-ui-admin-external 1.0.0

package/src/components/Shared/SpinnerLoader/styles.js

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  ${({ primary }) => primary && css`
+    top: 0px;
+    position: fixed;
+    width: 100vw;
+    left: 0px;
+    z-index: 100;
+  `}
+`
+
+export const Logo = styled.div`
+  img {
+    max-height: 150px;
+  }
+`
+
+export const Content = styled.h1`
+  font-weight: normal;
+  text-transform: capitalize;
+  margin-top: 0px;
+  padding-bottom: 50px;
+  font-size: 24px;
+  text-align: center;
+  color: ${props => props.theme.colors.headingColor};
+
+  @media (min-width: 768px) {
+    font-size: 32px;
+  }
+`
+
+export const Spinner = styled.div`
+  @keyframes spinner-content {
+    0% { transform: rotate(0) }
+    100% { transform: rotate(360deg) }
+  }
+
+  .spinner-content div {
+    box-sizing: border-box!important
+  }
+
+  .spinner-content > div {
+    width: 108px;
+    height: 108px;
+    border-radius: 50%;
+    border: 8px solid #000;
+    border-color: ${props => `${props.theme.colors.primary} transparent ${props.theme.colors.primary} transparent`};
+    animation: spinner-content 1.8518518518518516s linear infinite;
+  }
+
+  .spinner-content > div:nth-child(2) { border-color: transparent }
+  .spinner-content > div:nth-child(2) div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: rotate(45deg);
+  }
+
+  .spinner-content > div:nth-child(2) div:before,
+  .spinner-content > div:nth-child(2) div:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    top: -8px;
+    left: 42px;
+    background: ${props => props.theme.colors.primary};
+    border-radius: 50%;
+    box-shadow: 0 100px 0 0 ${props => props.theme.colors.primary};
+  }
+
+  .spinner-content > div:nth-child(2) div:after {
+    left: -8px;
+    top: 42px;
+    box-shadow: 100px 0 0 0 ${props => props.theme.colors.primary};
+  }
+
+  .spinner {
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    overflow: hidden;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  }
+
+  .spinner-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0;
+  }
+
+  .spinner-content div {
+    box-sizing: content-box;
+  }
+`

package/src/components/Shared/SpreadSheetEditor/index.js

@@ -0,0 +1,201 @@
+import React, { useCallback, useEffect, useRef, useState, memo } from 'react'
+import { HotTable, HotColumn } from '@handsontable/react'
+import 'handsontable/dist/handsontable.full.css'
+import { useLanguage } from 'ordering-components-admin-external'
+import {
+  SpreadSheetContainer
+} from './styles'
+
+const SpreadSheetEditor = (props) => {
+  const {
+    headerItems,
+    hotTableData,
+    handleItemChange,
+    handleRowRemove,
+    handleAfterSectionEnd,
+    handleoutsideClickDeselects,
+    isRemove,
+    isUndo,
+    isRedo,
+    isBusinessProducts,
+    hiddenColumns
+  } = props
+  const [, t] = useLanguage()
+  const [cache, setCache] = useState(null)
+
+  const hotTableRef = useRef(null)
+
+  const productIdColumnRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+    if (value !== null) {
+      td.innerHTML = '<span class="product-id">' + value + '</span>'
+    }
+  }
+
+  const settings = {
+    // data: hotTableData,
+    licenseKey: 'non-commercial-and-evaluation',
+    autoRowSize: false,
+    autoColumnSize: false,
+    width: '100%',
+    height: '100%',
+    minSpareRows: 1,
+    stretchH: 'all',
+    copyPaste: true,
+    undo: true,
+    contextMenu: {
+      items: {
+        copy: {
+          name: t('SPREADSHEET_COPY')
+        },
+        ...(isUndo && { undo: { name: t('SPREADSHEET_UNDO') } }),
+        ...(isRedo && { redo: { name: t('SPREADSHEET_REDO') } }),
+        ...(isRemove && { remove_row: { name: t('SPREADSHEET_REMOVE_ROW') } }),
+        paste: {
+          key: 'paste',
+          name: t('SPREADSHEET_PASTE'),
+          disabled: function () {
+            return cache
+          },
+          callback: function () {
+            if (hotTableRef?.current?.hotInstance) {
+              const hotRef = hotTableRef?.current?.hotInstance
+              const plugin = hotRef?.getPlugin('copyPaste')
+              // eslint-disable-next-line no-unused-expressions
+              hotRef?.listen()
+              plugin.paste(cache)
+            }
+          }
+        }
+      }
+    },
+    cells: (row, column, prop) => {
+      const cellProperties = { readOnly: false }
+      if (hotTableRef?.current?.hotInstance && isBusinessProducts) {
+        const visualColIndex = hotTableRef?.current?.hotInstance?.toVisualColumn(column)
+        if (visualColIndex === 0) {
+          cellProperties.readOnly = true
+        }
+      }
+      if (isBusinessProducts && column === 0) {
+        cellProperties.renderer = productIdColumnRenderer
+      }
+      return cellProperties
+    },
+    beforeKeyDown: function (e) {
+      const selectedLast = this.getSelectedLast()
+      if (!selectedLast) {
+        return
+      }
+      const row = selectedLast[0]
+      const col = selectedLast[1]
+      const celltype = this.getCellMeta(row, col).type
+
+      if (celltype === 'numeric') {
+        const evt = e || window.event
+        const key = evt.charCode || evt.keyCode || 0
+
+        // check for cut and paste
+        let isClipboard = false
+        const ctrlDown = evt.ctrlKey || evt.metaKey // Mac support
+
+        // Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
+        if (ctrlDown && evt.altKey) isClipboard = false
+        // Check for ctrl+c, v and x
+        else if (ctrlDown && key === 67) isClipboard = true // c
+        else if (ctrlDown && key === 86) isClipboard = true // v
+        else if (ctrlDown && key === 88) isClipboard = true // x
+
+        const isNumeric = ((key === 8) || (key === 9) || (key === 13) || (key === 46) || (key === 110) ||
+          (key === 116) || (key === 123) || (key === 189) || (key === 190) || ((key >= 35) && (key <= 40)) ||
+          ((key >= 48) && (key <= 57)) || ((key >= 96) && (key <= 105)))
+
+        if (!isNumeric && !isClipboard) {
+          e.stopImmediatePropagation()
+          e.preventDefault()
+        }
+      }
+    }
+  }
+
+  const handleAfterChange = (changes, accionHanson) => {
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      handleItemChange && handleItemChange(changes, accionHanson, hotTableObj)
+    }
+  }
+
+  const handleBeforeRemoveRow = (index, amount, physicalRows) => {
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      handleRowRemove && handleRowRemove(index, amount, physicalRows, hotTableObj)
+    }
+  }
+
+  const afterSelectionEnd = (row, col, row1, col1) => {
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      handleAfterSectionEnd && handleAfterSectionEnd(row, col, row1, col1, hotTableObj)
+    }
+  }
+
+  const outsideClickDeselects = (event) => {
+    if (hotTableRef?.current?.hotInstance) {
+      handleoutsideClickDeselects && handleoutsideClickDeselects(event)
+    }
+  }
+
+  useEffect(() => {
+    if (typeof hiddenColumns === 'undefined') return
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      hotTableObj.updateSettings({
+        hiddenColumns: {
+          columns: hiddenColumns
+        }
+      })
+    }
+  }, [hiddenColumns])
+
+  const handleCache = useCallback(() => {
+    const interVal = setInterval(() => {
+      if (navigator.clipboard) {
+        navigator.clipboard.readText && navigator.clipboard.readText().then(function (clipboardData) {
+          if (clipboardData) setCache(clipboardData)
+        }).catch(function (e) { })
+      }
+    }, 500)
+    return () => clearInterval(interVal)
+  }, [cache])
+
+  useEffect(() => {
+    handleCache()
+  }, [handleCache])
+
+  return (
+    <SpreadSheetContainer>
+      <HotTable
+        data={hotTableData}
+        settings={settings}
+        ref={hotTableRef}
+        beforeRemoveRow={(index, amount, physicalRows) => handleBeforeRemoveRow(index, amount, physicalRows)}
+        afterChange={(changes, accionHanson) => handleAfterChange(changes, accionHanson)}
+        afterSelectionEnd={(row, col, row1, col1) => afterSelectionEnd(row, col, row1, col1)}
+        outsideClickDeselects={(event) => outsideClickDeselects(event)}
+      >
+        {
+          headerItems && headerItems.length > 0 && headerItems.map((item, i) => (
+            <HotColumn
+              key={i}
+              title={item.title}
+              readOnly={item.readOnly}
+              data={item.code}
+              type={item.type}
+            />
+          ))
+        }
+      </HotTable>
+    </SpreadSheetContainer>
+  )
+}
+
+export default memo(SpreadSheetEditor)

package/src/components/Shared/SpreadSheetEditor/styles.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+
+export const SpreadSheetContainer = styled.div`
+  overflow: auto;
+  > div {
+    min-width: 900px !important;
+    > div {
+      min-width: 100% !important;
+    }
+  }
+
+  .ht_clone_top {
+    height: auto !important;
+  }
+  .wtHider {
+    width: 100% !important;
+    .wtSpreader {
+      width: 100% !important;
+    }
+  }
+
+  .ht_master .wtHolder {
+    @media (min-width: 768px) {
+      max-height: calc(100vh - 230px);
+    }
+  }
+
+  .wtHolder {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  table {
+    min-width: 900px;
+
+    td {
+      padding: 15px;
+      text-align: left !important;
+      font-size: 13px;
+      color: ${props => props.theme.colors.headingColor} !important;
+      border: none !important;
+      border-bottom: 1px solid #E9ECEF !important;
+    }
+    th {
+      text-align: left;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+      border: none !important;
+      border-bottom: 1px solid #B1BCCC !important;
+      > div {
+        padding: 15px !important;
+        font-size: 14px;
+        font-weight: bold;
+        color: ${props => props.theme.colors.headingColor} !important;
+      }
+    }
+  }
+
+  #hot-display-license-info {
+    display: none;
+  }
+`

package/src/components/Shared/index.js

@@ -0,0 +1,62 @@
+import { AutoScroll } from './AutoScroll'
+import { CitySelector } from './CitySelector'
+import { ColumnAllowSettingPopover } from './ColumnAllowSettingPopover'
+import { Alert, Confirm } from './Confirm'
+import { ConfirmAdmin } from './ConfirmAdmin'
+import { DragScroll } from './DragScroll'
+import { Image } from './Image'
+import { ImageCrop } from './ImageCrop'
+import { InputPhoneNumber } from './InputPhoneNumber'
+import { Modal } from './Modal'
+import { MoreSidebarLayout } from './MoreSidebarLayout'
+import { NotFoundSource } from './NotFoundSource'
+import { Pagination } from './Pagination'
+import { PaginationButton } from './PaginationButton'
+import { Personalization } from './Personalization'
+import { ProtectedRoute } from './ProtectedRoute'
+import { Schedule } from './Schedule'
+import { SearchBar } from './SearchBar'
+import { RangeCalendar } from './RangeCalendar'
+
+import { SelectBusinessCategories } from './SelectBusinessCategories'
+import { SelectBusinessProducts } from './SelectBusinessProducts'
+import { SelectBusinesses } from './SelectBusinesses'
+import { SelectSites } from './SelectSites'
+import { SideBar } from './SideBar'
+import { SpinnerLoader } from './SpinnerLoader'
+import SpreadSheetEditor from './SpreadSheetEditor'
+import { ProgressRing } from './ProgressRing'
+import { ColorPicker } from './ColorPicker'
+
+export {
+  AutoScroll,
+  CitySelector,
+  ColumnAllowSettingPopover,
+  Alert,
+  Confirm,
+  ConfirmAdmin,
+  DragScroll,
+  Image,
+  ImageCrop,
+  InputPhoneNumber,
+  Modal,
+  MoreSidebarLayout,
+  NotFoundSource,
+  Pagination,
+  PaginationButton,
+  Personalization,
+  ProtectedRoute,
+  Schedule,
+  SearchBar,
+  RangeCalendar,
+
+  SelectBusinessCategories,
+  SelectBusinessProducts,
+  SelectBusinesses,
+  SelectSites,
+  SideBar,
+  SpinnerLoader,
+  SpreadSheetEditor,
+  ProgressRing,
+  ColorPicker
+}