@dhis2-ui/transfer 8.1.11 → 8.2.2

package/build/cjs/transfer.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LoadingPicked = exports.LoadingSource = exports.InfiniteLoading = exports.CustomFilteringWithoutFilterInput = exports.CustomFilteringWithFilterInput = exports.DifferentWidths = exports.IncreasedOptionsHeight = exports.Reordering = exports.PickedEmptyComponent = exports.SourceEmptyPlaceholder = exports.CustomButtonText = exports.IndividualCustomOption = exports.CustomListOptions = exports.FilteredPlaceholder = exports.FilteredPicked = exports.Filtered = exports.OptionsFooter = exports.Header = exports.Multiple = exports.SingleSelection = exports.default = void 0;
+exports.default = exports.SourceEmptyPlaceholder = exports.SingleSelection = exports.Reordering = exports.PickedEmptyComponent = exports.OptionsFooter = exports.Multiple = exports.LoadingSource = exports.LoadingPicked = exports.InfiniteLoading = exports.IndividualCustomOption = exports.IncreasedOptionsHeight = exports.Header = exports.FilteredPlaceholder = exports.FilteredPicked = exports.Filtered = exports.DifferentWidths = exports.CustomListOptions = exports.CustomFilteringWithoutFilterInput = exports.CustomFilteringWithFilterInput = exports.CustomButtonText = void 0;
 
 var _select = require("@dhis2-ui/select");
 
@@ -26,37 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 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'
@@ -134,7 +104,7 @@ const options = [{
  */
 
 var _default = {
-  title: 'Forms/Transfer',
+  title: 'Transfer',
   component: _transfer.Transfer,
   parameters: {
     componentSubtitle: subtitle,
@@ -154,10 +124,11 @@ var _default = {
 };
 exports.default = _default;
 
-const StatefulTemplate = ({
-  initiallySelected,
-  ...args
-}) => {
+const StatefulTemplate = _ref => {
+  let {
+    initiallySelected,
+    ...args
+  } = _ref;
   const [selected, setSelected] = (0, _react.useState)(initiallySelected);
 
   const onChange = payload => setSelected(payload.selected);
@@ -213,9 +184,12 @@ exports.FilteredPicked = FilteredPicked;
 FilteredPicked.args = {
   filterablePicked: true,
   initialSearchTermPicked: 'ANC',
-  initiallySelected: options.map(({
-    value
-  }) => value)
+  initiallySelected: options.map(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value;
+  })
 };
 const FilteredPlaceholder = StatefulTemplate.bind({});
 exports.FilteredPlaceholder = FilteredPlaceholder;
@@ -225,39 +199,33 @@ FilteredPlaceholder.args = {
   filterPlaceholder: 'Search'
 };
 
-const renderOption = ({
-  label,
-  value,
-  onClick,
-  highlighted,
-  selected
-}) => /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "Custom option code:"), /*#__PURE__*/_react.default.createElement("code", null, /*#__PURE__*/_react.default.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.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "Custom option code:"), /*#__PURE__*/_react.default.createElement("code", null, /*#__PURE__*/_react.default.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] = (0, _react.useState)(initiallySelected);
 
   const onChange = payload => setSelected(payload.selected);
@@ -281,9 +249,12 @@ exports.CustomListOptions = CustomListOptions;
 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;
+  })
 };
 const IndividualCustomOption = StatefulTemplateCustomRenderOption.bind({});
 exports.IndividualCustomOption = IndividualCustomOption;
@@ -337,9 +308,12 @@ exports.Reordering = Reordering;
 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;
+  })
 };
 const IncreasedOptionsHeight = StatefulTemplate.bind({});
 exports.IncreasedOptionsHeight = IncreasedOptionsHeight;
@@ -366,37 +340,40 @@ const createCustomFilteringInHeader = hideFilterInput => {
   }));
   const allOptions = [...relativePeriods, ...fixedPeriods];
 
