ordering-ui-external 1.8.8 → 1.8.10

package/src/themes/callcenterOriginal/src/styles/Select/FirstSelect/index.js

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef, useState } from 'react'
+import FiChevronDown from '@meronex/icons/fi/FiChevronDown'
+import BsTrash from '@meronex/icons/bs/BsTrash'
+import {
+  Select as SelectInput,
+  Selected,
+  Options,
+  OptionsInner,
+  Option,
+  Chevron,
+  Header,
+  FunctionalityContainer,
+  SearchBarWrapper
+} from '../../DashboardSelects'
+import { Button } from '../../Buttons'
+import { useLanguage } from 'ordering-components-external'
+import { SearchBar } from '../../../components/Shared'
+
+export const Select = (props) => {
+  const {
+    placeholder,
+    options,
+    defaultValue,
+    onChange,
+    notAsync,
+    type,
+    noSelected,
+    className,
+    onEdit,
+    onDelete,
+    isShowSearchBar,
+    searchValue,
+    handleChangeSearch,
+    searchBarIsCustomLayout,
+    searchBarPlaceholder,
+    searchBarIsNotLazyLoad,
+    isDisabled,
+    position
+  } = props
+
+  const [open, setOpen] = useState(false)
+  const defaultOption = options?.find(
+    (option) => option.value === defaultValue
+  )
+  const [selectedOption, setSelectedOption] = useState(defaultOption)
+  const [value, setValue] = useState(defaultValue)
+  const [, t] = useLanguage()
+  const dropdownReference = useRef()
+
+  const handleSelectClick = (e) => {
+    if (e.target.closest('.react-datepicker-wrapper') || e.target.closest('.react-datepicker')) return
+    setOpen(!open)
+  }
+
+  const closeSelect = (e) => {
+    if (open) {
+      const outsideDropdown = !dropdownReference.current?.contains(e.target)
+      if (outsideDropdown) {
+        if (isShowSearchBar) {
+          handleChangeSearch('')
+        }
+        setOpen(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return
+    document.addEventListener('click', closeSelect)
+    return () => document.removeEventListener('click', closeSelect)
+  }, [open])
+
+  useEffect(() => {
+    if (isShowSearchBar && searchValue) return
+    if (!notAsync) {
+      const _defaultOption = options?.find(
+        (option) => option.value === defaultValue
+      )
+      setSelectedOption(_defaultOption)
+      setValue(defaultValue)
+    }
+  }, [defaultValue, options, searchValue])
+
+  const handleChangeOption = (e, option) => {
+    if (e.target.closest('.disabled') === null) setOpen(!open)
+    if (option.value === null || option.disabled || e.target.closest('.delete') !== null || e.target.closest('.edit') !== null) return
+    if (!noSelected) {
+      setSelectedOption(option)
+      setValue(option.value)
+    }
+    onChange && onChange(option.value)
+  }
+
+  return (
+    <SelectInput type={type} className={className || 'select'} isDisabled={isDisabled}>
+      {!selectedOption && (
+        <Selected onClick={handleSelectClick} isDisabled={isDisabled}>
+          {placeholder || ''}
+          <Chevron className='select-arrow'>
+            <FiChevronDown />
+          </Chevron>
+        </Selected>
+      )}
+      {selectedOption && (
+        <Selected onClick={handleSelectClick} isDisabled={isDisabled}>
+          <Header>
+            {selectedOption.showOnSelected || selectedOption.content}
+          </Header>
+          <Chevron>
+            <FiChevronDown />
+          </Chevron>
+        </Selected>
+      )}
+      {open && options && (
+        <Options
+          className='list'
+          isAbsolute
+          position={position || 'right'}
+          ref={dropdownReference}
+        >
+          {isShowSearchBar && (
+            <SearchBarWrapper
+              className='search-bar-container'
+            >
+              <SearchBar
+                lazyLoad={!searchBarIsNotLazyLoad}
+                isCustomLayout={searchBarIsCustomLayout}
+                search={searchValue}
+                onSearch={handleChangeSearch}
+                placeholder={searchBarPlaceholder || ''}
+              />
+            </SearchBarWrapper>
+          )}
+          <OptionsInner
+            className='list-wrapper'
+            optionInnerMargin={props.optionInnerMargin}
+            optionInnerMaxHeight={props.optionInnerMaxHeight || 'initial'}
+          >
+            {options.map((option, i) => (
+              <Option
+                key={i}
+                selected={value === option.value}
+                color={option.color}
+                onClick={(e) => handleChangeOption(e, option)}
+                optionBottomBorder={props.optionBottomBorder}
+                disabled={option.disabled}
+                showDisable={option?.showDisable}
+                className={option.disabled ? 'disabled' : null}
+              >
+                {option.content}
+                {(option.editFunctionality || option.deleteFunctionality) && (
+                  <FunctionalityContainer disabled={value === option.value}>
+                    {option.editFunctionality && (
+                      <Button
+                        borderRadius='8px'
+                        color='lightPrimary'
+                        onClick={() => onEdit(option, i)}
+                        className='edit'
+                      >
+                        {t('EDIT', 'Edit')}
+                      </Button>
+                    )}
+                    {option.deleteFunctionality && (
+                      <BsTrash className='delete' onClick={() => onDelete(option.value)} />
+                    )}
+                  </FunctionalityContainer>
+                )}
+              </Option>
+            ))}
+          </OptionsInner>
+        </Options>
+      )}
+    </SelectInput>
+  )
+}

package/src/themes/callcenterOriginal/src/styles/Select/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+export const HeaderItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  border-radius: 7.6px;
+  border-style: solid;
+  border-color: #1C202E;
+  border: 1px solid #CCC;
+  padding: 7px 0;
+`
+
+export const PopoverBody = styled.div`
+  z-index: 1001;
+`

package/src/themes/callcenterOriginal/src/styles/Switch/index.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react'
+
+import {
+  ToggleSwitchContainer,
+  Slider
+} from './styles'
+
+export const Switch = (props) => {
+  const {
+    defaultChecked,
+    disabled,
+    onChange,
+    className,
+    notAsync
+  } = props
+  const [checked, setChecked] = useState(false)
+
+  useEffect(() => {
+    setChecked(defaultChecked)
+  }, [defaultChecked])
+
+  const handleCheckBoxChange = (evt) => {
+    if (!notAsync) {
+      setChecked(evt.target.checked)
+    }
+    onChange && onChange(evt.target.checked)
+  }
+
+  return (
+    <ToggleSwitchContainer className={className} disabled={disabled}>
+      <input
+        type='checkbox'
+        checked={checked}
+        onChange={handleCheckBoxChange}
+      />
+      <Slider />
+    </ToggleSwitchContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/styles/Switch/styles.js

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components'
+
+export const ToggleSwitchContainer = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 25px;
+  height: 14px;
+  margin-bottom: 0px;
+
+  ${({ disabled }) => disabled && css`
+    opacity: 0.6;
+    pointer-events: none;
+  `}
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + span {
+      background-color: ${props => props.theme.colors.primary};
+    }
+    &:focus + span {
+      box-shadow: 0 0 1px ${props => props.theme.colors.primary};
+    }
+    &:checked + span:before {
+      -webkit-transform: translateX(11px);
+      -ms-transform: translateX(11px);
+      transform: translateX(11px);
+    }
+  }
+`
+
+export const Slider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 15px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 1px;
+    bottom: 1px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+`

package/src/themes/callcenterOriginal/src/styles/index.js

@@ -0,0 +1,22 @@
+import { Button, IconButton } from './Buttons'
+import { Checkbox } from './Checkbox'
+import { Input, TextArea } from './Inputs'
+import { MultiSelect } from './MultiSelect'
+import { Select as SecondSelect } from './Select'
+import { Select as DefaultSelect } from './Select/FirstSelect'
+import { Switch } from './Switch'
+import { Tabs, Tab } from './Tabs'
+
+export {
+  Button,
+  IconButton,
+  Checkbox,
+  Input,
+  MultiSelect,
+  Switch,
+  SecondSelect,
+  DefaultSelect,
+  TextArea,
+  Tabs,
+  Tab
+}