npm package: @paprika/action-bar
Description: ActionBar
Author: @paprika
Latest version: 8.0.5

<!-- start: Autogenerated - do not modify -->

# @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    | () => {} |             |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## 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

```js
<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](https://github.com/acl-services/paprika/blob/aa770ab261d6364c2f14717c8edeb7d1e560a3d5/packages/ActionBar/src/components/Sort/Sort.js)

You can also use the hook `useSort`

```js
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

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

[More detail about props](https://github.com/acl-services/paprika/blob/aa770ab261d6364c2f14717c8edeb7d1e560a3d5/packages/ActionBar/src/components/ColumnsArrangement/ColumnsArrangement.js)

You can also use the hook `useColumnsArrangement`

```js
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>
);
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/table-actionbar--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/ActionBar/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/action-bar%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/ActionBar/CHANGELOG.md)