@elice/material-exercise 1.221109.0 → 1.221129.0

package/cjs/components/shared/file-viewer/FileViewerCsv.js

@@ -20,7 +20,23 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 //
 //
 
-const ROW_PER_PAGE_LIST = [10, 25, 50]; //
+const OPTIONS_PER_PAGE = [10, 25, 50];
+const OPTIONS_DELIMITER = [{
+  char: ',',
+  label: 'Comma [,]'
+}, {
+  char: '\t',
+  label: 'Tab [\\t]'
+}, {
+  char: '/',
+  label: 'Regular Bar [/]'
+}, {
+  char: '\\',
+  label: 'Inverted Bar [\\]'
+}, {
+  char: '|',
+  label: 'Vertical Bar [|]'
+}]; //
 //
 //
 
@@ -30,28 +46,36 @@ const StyledViewer = styled__default["default"].div.withConfig({
 const StyledViewerTableWrap = styled__default["default"].div.withConfig({
   componentId: "sc-pyv7uu-1"
 })(["flex:1;overflow:auto;"]);
-const StyledViewerFooter = styled__default["default"].div.withConfig({
+const StyledViewerTable = styled__default["default"].table.withConfig({
   componentId: "sc-pyv7uu-2"
+})(["border:none;border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:first-of-type{color:", ";border-left:none;}&:last-of-type{border-right:none;}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], designTokens.base.color.white, designTokens.base.color.navy5, designTokens.base.color.gray5, designTokens.base.color.navy8, designTokens.base.color.navy6);
+const StyledViewerFooter = styled__default["default"].div.withConfig({
+  componentId: "sc-pyv7uu-3"
 })(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
 const StyledViewerFooterSelect = styled__default["default"].select.withConfig({
-  componentId: "sc-pyv7uu-3"
-})(["width:3rem;border-radius:0.25rem;"]);
-const StyledViewerTable = styled__default["default"].table.withConfig({
   componentId: "sc-pyv7uu-4"
-})(["border:1px solid ", ";border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:nth-child(1){color:", ";}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], designTokens.base.color.navy5, designTokens.base.color.white, designTokens.base.color.navy5, designTokens.base.color.gray5, designTokens.base.color.navy8, designTokens.base.color.navy6);
+})(["width:", "rem;border-radius:0.25rem;"], props => props.width);
+const StyledViewerFooterHr = styled__default["default"](blocks.Hr).withConfig({
+  componentId: "sc-pyv7uu-5"
+})(["height:1rem;"]); //
+//
+//
 
 const FileViewerCsv = ({
   fileurl
 }) => {
+  const [csv, setCsv] = React__default["default"].useState('');
   const [csvHeader, setCsvHeader] = React__default["default"].useState(null);
   const [csvRecords, setCsvRecords] = React__default["default"].useState([]);
   const [csvStatus, setCsvStatus] = React__default["default"].useState('idle');
   const [page, setPage] = React__default["default"].useState(1);
-  const [perPage, setPerPage] = React__default["default"].useState(ROW_PER_PAGE_LIST[0]);
-  const maxPage = Math.ceil(csvRecords.length / perPage);
+  const [perPage, setPerPage] = React__default["default"].useState(OPTIONS_PER_PAGE[0]);
+  const [delimiter, setDelimiter] = React__default["default"].useState(OPTIONS_DELIMITER[0].char);
   const [isUsingHeader, setUsingHeader] = React__default["default"].useState(true);
+  const csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
+  const maxPage = Math.ceil(csvRecordCount / perPage);
   const tableWrapElRef = React__default["default"].useRef(null); //
-  // fetch csv file and parse it
+  // Fetch csv file
   //
 
   React__default["default"].useEffect(() => {
@@ -64,7 +88,7 @@ const FileViewerCsv = ({
     setCsvStatus('pending');
     fetch(fileurl, {
       signal: abortCtrl.signal
-    }).then(res => res.text()).then(data => data.split('\n').map(row => row.split(','))).then(setCsvRecords).then(() => setCsvStatus('resolved')).catch(err => {
+    }).then(res => res.text()).then(setCsv).then(() => setCsvStatus('resolved')).catch(err => {
       if (err.name === 'AbortError') {
         return;
       }
@@ -76,11 +100,15 @@ const FileViewerCsv = ({
       abortCtrl.abort();
     };
   }, [fileurl]); //
+  // Parse csv file and save as records
+  //
+
+  React__default["default"].useEffect(() => setCsvRecords(csv.split('\n').filter(Boolean).map(row => row.split(delimiter))), [csv, delimiter]); //
   // Set CSV header.
   //
 
   React__default["default"].useEffect(() => setCsvHeader(isUsingHeader ? csvRecords[0] : null), [csvRecords, isUsingHeader]); //
-  // Set CSV header.
+  // Scroll to top when page changes.
   //
 
   React__default["default"].useEffect(() => {
@@ -110,7 +138,7 @@ const FileViewerCsv = ({
   const renderViewerTableTbody = () => {
     const start = (page - 1) * perPage;
     const end = page * perPage;
-    const records = csvRecords.slice(isUsingHeader ? 1 : 0).slice(start, end);
+    const records = csvRecords.slice(csvHeader ? 1 : 0).slice(start, end);
     return React__default["default"].createElement("tbody", null, records.map((row, rowIdx) => {
       const curRecordNo = start + rowIdx + 1;
       const curRow = [curRecordNo, ...row];
@@ -147,14 +175,22 @@ const FileViewerCsv = ({
     }, React__default["default"].createElement(blocks.Text, {
       role: "gray1",
       size: "small"
-    }, csvRecords.length, " records"), React__default["default"].createElement(blocks.Hr, {
+    }, csvRecordCount, " records"), React__default["default"].createElement(StyledViewerFooterHr, {
       vertical: true,
       color: designTokens.base.color.navy5
     }), React__default["default"].createElement(blocks.Flex, {
       align: "center"
     }, React__default["default"].createElement(blocks.IconButton, {
-      icon: icons.eilArrowLeftwardsBasic,
-      role: "gray5",
+      icon: icons.eilArrowLeftwardsDouble,
+      role: "navy3",
+      size: "nano",
+      disabled: page <= 1,
+      onClick: () => setPage(1)
+    }), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.25
+    }), React__default["default"].createElement(blocks.IconButton, {
+      icon: icons.eilArrowLeftwardsSingle,
+      role: "navy3",
       size: "nano",
       disabled: page <= 1,
       onClick: () => setPage(prevPage => prevPage - 1)
@@ -166,11 +202,19 @@ const FileViewerCsv = ({
     }, page, " / ", maxPage), React__default["default"].createElement(blocks.Hspace, {
       width: 0.5
     }), React__default["default"].createElement(blocks.IconButton, {
-      icon: icons.eilArrowRightwardsBasic,
-      role: "gray5",
+      icon: icons.eilArrowRightwardsSingle,
+      role: "navy3",
       size: "nano",
       disabled: page >= maxPage,
       onClick: () => setPage(prevPage => prevPage + 1)
+    }), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.25
+    }), React__default["default"].createElement(blocks.IconButton, {
+      icon: icons.eilArrowRightwardsDouble,
+      role: "navy3",
+      size: "nano",
+      disabled: page >= maxPage,
+      onClick: () => setPage(maxPage)
     })));
   };
   /**
@@ -194,7 +238,28 @@ const FileViewerCsv = ({
       size: "small",
       checked: isUsingHeader,
       onChange: setUsingHeader
-    })), React__default["default"].createElement(blocks.Hr, {
+    })), React__default["default"].createElement(StyledViewerFooterHr, {
+      vertical: true,
+      color: designTokens.base.color.navy5
+    }), React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "gray1",
+      size: "small"
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "\uAD6C\uBD84\uC790:"
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(StyledViewerFooterSelect, {
+      width: 7.5,
+      value: delimiter,
+      onChange: e => setDelimiter(e.target.value)
+    }, OPTIONS_DELIMITER.map(({
+      char,
+      label
+    }) => React__default["default"].createElement("option", {
+      value: char
+    }, label)))), React__default["default"].createElement(StyledViewerFooterHr, {
       vertical: true,
       color: designTokens.base.color.navy5
     }), React__default["default"].createElement(blocks.Flex, {
@@ -207,9 +272,10 @@ const FileViewerCsv = ({
     })), React__default["default"].createElement(blocks.Hspace, {
       width: 0.5
     }), React__default["default"].createElement(StyledViewerFooterSelect, {
+      width: 3,
       value: perPage,
       onChange: e => setPerPage(Number(e.target.value))
-    }, ROW_PER_PAGE_LIST.map(perPage => React__default["default"].createElement("option", {
+    }, OPTIONS_PER_PAGE.map(perPage => React__default["default"].createElement("option", {
       value: perPage
     }, perPage)))));
   };

package/es/components/shared/file-viewer/FileViewerCsv.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Flex, Text, Hr, IconButton, Hspace, AntSwitch } from '@elice/blocks';
+import { Hr, Flex, Text, IconButton, Hspace, AntSwitch } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import { eilArrowLeftwardsBasic, eilArrowRightwardsBasic } from '@elice/icons';
+import { eilArrowLeftwardsDouble, eilArrowLeftwardsSingle, eilArrowRightwardsSingle, eilArrowRightwardsDouble } from '@elice/icons';
 import styled from 'styled-components';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
 import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
@@ -13,7 +13,23 @@ import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 //
 //
 
-const ROW_PER_PAGE_LIST = [10, 25, 50]; //
+const OPTIONS_PER_PAGE = [10, 25, 50];
+const OPTIONS_DELIMITER = [{
+  char: ',',
+  label: 'Comma [,]'
+}, {
+  char: '\t',
+  label: 'Tab [\\t]'
+}, {
+  char: '/',
+  label: 'Regular Bar [/]'
+}, {
+  char: '\\',
+  label: 'Inverted Bar [\\]'
+}, {
+  char: '|',
+  label: 'Vertical Bar [|]'
+}]; //
 //
 //
 
@@ -23,28 +39,36 @@ const StyledViewer = styled.div.withConfig({
 const StyledViewerTableWrap = styled.div.withConfig({
   componentId: "sc-pyv7uu-1"
 })(["flex:1;overflow:auto;"]);
-const StyledViewerFooter = styled.div.withConfig({
+const StyledViewerTable = styled.table.withConfig({
   componentId: "sc-pyv7uu-2"
+})(["border:none;border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:first-of-type{color:", ";border-left:none;}&:last-of-type{border-right:none;}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], base.color.white, base.color.navy5, base.color.gray5, base.color.navy8, base.color.navy6);
+const StyledViewerFooter = styled.div.withConfig({
+  componentId: "sc-pyv7uu-3"
 })(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
 const StyledViewerFooterSelect = styled.select.withConfig({
-  componentId: "sc-pyv7uu-3"
-})(["width:3rem;border-radius:0.25rem;"]);
-const StyledViewerTable = styled.table.withConfig({
   componentId: "sc-pyv7uu-4"
-})(["border:1px solid ", ";border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:nth-child(1){color:", ";}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], base.color.navy5, base.color.white, base.color.navy5, base.color.gray5, base.color.navy8, base.color.navy6);
+})(["width:", "rem;border-radius:0.25rem;"], props => props.width);
+const StyledViewerFooterHr = styled(Hr).withConfig({
+  componentId: "sc-pyv7uu-5"
+})(["height:1rem;"]); //
+//
+//
 
 const FileViewerCsv = ({
   fileurl
 }) => {
+  const [csv, setCsv] = React.useState('');
   const [csvHeader, setCsvHeader] = React.useState(null);
   const [csvRecords, setCsvRecords] = React.useState([]);
   const [csvStatus, setCsvStatus] = React.useState('idle');
   const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(ROW_PER_PAGE_LIST[0]);
-  const maxPage = Math.ceil(csvRecords.length / perPage);
+  const [perPage, setPerPage] = React.useState(OPTIONS_PER_PAGE[0]);
+  const [delimiter, setDelimiter] = React.useState(OPTIONS_DELIMITER[0].char);
   const [isUsingHeader, setUsingHeader] = React.useState(true);
+  const csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
+  const maxPage = Math.ceil(csvRecordCount / perPage);
   const tableWrapElRef = React.useRef(null); //
-  // fetch csv file and parse it
+  // Fetch csv file
   //
 
   React.useEffect(() => {
@@ -57,7 +81,7 @@ const FileViewerCsv = ({
     setCsvStatus('pending');
     fetch(fileurl, {
       signal: abortCtrl.signal
-    }).then(res => res.text()).then(data => data.split('\n').map(row => row.split(','))).then(setCsvRecords).then(() => setCsvStatus('resolved')).catch(err => {
+    }).then(res => res.text()).then(setCsv).then(() => setCsvStatus('resolved')).catch(err => {
       if (err.name === 'AbortError') {
         return;
       }
@@ -69,11 +93,15 @@ const FileViewerCsv = ({
       abortCtrl.abort();
     };
   }, [fileurl]); //
+  // Parse csv file and save as records
+  //
+
+  React.useEffect(() => setCsvRecords(csv.split('\n').filter(Boolean).map(row => row.split(delimiter))), [csv, delimiter]); //
   // Set CSV header.
   //
 
   React.useEffect(() => setCsvHeader(isUsingHeader ? csvRecords[0] : null), [csvRecords, isUsingHeader]); //
-  // Set CSV header.
+  // Scroll to top when page changes.
   //
 
   React.useEffect(() => {
@@ -103,7 +131,7 @@ const FileViewerCsv = ({
   const renderViewerTableTbody = () => {
     const start = (page - 1) * perPage;
     const end = page * perPage;
-    const records = csvRecords.slice(isUsingHeader ? 1 : 0).slice(start, end);
+    const records = csvRecords.slice(csvHeader ? 1 : 0).slice(start, end);
     return React.createElement("tbody", null, records.map((row, rowIdx) => {
       const curRecordNo = start + rowIdx + 1;
       const curRow = [curRecordNo, ...row];
@@ -140,14 +168,22 @@ const FileViewerCsv = ({
     }, React.createElement(Text, {
       role: "gray1",
       size: "small"
-    }, csvRecords.length, " records"), React.createElement(Hr, {
+    }, csvRecordCount, " records"), React.createElement(StyledViewerFooterHr, {
       vertical: true,
       color: base.color.navy5
     }), React.createElement(Flex, {
       align: "center"
     }, React.createElement(IconButton, {
-      icon: eilArrowLeftwardsBasic,
-      role: "gray5",
+      icon: eilArrowLeftwardsDouble,
+      role: "navy3",
+      size: "nano",
+      disabled: page <= 1,
+      onClick: () => setPage(1)
+    }), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement(IconButton, {
+      icon: eilArrowLeftwardsSingle,
+      role: "navy3",
       size: "nano",
       disabled: page <= 1,
       onClick: () => setPage(prevPage => prevPage - 1)
@@ -159,11 +195,19 @@ const FileViewerCsv = ({
     }, page, " / ", maxPage), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(IconButton, {
-      icon: eilArrowRightwardsBasic,
-      role: "gray5",
+      icon: eilArrowRightwardsSingle,
+      role: "navy3",
       size: "nano",
       disabled: page >= maxPage,
       onClick: () => setPage(prevPage => prevPage + 1)
+    }), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement(IconButton, {
+      icon: eilArrowRightwardsDouble,
+      role: "navy3",
+      size: "nano",
+      disabled: page >= maxPage,
+      onClick: () => setPage(maxPage)
     })));
   };
   /**
@@ -187,7 +231,28 @@ const FileViewerCsv = ({
       size: "small",
       checked: isUsingHeader,
       onChange: setUsingHeader
-    })), React.createElement(Hr, {
+    })), React.createElement(StyledViewerFooterHr, {
+      vertical: true,
+      color: base.color.navy5
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      role: "gray1",
+      size: "small"
+    }, React.createElement(FormattedMessage, {
+      id: "\uAD6C\uBD84\uC790:"
+    })), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(StyledViewerFooterSelect, {
+      width: 7.5,
+      value: delimiter,
+      onChange: e => setDelimiter(e.target.value)
+    }, OPTIONS_DELIMITER.map(({
+      char,
+      label
+    }) => React.createElement("option", {
+      value: char
+    }, label)))), React.createElement(StyledViewerFooterHr, {
       vertical: true,
       color: base.color.navy5
     }), React.createElement(Flex, {
@@ -200,9 +265,10 @@ const FileViewerCsv = ({
     })), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(StyledViewerFooterSelect, {
+      width: 3,
       value: perPage,
       onChange: e => setPerPage(Number(e.target.value))
-    }, ROW_PER_PAGE_LIST.map(perPage => React.createElement("option", {
+    }, OPTIONS_PER_PAGE.map(perPage => React.createElement("option", {
       value: perPage
     }, perPage)))));
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.221109.0",
+  "version": "1.221129.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -81,7 +81,6 @@
     "ot-text-unicode": "^4.0.0",
     "prettier": "~2.7.1",
     "random-words": "^1.1.2",
-    "react-csv-to-table": "^0.0.4",
     "react-hook-form": "~7.12.0",
     "react-transition-group": "^4.3.0",
     "rxjs": "^7.5.6",
@@ -116,8 +115,8 @@
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.221109.0",
-    "@elice/material-shared-utils": "1.221109.0",
+    "@elice/material-shared-types": "1.221129.0",
+    "@elice/material-shared-utils": "1.221129.0",
     "@elice/types": "^1.221027.0",
     "@elice/websocket": "^1.220803.0",
     "@types/classnames": "^2.3.1",
@@ -139,5 +138,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "bd17b325b12a0b7b2b1e663180666dc45bb90b27"
+  "gitHead": "2f7b7c14476949931e7dfe508a6a192d454f3d75"
 }