@k-int/stripes-kint-components 5.35.0 → 5.36.0

package/src/lib/Files/FileView/FileView.js

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+
+import { Col, Icon, IconButton, KeyValue, Row, Tooltip } from '@folio/stripes/components';
+
+import { useKintIntl } from '../../hooks';
+
+import css from '../../../../styles/FileView.css';
+
+const FileView = ({
+  canDownload,
+  file,
+  onDownload,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
+  onDelete,
+}) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  if (!file) return null;
+
+  return (
+    <div className={css.fileViewContainer}>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              kintIntl.formatKintMessage({
+                id: 'files.filename',
+                overrideValue: labelOverrides.filename,
+              })
+            }
+          >
+            {canDownload ?
+              /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+              <a
+                data-test-fileview-name
+                href="#"
+                onClick={(e) => {
+                  onDownload(file);
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                rel="noopener noreferrer"
+                style={{ wordBreak: 'break-all' }}
+                target="_blank"
+              >
+                {file.name}
+                <Icon icon="external-link" />
+              </a> :
+              <div data-test-fileview-name>
+                {file.name}
+              </div>
+            }
+          </KeyValue>
+        </Col>
+        <Col xs={4}>
+          <KeyValue
+            label={
+              kintIntl.formatKintMessage({
+                id: 'files.uploaded',
+                overrideValue: labelOverrides.uploaded,
+              })
+            }
+            value={(
+              <span data-test-fileview-uploaded>
+                <div>{kintIntl.formatDate(file.modified)}</div>
+                <div>{kintIntl.formatTime(file.modified)}</div>
+              </span>
+            )}
+          />
+        </Col>
+        <Col xs={2}>
+          <Tooltip
+            id={`file-${file?.id}-delete-button`}
+            text={
+              kintIntl.formatKintMessage({
+                id: 'files.remove',
+                overrideValue: labelOverrides.remove,
+              })
+            }
+          >
+            {({ ariaIds, ref }) => (
+              <IconButton
+                ref={ref}
+                aria-labelledby={ariaIds.text}
+                data-test-fileview-delete
+                icon="trash"
+                onClick={e => {
+                  e.stopPropagation();
+                  onDelete(file);
+                }}
+              />
+            )}
+          </Tooltip>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+FileView.propTypes = {
+  file: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.shape({
+    filename: PropTypes.string,
+    remove: PropTypes.string,
+    uploaded: PropTypes.string,
+  })
+};
+
+export default FileView;

package/src/lib/Files/FileView/index.js

@@ -0,0 +1 @@
+export { default } from './FileView';

package/src/lib/Files/index.js

@@ -0,0 +1,3 @@
+export { default as FileView } from './FileView';
+export { default as FileUploader } from './FileUploader';
+export { default as useFileHandlers } from './useFileHandlers';

package/src/lib/Files/useFileHandlers.js

@@ -0,0 +1,128 @@
+import { useCallback } from 'react';
+import { useMutation, useQuery } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+import { downloadBlob } from '../utils';
+
+// This is copied and adapted from stripes-erm-components
+
+const useFileHandlers = ({
+  // When fetchFile is true, will AUTOMATICALLY fetch not only
+  // fileMetadata but ALSO file itself
+  fetchFile = false,
+  /* fileEndpoint can be a string or
+   * {
+   *   download: string | function,
+   *   metadata: string | function
+   *   upload: string | function,
+   * }
+   */
+  fileEndpoint,
+  fileField = 'upload',
+  fileMappings = {}, // A mapping from file -> formData field,
+  fileId // An OPTIONAL id for a file which results in fetching and returning file metadata
+}) => {
+  const ky = useOkapiKy();
+
+  // A method which resolves the endpoint to hit based on fileEndpoint
+  const resolveEndpoint = useCallback((type, file) => {
+    if (typeof fileEndpoint === 'string') {
+      // We have a base endpoint, configure default behaviour
+      switch (type) {
+        case 'upload':
+          return fileEndpoint;
+        case 'download':
+          return `${fileEndpoint}/${file?.id}/raw`;
+        case 'metadata':
+          return `${fileEndpoint}/${file.id}`;
+        default:
+          throw new TypeError(`Unsupported endpoint type ${type}`);
+      }
+    }
+
+    if (typeof fileEndpoint !== 'object') {
+      throw new TypeError(`Unsupported fileEndpoint type ${typeof fileEndpoint}`);
+    }
+    const config = fileEndpoint[type];
+
+    if (config === null) {
+      throw new TypeError(`Unsupported fileEndpoint[${type}] is not configured`);
+    }
+
+    // Finally we have configured behaviour
+    switch (typeof config) {
+      case 'function':
+        return config(file);
+      case 'string':
+        return config;
+      default:
+        // If we have hit the end then we've done something wrong
+        throw new TypeError(`Unsupported configuration for fileEndpoint[${type}]: ${typeof config}`);
+    }
+  }, [fileEndpoint]);
+
+  const { mutateAsync: handleUploadFile } = useMutation(
+    [fileEndpoint, 'handleUpload'],
+    (file) => {
+      const formData = new FormData();
+      formData.append(fileField, file);
+
+      Object.entries(fileMappings).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+          formData.append(key, value);
+        } else if (typeof value === 'function') {
+          formData.append(key, value(file));
+        } else {
+          throw new TypeError('Invalid fileMapping: ' + key);
+        }
+      });
+
+      return ky.post(resolveEndpoint('upload', file), { body: formData }).json();
+    }
+  );
+
+  const {
+    data: fileBlob,
+    isLoading: isFileLoading,
+    refetch: refetchFile
+  } = useQuery({
+    queryKey: [fileEndpoint, 'content', fileId],
+    queryFn: () => ky.get(resolveEndpoint('download', { id: fileId })).blob(),
+    enabled: !!fileId && typeof fileId === 'string' && fetchFile,
+    staleTime: Infinity, // Assume the file won't change underneath us.
+  });
+
+
+  // We are declaratively fetching a file via a function, useMutation is more convenient here
+  // NOTE even if fileBlob already exists this will refetch it for download
+  const { mutate: getFile, mutateAsync: getFileAsync } = useMutation(
+    [fileEndpoint, 'getFile'],
+    (file) => ky.get(resolveEndpoint('download', file)).blob()
+  );
+
+  const handleDownloadFile = useCallback((fileMetadata) => {
+    return getFileAsync(fileMetadata)
+      /* In this instance we want the file name back as it was handed in, whitespace and all */
+      .then(downloadBlob(fileMetadata.name, { processWhitespace: false }));
+  }, [getFileAsync]);
+
+  const { data: fileMetadata, isLoading: isFileMetadataLoading } = useQuery({
+    queryKey: [fileEndpoint, 'metadata', fileId],
+    queryFn: () => ky.get(resolveEndpoint('metadata', { id: fileId })).json(),
+    enabled: !!fileId && typeof fileId === 'string',
+  });
+
+  return {
+    file: fileBlob,
+    fileMetadata,
+    getFile,
+    getFileAsync,
+    handleDownloadFile,
+    handleUploadFile,
+    isFileLoading,
+    isFileMetadataLoading,
+    refetchFile
+  };
+};
+
+export default useFileHandlers;

package/src/lib/utils/downloadBlob.js

@@ -0,0 +1,42 @@
+/*
+ * The options block allows for a very customisable approach to naming files
+ * and applying extensions. The default options are chosen in order to keep default
+ * behaviour found in other apps, but this can now be changed use case by use case.
+ *
+ * This is copied from stripes-erm-components
+ */
+
+const downloadBlob = (
+  name,
+  {
+    fileExt = '',
+    spaceDelimiter = '_',
+    dotDelimiter = '',
+    processWhitespace = true,
+    processDots = false
+  } = {}
+) => {
+  let downloadName = name;
+  if (processWhitespace) {
+    downloadName = downloadName.replaceAll(/\s/g, spaceDelimiter);
+  }
+
+  if (processDots) {
+    downloadName = downloadName.replaceAll(/\./g, dotDelimiter);
+  }
+
+  if (fileExt.length) {
+    downloadName = `${downloadName}.${fileExt}`;
+  }
+
+  return blob => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = downloadName;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+};
+
+export default downloadBlob;

package/src/lib/utils/index.js

@@ -33,3 +33,4 @@ export { default as parseErrorResponse } from './parseErrorResponse';
 
 export { default as modConfigEntriesQueryKey } from './modConfigEntriesQueryKey';
 export { default as parseModConfigEntry } from './parseModConfigEntry';
+export { default as downloadBlob } from './downloadBlob';

package/styles/FileUploader.css

@@ -0,0 +1,34 @@
+@import "@folio/stripes-components/lib/variables.css";
+
+.upload {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 150px;
+  padding: var(--gutter);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius);
+  background-color: var(--color-fill);
+}
+
+.uploadTitle {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.activeUpload {
+  background-color: var(--color-fill-current);
+  color: var(--bg);
+  border-style: dashed;
+}
+
+.activeUploadTitle {
+  font-size: var(--font-size-large);
+}
+
+.children {
+  width: 100%;
+  display: flex;
+}

package/styles/FileView.css

@@ -0,0 +1,8 @@
+@import '@folio/stripes-components/lib/variables.css';
+
+.fileViewContainer {
+  width: 100%;
+  border-top: 1px solid var(--color-border);
+  padding: var(--gutter-static-one-third) var(--gutter);
+  margin-top: var(--gutter);
+}