@hisptz/react-ui/build/es/components/DataConfigurationArea/DataConfigurationArea.stories.js

A collection of reusable complex DHIS2 react ui components.

import { Button, IconAdd24, IconDimensionIndicator16, IconDimensionProgramIndicator16 } from "@dhis2/ui";
import React from "react";
import DataConfigurationArea from "./index";

const Template = args => /*#__PURE__*/React.createElement(DataConfigurationArea, args);

const groups = [{
  id: "group-1",
  name: "Group 1",
  items: [{
    id: "item-1",
    name: "Item 1",
    icon: /*#__PURE__*/React.createElement(IconDimensionIndicator16, null),
    subLabel: "Indicator"
  }, {
    id: "item-2",
    name: "Item 2",
    icon: /*#__PURE__*/React.createElement(IconDimensionProgramIndicator16, null),
    subLabel: "Program Indicator"
  }]
}, {
  id: "group-2",
  name: "Group 2",
  items: [{
    id: "item-1",
    name: "Item 1",
    icon: /*#__PURE__*/React.createElement(IconDimensionIndicator16, null),
    subLabel: "Indicator"
  }, {
    id: "item-2",
    name: "Item 2",
    icon: /*#__PURE__*/React.createElement(IconDimensionProgramIndicator16, null),
    subLabel: "Program Indicator"
  }]
}];
export const BasicDataConfigurationArea = Template.bind({});
BasicDataConfigurationArea.args = {
  groups,
  onItemClick: id => console.log(id)
};
export const WithDeletableGroups = Template.bind({});
WithDeletableGroups.args = {
  groups,
  deletableGroups: true,
  onItemClick: id => console.log(id)
};
export const WithDeletableItems = Template.bind({});
WithDeletableItems.args = {
  groups,
  deletableGroups: true,
  deletableItems: true,
  onItemClick: id => console.log(id)
};
export const WithAllOptions = Template.bind({});
WithAllOptions.args = {
  groups,
  deletableGroups: true,
  deletableItems: true,
  editableTitle: true,
  titleRightAdornment: _ref => {
    let {
      id
    } = _ref;
    return /*#__PURE__*/React.createElement("div", null, id);
  },
  onItemClick: id => console.log(id)
};
export const WithGroupFooter = Template.bind({});
WithGroupFooter.args = {
  groups,
  deletableGroups: true,
  deletableItems: true,
  editableTitle: true,
  onItemClick: id => console.log(id),
  groupFooter: group => {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Footer for ", "".concat(group.name)), /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(IconAdd24, null)
    }, "Add Item"));
  }
};
export const DraggableItems = Template.bind({});
DraggableItems.args = {
  groups,
  deletableGroups: true,
  deletableItems: true,
  editableTitle: true,
  draggableItems: true,
  onItemClick: id => console.log(id),
  groupFooter: group => {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Footer for ", "".concat(group.name)), /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(IconAdd24, null)
    }, "Add Item"));
  }
};
export default {
  title: "Components/DataConfigurationArea/DataConfigurationArea",
  component: DataConfigurationArea,
  decorators: [DataConfigurationAreaStory => /*#__PURE__*/React.createElement("div", {
    style: {
      width: "100%",
      height: "100%",
      padding: "24px"
    }
  }, /*#__PURE__*/React.createElement(DataConfigurationAreaStory, null))]
};