@pareto-engineering/design-system 4.2.3 → 4.3.2

package/src/ui/f/fields/FileUpload/common/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { FilePreview } from './FilePreview'
+export { Preview } from './Preview'

package/src/ui/f/fields/FileUpload/index.js

@@ -1,3 +1,3 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 export { default as FileUpload } from './FileUpload'
-export { fileUploadOptions } from './fileUploadOptions'
+export { fileUploadOptions, getFileType, getFileTypeFromUrl } from './utils'

package/src/ui/f/fields/FileUpload/{fileUploadOptions.js → utils.js}

@@ -30,3 +30,23 @@ export const fileUploadOptions = [
     label:'Audio',
   },
 ]
+
+export const getFileType = (file) => {
+  const mimeType = file?.type
+  const extension = file?.name?.split('.').pop().toLowerCase()
+  const fileType = fileUploadOptions.find(
+    (option) => option.value.includes(mimeType) || option.value.includes(extension))
+
+  return fileType ? fileType.key : 'unknown'
+}
+
+export const getFileTypeFromUrl = (url) => {
+  if (!url) {
+    return 'BROKEN'
+  }
+  const urlWithoutParams = url.split('?')[0]
+  const extension = urlWithoutParams.split('.').pop().toLowerCase()
+  const fileType = fileUploadOptions.find((option) => option.value.includes(extension))
+
+  return fileType ? fileType.key : 'UNKNOWN'
+}

package/src/ui/f/fields/index.js

@@ -9,4 +9,9 @@ export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
 export { LinkInput } from './LinkInput'
 export { EditorInput } from './EditorInput'
-export { FileUpload, fileUploadOptions } from './FileUpload'
+export {
+  FileUpload,
+  fileUploadOptions,
+  getFileType,
+  getFileTypeFromUrl,
+} from './FileUpload'

package/src/ui/g/FormBuilder/FormBuilder.jsx

@@ -33,6 +33,8 @@ const FormBuilder = ({
   onRendererFormSave,
   onBuilderValidate,
   initialBuilderValues,
+  fileUploadStatus,
+  handleFileDelete,
   // ...otherProps
 }) => (
   <div
@@ -65,6 +67,8 @@ const FormBuilder = ({
         readOnly={readOnly}
         shouldSubmit={shouldSubmit}
         onError={onRendererError}
+        fileUploadStatus={fileUploadStatus}
+        handleFileDelete={handleFileDelete}
       />
     )}
   </div>
@@ -119,6 +123,11 @@ FormBuilder.propTypes = {
    * Whether the form builder in renderer mode should submit the form values itself
    */
   shouldSubmit:PropTypes.bool,
+
+  /**
+   * The upload status of files if any
+   */
+  fileUploadStatus:PropTypes.objectOf(PropTypes.string),
 }
 
 FormBuilder.defaultProps = {

package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -62,6 +62,8 @@ const Renderer = ({
   onSave,
   onError,
   shouldSubmit,
+  fileUploadStatus,
+  handleFileDelete,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
@@ -154,6 +156,8 @@ const Renderer = ({
                   {...section}
                   readOnly={readOnly}
                   setUpdatedFormData={setUpdatedFormData}
+                  fileUploadStatus={fileUploadStatus}
+                  handleFileDelete={handleFileDelete}
                 />
                 )
               ))}

package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx

@@ -27,6 +27,8 @@ const Section = ({
   description,
   inputs,
   readOnly,
+  fileUploadStatus,
+  handleFileDelete,
   // ...otherProps
 }) => (
   <div
@@ -52,6 +54,8 @@ const Section = ({
         key={input.name}
         {...input}
         disabled={readOnly}
+        uploadStatus={fileUploadStatus}
+        handleFileDelete={handleFileDelete}
       />
     ))}
   </div>

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -27553,6 +27553,49 @@ exports[`Storyshots f/fields/FileUpload Multiple 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/FileUpload Preview 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base file-preview"
+  >
+    <div
+      className="identity"
+    >
+      <span
+        className="type unknown"
+      >
+        UNKNOWN
+      </span>
+      <span
+        className="name"
+        title="test.tar"
+      >
+        test.tar
+      </span>
+      <button
+        className="base button x-ui-icons modifierCompact modifierSimple"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="modifierUnderlined"
+        >
+          <span
+            className="icon"
+          >
+            9
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/FileUpload With Limited Count 1`] = `
 <form
   action="#"
@@ -32908,6 +32951,28 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
             <p>
               The file upload 
             </p>
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="section_0_input_0"
+            >
+              <input
+                accept=".mp4,.ogg,.webm,video/mp4,video/ogg,video/webm,.pdf,application/pdf"
+                className="file"
+                disabled={true}
+                id="section_0_input_0"
+                multiple={true}
+                onChange={[Function]}
+                type="file"
+              />
+              <span
+                className="ai-icon"
+              >
+                U
+              </span>
+              <span>
+                Attach file
+              </span>
+            </label>
           </div>
         </div>
         <div

package/dist/es/f/fields/FileUpload/common/FilePreview/FilePreview.js

@@ -1,80 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Local Definitions
-
-import "./styles.scss";
-import { ProgressBar } from "../../../../../a";
-import { Button } from "../../../../../b";
-import { fileUploadOptions } from "../../fileUploadOptions";
-const baseClassName = styleNames.base;
-const componentClassName = 'file-preview';
-const getFileType = file => {
-  const mimeType = file.type;
-  const extension = file.name.split('.').pop().toLowerCase();
-  const fileType = fileUploadOptions.find(option => option.value.includes(mimeType) || option.value.includes(extension));
-  return fileType ? fileType.key : 'unknown';
-};
-
-/**
- * This is the component description.
- */
-const FilePreview = ({
-  id,
-  className: userClassName,
-  style,
-  file,
-  disabled,
-  handleDelete
-  // ...otherProps
-}) => {
-  const type = getFileType(file);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "identity"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: ['type', type.toLowerCase()].filter(e => e).join(' ')
-  }, type), /*#__PURE__*/React.createElement("span", {
-    title: file.name,
-    className: "name"
-  }, file.name), /*#__PURE__*/React.createElement(Button, {
-    isCompact: true,
-    isSimple: true,
-    onClick: handleDelete
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, "Y"))), !disabled && /*#__PURE__*/React.createElement("div", {
-    className: "progress-status"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "status"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "I"), /*#__PURE__*/React.createElement("span", null, "Uploaded")), /*#__PURE__*/React.createElement(ProgressBar, {
-    color: "green",
-    progress: 100,
-    height: "3px"
-  })));
-};
-FilePreview.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string)
-};
-FilePreview.defaultProps = {
-  // someProp:false
-};
-export default FilePreview;

package/src/ui/f/fields/FileUpload/common/FilePreview/FilePreview.jsx

@@ -1,115 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-import './styles.scss'
-
-import { ProgressBar } from 'ui/a'
-
-import { Button } from 'ui/b'
-
-import { fileUploadOptions } from '../../fileUploadOptions'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'file-preview'
-
-const getFileType = (file) => {
-  const mimeType = file.type
-  const extension = file.name.split('.').pop().toLowerCase()
-  const fileType = fileUploadOptions.find(
-    (option) => option.value.includes(mimeType) || option.value.includes(extension))
-
-  return fileType ? fileType.key : 'unknown'
-}
-
-/**
- * This is the component description.
- */
-const FilePreview = ({
-  id,
-  className:userClassName,
-  style,
-  file,
-  disabled,
-  handleDelete,
-  // ...otherProps
-}) => {
-  const type = getFileType(file)
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <div className="identity">
-        <span
-          className={
-            [
-              'type',
-              type.toLowerCase(),
-            ]
-              .filter((e) => e)
-              .join(' ')
-}
-        >
-          {type}
-        </span>
-        <span title={file.name} className="name">{file.name}</span>
-        <Button isCompact isSimple onClick={handleDelete}>
-          <span className="icon x-ui-icons c-x">Y</span>
-        </Button>
-      </div>
-      {!disabled && (
-        <div className="progress-status">
-          <div className="status">
-            <span className="icon">I</span>
-            <span>Uploaded</span>
-          </div>
-          <ProgressBar
-            color="green"
-            progress={100}
-            height="3px"
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
-FilePreview.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-}
-
-FilePreview.defaultProps = {
-  // someProp:false
-}
-
-export default FilePreview