@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