frst-components 0.20.0 → 0.20.2

package/src/components/LXP/DropdownSelectMultiple/dropdownSelectMultiple.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import DropdownSelectMultiple from './index'
-import { Trash } from '../../../shared/icons'
-
-export default {
-  title: 'LXP/DropdownSelectMultiple',
-  component: DropdownSelectMultiple
-}
-
-const Template = (args) => <DropdownSelectMultiple {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  placeholderSelect: 'Please choose',
-  labelSelect: 'Selecione as Opções',
-  placeholderFilter: 'Pesquisar',
-  handleValueSelect: (e) => console.log(e),
-  isDisabled: false,
-  optionLabel: 'name',
-  listItems: [
-    { name: 'Australia' },
-    { name: 'Brazil' },
-    { name: 'China' },
-    { name: 'Egypt' },
-    { name: 'France' },
-    { name: 'Germany' },
-    { name: 'India' },
-    { name: 'Japan' },
-    { name: 'Spain' },
-    { name: 'United States' },
-    { name: 'Au' },
-    { name: 'Brazil' },
-    { name: 'China' },
-    { name: 'Egypt' },
-    { name: 'France' },
-    { name: 'Germany' },
-    { name: 'India' },
-    { name: 'Japan' },
-    { name: 'Spain' },
-    { name: 'United States' }
-  ]
-}

