@dhis2-ui/transfer 9.10.3 → 9.11.1-beta.1

package/build/es/{transfer.stories.js → transfer.prod.stories.js}

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select';
 import { Tab, TabBar } from '@dhis2-ui/tab';
 import PropTypes from 'prop-types';
@@ -7,7 +6,37 @@ 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 = "\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 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 options = [{
   label: 'ANC 1st visit',
   value: 'anc_1st_visit'
@@ -75,6 +104,7 @@ const options = [{
   label: 'ART entry point: No PMTCT',
   value: 'art_entry_point:_no_pmtct'
 }];
+
 /**
  * Default args are needed because storybook currently struggles with
  * functions as default props: they are sent to the component as strings when
@@ -83,7 +113,6 @@ const options = [{
  *
  * https://github.com/storybookjs/storybook/issues/12455#issuecomment-702763930
  */
-
 export default {
   title: 'Transfer',
   component: Transfer,
@@ -99,26 +128,23 @@ export default {
     }
   },
   // Default args:
-  args: { ...Transfer.defaultProps,
+  args: {
+    ...Transfer.defaultProps,
     options: options
   }
 };
-
 const StatefulTemplate = _ref => {
   let {
     initiallySelected,
     ...args
   } = _ref;
   const [selected, setSelected] = useState(initiallySelected);
-
   const onChange = payload => setSelected(payload.selected);
-
   return /*#__PURE__*/React.createElement(Transfer, _extends({}, args, {
     selected: selected,
     onChange: onChange
   }));
 };
-
 StatefulTemplate.defaultProps = {
   initiallySelected: []
 };
@@ -171,7 +197,6 @@ FilteredPlaceholder.args = {
   filterLabel: 'Filter with placeholder',
   filterPlaceholder: 'Search'
 };
-
 const renderOption = _ref3 => {
   let {
     label,
@@ -191,24 +216,29 @@ const renderOption = _ref3 => {
     }
   }, "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 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 = _ref4 => {
   let {
     initiallySelected,
     ...args
   } = _ref4;
   const [selected, setSelected] = useState(initiallySelected);
-
   const onChange = payload => setSelected(payload.selected);
-
   return /*#__PURE__*/React.createElement(Transfer, _extends({}, args, {
     selected: selected,
     onChange: onChange
   }));
 };
-
 StatefulTemplateCustomRenderOption.defaultProps = {
   initiallySelected: []
 };
@@ -236,7 +266,6 @@ IndividualCustomOption.args = {
     if (option.value === options[0].value) {
       return renderOption(option);
     }
-
     return /*#__PURE__*/React.createElement(TransferOption, option);
   }
 };
@@ -291,18 +320,18 @@ DifferentWidths.args = {
   optionsWidth: '500px',
   selectedWidth: '240px'
 };
