siam-ui-utils 2.2.18 → 2.2.19

package/src/dropzone/Input.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { IInputProps } from './Dropzone'
+
+const Input = (props: IInputProps) => {
+  const {
+    className,
+    labelClassName,
+    labelWithFilesClassName,
+    style,
+    labelStyle,
+    labelWithFilesStyle,
+    getFilesFromEvent,
+    accept,
+    multiple,
+    disabled,
+    content,
+    withFilesContent,
+    onFiles,
+    files,
+  } = props
+
+  return (
+    <label
+      className={files.length > 0 ? labelWithFilesClassName : labelClassName}
+      style={files.length > 0 ? labelWithFilesStyle : labelStyle}
+    >
+      {files.length > 0 ? withFilesContent : content}
+      <input
+        className={className}
+        style={style}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        onChange={async e => {
+          const target = e.target
+          const chosenFiles = await getFilesFromEvent(e)
+          onFiles(chosenFiles)
+          //@ts-ignore
+          target.value = null
+        }}
+      />
+    </label>
+  )
+}
+
+Input.propTypes = {
+  className: PropTypes.string,
+  labelClassName: PropTypes.string,
+  labelWithFilesClassName: PropTypes.string,
+  style: PropTypes.object,
+  labelStyle: PropTypes.object,
+  labelWithFilesStyle: PropTypes.object,
+  getFilesFromEvent: PropTypes.func.isRequired,
+  accept: PropTypes.string.isRequired,
+  multiple: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  content: PropTypes.node,
+  withFilesContent: PropTypes.node,
+  onFiles: PropTypes.func.isRequired,
+  files: PropTypes.arrayOf(PropTypes.any).isRequired,
+  extra: PropTypes.shape({
+    active: PropTypes.bool.isRequired,
+    reject: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    accept: PropTypes.string.isRequired,
+    multiple: PropTypes.bool.isRequired,
+    minSizeBytes: PropTypes.number.isRequired,
+    maxSizeBytes: PropTypes.number.isRequired,
+    maxFiles: PropTypes.number.isRequired,
+  }).isRequired,
+}
+
+export default Input

package/src/dropzone/Layout.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { ILayoutProps } from './Dropzone'
+
+const Layout = (props: ILayoutProps) => {
+  const {
+    input,
+    previews,
+    submitButton,
+    dropzoneProps,
+    files,
+    extra: { maxFiles },
+  } = props
+
+  return (
+    <div {...dropzoneProps}>
+      {previews}
+
+      {files.length < maxFiles && input}
+
+      {files.length > 0 && submitButton}
+    </div>
+  )
+}
+
+Layout.propTypes = {
+  input: PropTypes.node,
+  previews: PropTypes.arrayOf(PropTypes.node),
+  submitButton: PropTypes.node,
+  dropzoneProps: PropTypes.shape({
+    ref: PropTypes.any.isRequired,
+    className: PropTypes.string.isRequired,
+    style: PropTypes.object,
+    onDragEnter: PropTypes.func.isRequired,
+    onDragOver: PropTypes.func.isRequired,
+    onDragLeave: PropTypes.func.isRequired,
+    onDrop: PropTypes.func.isRequired,
+  }).isRequired,
+  files: PropTypes.arrayOf(PropTypes.any).isRequired,
+  extra: PropTypes.shape({
+    active: PropTypes.bool.isRequired,
+    reject: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    accept: PropTypes.string.isRequired,
+    multiple: PropTypes.bool.isRequired,
+    minSizeBytes: PropTypes.number.isRequired,
+    maxSizeBytes: PropTypes.number.isRequired,
+    maxFiles: PropTypes.number.isRequired,
+    onFiles: PropTypes.func.isRequired,
+    onCancelFile: PropTypes.func.isRequired,
+    onRemoveFile: PropTypes.func.isRequired,
+    onRestartFile: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default Layout

package/src/dropzone/Preview.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { formatBytes, formatDuration } from './utils'
+import { IPreviewProps } from './Dropzone'
+//@ts-ignore
+import cancelImg from './assets/cancel.svg'
+//@ts-ignore
+import removeImg from './assets/remove.svg'
+//@ts-ignore
+import restartImg from './assets/restart.svg'
+
+const iconByFn = {
+  cancel: { backgroundImage: `url(${cancelImg})` },
+  remove: { backgroundImage: `url(${removeImg})` },
+  restart: { backgroundImage: `url(${restartImg})` },
+}
+
+class Preview extends React.PureComponent<IPreviewProps> {
+  render() {
+    const {
+      className,
+      imageClassName,
+      style,
+      imageStyle,
+      fileWithMeta: { cancel, remove, restart },
+      meta: { name = '', percent = 0, size = 0, previewUrl, status, duration, validationError },
+      isUpload,
+      canCancel,
+      canRemove,
+      canRestart,
+      extra: { minSizeBytes },
+    } = this.props
+
+    let title = `${name || '?'}, ${formatBytes(size)}`
+    if (duration) title = `${title}, ${formatDuration(duration)}`
+
+    if (status === 'error_file_size' || status === 'error_validation') {
+      return (
+        <div className={className} style={style}>
+          <span className="dzu-previewFileNameError">{title}</span>
+          {status === 'error_file_size' && <span>{size < minSizeBytes ? 'File too small' : 'File too big'}</span>}
+          {status === 'error_validation' && <span>{String(validationError)}</span>}
+          {canRemove && <span className="dzu-previewButton" style={iconByFn.remove} onClick={remove} />}
+        </div>
+      )
+    }
+
+    if (status === 'error_upload_params' || status === 'exception_upload' || status === 'error_upload') {
+      title = `${title} (upload failed)`
+    }
+    if (status === 'aborted') title = `${title} (cancelled)`
+
+    return (
+      <div className={className} style={style}>
+        {previewUrl && <img className={imageClassName} style={imageStyle} src={previewUrl} alt={title} title={title} />}
+        {!previewUrl && <span className="dzu-previewFileName">{title}</span>}
+
+        <div className="dzu-previewStatusContainer">
+          {isUpload && (
+            <progress max={100} value={status === 'done' || status === 'headers_received' ? 100 : percent} />
+          )}
+
+          {status === 'uploading' && canCancel && (
+            <span className="dzu-previewButton" style={iconByFn.cancel} onClick={cancel} />
+          )}
+          {status !== 'preparing' && status !== 'getting_upload_params' && status !== 'uploading' && canRemove && (
+            <span className="dzu-previewButton" style={iconByFn.remove} onClick={remove} />
+          )}
+          {['error_upload_params', 'exception_upload', 'error_upload', 'aborted', 'ready'].includes(status) &&
+            canRestart && <span className="dzu-previewButton" style={iconByFn.restart} onClick={restart} />}
+        </div>
+      </div>
+    )
+  }
+}
+
+// @ts-ignore
+Preview.propTypes = {
+  className: PropTypes.string,
+  imageClassName: PropTypes.string,
+  style: PropTypes.object,
+  imageStyle: PropTypes.object,
+  fileWithMeta: PropTypes.shape({
+    file: PropTypes.any.isRequired,
+    meta: PropTypes.object.isRequired,
+    cancel: PropTypes.func.isRequired,
+    restart: PropTypes.func.isRequired,
+    remove: PropTypes.func.isRequired,
+    xhr: PropTypes.any,
+  }).isRequired,
+  // copy of fileWithMeta.meta, won't be mutated
+  meta: PropTypes.shape({
+    status: PropTypes.oneOf([
+      'preparing',
+      'error_file_size',
+      'error_validation',
+      'ready',
+      'getting_upload_params',
+      'error_upload_params',
+      'uploading',
+      'exception_upload',
+      'aborted',
+      'error_upload',
+      'headers_received',
+      'done',
+    ]).isRequired,
+    type: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    uploadedDate: PropTypes.string.isRequired,
+    percent: PropTypes.number,
+    size: PropTypes.number,
+    lastModifiedDate: PropTypes.string,
+    previewUrl: PropTypes.string,
+    duration: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    videoWidth: PropTypes.number,
+    videoHeight: PropTypes.number,
+    validationError: PropTypes.any,
+  }).isRequired,
+  isUpload: PropTypes.bool.isRequired,
+  canCancel: PropTypes.bool.isRequired,
+  canRemove: PropTypes.bool.isRequired,
+  canRestart: PropTypes.bool.isRequired,
+  files: PropTypes.arrayOf(PropTypes.any).isRequired, // eslint-disable-line react/no-unused-prop-types
+  extra: PropTypes.shape({
+    active: PropTypes.bool.isRequired,
+    reject: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    accept: PropTypes.string.isRequired,
+    multiple: PropTypes.bool.isRequired,
+    minSizeBytes: PropTypes.number.isRequired,
+    maxSizeBytes: PropTypes.number.isRequired,
+    maxFiles: PropTypes.number.isRequired,
+  }).isRequired,
+}
+
+export default Preview

package/src/dropzone/SubmitButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { ISubmitButtonProps } from './Dropzone'
+
+const SubmitButton = (props: ISubmitButtonProps) => {
+  const { className, buttonClassName, style, buttonStyle, disabled, content, onSubmit, files } = props
+
+  const _disabled =
+    files.some(f => ['preparing', 'getting_upload_params', 'uploading'].includes(f.meta.status)) ||
+    !files.some(f => ['headers_received', 'done'].includes(f.meta.status))
+
+  const handleSubmit = () => {
+    onSubmit(files.filter(f => ['headers_received', 'done'].includes(f.meta.status)))
+  }
+
+  return (
+    <div className={className} style={style}>
+      <button className={buttonClassName} style={buttonStyle} onClick={handleSubmit} disabled={disabled || _disabled}>
+        {content}
+      </button>
+    </div>
+  )
+}
+
+SubmitButton.propTypes = {
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  style: PropTypes.object,
+  buttonStyle: PropTypes.object,
+  disabled: PropTypes.bool.isRequired,
+  content: PropTypes.node,
+  onSubmit: PropTypes.func.isRequired,
+  files: PropTypes.arrayOf(PropTypes.object).isRequired,
+  extra: PropTypes.shape({
+    active: PropTypes.bool.isRequired,
+    reject: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    accept: PropTypes.string.isRequired,
+    multiple: PropTypes.bool.isRequired,
+    minSizeBytes: PropTypes.number.isRequired,
+    maxSizeBytes: PropTypes.number.isRequired,
+    maxFiles: PropTypes.number.isRequired,
+  }).isRequired,
+}
+
+export default SubmitButton

package/src/dropzone/assets/cancel.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><g fill="#333333"><path d="M1,14 C0.4,14 0,13.6 0,13 L0,1 C0,0.4 0.4,0 1,0 C1.6,0 2,0.4 2,1 L2,13 C2,13.6 1.6,14 1,14 Z" id="Path"></path><path d="M7,14 C6.4,14 6,13.6 6,13 L6,1 C6,0.4 6.4,0 7,0 C7.6,0 8,0.4 8,1 L8,13 C8,13.6 7.6,14 7,14 Z" id="Path"></path></g></svg>

package/src/dropzone/assets/remove.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-5.0, 0.0)" fill="#333333"><g transform="translate(4.0, 0.0)"><polygon points="7.719 4.964 12.692 0.017 14.389 1.715 9.412 6.666 14.354 11.634 12.657 13.331 6.017 6.657 7.715 4.960"></polygon><polygon points="7.612 4.964 7.616 4.960 9.313 6.657 2.674 13.331 0.977 11.634 5.919 6.666 0.942 1.715 2.639 0.017"></polygon></g></g></svg>

package/src/dropzone/assets/restart.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 11 15" xmlns="http://www.w3.org/2000/svg"><g><path d="M0.5,14.9 C0.2,14.7 0,14.4 0,14 L0,2 C0,1.6 0.2,1.3 0.5,1.1 C0.8,0.9 1.2,0.9 1.5,1.1 L10.5,7.1 C10.8,7.3 10.9,7.6 10.9,7.9 C10.9,8.2 10.7,8.5 10.5,8.7 L1.5,14.7 C1.4,14.9 0.8,15.1 0.5,14.9 Z M2,3.9 L2,12.2 L8.2,8.1 L2,3.9 Z"></path></g></svg>

package/src/dropzone/styles.css

@@ -0,0 +1,140 @@
+.dzu-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 120px;
+  overflow: scroll;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  transition: all .15s linear;
+  border: 2px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.dzu-dropzoneActive {
+  background-color: #DEEBFF;
+  border-color: #2484FF;
+}
+
+.dzu-dropzoneDisabled {
+  opacity: 0.5;
+}
+
+.dzu-dropzoneDisabled *:hover {
+  cursor: unset;
+}
+
+.dzu-input {
+  display: none;
+}
+
+.dzu-inputLabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: #2484FF;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-inputLabelWithFiles {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #E6E6E6;
+  color: #2484FF;
+  border: none;
+  font-family: 'Helvetica', sans-serif;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-left: 3%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-previewContainer {
+  padding: 40px 3%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ECECEC;
+  box-sizing: border-box;
+}
+
+.dzu-previewStatusContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dzu-previewFileName {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+}
+
+.dzu-previewImage {
+  width: auto;
+  max-height: 40px;
+  max-width: 140px;
+  border-radius: 4px;
+}
+
+.dzu-previewButton {
+  background-size: 14px 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  margin: 0 0 2px 10px;
+}
+
+.dzu-submitButtonContainer {
+  margin: 24px 0;
+  z-index: 1;
+}
+
+.dzu-submitButton {
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #2484FF;
+  border: none;
+  border-radius: 4px;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFF;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-submitButton:disabled {
+  background-color: #E6E6E6;
+  color: #333333;
+  cursor: unset;
+}

package/src/dropzone/utils.ts

@@ -0,0 +1,113 @@
+import React from 'react'
+import { IStyleCustomization } from './Dropzone'
+
+export const formatBytes = (b: number) => {
+  const units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  let l = 0
+  let n = b
+
+  while (n >= 1024) {
+    n /= 1024
+    l += 1
+  }
+
+  return `${n.toFixed(n >= 10 || l < 1 ? 0 : 1)}${units[l]}`
+}
+
+export const formatDuration = (seconds: number) => {
+  const date = new Date(0)
+  date.setSeconds(seconds)
+  const dateString = date.toISOString().slice(11, 19)
+  if (seconds < 3600) return dateString.slice(3)
+  return dateString
+}
+
+// adapted from: https://github.com/okonet/attr-accept/blob/master/src/index.js
+// returns true if file.name is empty and accept string is something like ".csv",
+// because file comes from dataTransferItem for drag events, and
+// dataTransferItem.name is always empty
+export const accepts = (file: File, accept: string) => {
+  if (!accept || accept === '*') return true
+
+  const mimeType = file.type || ''
+  const baseMimeType = mimeType.replace(/\/.*$/, '')
+
+  return accept
+    .split(',')
+    .map(t => t.trim())
+    .some(type => {
+      if (type.charAt(0) === '.') {
+        return file.name === undefined || file.name.toLowerCase().endsWith(type.toLowerCase())
+      } else if (type.endsWith('/*')) {
+        // this is something like an image/* mime type
+        return baseMimeType === type.replace(/\/.*$/, '')
+      }
+      return mimeType === type
+    })
+}
+
+type ResolveFn<T> = (...args: any[]) => T
+
+export const resolveValue = <T = any>(value: ResolveFn<T> | T, ...args: any[]) => {
+  if (typeof value === 'function') return (value as ResolveFn<T>)(...args)
+  return value
+}
+
+export const defaultClassNames = {
+  dropzone: 'dzu-dropzone',
+  dropzoneActive: 'dzu-dropzoneActive',
+  dropzoneReject: 'dzu-dropzoneActive',
+  dropzoneDisabled: 'dzu-dropzoneDisabled',
+  input: 'dzu-input',
+  inputLabel: 'dzu-inputLabel',
+  inputLabelWithFiles: 'dzu-inputLabelWithFiles',
+  preview: 'dzu-previewContainer',
+  previewImage: 'dzu-previewImage',
+  submitButtonContainer: 'dzu-submitButtonContainer',
+  submitButton: 'dzu-submitButton',
+}
+
+export const mergeStyles = (
+  classNames: IStyleCustomization<string>,
+  styles: IStyleCustomization<React.CSSProperties>,
+  addClassNames: IStyleCustomization<string>,
+  ...args: any[]
+) => {
+  const resolvedClassNames: { [property: string]: string } = { ...defaultClassNames }
+  const resolvedStyles = { ...styles } as { [property: string]: string }
+
+  for (const [key, value] of Object.entries(classNames)) {
+    resolvedClassNames[key] = resolveValue(value, ...args)
+  }
+
+  for (const [key, value] of Object.entries(addClassNames)) {
+    resolvedClassNames[key] = `${resolvedClassNames[key]} ${resolveValue(value, ...args)}`
+  }
+
+  for (const [key, value] of Object.entries(styles)) {
+    resolvedStyles[key] = resolveValue(value, ...args)
+  }
+
+  return { classNames: resolvedClassNames, styles: resolvedStyles as IStyleCustomization<React.CSSProperties> }
+}
+
+export const getFilesFromEvent = (
+  event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>,
+): Array<File | DataTransferItem> => {
+  let items = null
+
+  if ('dataTransfer' in event) {
+    const dt = event.dataTransfer
+
+    // NOTE: Only the 'drop' event has access to DataTransfer.files, otherwise it will always be empty
+    if ('files' in dt && dt.files.length) {
+      items = dt.files
+    } else if (dt.items && dt.items.length) {
+      items = dt.items
+    }
+  } else if (event.target && event.target.files) {
+    items = event.target.files
+  }
+
+  return Array.prototype.slice.call(items)
+}

package/src/index.js

@@ -9,4 +9,3 @@ export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
 export * from './copy-link';
 export * from './view-layout';
-export * from './timer';

package/src/timer/index.jsx

@@ -1,62 +0,0 @@
-import { useEffect, useState, useRef } from 'react';
-import './styles.scss';
-
-export const formatTiempo = (ms) => {
-  if (ms == null) return '--:--';
-  const absMs = Math.abs(ms);
-  const totalSec = Math.floor(absMs / 1000);
-  const min = Math.floor(totalSec / 60);
-  const sec = totalSec % 60;
-  const formatted = `${min.toString().padStart(2, '0')}:${sec
-    .toString()
-    .padStart(2, '0')}`;
-  return ms < 0 ? `-${formatted}` : formatted;
-};
-
-const getTimerColorClass = (ms, maxTime) => {
-  if (!maxTime) return '';
-  const percent = ms / maxTime;
-  if (percent > 0.33) return 'timer-green';
-  if (percent > 0.15) return 'timer-yellow';
-  if (percent > 0) return 'timer-red';
-  if (ms === 0) return 'timer-out';
-  if (ms < 0) return 'timer-over';
-  return '';
-};
-
-const Timer = ({
-  initialMinutes = 0,
-  icon = true,
-  className = '',
-  active = true,
-  style = {},
-}) => {
-  const initialMs = initialMinutes * 60 * 1000;
-  const [ms, setMs] = useState(initialMs);
-  const intervalRef = useRef();
-
-  useEffect(() => {
-    if (!active) return;
-    intervalRef.current = setInterval(() => {
-      setMs((prev) => prev - 1000);
-    }, 1000);
-    return () => clearInterval(intervalRef.current);
-  }, [active]);
-
-  useEffect(() => {
-    setMs(initialMs);
-  }, [initialMs]);
-
-  const timerColorClass = getTimerColorClass(ms, initialMs);
-
-  return (
-    <span
-      className={`av-video-timer timer ${timerColorClass} ${className}`}
-      style={style}
-    >
-      {icon && <i className="icon-clock timer" />}
-      {formatTiempo(ms)}
-    </span>
-  );
-};
-export { Timer };