-  const Header = ({
-    onClick,
-    relativePeriod,
-    selectedYear,
-    onSelectedYearChange
-  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tab.TabBar, null, /*#__PURE__*/_react.default.createElement(_tab.Tab, {
-    selected: relativePeriod,
-    onClick: () => onClick({
-      relativePeriod: true
-    })
-  }, "Relative periods"), /*#__PURE__*/_react.default.createElement(_tab.Tab, {
-    selected: !relativePeriod,
-    onClick: () => onClick({
-      relativePeriod: false
-    })
-  }, "Fixed periods")), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      margin: 0,
-      height: 10
-    }
-  }), /*#__PURE__*/_react.default.createElement(_select.SingleSelectField, {
-    label: "Year",
-    selected: selectedYear,
-    onChange: onSelectedYearChange
-  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
-    value: "2020",
-    label: "2020"
-  }), /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
-    value: "2019",
-    label: "2019"
-  })));
+  const Header = _ref7 => {
+    let {
+      onClick,
+      relativePeriod,
+      selectedYear,
+      onSelectedYearChange
+    } = _ref7;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tab.TabBar, null, /*#__PURE__*/_react.default.createElement(_tab.Tab, {
+      selected: relativePeriod,
+      onClick: () => onClick({
+        relativePeriod: true
+      })
+    }, "Relative periods"), /*#__PURE__*/_react.default.createElement(_tab.Tab, {
+      selected: !relativePeriod,
+      onClick: () => onClick({
+        relativePeriod: false
+      })
+    }, "Fixed periods")), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: 0,
+        height: 10
+      }
+    }), /*#__PURE__*/_react.default.createElement(_select.SingleSelectField, {
+      label: "Year",
+      selected: selectedYear,
+      onChange: onSelectedYearChange
+    }, /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
+      value: "2020",
+      label: "2020"
+    }), /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
+      value: "2019",
+      label: "2019"
+    })));
+  };
   /* eslint-enable react/prop-types */
 
 