-
 const createCustomFilteringInHeader = hideFilterInput => {
-  const relativePeriods = options.slice(0, 10).map((option, index) => ({ ...option,
+  const relativePeriods = options.slice(0, 10).map((option, index) => ({
+    ...option,
     relativePeriod: true,
     year: index < 5 ? '2020' : '2019'
   }));
-  const fixedPeriods = options.slice(10, 20).map((option, index) => ({ ...option,
+  const fixedPeriods = options.slice(10, 20).map((option, index) => ({
+    ...option,
     relativePeriod: false,
     year: index < 5 ? '2020' : '2019'
   }));
   const allOptions = [...relativePeriods, ...fixedPeriods];
-
   const Header = _ref7 => {
     let {
       onClick,
@@ -339,20 +368,16 @@ const createCustomFilteringInHeader = hideFilterInput => {
   };
   /* eslint-enable react/prop-types */
 
-
   const CustomTransfer = props => {
     const [filter, setFilter] = useState('');
     const [relativePeriod, setRelativePeriod] = useState(true);
     const [year, setYear] = useState('2020');
-
     const filterCallback = (options, filter) => {
       const optionsWithYear = options.filter(option => option.year === year);
       const optionsWithPeriod = optionsWithYear.filter(option => option.relativePeriod === relativePeriod);
-
       if (filter === '') {
         return optionsWithPeriod;
       }
-
       return optionsWithPeriod.filter(_ref8 => {
         let {
           label
@@ -360,7 +385,6 @@ const createCustomFilteringInHeader = hideFilterInput => {
         return label.indexOf(filter) !== -1;
       });
     };
-
     const header = /*#__PURE__*/React.createElement(Header, {
       relativePeriod: relativePeriod,
       selectedYear: year,
@@ -396,67 +420,62 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterPlaceholder: "Search"
     }));
   };
-
   return _ref12 => {
     let {
       initiallySelected,
       ...args
     } = _ref12;
     const [selected, setSelected] = useState(initiallySelected);
-
     const onChange = payload => setSelected(payload.selected);
-
     return /*#__PURE__*/React.createElement(CustomTransfer, _extends({}, args, {
       selected: selected,
       onChange: onChange
     }));
   };
 };
-
 export const CustomFilteringWithFilterInput = createCustomFilteringInHeader(false);
 export const CustomFilteringWithoutFilterInput = createCustomFilteringInHeader(true);
 const optionsPool = options;
 const pageSize = 5;
+
 /*
  * The page size is: 5
  * To keep the code as small as possible, handling selecting items is not
    included
  */
-
 export const InfiniteLoading = args => {
   useEffect(() => {
     console.clear();
-  }, []); // state for whether the next page's options are being loaded
-
-  const [loading, setLoading] = useState(false); // captures the current page
-
-  const [page, setPage] = useState(0); // all options (incl. available AND selected options)
-
-  const [options, setOptions] = useState([]); // selected options
-
-  const [selected] = useState( // second page is already selected
+  }, []);
+
+  // state for whether the next page's options are being loaded
+  const [loading, setLoading] = useState(false);
+  // captures the current page
+  const [page, setPage] = useState(0);
+  // all options (incl. available AND selected options)
+  const [options, setOptions] = useState([]);
+  // selected options
+  const [selected] = useState(
+  // second page is already selected
   optionsPool.slice(pageSize, pageSize * 2).map(_ref13 => {
     let {
       value
     } = _ref13;
     return value;
   }));
-
   const onEndReached = () => {
     // do nothing when loading already
     if (loading) {
       return;
     }
-
     setPage(page + 1);
-  }; // fake fetch request
-
+  };
 
+  // fake fetch request
   const fetchOptions = nextPage => new Promise(resolve => setTimeout(() => {
     const nextOptions = optionsPool.slice(options.length, nextPage * pageSize);
     resolve(nextOptions);
   }, 2000));
-
   const loadNextOptions = async () => {
     setLoading(true);
     const nextOptions = await fetchOptions(page);
@@ -468,12 +487,10 @@ export const InfiniteLoading = args => {
       } = nextOption;
       return selected.includes(value);
     });
-
     if (allAlreadySelected) {
       onEndReached();
     }
   };
-
   useEffect(() => {
     // prevent initial call
     if (page > 0) {
@@ -484,9 +501,7 @@ export const InfiniteLoading = args => {
     loading: loading,
     options: options,
     selected: selected,
-    onChange: () => null
-    /* noop */
-    ,
+    onChange: () => null /* noop */,
     onEndReached: onEndReached
   }));
 };

package/build/es/use-resize-counter.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 /*
  * The initial call is irrelevant as there has been
  * no resize yet that we want to react to
@@ -7,7 +8,6 @@ import { useEffect, useState } from 'react';
  * @param {Element} element
  * @returns {number}
  */
-
 export const useResizeCounter = element => {
   const [counter, setCounter] = useState(-1);
   useEffect(() => {
@@ -17,7 +17,6 @@ export const useResizeCounter = element => {
     // it's executed as the callback passed to `ResizeObserver`
     // will be executed on construction
     let internalCounter = counter;
-
     if (element) {
       const observer = new ResizeObserver(() => {
         ++internalCounter;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -22,23 +22,23 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.10.3",
-        "@dhis2-ui/field": "9.10.3",
-        "@dhis2-ui/input": "9.10.3",
-        "@dhis2-ui/intersection-detector": "9.10.3",
-        "@dhis2-ui/loader": "9.10.3",
-        "@dhis2/ui-constants": "9.10.3",
+        "@dhis2-ui/button": "9.11.1-beta.1",
+        "@dhis2-ui/field": "9.11.1-beta.1",
+        "@dhis2-ui/input": "9.11.1-beta.1",
+        "@dhis2-ui/intersection-detector": "9.11.1-beta.1",
+        "@dhis2-ui/loader": "9.11.1-beta.1",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },