feat: option group of the picker supports sticking to the top of cont…

…ainer (#3807)
rsuite · May 17, 2024 · 157a2bf · 157a2bf
1 parent 2e1a4ce
commit 157a2bf
Show file tree

Hide file tree

Showing 22 changed files with 393 additions and 368 deletions.
diff --git a/docs/pages/components/check-picker/fragments/custom-toggle.md b/docs/pages/components/check-picker/fragments/custom-toggle.md
diff --git a/docs/pages/components/check-picker/fragments/custom.md b/docs/pages/components/check-picker/fragments/custom.md
@@ -2,49 +2,69 @@
 
 ```js
 import { CheckPicker } from 'rsuite';
+import { FaUserGroup, FaUser } from 'react-icons/fa6';
+import { mockUsers } from './mock';
 
-const data = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
-  item => ({
-    label: item,
-    value: item,
-    role: Math.random() > 0.5 ? 'Owner' : 'Guest'
+/**
+ *  Data structure:
+ *  [
+ *    { firstLetter: 'A', name: 'Alan', firstName: 'Alan' },
+ *    { firstLetter: 'B', name: 'Benson', firstName: 'Benson' },
+ *  ]
+ */
+const data = mockUsers(100)
+  .map(item => {
+    const firstLetter = item.firstName[0].toUpperCase();
+    return { firstLetter, ...item };
   })
-);
+  .sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter));
 
 const App = () => (
   <CheckPicker
+    block
     data={data}
-    groupBy="role"
+    groupBy="firstLetter"
+    labelKey="firstName"
+    valueKey="name"
     placeholder="Select User"
-    block
-    renderMenuItem={(label, item) => {
-      return (
-        <div>
-          <i className="rs-icon rs-icon-user" /> {label}
-        </div>
-      );
-    }}
-    renderMenuGroup={(label, item) => {
-      return (
-        <div>
-          <i className="rs-icon rs-icon-group" /> {label} - ({item.children.length})
-        </div>
-      );
-    }}
-    renderValue={(value, items) => {
-      return (
-        <span>
-          <span style={{ color: '#575757' }}>
-            <i className="rs-icon rs-icon-user" /> Users :
-          </span>{' '}
-          {value.join(' , ')}
-        </span>
-      );
-    }}
+    renderMenuItem={renderMenuItem}
+    renderMenuGroup={renderMenuGroup}
+    renderValue={renderValue}
   />
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));
+
+const renderMenuItem = (label, item) => {
+  return (
+    <Box>
+      <FaUser /> <span>{label}</span>
+    </Box>
+  );
+};
+
+const renderMenuGroup = (label, item) => {
+  return (
+    <Box>
+      <FaUserGroup />
+      <span>
+        {label} - ({item.children.length})
+      </span>
+    </Box>
+  );
+};
+
+const renderValue = (value, items) => {
+  return (
+    <Box>
+      <FaUserGroup /> Users: {value.join(' , ')}
+    </Box>
+  );
+};
+
+const Box = ({ children }) => {
+  return <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>{children}</div>;
+};
 ```
 
 <!--end-code-->
diff --git a/docs/pages/components/check-picker/fragments/group.md b/docs/pages/components/check-picker/fragments/group.md
@@ -2,50 +2,30 @@
 
 ```js
 import { CheckPicker } from 'rsuite';
-
-const data = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
-  item => ({
-    label: item,
-    value: item,
-    role: Math.random() > 0.5 ? 'Owner' : 'Guest'
+import { mockUsers } from './mock';
+
+/**
+ *  Data structure:
+ *  [
+ *    { firstLetter: 'A', name: 'Alan', firstName: 'Alan' },
+ *    { firstLetter: 'B', name: 'Benson', firstName: 'Benson' },
+ *  ]
+ */
+const data = mockUsers(100)
+  .map(item => {
+    const firstLetter = item.firstName[0].toUpperCase();
+    return { firstLetter, ...item };
   })
-);
-
-function compare(a, b) {
-  let nameA = a.toUpperCase();
-  let nameB = b.toUpperCase();
-
-  if (nameA < nameB) {
-    return -1;
-  }
-  if (nameA > nameB) {
-    return 1;
-  }
-  return 0;
-}
+  .sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter));
 
 const App = () => (
-  <>
-    <CheckPicker data={data} groupBy="role" style={{ width: 224 }} />
-    <hr />
-    <p>Sort:</p>
-    <CheckPicker
-      data={data}
-      groupBy="role"
-      sort={isGroup => {
-        if (isGroup) {
-          return (a, b) => {
-            return compare(a.groupTitle, b.groupTitle);
-          };
-        }
-
-        return (a, b) => {
-          return compare(a.value, b.value);
-        };
-      }}
-      style={{ width: 224 }}
-    />
-  </>
+  <CheckPicker
+    data={data}
+    groupBy="firstLetter"
+    labelKey="firstName"
+    valueKey="name"
+    style={{ width: 200 }}
+  />
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/docs/pages/components/check-picker/fragments/sticky.md b/docs/pages/components/check-picker/fragments/sticky.md
@@ -2,20 +2,33 @@
 
 ```js
 import { CheckPicker } from 'rsuite';
+import { mockUsers } from './mock';
 
-const data = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
-  item => ({ label: item, value: item, role: Math.random() > 0.5 ? 'Owner' : 'Guest' })
-);
+/**
+ *  Data structure:
+ *  [
+ *    { firstLetter: 'A', name: 'Alan', firstName: 'Alan' },
+ *    { firstLetter: 'B', name: 'Benson', firstName: 'Benson' },
+ *  ]
+ */
+const data = mockUsers(100)
+  .map(item => {
+    const firstLetter = item.firstName[0].toUpperCase();
+    return { firstLetter, ...item };
+  })
+  .sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter));
 
 const App = () => (
   <>
-    <CheckPicker sticky data={data} defaultValue={['Kenya', 'Julius']} style={{ width: 224 }} />
+    <CheckPicker sticky data={data} labelKey="firstName" valueKey="name" style={{ width: 224 }} />
     <hr />
     <CheckPicker
       sticky
       data={data}
-      groupBy="role"
-      defaultValue={['Kenya', 'Julius']}
+      placeholder="Group by first letter"
+      groupBy="firstLetter"
+      labelKey="firstName"
+      valueKey="name"
       style={{ width: 224 }}
     />
   </>

diff --git a/docs/pages/components/check-picker/index.tsx b/docs/pages/components/check-picker/index.tsx
@@ -3,6 +3,18 @@ import { CheckPicker, Button, Checkbox, RadioGroup, Radio, Stack } from 'rsuite'
 import DefaultPage from '@/components/Page';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import ImportGuide from '@/components/ImportGuide';
+import { FaUserGroup, FaUser } from 'react-icons/fa6';
+
+import { importFakerString, mockUsers, mockUsersString, sandboxFakerVersion } from '@/utils/mock';
+
+const mockfile = {
+  name: 'mock.js',
+  content: [importFakerString, mockUsersString].join('\n')
+};
+
+const sandboxDependencies = {
+  ...sandboxFakerVersion
+};
 
 const inDocsComponents = {
   'import-guide': () => <ImportGuide components={['CheckPicker']} />
@@ -12,14 +24,19 @@ export default function Page() {
   return (
     <DefaultPage
       inDocsComponents={inDocsComponents}
+      sandboxDependencies={sandboxDependencies}
+      sandboxFiles={[mockfile]}
       dependencies={{
+        mockUsers,
         Stack,
         CheckPicker,
         Button,
         Checkbox,
         RadioGroup,
         Radio,
-        SpinnerIcon
+        SpinnerIcon,
+        FaUserGroup,
+        FaUser
       }}
     />
   );

diff --git a/docs/pages/components/input-picker/fragments/custom.md b/docs/pages/components/input-picker/fragments/custom.md
@@ -2,51 +2,68 @@
 
 ```js
 import { InputPicker } from 'rsuite';
-import UserIcon from '@rsuite/icons/legacy/User';
-import GroupIcon from '@rsuite/icons/legacy/Group';
-
-const data = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
-  item => ({
-    label: item,
-    value: item,
-    role: Math.random() > 0.5 ? 'Owner' : 'Guest'
+import { FaUserGroup, FaUser } from 'react-icons/fa6';
+import { mockUsers } from './mock';
+
+/**
+ *  Data structure:
+ *  [
+ *    { firstLetter: 'A', name: 'Alan', firstName: 'Alan' },
+ *    { firstLetter: 'B', name: 'Benson', firstName: 'Benson' },
+ *  ]
+ */
+const data = mockUsers(100)
+  .map(item => {
+    const firstLetter = item.firstName[0].toUpperCase();
+    return { firstLetter, ...item };
   })
-);
+  .sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter));
 
 const App = () => (
   <InputPicker
     data={data}
-    groupBy="role"
+    groupBy="firstLetter"
+    labelKey="firstName"
+    valueKey="name"
     placeholder="Select User"
-    style={{ width: 224 }}
-    renderMenuItem={(label, item) => {
-      return (
-        <>
-          <UserIcon /> {label}
-        </>
-      );
-    }}
-    renderMenuGroup={(label, item) => {
-      return (
-        <>
-          <GroupIcon /> {label} - ({item.children.length})
-        </>
-      );
-    }}
-    renderValue={(value, item, selectedElement) => {
-      return (
-        <div>
-          <span style={{ color: '#575757' }}>
-            <UserIcon /> User :
-          </span>{' '}
-          {value}
-        </div>
-      );
-    }}
+    renderMenuItem={renderMenuItem}
+    renderMenuGroup={renderMenuGroup}
+    renderValue={renderValue}
   />
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));
+
+const renderMenuItem = (label, item) => {
+  return (
+    <Box>
+      <FaUser /> <span>{label}</span>
+    </Box>
+  );
+};
+
+const renderMenuGroup = (label, item) => {
+  return (
+    <Box>
+      <FaUserGroup />
+      <span>
+        {label} - ({item.children.length})
+      </span>
+    </Box>
+  );
+};
+
+const renderValue = (value, items) => {
+  return (
+    <Box>
+      <FaUserGroup /> User: {value}
+    </Box>
+  );
+};
+
+const Box = ({ children }) => {
+  return <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>{children}</div>;
+};
 ```
 
 <!--end-code-->