@paprika/action-bar

Description

ActionBar

Installation

yarn add @paprika/action-bar

or with npm:

npm install @paprika/action-bar

Props

ActionBar

Prop	Type	required	default	Description
children	node	true	-

ActionBar.ColumnsArrangement

Prop	Type	required	default	Description
children	node	true	-
orderedColumnIds	arrayOf	true	-
onChangeOrder	func	true	-
onChangeVisibility	func	true	-
onHideAll	func	true	-
onShowAll	func	true	-
renderTriggerButton	func	false	null

ActionBar.Sort

Prop	Type	required	default	Description
appliedNumber	number	false	0
children	node	false	null
columns	arrayOf	true	-
isAddSortDisabled	bool	false	false
onAddSort	func	true	-
onApply	func	true	-
onCancel	func	false	() => {}
onClose	func	false	() => {}
onOpen	func	false	() => {}

Action Bar

Action Bar component contains 2 individual widgets.

<Sort /> and <ColumnsArrangement />

Installation

> npm install --save @paprika/action-bar or > yarn add @paprika/action-bar

Usage

Sort

<Sort appliedNumber={appliedNumber} columns={columns} onAddSort={onAddSort} onApply={onApply}>
  <Sort.Field id={fieldId} onDelete={handleDelete} onChange={handleChange} isFirst />
  <Sort.Field id={fieldId} onDelete={handleDelete} onChange={handleChange} isFirst={false} />
</Sort>

More detail about props

You can also use the hook useSort

const { appliedNumber, sortedFields, sortedData, onAddSort, onDeleteSort, onChangeSort, onApply } = useSort({
  columns,
});

const handleDelete = fieldId => () => {
  onDeleteSort(fieldId);
};

const handleChange = fieldId => params => {
  onChangeSort({ ...params, id: fieldId });
};

return (
  <Sort appliedNumber={appliedNumber} columns={columns} onAddSort={onAddSort} onApply={onApply}>
    {sortedFields.map((field, index) => (
      <Sort.Field
        key={field.id}
        {...field}
        onDelete={handleDelete(field.id)}
        onChange={handleChange(field.id)}
        isFirst={index === 0}
      />
    ))}
  </Sort>

  // display sortedData
);

ColumnsArrangement

<ColumnsArrangement
  columns={orderedColumns}
  onChangeOrder={handleChangeOrder}
  onHideAll={handleHideAll}
  onShowAll={handleShowAll}
  onChangeVisibility={handleChangeVisibility}
/>

More detail about props

You can also use the hook useColumnsArrangement

const {
  orderedColumnIds,
  onChangeVisibility,
  onShowAll,
  onHideAll,
  onChangeOrder,
  isColumnHidden,
} = useColumnsArrangement({ defaultOrderedColumnIds });

return (
  <ColumnsArrangement
    orderedColumnIds={orderedColumnIds}
    onChangeOrder={onChangeOrder}
    onHideAll={onHideAll}
    onShowAll={onShowAll}
    onChangeVisibility={onChangeVisibility}
  >
    <ColumnsArrangement.ColumnDefinition
      id="columnId"
      label="Column label"
      isDisabled={false}
      isHidden={isColumnHidden("columnId")}
    />
  </ColumnsArrangement>
);

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG