@dhis2-ui/transfer 8.1.11 → 8.2.2

package/build/es/transfer.stories.js

@@ -7,37 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { TransferOption } from './transfer-option.js';
 import { Transfer } from './transfer.js';
 const subtitle = 'Allows users to select options from a list';
-const description = `
-#### Usage
-
-Use a transfer component wherever a user needs to make a complex selection. Simple selections can be achieved with checkboxes, radio buttons or a select.
-
-There are use-cases that are particularly suitable for a transfer component:
-
-- when a user needs to select some options from several different groups at the same time
-- if the selection needs to have a defined order
-- when the user will be interacting with and editing the selection often
-- if a user needs to easily compare non-selected and selected options
-- if a user is making selections as part of a complex flow, especially where there are many options to choose from
-
-#### Terminology
-
-This component has to differentiate between different types of options,
-here's an explanation of their meaning:
-
-- source options: These are options listed on the left and are available for selection
-- picked options: These options have been selected by the user and are on the right side
-- highlighted option: These are visually highlighted options than can be on either side and are ready for transferral with the action buttons to the other side
-- filtered options: These are the displayed source options filtered by a search term or a custom search algorithm. The api surface uses "selected" for "picked" to be consistent with the rest of the library
-
-#### More details
-
-See more about the options available for Transfers at [Design System: Transfer](https://github.com/dhis2/design-system/blob/master/organisms/transfer.md#transfer).
-
-\`\`\`js
-import { Transfer, TransferOption } from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\n#### Usage\n\nUse a transfer component wherever a user needs to make a complex selection. Simple selections can be achieved with checkboxes, radio buttons or a select.\n\nThere are use-cases that are particularly suitable for a transfer component:\n\n- when a user needs to select some options from several different groups at the same time\n- if the selection needs to have a defined order\n- when the user will be interacting with and editing the selection often\n- if a user needs to easily compare non-selected and selected options\n- if a user is making selections as part of a complex flow, especially where there are many options to choose from\n\n#### Terminology\n\nThis component has to differentiate between different types of options,\nhere's an explanation of their meaning:\n\n- source options: These are options listed on the left and are available for selection\n- picked options: These options have been selected by the user and are on the right side\n- highlighted option: These are visually highlighted options than can be on either side and are ready for transferral with the action buttons to the other side\n- filtered options: These are the displayed source options filtered by a search term or a custom search algorithm. The api surface uses \"selected\" for \"picked\" to be consistent with the rest of the library\n\n#### More details\n\nSee more about the options available for Transfers at [Design System: Transfer](https://github.com/dhis2/design-system/blob/master/organisms/transfer.md#transfer).\n\n```js\nimport { Transfer, TransferOption } from '@dhis2/ui'\n```\n";
 const options = [{
   label: 'ANC 1st visit',
   value: 'anc_1st_visit'
@@ -115,7 +85,7 @@ const options = [{
  */
 
 export default {
-  title: 'Forms/Transfer',
+  title: 'Transfer',
   component: Transfer,
   parameters: {
     componentSubtitle: subtitle,
@@ -134,10 +104,11 @@ export default {
   }
 };
 
-const StatefulTemplate = ({
-  initiallySelected,
-  ...args
-}) => {
+const StatefulTemplate = _ref => {
+  let {
+    initiallySelected,
+    ...args
+  } = _ref;
   const [selected, setSelected] = useState(initiallySelected);
 
   const onChange = payload => setSelected(payload.selected);
@@ -187,9 +158,12 @@ export const FilteredPicked = StatefulTemplate.bind({});
 FilteredPicked.args = {
   filterablePicked: true,
   initialSearchTermPicked: 'ANC',
-  initiallySelected: options.map(({
-    value
-  }) => value)
+  initiallySelected: options.map(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value;
+  })
 };
 export const FilteredPlaceholder = StatefulTemplate.bind({});
 FilteredPlaceholder.args = {
@@ -198,39 +172,33 @@ FilteredPlaceholder.args = {
   filterPlaceholder: 'Search'
 };
 
-const renderOption = ({
-  label,
-  value,
-  onClick,
-  highlighted,
-  selected
-}) => /*#__PURE__*/React.createElement("p", {
-  onClick: event => onClick({
+const renderOption = _ref3 => {
+  let {
     label,
-    value
-  }, event),
-  style: {
-    background: highlighted ? 'green' : 'blue',
-    color: selected ? 'orange' : 'white'
-  }
-}, "Custom: ", label, " (label), ", value, " (value)");
-
-const RenderOptionCode = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Custom option code:"), /*#__PURE__*/React.createElement("code", null, /*#__PURE__*/React.createElement("pre", null, `const renderOption = ({ label, value, onClick, highlighted, selected }) => (
-                <p
-                    onClick={event => onClick({ label, value }, event)}
-                    style={{
-                        background: highlighted ? 'green' : 'blue',
-                        color: selected ? 'orange' : 'white',
-                    }}
-                >
-                    Custom: {label} (label), {value} (value)
-                </p>
-            )`)));
-
-const StatefulTemplateCustomRenderOption = ({
-  initiallySelected,
-  ...args
-}) => {
+    value,
+    onClick,
+    highlighted,
+    selected
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("p", {
+    onClick: event => onClick({
+      label,
+      value
+    }, event),
+    style: {
+      background: highlighted ? 'green' : 'blue',
+      color: selected ? 'orange' : 'white'
+    }
+  }, "Custom: ", label, " (label), ", value, " (value)");
+};
+
+const RenderOptionCode = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Custom option code:"), /*#__PURE__*/React.createElement("code", null, /*#__PURE__*/React.createElement("pre", null, "const renderOption = ({ label, value, onClick, highlighted, selected }) => (\n                <p\n                    onClick={event => onClick({ label, value }, event)}\n                    style={{\n                        background: highlighted ? 'green' : 'blue',\n                        color: selected ? 'orange' : 'white',\n                    }}\n                >\n                    Custom: {label} (label), {value} (value)\n                </p>\n            )")));
+
+const StatefulTemplateCustomRenderOption = _ref4 => {
+  let {
+    initiallySelected,
+    ...args
+  } = _ref4;
   const [selected, setSelected] = useState(initiallySelected);
 
   const onChange = payload => setSelected(payload.selected);
@@ -251,9 +219,12 @@ export const CustomListOptions = args => /*#__PURE__*/React.createElement(React.
 CustomListOptions.args = {
   renderOption,
   options: options.slice(0, 2),
-  initiallySelected: options.slice(0, 2).map(({
-    value
-  }) => value)
+  initiallySelected: options.slice(0, 2).map(_ref5 => {
+    let {
+      value
+    } = _ref5;
+    return value;
+  })
 };
 export const IndividualCustomOption = StatefulTemplateCustomRenderOption.bind({});
 IndividualCustomOption.args = {
@@ -302,9 +273,12 @@ export const Reordering = StatefulTemplate.bind({});
 Reordering.args = {
   enableOrderChange: true,
   options: options.slice(0, 4),
-  initiallySelected: options.slice(0, 4).map(({
-    value
-  }) => value)
+  initiallySelected: options.slice(0, 4).map(_ref6 => {
+    let {
+      value
+    } = _ref6;
+    return value;
+  })
 };
 export const IncreasedOptionsHeight = StatefulTemplate.bind({});
 IncreasedOptionsHeight.args = {
@@ -329,37 +303,40 @@ const createCustomFilteringInHeader = hideFilterInput => {
   }));
   const allOptions = [...relativePeriods, ...fixedPeriods];
 
-  const Header = ({
-    onClick,
-    relativePeriod,
-    selectedYear,
-    onSelectedYearChange
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, null, /*#__PURE__*/React.createElement(Tab, {
-    selected: relativePeriod,
-    onClick: () => onClick({
-      relativePeriod: true
-    })
-  }, "Relative periods"), /*#__PURE__*/React.createElement(Tab, {
-    selected: !relativePeriod,
-    onClick: () => onClick({
-      relativePeriod: false
-    })
-  }, "Fixed periods")), /*#__PURE__*/React.createElement("p", {
-    style: {
-      margin: 0,
-      height: 10
-    }
-  }), /*#__PURE__*/React.createElement(SingleSelectField, {
-    label: "Year",
-    selected: selectedYear,
-    onChange: onSelectedYearChange
-  }, /*#__PURE__*/React.createElement(SingleSelectOption, {
-    value: "2020",
-    label: "2020"
-  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
-    value: "2019",
-    label: "2019"
-  })));
+  const Header = _ref7 => {
+    let {
+      onClick,
+      relativePeriod,
+      selectedYear,
+      onSelectedYearChange
+    } = _ref7;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, null, /*#__PURE__*/React.createElement(Tab, {
+      selected: relativePeriod,
+      onClick: () => onClick({
+        relativePeriod: true
+      })
+    }, "Relative periods"), /*#__PURE__*/React.createElement(Tab, {
+      selected: !relativePeriod,
+      onClick: () => onClick({
+        relativePeriod: false
+      })
+    }, "Fixed periods")), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        height: 10
+      }
+    }), /*#__PURE__*/React.createElement(SingleSelectField, {
+      label: "Year",
+      selected: selectedYear,
+      onChange: onSelectedYearChange
+    }, /*#__PURE__*/React.createElement(SingleSelectOption, {
+      value: "2020",
+      label: "2020"
+    }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+      value: "2019",
+      label: "2019"
+    })));
+  };
   /* eslint-enable react/prop-types */
 
 
@@ -376,20 +353,29 @@ const createCustomFilteringInHeader = hideFilterInput => {
         return optionsWithPeriod;
       }
 
-      return optionsWithPeriod.filter(({
-        label
-      }) => label.indexOf(filter) !== -1);
+      return optionsWithPeriod.filter(_ref8 => {
+        let {
+          label
+        } = _ref8;
+        return label.indexOf(filter) !== -1;
+      });
     };
 
     const header = /*#__PURE__*/React.createElement(Header, {
       relativePeriod: relativePeriod,
       selectedYear: year,
-      onSelectedYearChange: ({
-        selected
-      }) => setYear(selected),
-      onClick: ({
-        relativePeriod: newRelativePeriod
-      }) => setRelativePeriod(newRelativePeriod)
+      onSelectedYearChange: _ref9 => {
+        let {
+          selected
+        } = _ref9;
+        return setYear(selected);
+      },
+      onClick: _ref10 => {
+        let {
+          relativePeriod: newRelativePeriod
+        } = _ref10;
+        return setRelativePeriod(newRelativePeriod);
+      }
     });
     return /*#__PURE__*/React.createElement(Transfer, _extends({}, props, {
       options: allOptions,
@@ -399,19 +385,23 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterCallback: filterCallback,
       leftHeader: header,
       rightHeader: /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Selected Periods")),
-      onFilterChange: ({
-        value
-      }) => setFilter(value),
+      onFilterChange: _ref11 => {
+        let {
+          value
+        } = _ref11;
+        return setFilter(value);
+      },
       height: "400px",
       filterLabel: "Filter options",
       filterPlaceholder: "Search"
     }));
   };
 
-  return ({
-    initiallySelected,
-    ...args
-  }) => {
+  return _ref12 => {
+    let {
+      initiallySelected,
+      ...args
+    } = _ref12;
     const [selected, setSelected] = useState(initiallySelected);
 
     const onChange = payload => setSelected(payload.selected);
@@ -445,9 +435,12 @@ export const InfiniteLoading = args => {
   const [options, setOptions] = useState([]); // selected options
 
   const [selected] = useState( // second page is already selected
-  optionsPool.slice(pageSize, pageSize * 2).map(({
-    value
-  }) => value));
+  optionsPool.slice(pageSize, pageSize * 2).map(_ref13 => {
+    let {
+      value
+    } = _ref13;
+    return value;
+  }));
 
   const onEndReached = () => {
     // do nothing when loading already
@@ -506,7 +499,10 @@ export const LoadingPicked = StatefulTemplate.bind({});
 LoadingPicked.args = {
   loadingPicked: true,
   options: options.slice(0, 3),
-  initiallySelected: options.slice(0, 2).map(({
-    value
-  }) => value)
+  initiallySelected: options.slice(0, 2).map(_ref14 => {
+    let {
+      value
+    } = _ref14;
+    return value;
+  })
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "8.1.11",
+    "version": "8.2.2",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -32,12 +32,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/button": "8.1.11",
-        "@dhis2-ui/field": "8.1.11",
-        "@dhis2-ui/input": "8.1.11",
-        "@dhis2-ui/intersection-detector": "8.1.11",
-        "@dhis2-ui/loader": "8.1.11",
-        "@dhis2/ui-constants": "8.1.11",
+        "@dhis2-ui/button": "8.2.2",
+        "@dhis2-ui/field": "8.2.2",
+        "@dhis2-ui/input": "8.2.2",
+        "@dhis2-ui/intersection-detector": "8.2.2",
+        "@dhis2-ui/loader": "8.2.2",
+        "@dhis2/ui-constants": "8.2.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },