@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