frst-components 0.20.0

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,118 @@
+/* ## 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;
+}