ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,291 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  min-width: ${({ minWidth }) => minWidth || '100px'};
+  color: #333;
+  cursor: pointer;
+  justify-content: space-between;
+
+  ${({ disabled }) => disabled && css`
+    cursor: no-drop;
+    opacity: 0.6;
+  `}
+
+  ${({ showDisable }) => showDisable && css`
+    display: none;
+  `}
+
+  ${({ optionBottomBorder }) => optionBottomBorder && css`
+      border-bottom: 1px solid #D8D8D8;
+  `}
+
+  &:hover {
+    background-color: ${props => darken(0.04, props.theme.colors.backgroundPage || '#FFF')};
+  }
+
+  ${props => props.selected && css`
+    background-color: ${props => darken(0.1, props.theme.colors.backgroundPage || '#FFF')};
+
+    &:hover {
+      background-color: ${props => darken(0.15, props.theme.colors.backgroundPage || '#FFF')};
+    }
+  `}
+
+  svg {
+    vertical-align: text-top;
+  }
+
+  ${({ withIcons }) => withIcons && css`
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      svg {
+        margin-right: 3px;
+        ${props => props.theme?.rtl && css`
+          margin-left: 3px;
+          margin-right: 0px;
+       `}
+      }
+  `}
+
+  ${({ color }) => color === 'primary' && css`
+    color: #C3C3C3;
+  `}
+`
+
+export const Options = styled.div`
+  min-width: 100%;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  z-index: 10000;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #E9ECEF;
+  border-radius: 7.6px;
+  overflow: hidden;
+
+  ${({ position }) => position?.toLowerCase() === 'left' && css`
+    left: 0;
+    margin-left: -1px;
+    ${props => props.theme?.rtl && css`
+        margin-right: -1px;
+        margin-left: 0px;
+        right: 0;
+        left: initial;
+    `}
+  `}
+  ${({ position }) => position?.toLowerCase() === 'right' && css`
+    right: 0;
+    margin-right: -1px;
+    ${props => props.theme?.rtl && css`
+        margin-left: -1px;
+        margin-right: 0px;
+        left: 0;
+        right: initial;
+    `}
+  `}
+
+  ${({ isAbsolute }) => isAbsolute && css`
+    position: absolute;
+    margin-top: 7px;
+  `}
+`
+
+export const OptionsInner = styled.div`
+  overflow: auto;
+  margin: ${({ optionInnerMargin }) => optionInnerMargin};
+  max-height: ${({ optionInnerMaxHeight }) => optionInnerMaxHeight};
+  overscroll-behavior: contain;
+`
+export const Selected = styled.div`
+  padding-left: 15px;
+  padding-right: 15px;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 11;
+
+  p {
+    margin: 0px;
+  }
+
+  @media (max-width: 380px) {
+    padding-left: 9px;
+    padding-right: 9px;
+    font-size: 13px;
+  }
+
+  ${({ isDisabled }) => isDisabled && css`
+    pointer-events: none;
+  `}
+`
+
+export const Select = styled.div`
+  display: inline-block;
+  border-radius: 7.6px;
+  line-height: 34px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #DEE2E6;
+  color: #344050;
+  position: relative;
+
+  ${props => props.open && css`
+    background-color: ${darken(0.07, '#CCC')};
+  `}
+
+  ${({ type }) => type === 'primary' && css`
+    background: ${props => props.theme.colors.btnPrimary};
+    color: ${props => props.theme.colors.btnPrimaryContrast};
+    border-color: ${props => props.theme.colors.btnPrimary};
+    border-radius: 7.6px;
+  `}
+
+  ${({ isDisabled }) => isDisabled && css`
+    cursor: not-allowed;
+    background-color: ${props => props.theme.colors.disabled} !important;
+  `}
+`
+
+export const Chevron = styled.div`
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+`
+
+export const Header = styled.div`
+  flex: 1;
+  overflow: auto;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+`
+
+export const SelectImage = styled.div`
+  width: 28px;
+  height: 28px;
+  border-radius: 1000px;
+  margin-left: 5px;
+  overflow: hidden;
+
+  ${props => props.theme?.rtl && css`
+    margin-left: 5px;
+    margin-right: 0;
+  `}
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+export const MultiSelectOption = styled.div`
+  position: relative;
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    width: 20px;
+    height: 20px;
+    transform: translate(100%, -50%);
+    top: 11px;
+    right: 15px;
+  }
+`
+
+export const FunctionalityContainer = styled.div`
+  display: flex;
+  align-items: center;
+  svg{
+    margin-left: 20px;
+    ${props => props.disabled && css`
+      opacity: 0.4;
+      pointer-events: none;
+    `}
+  }
+`
+export const SearchBarWrapper = styled.div`
+  padding: 5px 10px;
+  width: 100%;
+  > div {
+    input {
+      height: 42px;
+    }
+  }
+`
+export const MultiOption = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  min-width: ${({ minWidth }) => minWidth || '100px'};
+  color: #333;
+  cursor: pointer;
+
+  ${({ disabled }) => disabled && css`
+    cursor: no-drop;
+    opacity: 0.6;
+  `}
+
+  ${({ showDisable }) => showDisable && css`
+    display: none;
+  `}
+
+  ${({ optionBottomBorder }) => optionBottomBorder && css`
+      border-bottom: 1px solid #D8D8D8;
+  `}
+
+  &:hover {
+    background-color: ${darken(0.03, '#fafafa')};
+  }
+
+  ${props => props.selected && css`
+    background-color: ${darken(0.07, '#fafafa')};
+  
+    &:hover {
+      background-color: ${darken(0.07, '#fafafa')};
+    }
+  `}
+
+  svg {
+    vertical-align: text-top;
+  }
+
+  ${({ withIcons }) => withIcons && css`
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      svg {
+        margin-right: 3px;
+        ${props => props.theme?.rtl && css`
+          margin-left: 3px;
+          margin-right: 0px;
+       `}
+      }
+  `}
+
+  ${({ color }) => color === 'primary' && css`
+    color: #C3C3C3;
+  `}
+`

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

@@ -0,0 +1,147 @@
+import React, { useEffect, useRef, useState } from 'react'
+import EnChevronDown from '@meronex/icons/en/EnChevronDown'
+import { CheckSquareFill, Square } from 'react-bootstrap-icons'
+import MdClose from '@meronex/icons/md/MdClose'
+import { Button } from '../Buttons'
+
+import {
+  Select as SelectInput,
+  Selected,
+  Options,
+  OptionsInner,
+  MultiOption,
+  Chevron,
+  Header,
+  MultiSelectOption
+} from '../DashboardSelects'
+
+import {
+  CheckBox
+} from './styles'
+
+export const MultiSelect = (props) => {
+  const { placeholder, options, onChange, defaultValue, className } = props
+
+  const [open, setOpen] = useState(false)
+  const [values, setValues] = useState([])
+  const [selectedOptions, setSelectedOptions] = useState([])
+  const dropdownReference = useRef()
+
+  const handleSelectClick = (e) => {
+    const isInvalid = e.target.closest('.remove_option')
+    if (isInvalid) return
+    setOpen(!open)
+  }
+
+  const closeSelect = (e) => {
+    if (open) {
+      const outsideDropdown = !dropdownReference.current?.contains(e.target)
+      if (outsideDropdown) {
+        setOpen(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const _defaultOption = options?.filter(
+      (option) => defaultValue.includes(option.value)
+    )
+    setSelectedOptions(_defaultOption)
+    setValues(defaultValue)
+  }, [defaultValue, options])
+
+  useEffect(() => {
+    if (!open) return
+    document.addEventListener('click', closeSelect)
+    return () => document.removeEventListener('click', closeSelect)
+  }, [open])
+
+  const handleSelectOption = (option) => {
+    if (option.value === null || option.value === 'default') return
+    const _selectedOptions = [...selectedOptions]
+    const _values = [...values]
+    if (!_values.includes(option.value)) {
+      _values.push(option.value)
+      _selectedOptions.push(option)
+    } else {
+      for (let i = 0; i < _values.length; i++) {
+        if (_values[i] === option.value) {
+          _values.splice(i, 1)
+          _selectedOptions.splice(i, 1)
+          i--
+        }
+      }
+    }
+    setSelectedOptions(_selectedOptions)
+    setValues(_values)
+    onChange && onChange(option.value)
+  }
+
+  return (
+    <SelectInput className={className || 'multi-select'}>
+      {selectedOptions.length === 0 ? (
+        <Selected onClick={(e) => handleSelectClick(e)}>
+          {placeholder || ''}
+          <Chevron>
+            <EnChevronDown />
+          </Chevron>
+        </Selected>
+      ) : (
+        <Selected onClick={(e) => handleSelectClick(e)}>
+          <Header>
+            {selectedOptions.map((selectedOption) => (
+              <React.Fragment key={selectedOption.value}>
+                <MultiSelectOption>
+                  {selectedOption.showOnSelected || selectedOption.content}
+                  <Button
+                    circle
+                    outline
+                    color='primary'
+                    type='reset'
+                    className='remove_option'
+                    onClick={() => onChange && onChange(selectedOption.value)}
+                  >
+                    <MdClose />
+                  </Button>
+                </MultiSelectOption>
+              </React.Fragment>
+            ))}
+          </Header>
+          <Chevron>
+            <EnChevronDown />
+          </Chevron>
+        </Selected>
+      )}
+      {open && options && (
+        <Options
+          isAbsolute
+          position='right'
+          ref={dropdownReference}
+        >
+          <OptionsInner
+            optionInnerMargin={props.optionInnerMargin}
+            optionInnerMaxHeight={props.optionInnerMaxHeight}
+          >
+            {options.map((option, i) => (
+              <MultiOption
+                key={i}
+                color={option.color}
+                onClick={() => handleSelectOption(option)}
+                optionBottomBorder={props.optionBottomBorder}
+              >
+                {option.value !== 'default' && (
+                  <CheckBox>
+                    {values.includes(option.value)
+                      ? <CheckSquareFill />
+                      : <Square />}
+                  </CheckBox>
+                )}
+                {option.content}
+              </MultiOption>
+            ))}
+          </OptionsInner>
+        </Options>
+      )}
+    </SelectInput>
+  )
+}

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const CheckBox = styled.div`
+  color: ${props => props.theme.colors.primary};
+  display: flex;
+  svg {
+    font-size: 16px;
+  }
+`

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

@@ -0,0 +1,192 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { useSession } from 'ordering-components-external'
+import { usePopper } from 'react-popper'
+import { CaretDownFill } from 'react-bootstrap-icons'
+import FiChevronDown from '@meronex/icons/fi/FiChevronDown'
+import { SearchBar } from '../../../components/Shared'
+
+import {
+  Selected,
+  Options,
+  OptionsInner,
+  Option,
+  Chevron,
+  Header,
+  SearchBarWrapper
+} from '../../DashboardSelects'
+
+import {
+  HeaderItem,
+  PopoverBody
+} from './styles'
+
+export const Select = (props) => {
+  const {
+    placeholder,
+    options,
+    defaultValue,
+    onChange,
+    notAsync,
+    noSelected,
+    isSecondIcon,
+    isShowSearchBar,
+    searchValue,
+    handleChangeSearch,
+    searchBarIsCustomLayout,
+    searchBarPlaceholder,
+    searchBarIsNotLazyLoad,
+    className
+  } = props
+  const defaultOption = options?.find(
+    (option) => option.value === defaultValue
+  )
+  const [selectedOption, setSelectedOption] = useState(defaultOption)
+  const [value, setValue] = useState(defaultValue)
+
+  const [open, setOpen] = useState(false)
+  const [sessionState] = useSession()
+  const referenceElement = useRef()
+  const popperElement = useRef()
+  const arrowElement = useRef()
+
+  const popper = usePopper(referenceElement.current, popperElement.current, {
+    placement: 'bottom',
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement.current } },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 12]
+        }
+      }
+    ]
+  })
+
+  const { styles, attributes, update } = popper
+
+  useEffect(() => {
+    update && update()
+  }, [open, sessionState])
+
+  const handleClickOutside = (e) => {
+    if (!open) return
+    const outsidePopover = !popperElement.current?.contains(e.target)
+    const outsidePopoverMenu = !referenceElement.current?.contains(e.target)
+    if (outsidePopover && outsidePopoverMenu) {
+      if (isShowSearchBar) {
+        handleChangeSearch('')
+      }
+      setOpen(false)
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.keyCode === 27) {
+      setOpen(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('mouseup', handleClickOutside)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [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) return
+    if (!noSelected) {
+      setSelectedOption(option)
+      setValue(option.value)
+    }
+    onChange && onChange(option.value)
+  }
+
+  const handleClickHeader = (e) => {
+    if (e.target.closest('.open-disabled')) return
+    setOpen(!open)
+  }
+
+  const popStyle = { ...styles.popper, display: open ? 'block' : 'none', minWidth: referenceElement?.current?.offsetWidth || '100px' }
+  if (!open) {
+    popStyle.transform = 'translate3d(0px, 0px, 0px)'
+  }
+  return (
+    <div style={{ overflow: 'hidden' }} className={className || 'select-wrapper'}>
+      <HeaderItem
+        className='select'
+        ref={referenceElement}
+        onClick={(e) => handleClickHeader(e)}
+      >
+        {!selectedOption && (
+          <Selected>
+            {placeholder || ''}
+            <Chevron>
+              {isSecondIcon ? <FiChevronDown /> : <CaretDownFill />}
+            </Chevron>
+          </Selected>
+        )}
+        {selectedOption && (
+          <Selected>
+            <Header>
+              {selectedOption.showOnSelected || selectedOption.content}
+            </Header>
+            <Chevron>
+              {isSecondIcon ? <FiChevronDown /> : <CaretDownFill />}
+            </Chevron>
+          </Selected>
+        )}
+      </HeaderItem>
+      <PopoverBody className='list' ref={popperElement} style={popStyle} {...attributes.popper}>
+        <Options className='options'>
+          {isShowSearchBar && (
+            <SearchBarWrapper
+              className='search-bar-container'
+            >
+              <SearchBar
+                lazyLoad={!searchBarIsNotLazyLoad}
+                isCustomLayout={searchBarIsCustomLayout}
+                search={searchValue}
+                onSearch={handleChangeSearch}
+                placeholder={searchBarPlaceholder || ''}
+              />
+            </SearchBarWrapper>
+          )}
+          <OptionsInner
+            optionInnerMargin={props.optionInnerMargin}
+            optionInnerMaxHeight={props.optionInnerMaxHeight}
+          >
+            {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>
+            ))}
+          </OptionsInner>
+        </Options>
+      </PopoverBody>
+    </div>
+  )
+}

package/src/themes/callcenterOriginal/src/styles/Select/DashboardSelect/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;
+`