@teamturing/react-kit 2.52.2 → 2.53.1

package/esm/core/FileItem/index.js

@@ -0,0 +1,225 @@
+import { ExclamationPointInCircleIcon, VideoIcon, DocumentIcon, PictureIcon } from '@teamturing/icons';
+import { forcePixelValue } from '@teamturing/utils';
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import Spinner from '../Spinner/index.js';
+import StyledIcon from '../StyledIcon/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const FileItem = ({
+  file,
+  variant = 'default',
+  disabled,
+  loading,
+  validationStatus,
+  trailingAction,
+  ...props
+}) => {
+  const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
+  const fileName = 'name' in file ? file.name : '';
+  const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : DocumentIcon;
+  const [objectUrl, setObjectUrl] = useState('');
+  useEffect(() => {
+    setObjectUrl(URL.createObjectURL(file));
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, []);
+  return /*#__PURE__*/jsx(BaseFile, {
+    variant: variant,
+    disabled: disabled,
+    loading: disabled,
+    validationStatus: validationStatus,
+    trailingAction: trailingAction,
+    ...props,
+    children: variant === 'default' ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(FileIcon, {}), /*#__PURE__*/jsx("span", {
+        children: fileName
+      }), validationStatus === 'error' ? /*#__PURE__*/jsx(StyledIcon, {
+        icon: ExclamationPointInCircleIcon,
+        size: 24,
+        color: 'icon/danger'
+      }) : loading ? /*#__PURE__*/jsx(Spinner, {
+        width: 24,
+        height: 24
+      }) : null, trailingAction]
+    }) : variant === 'thumbnail' ? /*#__PURE__*/jsxs(Fragment, {
+      children: [fileType === 'image' ? /*#__PURE__*/jsx("img", {
+        src: objectUrl
+      }) : fileType === 'video' ? /*#__PURE__*/jsxs("div", {
+        className: 'file__thumbnail__video',
+        children: [/*#__PURE__*/jsx("video", {
+          src: objectUrl
+        }), /*#__PURE__*/jsx(VideoIcon, {})]
+      }) : /*#__PURE__*/jsx("div", {
+        className: 'file__thumbnail__whatever',
+        children: /*#__PURE__*/jsx(DocumentIcon, {})
+      }), validationStatus === 'error' || loading ? /*#__PURE__*/jsx("div", {
+        className: 'file__thumbnail__cover',
+        children: validationStatus === 'error' ? /*#__PURE__*/jsx(StyledIcon, {
+          icon: ExclamationPointInCircleIcon,
+          size: 24,
+          color: 'icon/danger'
+        }) : loading ? /*#__PURE__*/jsx(Spinner, {
+          width: 24,
+          height: 24
+        }) : null
+      }) : null, trailingAction]
+    }) : null
+  });
+};
+const BaseFile = styled.div({
+  position: 'relative'
+}, ({
+  theme,
+  disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    default: {
+      'backgroundColor': theme.colors['bg/neutral'],
+      'borderRadius': theme.radii.xs,
+      'width': '100%',
+      'height': forcePixelValue(48),
+      'py': 1,
+      'pr': 2,
+      'pl': 4,
+      'display': 'flex',
+      'columnGap': 2,
+      'alignItems': 'center',
+      '& > svg': {
+        width: 24,
+        height: 24,
+        color: theme.colors['icon/neutral/bold']
+      },
+      '& > span': {
+        flex: 1,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.medium,
+        lineHeight: theme.lineHeights[2],
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors['text/neutral/subtle']
+      },
+      ...(disabled ? {
+        '& > svg': {
+          color: theme.colors['icon/disabled']
+        },
+        '& span': {
+          color: theme.colors['text/disabled']
+        }
+      } : {})
+    },
+    thumbnail: {
+      'display': 'flex',
+      'alignItems': 'center',
+      'justifyContent': 'center',
+      'width': forcePixelValue(160),
+      'maxWidth': forcePixelValue(160),
+      'aspectRatio': '16 / 9',
+      'backgroundColor': theme.colors['bg/neutral'],
+      'overflow': 'hidden',
+      'borderRadius': 'xs',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: forcePixelValue(0),
+        right: forcePixelValue(0),
+        bottom: forcePixelValue(0),
+        left: forcePixelValue(0),
+        borderWidth: 1,
+        borderColor: theme.colors['border/neutral'],
+        borderStyle: 'solid',
+        borderRadius: 'xs',
+        pointerEvents: 'none'
+      },
+      '& > .file__thumbnail__cover': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pointerEvents: 'none',
+        backgroundColor: 'bg/neutral'
+      },
+      '& > img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+      },
+      '& > .file__thumbnail__video': {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 24,
+          height: 24,
+          color: 'icon/primary'
+        },
+        video: {
+          width: '100%'
+        }
+      },
+      '& > .file__thumbnail__whatever': {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'bg/neutral',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          width: 24,
+          height: 24,
+          color: 'icon/neutral/bold'
+        }
+      },
+      '& > button': {
+        position: 'absolute',
+        top: 0,
+        right: 0
+      },
+      ...(disabled ? {} : {})
+    }
+  }
+}), ({
+  theme,
+  variant: propVariant
+}) => variant({
+  prop: 'validationStatus',
+  variants: {
+    error: {
+      ...(propVariant === 'thumbnail' ? {
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: forcePixelValue(0),
+          right: forcePixelValue(0),
+          bottom: forcePixelValue(0),
+          left: forcePixelValue(0),
+          borderWidth: 2,
+          borderColor: theme.colors['border/danger'],
+          borderStyle: 'solid',
+          borderRadius: 'xs',
+          pointerEvents: 'none'
+        }
+      } : {})
+    }
+  }
+}), sx);
+
+export { FileItem as default };

package/esm/index.js

@@ -16,6 +16,7 @@ export { default as DescriptionList } from './core/DescriptionList/index.js';
 export { default as Dialog } from './core/Dialog/index.js';
 export { default as Drawer } from './core/Drawer/index.js';
 export { default as EmptyState } from './core/EmptyState/index.js';
+export { default as FileItem } from './core/FileItem/index.js';
 export { default as Flash } from './core/Flash/index.js';
 export { default as FormControl } from './core/FormControl/index.js';
 export { default as GradientText } from './core/GradientText/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.52.2",
+  "version": "2.53.1",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "2390cfb6d3d1716e4c20b5580927e191827a0f9f"
+  "gitHead": "0b981b1312cf772c8bdd7aff43aa6f6e36620c87"
 }