@k-int/stripes-kint-components 1.6.0 → 1.7.0

package/src/index.js

@@ -16,6 +16,7 @@ export {
 export {
   generateKiwtQuery,
   generateKiwtQueryParams,
+  refdataOptions,
   selectorSafe
 } from './lib/utils';
 

package/src/lib/ActionList/ActionList.js

@@ -12,6 +12,7 @@ const propTypes = {
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
@@ -21,6 +22,7 @@ const ActionList = ({
   actionCalls = {},
   columnMapping,
   contentData,
+  creatableFields = {},
   editableFields = {},
   visibleFields
 }) => {
@@ -32,13 +34,14 @@ const ActionList = ({
       onSubmit={actionCalls.edit}
       subscription={{ contentData: true }}
     >
-      {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
+      {() => (
+        <form onSubmit={e => { e.preventDefault(); }}>
           <FieldArray
             actionAssigner={actionAssigner}
             actionCalls={actionCalls}
             columnMapping={columnMapping}
             component={ActionListFieldArray}
+            creatableFields={creatableFields}
             editableFields={editableFields}
             name="contentData"
             visibleFields={visibleFields}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -15,6 +15,7 @@ const propTypes = {
   actionAssigner: PropTypes.func,
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
@@ -24,6 +25,7 @@ const ActionListFieldArray = ({
   actionAssigner,
   actionCalls,
   columnMapping,
+  creatableFields,
   editableFields,
   fields,
   visibleFields
@@ -54,7 +56,7 @@ const ActionListFieldArray = ({
   };
 
   const handleCreate = (index) => {
-    const rowData = fields.value[index];
+    const { actionListActions: _a, ...rowData } = fields.value[index];
     actionCalls.create(rowData);
   };
 
@@ -105,8 +107,13 @@ const ActionListFieldArray = ({
             key={`cancel[${data.rowIndex}]`}
             data-type-button="cancel"
             onClick={() => {
-              change(fieldName, get(initialValues, fieldName));
-              toggleEditing(data.id);
+              if (!data.id && editing === 'NEW_ROW') {
+                fields.remove(data.rowIndex);
+                toggleEditing('NEW_ROW');
+              } else {
+                change(fieldName, get(initialValues, fieldName));
+                toggleEditing(data.id);
+              }
             }}
           >
             <FormattedMessage id="stripes-kint-components.actionList.cancel" />
@@ -153,7 +160,7 @@ const ActionListFieldArray = ({
 
   const formatContent = () => {
     return (
-      fields.map(fieldName => {
+      fields.map((fieldName, fieldIndex) => {
         // Fetch the content from the field Values
         const cd = get(values, fieldName);
         cd.actionListActions = actionAssigner(cd);
@@ -170,17 +177,22 @@ const ActionListFieldArray = ({
           */
           for (const key of visibleFields) {
             const editFunction = editableFields[key] ?? (() => true);
+            const createFunction = creatableFields[key] ?? (() => true);
             /*
-              Next check if this is a new row, if so we should edit it in a Field
-              If it does, then we check if the property has an editableField function,
-              if it does we run it with the data. If not then we just return the Field
+              Next check if this is a new row, if so we should run the createableField function with the data.
+              If it is not a new row, then we run the editableField function with the data,
+              and it should return true/false
+
+              For both checks
+              true => Field, false => display value
             */
             if (
-                !cd.id ||
+                (!cd.id && createFunction(cd)) ||
                 (editFunction(cd))
             ) {
               returnObj[key] =
                 <Field
+                  autofocus={fieldIndex === 0}
                   component={TextField}
                   name={`${fieldName}.${key}`}
                 />;

package/src/lib/ActionList/README.md

@@ -61,5 +61,6 @@ actionAssigner | function | A function which will be passed the entire row objec
 actionCalls | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |
+creatableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not. | | ✕ |
 editableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. | | ✕ |
 visibleFields | array<String> | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList | | ✓ |

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { useMutateRefdataValue, useRefdata } from '../hooks';
+
 import ActionList from '../ActionList';
 
 const propTypes = {
@@ -21,18 +22,19 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
   });
 
   const [contentData, setContentData] = useState([]);
+  const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
 
   useEffect(() => {
     if (!isRefdataLoading) {
-      setContentData(refdata?.values ?? []);
+      setContentData(refdata?.values?.sort(sortByLabel) ?? []);
     }
   }, [isRefdataLoading, refdata]);
 
   // Edit and Create will use the same PUT mutation
   const { delete: deleteRefdataValue, put: editRefdataValue } = useMutateRefdataValue({
     afterQueryCalls: {
-      delete: json => setContentData(json?.values ?? []),
-      put: json => setContentData(json?.values ?? [])
+      delete: json => setContentData(json?.values?.sort(sortByLabel) ?? []),
+      put: json => setContentData(json?.values?.sort(sortByLabel) ?? [])
     },
     endpoint: refdataEndpoint,
     id: refdata?.id,
@@ -78,8 +80,11 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
         value: <FormattedMessage id="stripes-kint-components.editableRefdataList.value" />
       }}
       contentData={contentData}
+      creatableFields={{
+        value: () => false
+      }}
       editableFields={{
-        value: () => !refdata?.internal,
+        value: () => false
       }}
       visibleFields={['label', 'value']}
       // TODO add a field validator/fieldType as options?

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -31,6 +31,7 @@ import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 const SASQLookupComponent = ({
   children,
   fetchParameters = {},
+  FilterPaneHeaderComponent = () => null,
   FilterComponent = () => null,
   history,
   id,
@@ -185,6 +186,7 @@ const SASQLookupComponent = ({
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
                 >
                   <form onSubmit={onSubmitSearch}>
+                    <FilterPaneHeaderComponent />
                     {!noSearchField &&
                       <>
                         <SearchField
@@ -262,6 +264,10 @@ SASQLookupComponent.propTypes = {
     PropTypes.func,
     PropTypes.node
   ]),
+  FilterPaneHeaderComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
   history: PropTypes.object,
   id: PropTypes.string.isRequired,
   location: PropTypes.object,

package/src/lib/hooks/useRefdata.js

@@ -4,20 +4,14 @@ import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
-import { generateKiwtQuery } from '../utils';
+import { generateKiwtQuery, refdataOptions } from '../utils';
 
 const useRefdata = ({
   endpoint,
   desc,
+  options = refdataOptions,
   queryParams,
   returnQueryObject = false,
-  options = {
-    filterKeys: {
-      DescKey: 'desc'
-    },
-    stats: false,
-    max: 100
-  }
 }) => {
   const ky = useOkapiKy();
 

package/src/lib/utils/index.js

@@ -4,6 +4,8 @@ export { default as selectorSafe } from './selectorSafe';
 
 export { default as buildUrl } from './buildUrl';
 
+export { default as refdataOptions } from './refdataOptions';
+
 // Settings utils
 export { default as renderHelpText } from './renderHelpText';
 export { default as sortByLabel } from './sortByLabel';

package/src/lib/utils/refdataOptions.js

@@ -0,0 +1,7 @@
+export default {
+  filterKeys: {
+    DescKey: 'desc'
+  },
+  stats: false,
+  max: 100
+};

package/artifacts/coverage-jest/lcov-report/base.css

@@ -1,224 +0,0 @@
-body, html {
-  margin:0; padding: 0;
-  height: 100%;
-}
-body {
-    font-family: Helvetica Neue, Helvetica, Arial;
-    font-size: 14px;
-    color:#333;
-}
-.small { font-size: 12px; }
-*, *:after, *:before {
-  -webkit-box-sizing:border-box;
-     -moz-box-sizing:border-box;
-          box-sizing:border-box;
-  }
-h1 { font-size: 20px; margin: 0;}
-h2 { font-size: 14px; }
-pre {
-    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    margin: 0;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size:  2;
-    tab-size: 2;
-}
-a { color:#0074D9; text-decoration:none; }
-a:hover { text-decoration:underline; }
-.strong { font-weight: bold; }
-.space-top1 { padding: 10px 0 0 0; }
-.pad2y { padding: 20px 0; }
-.pad1y { padding: 10px 0; }
-.pad2x { padding: 0 20px; }
-.pad2 { padding: 20px; }
-.pad1 { padding: 10px; }
-.space-left2 { padding-left:55px; }
-.space-right2 { padding-right:20px; }
-.center { text-align:center; }
-.clearfix { display:block; }
-.clearfix:after {
-  content:'';
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
-  }
-.fl { float: left; }
-@media only screen and (max-width:640px) {
-  .col3 { width:100%; max-width:100%; }
-  .hide-mobile { display:none!important; }
-}
-
-.quiet {
-  color: #7f7f7f;
-  color: rgba(0,0,0,0.5);
-}
-.quiet a { opacity: 0.7; }
-
-.fraction {
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 10px;
-  color: #555;
-  background: #E8E8E8;
-  padding: 4px 5px;
-  border-radius: 3px;
-  vertical-align: middle;
-}
-
-div.path a:link, div.path a:visited { color: #333; }
-table.coverage {
-  border-collapse: collapse;
-  margin: 10px 0 0 0;
-  padding: 0;
-}
-
-table.coverage td {
-  margin: 0;
-  padding: 0;
-  vertical-align: top;
-}
-table.coverage td.line-count {
-    text-align: right;
-    padding: 0 5px 0 20px;
-}
-table.coverage td.line-coverage {
-    text-align: right;
-    padding-right: 10px;
-    min-width:20px;
-}
-
-table.coverage td span.cline-any {
-    display: inline-block;
-    padding: 0 5px;
-    width: 100%;
-}
-.missing-if-branch {
-    display: inline-block;
-    margin-right: 5px;
-    border-radius: 3px;
-    position: relative;
-    padding: 0 4px;
-    background: #333;
-    color: yellow;
-}
-
-.skip-if-branch {
-    display: none;
-    margin-right: 10px;
-    position: relative;
-    padding: 0 4px;
-    background: #ccc;
-    color: white;
-}
-.missing-if-branch .typ, .skip-if-branch .typ {
-    color: inherit !important;
-}
-.coverage-summary {
-  border-collapse: collapse;
-  width: 100%;
-}
-.coverage-summary tr { border-bottom: 1px solid #bbb; }
-.keyline-all { border: 1px solid #ddd; }
-.coverage-summary td, .coverage-summary th { padding: 10px; }
-.coverage-summary tbody { border: 1px solid #bbb; }
-.coverage-summary td { border-right: 1px solid #bbb; }
-.coverage-summary td:last-child { border-right: none; }
-.coverage-summary th {
-  text-align: left;
-  font-weight: normal;
-  white-space: nowrap;
-}
-.coverage-summary th.file { border-right: none !important; }
-.coverage-summary th.pct { }
-.coverage-summary th.pic,
-.coverage-summary th.abs,
-.coverage-summary td.pct,
-.coverage-summary td.abs { text-align: right; }
-.coverage-summary td.file { white-space: nowrap;  }
-.coverage-summary td.pic { min-width: 120px !important;  }
-.coverage-summary tfoot td { }
-
-.coverage-summary .sorter {
-    height: 10px;
-    width: 7px;
-    display: inline-block;
-    margin-left: 0.5em;
-    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
-}
-.coverage-summary .sorted .sorter {
-    background-position: 0 -20px;
-}
-.coverage-summary .sorted-desc .sorter {
-    background-position: 0 -10px;
-}
-.status-line {  height: 10px; }
-/* yellow */
-.cbranch-no { background: yellow !important; color: #111; }
-/* dark red */
-.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
-.low .chart { border:1px solid #C21F39 }
-.highlighted,
-.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
-  background: #C21F39 !important;
-}
-/* medium red */
-.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
-/* light red */
-.low, .cline-no { background:#FCE1E5 }
-/* light green */
-.high, .cline-yes { background:rgb(230,245,208) }
-/* medium green */
-.cstat-yes { background:rgb(161,215,106) }
-/* dark green */
-.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
-.high .chart { border:1px solid rgb(77,146,33) }
-/* dark yellow (gold) */
-.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
-.medium .chart { border:1px solid #f9cd0b; }
-/* light yellow */
-.medium { background: #fff4c2; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
-span.cline-neutral { background: #eaeaea; }
-
-.coverage-summary td.empty {
-    opacity: .5;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    line-height: 1;
-    color: #888;
-}
-
-.cover-fill, .cover-empty {
-  display:inline-block;
-  height: 12px;
-}
-.chart {
-  line-height: 0;
-}
-.cover-empty {
-    background: white;
-}
-.cover-full {
-    border-right: none !important;
-}
-pre.prettyprint {
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.com { color: #999 !important; }
-.ignore-none { color: #999; font-weight: normal; }
-
-.wrapper {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -48px;
-}
-.footer, .push {
-  height: 48px;
-}

package/artifacts/coverage-jest/lcov-report/block-navigation.js

@@ -1,87 +0,0 @@
-/* eslint-disable */
-var jumpToCode = (function init() {
-    // Classes of code we would like to highlight in the file view
-    var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
-
-    // Elements to highlight in the file listing view
-    var fileListingElements = ['td.pct.low'];
-
-    // We don't want to select elements that are direct descendants of another match
-    var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
-
-    // Selecter that finds elements on the page to which we can jump
-    var selector =
-        fileListingElements.join(', ') +
-        ', ' +
-        notSelector +
-        missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
-
-    // The NodeList of matching elements
-    var missingCoverageElements = document.querySelectorAll(selector);
-
-    var currentIndex;
-
-    function toggleClass(index) {
-        missingCoverageElements
-            .item(currentIndex)
-            .classList.remove('highlighted');
-        missingCoverageElements.item(index).classList.add('highlighted');
-    }
-
-    function makeCurrent(index) {
-        toggleClass(index);
-        currentIndex = index;
-        missingCoverageElements.item(index).scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            inline: 'center'
-        });
-    }
-
-    function goToPrevious() {
-        var nextIndex = 0;
-        if (typeof currentIndex !== 'number' || currentIndex === 0) {
-            nextIndex = missingCoverageElements.length - 1;
-        } else if (missingCoverageElements.length > 1) {
-            nextIndex = currentIndex - 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    function goToNext() {
-        var nextIndex = 0;
-
-        if (
-            typeof currentIndex === 'number' &&
-            currentIndex < missingCoverageElements.length - 1
-        ) {
-            nextIndex = currentIndex + 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    return function jump(event) {
-        if (
-            document.getElementById('fileSearch') === document.activeElement &&
-            document.activeElement != null
-        ) {
-            // if we're currently focused on the search input, we don't want to navigate
-            return;
-        }
-
-        switch (event.which) {
-            case 78: // n
-            case 74: // j
-                goToNext();
-                break;
-            case 66: // b
-            case 75: // k
-            case 80: // p
-                goToPrevious();
-                break;
-        }
-    };
-})();
-window.addEventListener('keydown', jumpToCode);