@dhis2-ui/select 10.10.0-alpha.3 → 10.10.1

package/build/cjs/simple-single-select/__stories__/simple-single-select-server-side-filtering/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomDataProvider", {
+  enumerable: true,
+  get: function () {
+    return _CustomDataProvider.CustomDataProvider;
+  }
+});
+var _CustomDataProvider = require("./CustomDataProvider.js");

package/build/cjs/simple-single-select/simple-single-select.prod.stories.js

@@ -183,6 +183,18 @@ Object.defineProperty(exports, "WithSelectionAndDisabled", {
     return _WithSelectionAndDisabled.WithSelectionAndDisabled;
   }
 });
+Object.defineProperty(exports, "WithServerSideFilteringDemo", {
+  enumerable: true,
+  get: function () {
+    return _WithServerSideFilteringDemo.WithServerSideFilteringDemo;
+  }
+});
+Object.defineProperty(exports, "WithSimpleFilteringDemo", {
+  enumerable: true,
+  get: function () {
+    return _WithSimpleFilteringDemo.WithSimpleFilteringDemo;
+  }
+});
 Object.defineProperty(exports, "WithoutOptionsAndLoading", {
   enumerable: true,
   get: function () {
@@ -229,6 +241,8 @@ var _DefaultPosition = require("./__stories__/DefaultPosition.js");
 var _FlippedPosition = require("./__stories__/FlippedPosition.js");
 var _ShiftedIntoView = require("./__stories__/ShiftedIntoView.js");
 var _WithMultipleSelectsAndScrollableParent = require("./__stories__/WithMultipleSelectsAndScrollableParent.js");
+var _WithSimpleFilteringDemo = require("./__stories__/WithSimpleFilteringDemo.js");
+var _WithServerSideFilteringDemo = require("./__stories__/WithServerSideFilteringDemo.js");
 var _default = exports.default = {
   title: 'Simple Single Select',
   component: _simpleSingleSelect.SimpleSingleSelect

package/build/es/locales/en_US/translations.json

@@ -0,0 +1,9 @@
+{
+    "Clear": "साफ़ करें",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": "",
+    "Search options": "",
+    "{{clearText}}": ""
+}

package/build/es/locales/fr/translations.json

@@ -1,7 +1,7 @@
 {
     "Clear": "Effacer",
     "No data found": "Aucune valeur trouvée",
-    "Type to filter options": "",
+    "Type to filter options": "Tapez pour filtrer les options",
     "Loading options": "Chargement des options",
-    "No options found": ""
+    "No options found": "Pas d'options trouvées"
 }

package/build/es/locales/hi_IN/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "साफ़ करें",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/build/es/locales/index.js

@@ -13,9 +13,11 @@ import ckbTranslations from './ckb/translations.json';
 import csTranslations from './cs/translations.json';
 import daTranslations from './da/translations.json';
 import enTranslations from './en/translations.json';
+import en_USTranslations from './en_US/translations.json';
 import esTranslations from './es/translations.json';
 import es_419Translations from './es_419/translations.json';
 import frTranslations from './fr/translations.json';
+import hi_INTranslations from './hi_IN/translations.json';
 import idTranslations from './id/translations.json';
 import kmTranslations from './km/translations.json';
 import loTranslations from './lo/translations.json';
@@ -45,9 +47,11 @@ i18n.addResources('ckb', namespace, ckbTranslations);
 i18n.addResources('cs', namespace, csTranslations);
 i18n.addResources('da', namespace, daTranslations);
 i18n.addResources('en', namespace, enTranslations);
+i18n.addResources('en_US', namespace, en_USTranslations);
 i18n.addResources('es', namespace, esTranslations);
 i18n.addResources('es_419', namespace, es_419Translations);
 i18n.addResources('fr', namespace, frTranslations);
+i18n.addResources('hi_IN', namespace, hi_INTranslations);
 i18n.addResources('id', namespace, idTranslations);
 i18n.addResources('km', namespace, kmTranslations);
 i18n.addResources('lo', namespace, loTranslations);

package/build/es/locales/zh/translations.json

@@ -3,5 +3,7 @@
     "No data found": "没有发现数据",
     "Type to filter options": "键入过滤选项",
     "Loading options": "加载选项",
-    "No options found": "没有找到选项"
+    "No options found": "没有找到选项",
+    "Search options": "搜索选项",
+    "{{clearText}}": "{{clearText}}"
 }

package/build/es/locales/zh_CN/translations.json

@@ -1,7 +1,7 @@
 {
     "Clear": "清除",
     "No data found": "没有数据被找到",
-    "Type to filter options": "",
+    "Type to filter options": "键入过滤选项",
     "Loading options": "",
     "No options found": ""
 }

package/build/es/simple-single-select/__stories__/WithServerSideFilteringDemo.js

@@ -0,0 +1,228 @@
+import { useDataEngine, useDataQuery } from '@dhis2/app-runtime';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+import { CustomDataProvider } from './simple-single-select-server-side-filtering/index.js';
+function dataElementToOption(_ref) {
+  let {
+    id,
+    displayName
+  } = _ref;
+  return {
+    value: id,
+    label: displayName
+  };
+}
+function useLoadDataElementQuery(options) {
+  return useDataQuery({
+    result: {
+      resource: 'dataElements',
+      id: _ref2 => {
+        let {
+          id
+        } = _ref2;
+        return id;
+      }
+    }
+  }, {
+    ...options,
+    lazy: true
+  });
+}
+function useLoadDataElementsQuery(options) {
+  return useDataQuery({
+    result: {
+      resource: 'dataElements',
+      params: _ref3 => {
+        let {
+          page
+        } = _ref3;
+        return {
+          page,
+          pageSize: 10
+        };
+      }
+    }
+  }, options);
+}
+function useLoadFilteredDataElementsQuery(customOptions) {
+  const engine = useDataEngine();
+  const timeout = useRef(null);
+  const abortController = useRef();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const refetch = useCallback(_ref4 => {
+    let {
+      searchTerm,
+      page
+    } = _ref4;
+    if (timeout.current) {
+      var _abortController$curr;
+      clearTimeout(timeout.current);
+      (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+    }
+    return new Promise((resolve, reject) => {
+      timeout.current = setTimeout(async () => {
+        try {
+          abortController.current = new AbortController();
+          setLoading(true);
+          const query = {
+            result: {
+              resource: 'dataElements',
+              params: {
+                filter: [`displayName:ilike:${searchTerm}`],
+                pageSize: 10,
+                page
+              }
+            }
+          };
+          const options = {
+            ...customOptions,
+            signal: abortController.current.signal
+          };
+          try {
+            const result = await engine.query(query, options);
+            resolve(result);
+          } catch (e) {
+            setError(e);
+          }
+          abortController.current = null;
+          timeout.current = null;
+          setLoading(false);
+        } catch (e) {
+          reject(e);
+        }
+      }, 200);
+    });
+  }, [abortController, engine, customOptions]);
+  return {
+    loading,
+    error,
+    refetch
+  };
+}
+function ServerSideFilteringSelect() {
+  const [initializedSelectedLabel, setInitializedSelectedLabel] = useState(false);
+  const [selectedOption, setSelectedOption] = useState({
+    value: 'fbfJHSPpUQD',
+    label: 'Loading...'
+  });
+  const [loadedOptions, setLoadedOptions] = useState([]);
+  const [defaultPager, setDefaultPager] = useState({
+    page: 0,
+    pageSize: -1,
+    total: -1,
+    pageCount: -1
+  });
+  const [searchTerm, _setSearchTerm] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [filterPager, setFilterPager] = useState({
+    page: 0,
+    pageSize: -1,
+    total: -1,
+    pageCount: -1
+  });
+  const loadDataElementQuery = useLoadDataElementQuery({
+    onComplete: data => {
+      setSelectedOption(dataElementToOption(data.result.dataElements));
+      setInitializedSelectedLabel(true); // Done AFTER setting the option's label!
+    },
+    onError: () => {
+      setSelectedOption(option => ({
+        ...option,
+        label: option.value
+      }));
+      setInitializedSelectedLabel(true); // Done AFTER setting the option's label!
+    }
+  });
+  const loadDataElementsQuery = useLoadDataElementsQuery({
+    onComplete: _ref5 => {
+      let {
+        result
+      } = _ref5;
+      setDefaultPager(result.pager);
+      setLoadedOptions(prevLoadedOptions => [...prevLoadedOptions, ...result.dataElements.map(dataElementToOption)]);
+    },
+    onError: () => {
+      setDefaultPager(prevPager => ({
+        ...prevPager,
+        pageCount: prevPager.page,
+        total: loadedOptions.length
+      }));
+    }
+  });
+  const loadFilteredDataElementsQuery = useLoadFilteredDataElementsQuery({
+    onComplete: _ref6 => {
+      let {
+        result
+      } = _ref6;
+      setFilterPager(result.pager);
+      setFilteredOptions(prevFilteredOptions => {
+        const newOptions = result.dataElements.map(dataElementToOption);
+        return result.pager.page === 1 ? newOptions : [...prevFilteredOptions, ...newOptions];
+      });
+    },
+    onError: () => {
+      setFilterPager(prevPager => ({
+        ...prevPager,
+        pageCount: prevPager.page,
+        total: filteredOptions.length
+      }));
+    }
+  });
+  const loadingOptions = loadDataElementsQuery.loading || loadFilteredDataElementsQuery.loading;
+  const options = searchTerm ? filteredOptions : loadedOptions;
+  const setSearchTerm = useCallback(nextSearchTerm => {
+    _setSearchTerm(nextSearchTerm);
+    if (nextSearchTerm.trim()) {
+      loadFilteredDataElementsQuery.refetch({
+        page: 1,
+        searchTerm: nextSearchTerm
+      });
+    }
+  }, [loadFilteredDataElementsQuery.refetch]);
+  const loadNextPage = useCallback(() => {
+    const pager = searchTerm ? filterPager : defaultPager;
+    if (pager.page === pager.pageCount || loadingOptions) {
+      return;
+    }
+    if (searchTerm) {
+      loadFilteredDataElementsQuery.refetch({
+        page: pager.page + 1,
+        searchTerm
+      });
+    } else {
+      loadDataElementsQuery.refetch({
+        page: pager.page + 1
+      });
+    }
+  }, [filterPager, defaultPager, searchTerm, loadingOptions, loadFilteredDataElementsQuery.refetch, loadDataElementsQuery.refetch]);
+  useEffect(() => {
+    if (selectedOption !== null && selectedOption !== void 0 && selectedOption.value) {
+      loadDataElementQuery.refetch({
+        id: selectedOption.value
+      });
+    } else {
+      setInitializedSelectedLabel(true);
+    }
+  },
+  // Needs to run on initial render only!
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "demo",
+    disabled: !initializedSelectedLabel,
+    loading: loadingOptions,
+    options: options,
+    selected: selectedOption,
+    filterable: true,
+    filterValue: searchTerm,
+    filterPlaceholder: "search for 'ART' or 'ANC'",
+    onFilterChange: setSearchTerm,
+    noMatchText: "No options were found",
+    empty: "Please use the search input to find data elements",
+    onChange: setSelectedOption,
+    onEndReached: loadNextPage
+  });
+}
+const Wrapper = () => /*#__PURE__*/React.createElement(CustomDataProvider, null, /*#__PURE__*/React.createElement(ServerSideFilteringSelect, null));
+export { Wrapper as WithServerSideFilteringDemo };

package/build/es/simple-single-select/__stories__/WithSimpleFilteringDemo.js

@@ -0,0 +1,53 @@
+import React, { useMemo, useState } from 'react';
+import { SimpleSingleSelect } from '../simple-single-select.js';
+const options = [{
+  label: 'No selection',
+  value: ''
+}, {
+  label: 'ANC 1st visit',
+  value: 'anc_1st_visit'
+}, {
+  label: 'ANC 2nd visit',
+  value: 'anc_2nd_visit'
+}, {
+  label: 'ARI treated follow-up',
+  value: 'ari_treated_follow-up'
+}, {
+  label: 'ARI treated with new',
+  value: 'ari_treated_with_new'
+}];
+function filterOptions(options, searchTerm) {
+  // If there is no search term, we want to return all options
+  if (!searchTerm) {
+    return options;
+  }
+
+  // We're transform both the label and the search term to
+  // lower-case strings so the search is case-insensitive
+  return options.filter(_ref => {
+    let {
+      label
+    } = _ref;
+    return label.toLowerCase().startsWith(searchTerm.toLowerCase());
+  });
+}
+export const WithSimpleFilteringDemo = () => {
+  // Handle actual value changes
+  const [selected, setSelected] = useState({
+    value: '',
+    label: 'No selection'
+  });
+
+  // Handle filtering
+  const [searchTerm, setSearchTerm] = useState('');
+  const filteredOptions = useMemo(() => filterOptions(options, searchTerm), [searchTerm]);
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    filterable: true,
+    filterValue: searchTerm,
+    idPrefix: "simple",
+    options: filteredOptions,
+    selected: selected,
+    onChange: setSelected,
+    onFilterChange: setSearchTerm
+  });
+};

package/build/es/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js

@@ -0,0 +1,86 @@
+/* eslint-disable react/prop-types */
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import React from 'react';
+import { dataElements as allDataElements } from './dataElements.js';
+function randomBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+const fakeNetworkDelay = _ref => {
+  let {
+    pager,
+    dataElements,
+    signal
+  } = _ref;
+  const delay = randomBetween(750, 1550);
+  const response = {
+    dataElements
+  };
+  if (pager) {
+    response.pager = pager;
+  }
+  return new Promise((resolve, reject) => {
+    const onAbort = () => {
+      clearTimeout(timeout);
+      reject('Aborted');
+    };
+    signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', onAbort);
+    const timeout = setTimeout(() => {
+      signal === null || signal === void 0 ? void 0 : signal.removeEventListener('abort', onAbort);
+      resolve(response);
+    }, delay);
+  });
+};
+const Provider = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  const data = {
+    dataElements: (_, _ref3, _ref4) => {
+      let {
+        id,
+        params = {}
+      } = _ref3;
+      let {
+        signal
+      } = _ref4;
+      if (id) {
+        const dataElement = allDataElements.find(curDE => id === curDE.id);
+        return fakeNetworkDelay({
+          dataElements: dataElement,
+          signal
+        });
+      }
+
+      // Only this specific filter is supported by this server-mock
+      const searchTerm = params.filter ? params.filter[0].split(':')[2] : '';
+      const filteredDataElements = searchTerm ? allDataElements.filter(_ref5 => {
+        let {
+          displayName
+        } = _ref5;
+        return displayName.startsWith(searchTerm);
+      }) : allDataElements;
+      const page = params.page || 1;
+      const total = filteredDataElements.length;
+      const pageSize = params.pageSize || 50;
+      const pageCount = Math.ceil(total / pageSize);
+      const pager = {
+        page,
+        total,
+        pageSize,
+        pageCount
+      };
+      const start = (page - 1) * pageSize;
+      const end = start + pageSize;
+      const dataElements = filteredDataElements.slice(start, end);
+      return fakeNetworkDelay({
+        pager,
+        dataElements,
+        signal
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: data
+  }, children);
+};
+export { Provider as CustomDataProvider };