package/src/components/LXP/DropdownSelectMultiple/index.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { MultiSelect } from 'primereact/multiselect'
-import * as StylesMultiSelect from './styles/MultiSelectDemo'
-import selectItemsCss from './styles/MultiSelectItems.css'
-import './styles/theme.css'
-import './styles/primereact.css'
-import './styles/primeflex.css'
-
-export default function DropdownSelectMultiple({
-  placeholderSelect,
-  placeholderFilter,
-  handleValueSelect,
-  labelSelect,
-  optionLabel,
-  listItems,
-  isDisabled
-}) {
-  const [lazyItems, setLazyItems] = useState([])
-  const [lazyLoading, setLazyLoading] = useState(false)
-  const [selectedListItems, setSelectedListItems] = useState(null)
-
-  useEffect(() => {
-    setLazyItems(Array.from({ length: 100000 }))
-    setLazyLoading(false)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const panelFooterTemplate = () => {
-    const selectedItems = selectedListItems
-    const length = selectedItems ? selectedItems.length : 0
-    return (
-      <div className="py-2 px-3">
-        <b>{length}</b> item{length > 1 ? 's' : ''} selected.
-      </div>
-    )
-  }
-
-  const selectedCountriesTemplate = (option) => {
-    if (option) {
-      return (
-        <div className="country-item country-item-value">
-          <div>{option.name}</div>
-        </div>
-      )
-    }
-
-    return placeholderSelect ? placeholderSelect : 'Por favor escolha'
-  }
-
-  const handleSelectItems = (items) => {
-    setSelectedListItems(items)
-    return handleValueSelect(items)
-  }
-
-  return (
-    <>
-      <StylesMultiSelect.SelectMultipesLabel>
-        {labelSelect ? labelSelect : 'label'}
-      </StylesMultiSelect.SelectMultipesLabel>
-      <StylesMultiSelect.SelectMultipesPrimeReact>
-        <MultiSelect
-          value={selectedListItems}
-          options={listItems}
-          onChange={(e) => handleSelectItems(e.value)}
-          optionLabel={optionLabel}
-          placeholder={placeholderSelect ? placeholderSelect : 'Por favor escolha'}
-          filter={listItems.length > 10}
-          className="multiselect-custom"
-          selectedItemTemplate={selectedCountriesTemplate}
-          panelFooterTemplate={panelFooterTemplate}
-          panelStyle={selectItemsCss}
-          filterPlaceholder={placeholderFilter ? placeholderFilter : 'Pesquisar'}
-          disabled={isDisabled}
-        />
-      </StylesMultiSelect.SelectMultipesPrimeReact>
-    </>
-  )
-}

package/src/components/LXP/DropdownSelectMultiple/styles/MultiSelectDemo.ts

@@ -1,79 +0,0 @@
-import styled, { css } from 'styled-components'
-import ArrowIcon from './icons/DropdownChevron.png'
-
-export const SelectMultipesPrimeReact = styled.div`
-  width: 100%;
-  .multiselect-custom {
-    width: 100%;
-    :hover {
-      border-color: #0645ad;
-    }
-  }
-  .p-multiselect-items-label {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-  .country-item-value {
-    margin-bottom: 0.5rem;
-  }
-
-  .p-multiselect {
-    min-width: 15rem;
-  }
-  .p-multiselect:not(.p-disabled):hover {
-    border-color: #0645ad;
-  }
-
-  .p-multiselect:not(.p-disabled).p-focus {
-    box-shadow: none;
-    border-color: #663366;
-    border-width: 2px;
-  }
-
-  .multiselect-custom .p-multiselect-label:not(.p-placeholder):not(.p-multiselect-items-label) {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    background-color: #c63737;
-  }
-
-  .multiselect-custom .country-item-value {
-    padding: 0.25rem 0.5rem;
-    border-radius: 3px;
-    display: inline-flex;
-    margin-right: 0.5rem;
-    background-color: #663366;
-    color: #ffffff;
-  }
-
-  .multiselect-custom .country-item-value img.flag {
-    width: 17px;
-    background-color: #663366;
-  }
-  .p-multiselect .p-component .p-inputwrapper .p-inputwrapper-focus .multiselect-custom {
-    border-color: #663366;
-  }
-
-  .p-multiselect .p-multiselect-trigger {
-    span {
-      background-image: url(${ArrowIcon});
-      background-size: 1rem;
-      width: 20px;
-      height: 20px;
-      background-repeat: no-repeat;
-      margin-top: 0.6rem;
-      margin-left: 0.2rem;
-    }
-  }
-`
-
-export const SelectMultipesLabel = styled.label`
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
-  display: flex;
-  align-items: flex-end;
-  color: #222222;
-  margin-bottom: 0.5rem;
-`

package/src/components/LXP/DropdownSelectMultiple/styles/MultiSelectItems.css

@@ -1,118 +0,0 @@
-/* ## header */
-.p-multiselect-panel .p-multiselect-header .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #ff4d0d;
-  background: #ff4d0d;
-}
-.p-multiselect-panel .p-multiselect-header .p-checkbox .p-checkbox-box.p-highlight span {
-  background: url('./icons/vector.png') no-repeat center center;
-  width: 15px;
-  height: 12px;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -ms-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close span {
-  background: url('./icons/close.png') no-repeat center center !important;
-  width: 12px !important;
-  height: 12px !important;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -ms-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-  border-color: #ff4d0d;
-  background: #ff4d0d;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #ff4d0d;
-  background: #ff4d0d;
-}
-.p-multiselect-panel .p-multiselect-header .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-  border-color: #ff4d0d;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e2beb0;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box {
-  border-color: #ced4da;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext:enabled:focus {
-  box-shadow: 0 0 0 0.2rem rgba(102, 51, 102, 0.4);
-  border-color: #663366;
-}
-
-/* ##Items wrapper  */
-
-.p-multiselect-panel .p-multiselect-items-wrapper .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-  border-color: #ff4d0d;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #ff4d0d;
-  background: #ff4d0d;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper .p-checkbox .p-checkbox-box.p-highlight span {
-  background: url('./icons/vector.png') no-repeat center center;
-  width: 15px;
-  height: 12px;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -ms-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.p-multiselect-panel
-  .p-multiselect-items-wrapper
-  .p-checkbox:not(.p-checkbox-disabled)
-  .p-checkbox-box.p-highlight:hover {
-  border-color: #ff4d0d;
-  background: #ff4d0d;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #ff4d0d;
-  background: #ff4d0d;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper .p-multiselect-items .p-multiselect-item:focus {
-  box-shadow: none;
-}
-
-.p-multiselect-panel
-  .p-multiselect-items-wrapper
-  .p-multiselect-items
-  .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  background: #f7f9fc;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #525960;
-  background: #f2f2f2;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper::-webkit-scrollbar {
-  width: 0.4rem;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper::-webkit-scrollbar-thumb {
-  background-color: #c4c4c4;
-  border-radius: 20px;
-}