fix: endReached prop in _Options of PaginatedSelectFiltered Component (…

…#475) * endReached in Options * more fixes * update loki files
RocketChat · Jun 21, 2021 · 81ec00f · 81ec00f
1 parent dbdbf58
commit 81ec00f
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 4 deletions.
diff --git a/.../reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png b/.../reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png
diff --git a/...chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png b/...chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png
diff --git a/...elage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_WithTitle.png b/...elage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_WithTitle.png
diff --git a/...i/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png b/...i/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png
diff --git a/.../chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png b/.../chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png
diff --git a/...selage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_WithTitle.png b/...selage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_WithTitle.png
diff --git a/packages/fuselage/src/components/OptionsPaginated/index.js b/packages/fuselage/src/components/OptionsPaginated/index.js
@@ -28,6 +28,7 @@ export const CheckOption = React.memo(
 export const OptionsPaginated = React.forwardRef(
   (
     {
+      title,
       multiple,
       renderEmpty: EmptyComponent = Empty,
       options,
@@ -43,6 +44,7 @@ export const OptionsPaginated = React.forwardRef(
       const { value, label, selected } = data;
       return (
         <OptionComponent
+          {...(title && { title: label })}
           role='option'
           label={label}
           onMouseDown={(e) => {

diff --git a/packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js b/packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js
@@ -12,7 +12,9 @@ import Margins from '../Margins';
 import { OptionsPaginated, useVisible } from '../OptionsPaginated';
 import { Focus, Addon } from '../Select';
 
-const SelectedOptions = React.memo((props) => <Chip {...props} />);
+const SelectedOptions = React.memo((props) => (
+  <Chip maxWidth='150px' withTruncatedText {...props} />
+));
 
 const prevent = (e) => {
   e.preventDefault();
@@ -21,6 +23,7 @@ const prevent = (e) => {
 };
 
 export const PaginatedMultiSelect = ({
+  withTitle,
   value,
   filter,
   options = [],
@@ -94,6 +97,11 @@ export const PaginatedMultiSelect = ({
                   />
                   {currentValue.map((value) => (
                     <SelectedOptions
+                      {...(withTitle && {
+                        title:
+                          value.label ||
+                          options.find((val) => val.value === value)?.label,
+                      })}
                       tabIndex={-1}
                       role='option'
                       key={value && value.value}
@@ -133,6 +141,7 @@ export const PaginatedMultiSelect = ({
       <AnimatedVisibility visibility={visible}>
         <Position anchor={containerRef}>
           <_Options
+            {...(withTitle && { title: withTitle })}
             width={borderBoxSize.inlineSize}
             onMouseDown={prevent}
             multiple

diff --git a/packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js b/packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js
@@ -50,6 +50,7 @@ const useDidUpdate = (func = []) => {
 
 export const PaginatedSelect = ({
   value,
+  withTitle,
   filter,
   setFilter,
   error,
@@ -59,6 +60,7 @@ export const PaginatedSelect = ({
   onChange = () => {},
   placeholder = '',
   renderOptions: _Options = OptionsPaginated,
+  endReached,
   ...props
 }) => {
   const [internalValue, setInternalValue] = useState(value);
@@ -144,11 +146,13 @@ export const PaginatedSelect = ({
       </Wrapper>
       <PositionAnimated visible={visible} anchor={containerRef}>
         <_Options
+          {...(withTitle && { title: withTitle })}
           width={borderBoxSize.inlineSize}
           role='listbox'
           filter={filter}
           options={options}
           onSelect={internalChangedByClick}
+          endReached={endReached}
         />
       </PositionAnimated>
     </Box>

diff --git a/packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx b/packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx
@@ -14,7 +14,10 @@ export const thumb =
   'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
 
 export const optionsEllipses = [
-  [11, 'Very very very very very very very very very large text'],
+  {
+    value: 1000,
+    label: 'Very very very very very very very very very large text',
+  },
   ...options,
 ];
 
@@ -37,6 +40,17 @@ An input for selection of options.
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name='WithTitle'>
+    <PaginatedSelect
+      withTitle
+      width='250px'
+      placeholder='Placeholder here...'
+      options={optionsEllipses}
+    />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name='Error'>
     <PaginatedSelect
@@ -87,7 +101,7 @@ An input for selection of options.
   <Story name='Select with filter and ellipses'>
     <PaginatedSelectFiltered
       width='250px'
-      value={11}
+      value={1000}
       placeholder='Placeholder here...'
       options={optionsEllipses}
     />
@@ -125,7 +139,12 @@ An input for selection of options.
 
 <Canvas>
   <Story name='PaginatedMultiSelect'>
-    <PaginatedMultiSelect placeholder='Placeholder here...' options={options} />
+    <PaginatedMultiSelect
+      withTitle
+      placeholder='Placeholder here...'
+      value={[1000, 2, 3]}
+      options={optionsEllipses}
+    />
   </Story>
 </Canvas>