Skip to content

Commit

Permalink
feat(Datagrid): adds FilterPanel stories (#2942)
Browse files Browse the repository at this point in the history 
* feat(web-terminal): adds reduced motion

* feat(web-terminal): adds terminal wrapper component

* chore: merge main

* feat(datagrid): starting to move story files

* feat(datagrid): adds new stories to filter panel

* chore: removed usused and comment
  • Loading branch information
@AlexanderMelox
AlexanderMelox authored May 1, 2023
1 parent 9f60ac9 commit 0eb800a
Show file tree
Hide file tree
Showing 3 changed files with 1,248 additions and 342 deletions.
246 changes: 1 addition & 245 deletions packages/cloud-cognitive/src/components/Datagrid/Datagrid.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
/**
* Copyright IBM Corp. 2022, 2022
* Copyright IBM Corp. 2022, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand All @@ -25,10 +25,8 @@ import {
useSelectRows,
useSortableColumns,
useStickyColumn,
useFiltering,
getAutoSizedColumnWidth,
} from '.';
import { StatusIcon } from '../StatusIcon';
import mdx from './Datagrid.mdx';
import { SelectAllWithToggle } from './Datagrid.stories/index';
import { DatagridActions } from './utils/DatagridActions';
Expand Down Expand Up @@ -446,248 +444,6 @@ export const SelectItemsInAllPages = () => {
};
SelectItemsInAllPages.story = SelectAllWithToggle;

export const FilterPanel = () => {
const headers = [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
{
Header: 'Age',
accessor: 'age',
},
{
Header: 'Visits',
accessor: 'visits',
filter: 'number',
},
{
Header: 'Status',
accessor: 'status',
},
// Shows the date filter example
{
Header: 'Joined',
accessor: 'joined',
filter: 'date',
Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,
},
// Shows the checkbox filter example
{
Header: 'Password strength',
accessor: 'passwordStrength',
width: 200,
filter: 'checkbox',
Cell: ({ cell: { value } }) => {
const iconProps = {
size: 'sm',
theme: 'light',
kind: value,
iconDescription: value,
};

return (
<span
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<StatusIcon style={{ marginRight: '8px' }} {...iconProps} />
{iconProps.iconDescription}
</span>
);
},
},
// Shows the checkbox filter example
{
Header: 'Role',
accessor: 'role',
},
];

const columns = React.useMemo(() => headers, []);
const [data] = useState(makeData(50));
const [isPanelOpen, setIsPanelOpen] = useState(false);

const sections = [
{
categoryTitle: 'Category title',
hasAccordion: true,
filters: [
{
filterLabel: 'Joined',
filter: {
type: 'date',
column: 'joined',
props: {
DatePicker: {
datePickerType: 'range',
},
DatePickerInput: {
start: {
id: 'date-picker-input-id-start',
placeholder: 'mm/dd/yyyy',
labelText: 'Joined start date',
},
end: {
id: 'date-picker-input-id-end',
placeholder: 'mm/dd/yyyy',
labelText: 'Joined end date',
},
},
},
},
},
{
filterLabel: 'Status',
filter: {
type: 'dropdown',
column: 'status',
props: {
Dropdown: {
id: 'marital-status-dropdown',
ariaLabel: 'Marital status dropdown',
items: ['relationship', 'complicated', 'single'],
label: 'Marital status',
titleText: 'Marital status',
},
},
},
},
],
},
{
categoryTitle: 'Category title',
filters: [
{
filterLabel: 'Role',
filter: {
type: 'radio',
column: 'role',
props: {
FormGroup: {
legendText: 'Role',
},
RadioButtonGroup: {
orientation: 'vertical',
legend: 'Role legend',
name: 'role-radio-button-group',
},
RadioButton: [
{
id: 'developer',
labelText: 'Developer',
value: 'developer',
},
{
id: 'designer',
labelText: 'Designer',
value: 'designer',
},
{
id: 'researcher',
labelText: 'Researcher',
value: 'researcher',
},
],
},
},
},
{
filterLabel: 'Visits',
filter: {
type: 'number',
column: 'visits',
props: {
NumberInput: {
min: 0,
id: 'visits-number-input',
invalidText: 'A valid value is required',
label: 'Visits',
placeholder: 'Type a number amount of visits',
},
},
},
},
{
filterLabel: 'Password strength',
filter: {
type: 'checkbox',
column: 'passwordStrength',
props: {
FormGroup: {
legendText: 'Password strength',
},
Checkbox: [
{
id: 'normal',
labelText: 'Normal',
value: 'normal',
},
{
id: 'minor-warning',
labelText: 'Minor warning',
value: 'minor-warning',
},
{
id: 'critical',
labelText: 'Critical',
value: 'critical',
},
],
},
},
},
],
},
];

const datagridState = useDatagrid(
{
filterProps: {
variation: 'panel',
updateMethod: 'batch',
primaryActionLabel: 'Apply',
secondaryActionLabel: 'Cancel',
panelIconDescription: `${isPanelOpen ? 'Close' : 'Open'} filters`,
closeIconDescription: 'Close panel',
sections,
onPanelOpen: (open) => {
setIsPanelOpen(open);
action('onPanelOpen');
},
onPanelClose: (open) => {
setIsPanelOpen(open);
action('onPanelClose');
},
panelTitle: 'Filter',
},
columns,
data,
emptyStateTitle: 'No filters match',
emptyStateDescription:
'Data was not found with the current filters applied. Change filters or clear filters to see other results.',
DatagridActions,
DatagridBatchActions,
batchActions: true,
toolbarBatchActions: getBatchActions(),
},
useFiltering
);

return (
<Wrapper>
<Datagrid datagridState={{ ...datagridState }} />
</Wrapper>
);
};

const DatagridBatchActions = (datagridState) => {
const { selectedFlatRows, toggleAllRowsSelected } = datagridState;
const totalSelected = selectedFlatRows && selectedFlatRows.length;
Expand Down
Loading

0 comments on commit 0eb800a

Please sign in to comment.