@@ -413,20 +390,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.default.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.default.createElement(_transfer.Transfer, _extends({}, props, {
@@ -437,19 +423,23 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterCallback: filterCallback,
       leftHeader: header,
       rightHeader: /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.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] = (0, _react.useState)(initiallySelected);
 
     const onChange = payload => setSelected(payload.selected);
@@ -485,9 +475,12 @@ const InfiniteLoading = args => {
   const [options, setOptions] = (0, _react.useState)([]); // selected options
 
   const [selected] = (0, _react.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
@@ -550,7 +543,10 @@ exports.LoadingPicked = LoadingPicked;
 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/build/es/__e2e__/add_remove-highlighted-options.stories.e2e.js

@@ -6,27 +6,36 @@ export default {
   title: 'Transfer add & remove highlighted options',
   decorators: [statefulDecorator()]
 };
-export const HasOptions = (_, {
-  onChange,
-  selected
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  filterable: true,
-  selected: selected,
-  onChange: onChange,
-  options: options
-});
-export const HasSelected = (_, {
-  onChange,
-  selected
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  onChange: onChange,
-  selected: selected,
-  options: options
-});
+export const HasOptions = (_, _ref) => {
+  let {
+    onChange,
+    selected
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    filterable: true,
+    selected: selected,
+    onChange: onChange,
+    options: options
+  });
+};
+export const HasSelected = (_, _ref2) => {
+  let {
+    onChange,
+    selected
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    onChange: onChange,
+    selected: selected,
+    options: options
+  });
+};
 HasSelected.story = {
   decorators: [statefulDecorator({
-    initialState: options.slice(0, 4).map(({
-      value
-    }) => value)
+    initialState: options.slice(0, 4).map(_ref3 => {
+      let {
+        value
+      } = _ref3;
+      return value;
+    })
   })]
 };

package/build/es/__e2e__/common/stateful-decorator.js

@@ -1,31 +1,38 @@
 /* eslint-disable react/display-name */
 import React, { useState } from 'react';
 
-const WithState = ({
-  fn,
-  initialState,
-  initialSearchTerm,
-  controlFilter
-}) => {
+const WithState = _ref => {
+  let {
+    fn,
+    initialState,
+    initialSearchTerm,
+    controlFilter
+  } = _ref;
   const [selected, setSelected] = useState(initialState);
   const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
   return fn({
     selected,
     searchTerm: controlFilter ? searchTerm : undefined,
     onChange: payload => setSelected(payload.selected),
-    onFilterChange: controlFilter ? ({
-      value
-    }) => setSearchTerm(value) : undefined
+    onFilterChange: controlFilter ? _ref2 => {
+      let {
+        value
+      } = _ref2;
+      return setSearchTerm(value);
+    } : undefined
   });
 };
 
-export const statefulDecorator = ({
-  initialState = [],
-  controlFilter = false,
-  initialSearchTerm = ''
-} = {}) => fn => /*#__PURE__*/React.createElement(WithState, {
-  initialState: initialState,
-  initialSearchTerm: initialSearchTerm,
-  controlFilter: controlFilter,
-  fn: fn
-});
+export const statefulDecorator = function () {
+  let {
+    initialState = [],
+    controlFilter = false,
+    initialSearchTerm = ''
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return fn => /*#__PURE__*/React.createElement(WithState, {
+    initialState: initialState,
+    initialSearchTerm: initialSearchTerm,
+    controlFilter: controlFilter,
+    fn: fn
+  });
+};

package/build/es/__e2e__/disabled-transfer-buttons.stories.e2e.js

@@ -6,59 +6,80 @@ export default {
   title: 'Transfer Disabled Transfer Buttons',
   decorators: [statefulDecorator()]
 };
-export const NoOptions = (_, {
-  selected,
-  onChange
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  selected: selected,
-  onChange: onChange,
-  options: []
-});
-export const HasOptions = (_, {
-  selected,
-  onChange
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  selected: selected,
-  onChange: onChange,
-  options: options
-});
-export const SomeOptionsSelected = (_, {
-  selected,
-  onChange
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  selected: selected,
-  onChange: onChange,
-  options: options
-});
-export const OnlyDisabledSourceOptions = (_, {
-  selected,
-  onChange
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  selected: selected,
-  onChange: onChange,
-  options: [{ ...options[0],
-    disabled: true
-  }]
-});
+export const NoOptions = (_, _ref) => {
+  let {
+    selected,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    selected: selected,
+    onChange: onChange,
+    options: []
+  });
+};
+export const HasOptions = (_, _ref2) => {
+  let {
+    selected,
+    onChange
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    selected: selected,
+    onChange: onChange,
+    options: options
+  });
+};
+export const SomeOptionsSelected = (_, _ref3) => {
+  let {
+    selected,
+    onChange
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    selected: selected,
+    onChange: onChange,
+    options: options
+  });
+};
+export const OnlyDisabledSourceOptions = (_, _ref4) => {
+  let {
+    selected,
+    onChange
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    selected: selected,
+    onChange: onChange,
+    options: [{ ...options[0],
+      disabled: true
+    }]
+  });
+};
 SomeOptionsSelected.story = {
   decorators: [statefulDecorator({
-    initialState: options.slice(0, 4).map(({
-      value
-    }) => value)
+    initialState: options.slice(0, 4).map(_ref5 => {
+      let {
+        value
+      } = _ref5;
+      return value;
+    })
   })]
 };
-export const AllOptionsSelected = (_, {
-  selected,
-  onChange
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  selected: selected,
-  onChange: onChange,
-  options: options
-});
+export const AllOptionsSelected = (_, _ref6) => {
+  let {
+    selected,
+    onChange
+  } = _ref6;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    selected: selected,
+    onChange: onChange,
+    options: options
+  });
+};
 AllOptionsSelected.story = {
   decorators: [statefulDecorator({
-    initialState: options.map(({
-      value
-    }) => value)
+    initialState: options.map(_ref7 => {
+      let {
+        value
+      } = _ref7;
+      return value;
+    })
   })]
 };

package/build/es/__e2e__/disabled-transfer-options.stories.e2e.js

@@ -6,13 +6,16 @@ export default {
   title: 'Disabled Source Options',
   decorators: [statefulDecorator()]
 };
-export const OneDisabled = (_, {
-  selected,
-  onChange
-}) => /*#__PURE__*/React.createElement(Transfer, {
-  selected: selected,
-  onChange: onChange,
-  options: [...options.slice(0, 3), { ...options[3],
-    disabled: true
-  }, ...options.slice(4)]
-});
+export const OneDisabled = (_, _ref) => {
+  let {
+    selected,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Transfer, {
+    selected: selected,
+    onChange: onChange,
+    options: [...options.slice(0, 3), { ...options[3],
+      disabled: true
+    }, ...options.slice(4)]
+  });
+};