@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.1

package/cjs/components/shared/file-tree/FileTreeListItemContent.styled.js

@@ -4,82 +4,74 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
 //
 //
 //
-var CONTENT_MIN_HEIGHT = 28; // 1.75rem
-var CONTENT_LEFT_BORDER_WIDTH = 3; // 0.1875rem
-var CONTENT_RIGHT_PADDING = 12; // 0.75rem
-var CONTENT_LABEL_VERTICAL_PADDING = 4; // 0.25rem
-var CONTENT_LABEL_ICON_SIZE = 16; // 1rem
-var CONTENT_LABEL_ICON_AFTER_MARGIN = 4; // 1rem
-var CONTENT_LABEL_DIR_ARROW_PADDING = 4; // 0.25rem
-var CONTENT_LABEL_DIR_ARROW_SIZE = 12; // 0.75rem
-var CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL_PADDING * 2;
+const CONTENT_MIN_HEIGHT = 28; // 1.75rem
+const CONTENT_LEFT_BORDER_WIDTH = 3; // 0.1875rem
+const CONTENT_RIGHT_PADDING = 12; // 0.75rem
+const CONTENT_LABEL_VERTICAL_PADDING = 4; // 0.25rem
+const CONTENT_LABEL_ICON_SIZE = 16; // 1rem
+const CONTENT_LABEL_ICON_AFTER_MARGIN = 4; // 1rem
+const CONTENT_LABEL_DIR_ARROW_PADDING = 4; // 0.25rem
+const CONTENT_LABEL_DIR_ARROW_SIZE = 12; // 0.75rem
+const CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL_PADDING * 2;
 //
 //
 //
 /**
  * indent
  */
-var StyledContentIndents = styled__default.default.div.withConfig({
+const StyledContentIndents = styled.div.withConfig({
   componentId: "sc-3wfxns-0"
 })([""]);
-var StyledContentIndentGuide = styled__default.default.div.withConfig({
+const StyledContentIndentGuide = styled.div.withConfig({
   componentId: "sc-3wfxns-1"
 })(["display:inline-block;height:100%;border-right:0.5px solid ", ";"], designTokens.base.color.gray7);
 /**
  * label
  */
-var StyledContentLabel = styled__default.default.div.withConfig({
+const StyledContentLabel = styled.div.withConfig({
   componentId: "sc-3wfxns-2"
 })(["flex:1;display:flex;align-items:center;padding-top:", "px;padding-bottom:", "px;overflow:hidden;"], CONTENT_LABEL_VERTICAL_PADDING, CONTENT_LABEL_VERTICAL_PADDING);
 /**
  * label > dir arrow
  */
-var StyledContentLabelDirArrowWrap = styled__default.default.div.withConfig({
+const StyledContentLabelDirArrowWrap = styled.div.withConfig({
   componentId: "sc-3wfxns-3"
 })(["flex:0 0 ", "px;display:flex;justify-content:center;align-items:center;padding:", ";height:", "px;"], CONTENT_LABEL_DIR_ARROW_SIZE + CONTENT_LABEL_DIR_ARROW_PADDING * 2, CONTENT_LABEL_DIR_ARROW_PADDING, CONTENT_LABEL_DIR_ARROW_SIZE);
 /**
  * label > icon
  */
-var StyledContentLabelIconWrap = styled__default.default.div.withConfig({
+const StyledContentLabelIconWrap = styled.div.withConfig({
   componentId: "sc-3wfxns-4"
 })(["flex:0 0 ", "px;display:flex;margin-right:", "px;height:", "px;"], CONTENT_LABEL_ICON_SIZE + CONTENT_LABEL_ICON_AFTER_MARGIN, CONTENT_LABEL_ICON_AFTER_MARGIN, CONTENT_LABEL_ICON_SIZE);
 /**
  * label > filename
  */
-var StyledContentLabelFilename = styled__default.default(blocks.Text).withConfig({
+const StyledContentLabelFilename = styled(blocks.Text).withConfig({
   componentId: "sc-3wfxns-5"
 })(["flex:1;margin-right:0.125rem;color:", ";font-weight:500;"], designTokens.base.color.gray4);
 /**
  * label > status icon
  */
-var StyledContentLabelStatusIcon = styled__default.default(blocks.Icon).withConfig({
+const StyledContentLabelStatusIcon = styled(blocks.Icon).withConfig({
   componentId: "sc-3wfxns-6"
 })(["margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"]);
 /**
  * label > menu button
  */
-var StyledContentLabelMenuButton = styled__default.default(blocks.IconButton).withConfig({
+const StyledContentLabelMenuButton = styled(blocks.IconButton).withConfig({
   componentId: "sc-3wfxns-7"
 })(["flex:0 0 ", "px;width:", "px !important;height:", "px !important;opacity:0;transition:opacity 150ms ease-in-out;"], CONTENT_LABEL_MENU_BUTTON_SIZE, CONTENT_LABEL_MENU_BUTTON_SIZE, CONTENT_LABEL_MENU_BUTTON_SIZE);
 //
 //
 //
-var cssStyledContentActive = styled.css(["border-left-color:", ";background-color:", ";", "{color:", ";}"], designTokens.base.color.primary4, designTokens.base.color.navy7, StyledContentLabelFilename, designTokens.base.color.gray3);
-var cssStyledContentDragging = styled.css(["border-left-color:transparent !important;background-color:transparent !important;"]);
-var StyledContent = styled__default.default.div.withConfig({
+const cssStyledContentActive = styled.css(["border-left-color:", ";background-color:", ";", "{color:", ";}"], designTokens.base.color.primary4, designTokens.base.color.navy7, StyledContentLabelFilename, designTokens.base.color.gray3);
+const cssStyledContentDragging = styled.css(["border-left-color:transparent !important;background-color:transparent !important;"]);
+const StyledContent = styled.div.withConfig({
   componentId: "sc-3wfxns-8"
-})(["display:flex;padding-right:", "px;width:100%;min-width:0;min-height:", "px;border-left-width:", "px;border-left-style:solid;border-left-color:transparent;user-select:none;", " ", " &:hover{background-color:", ";", "{color:", ";}", "{opacity:1;}}"], CONTENT_RIGHT_PADDING, CONTENT_MIN_HEIGHT, CONTENT_LEFT_BORDER_WIDTH, function (props) {
-  return props.active && cssStyledContentActive;
-}, function (props) {
-  return props.isDragging && cssStyledContentDragging;
-}, designTokens.base.color.navy8, StyledContentLabelFilename, designTokens.base.color.gray3, StyledContentLabelMenuButton);
+})(["display:flex;padding-right:", "px;width:100%;min-width:0;min-height:", "px;border-left-width:", "px;border-left-style:solid;border-left-color:transparent;user-select:none;", " ", " &:hover{background-color:", ";", "{color:", ";}", "{opacity:1;}}"], CONTENT_RIGHT_PADDING, CONTENT_MIN_HEIGHT, CONTENT_LEFT_BORDER_WIDTH, props => props.active && cssStyledContentActive, props => props.isDragging && cssStyledContentDragging, designTokens.base.color.navy8, StyledContentLabelFilename, designTokens.base.color.gray3, StyledContentLabelMenuButton);
 
 exports.StyledContent = StyledContent;
 exports.StyledContentIndentGuide = StyledContentIndentGuide;

package/cjs/components/shared/file-tree/FileTreeListItemContentInput.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactUse = require('react-use');
@@ -11,49 +10,48 @@ var fileTreeGenerator = require('./utils/fileTreeGenerator.js');
 var FileTreeContext = require('./context/FileTreeContext.js');
 var FileTreeListItemContentInput_styled = require('./FileTreeListItemContentInput.styled.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var FILENAME_MAX_LENGTH = 65535;
-var FILENAME_REGEXP_DOT = /^\.$/;
-var FILENAME_REGEXP_DOTDOT = /^\.\.$/;
-var FILENAME_REGEXP_DOT_ELICE = /^\.elice$/;
-var FILENAME_REGEXP_SLASH = /\//;
-var FILENAME_REGEXP_BACK_SLASH = /\\/;
-var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
-  var type = _ref.type,
-    initialValue = _ref.initialValue,
-    className = _ref.className,
-    style = _ref.style,
-    currentPath = _ref.currentPath,
-    currentDirTitleList = _ref.currentDirTitleList,
-    newInputType = _ref.newInputType;
-  var intl$1 = intl.useRawEliceIntl();
-  var targetPath = fileTreeGenerator.getParentPath(currentPath);
-  var _useFileTreeDispatch = FileTreeContext.useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch,
-    onFileAdd = _useFileTreeDispatch.onFileAdd,
-    onDirectoryAdd = _useFileTreeDispatch.onDirectoryAdd,
-    onActivePathChange = _useFileTreeDispatch.onActivePathChange,
-    onFileMove = _useFileTreeDispatch.onFileMove,
-    onDirectoryMove = _useFileTreeDispatch.onDirectoryMove;
-  var _useForm = reactHookForm.useForm({
-      defaultValues: {
-        filename: initialValue || ''
-      },
-      mode: 'onChange'
-    }),
-    control = _useForm.control,
-    handleSubmit = _useForm.handleSubmit,
-    reset = _useForm.reset,
-    getValues = _useForm.getValues;
-  var formElRef = React__default.default.useRef(null);
-  var inputElRef = React__default.default.useRef(null);
+const FILENAME_MAX_LENGTH = 65535;
+const FILENAME_REGEXP_DOT = /^\.$/;
+const FILENAME_REGEXP_DOTDOT = /^\.\.$/;
+const FILENAME_REGEXP_DOT_ELICE = /^\.elice$/;
+const FILENAME_REGEXP_SLASH = /\//;
+const FILENAME_REGEXP_BACK_SLASH = /\\/;
+const FileTreeListItemContentInput = ({
+  type,
+  initialValue,
+  className,
+  style,
+  currentPath,
+  currentDirTitleList,
+  newInputType
+}) => {
+  const intl$1 = intl.useRawEliceIntl();
+  const targetPath = fileTreeGenerator.getParentPath(currentPath);
+  const {
+    dispatch,
+    onFileAdd,
+    onDirectoryAdd,
+    onActivePathChange,
+    onFileMove,
+    onDirectoryMove
+  } = FileTreeContext.useFileTreeDispatch();
+  const {
+    control,
+    handleSubmit,
+    reset,
+    getValues
+  } = reactHookForm.useForm({
+    defaultValues: {
+      filename: initialValue || ''
+    },
+    mode: 'onChange'
+  });
+  const formElRef = React.useRef(null);
+  const inputElRef = React.useRef(null);
   /**
    * Close current input.
    */
-  var close = function close() {
+  const close = () => {
     reset({
       filename: initialValue
     });
@@ -71,7 +69,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   /**
    * Validate input value.
    */
-  var validateFilename = function validateFilename(newFilename) {
+  const validateFilename = newFilename => {
     switch (true) {
       // has dot or dot-dot
       case FILENAME_REGEXP_DOT.test(newFilename) || FILENAME_REGEXP_DOTDOT.test(newFilename):
@@ -89,9 +87,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
           id: 'fileTree.list.item.content.input.validation.error.filename.slash'
         });
       // duplicated
-      case currentDirTitleList.some(function (title) {
-        return title === newFilename;
-      }):
+      case currentDirTitleList.some(title => title === newFilename):
         return intl$1.formatMessage({
           id: 'fileTree.list.item.content.input.validation.error.filename.duplicated'
         });
@@ -102,59 +98,55 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   /**
    * Add file.
    */
-  var addFile = function addFile(params) {
+  const addFile = params => {
     if (typeof onFileAdd !== 'function' || !params.emptyFileWithName) {
       close();
       return;
     }
-    onFileAdd(params).then(function () {
-      return onActivePathChange(params.path === '' ? "".concat(params.emptyFileWithName) : "".concat(params.path, "/").concat(params.emptyFileWithName), false);
-    }).then(close).catch(function () {
+    onFileAdd(params).then(() => onActivePathChange(params.path === '' ? `${params.emptyFileWithName}` : `${params.path}/${params.emptyFileWithName}`, false)).then(close).catch(() => {
       //
     });
   };
   /**
    * Add directory.
    */
-  var addDirectory = function addDirectory(params) {
+  const addDirectory = params => {
     if (typeof onDirectoryAdd !== 'function' || !params.name) {
       close();
       return;
     }
-    onDirectoryAdd(params).then(function () {
-      return onActivePathChange(params.path === '' ? "".concat(params.name) : "".concat(params.path, "/").concat(params.name), true);
-    }).then(close).catch(function () {
+    onDirectoryAdd(params).then(() => onActivePathChange(params.path === '' ? `${params.name}` : `${params.path}/${params.name}`, true)).then(close).catch(() => {
       //
     });
   };
   /**
    * Move file.
    */
-  var moveFile = function moveFile(params) {
+  const moveFile = params => {
     if (typeof onFileMove !== 'function' || params.newName === initialValue) {
       close();
       return;
     }
-    onFileMove(params).then(close).catch(function () {
+    onFileMove(params).then(close).catch(() => {
       //
     });
   };
   /**
    * Move directory.
    */
-  var moveDirectory = function moveDirectory(params) {
+  const moveDirectory = params => {
     if (typeof onDirectoryMove !== 'function' || params.newName === initialValue) {
       close();
       return;
     }
-    onDirectoryMove(params).then(close).catch(function () {
+    onDirectoryMove(params).then(close).catch(() => {
       //
     });
   };
   /**
    * Submit and rename file.
    */
-  var handleFormSubmit = handleSubmit(function (newData) {
+  const handleFormSubmit = handleSubmit(newData => {
     // if new input is empty, close it.
     if (!newData.filename) {
       close();
@@ -195,8 +187,8 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   /**
    * Handle click away.
    */
-  var handleFormClickAway = function handleFormClickAway() {
-    var newFilename = getValues('filename');
+  const handleFormClickAway = () => {
+    const newFilename = getValues('filename');
     if (newFilename) {
       void handleFormSubmit();
       return;
@@ -206,7 +198,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   /**
    * Handle keydown event.
    */
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     switch (e.key) {
       case 'Escape':
         close();
@@ -216,12 +208,12 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   //
   // Select value at input when initial value is set.
   //
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     var _a;
     if (!inputElRef.current || !initialValue) {
       return;
     }
-    var rangeEndExcludeExtension = initialValue.indexOf((_a = initialValue.split('.').pop()) !== null && _a !== void 0 ? _a : '') - 1;
+    const rangeEndExcludeExtension = initialValue.indexOf((_a = initialValue.split('.').pop()) !== null && _a !== void 0 ? _a : '') - 1;
     inputElRef.current.setSelectionRange(0, rangeEndExcludeExtension > 0 ? rangeEndExcludeExtension : initialValue.length);
   }, [initialValue]);
   //
@@ -231,51 +223,49 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   //
   //
   //
-  return jsxRuntime.jsx(FileTreeListItemContentInput_styled.StyledInputForm, {
+  return React.createElement(FileTreeListItemContentInput_styled.StyledInputForm, {
     onSubmit: handleFormSubmit,
-    ref: formElRef,
-    children: jsxRuntime.jsx(reactHookForm.Controller, {
-      control: control,
-      name: "filename",
-      rules: {
-        required: {
-          value: true,
-          message: intl$1.formatMessage({
-            id: 'fileTree.list.item.content.input.validation.error.required'
-          })
-        },
-        maxLength: {
-          value: FILENAME_MAX_LENGTH,
-          message: intl$1.formatMessage({
-            id: 'fileTree.list.item.content.input.validation.error.maxLength'
-          }, {
-            maxLength: FILENAME_MAX_LENGTH
-          })
-        },
-        validate: validateFilename
+    ref: formElRef
+  }, React.createElement(reactHookForm.Controller, {
+    control: control,
+    name: "filename",
+    rules: {
+      required: {
+        value: true,
+        message: intl$1.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.required'
+        })
       },
-      render: function render(_ref2) {
-        var field = _ref2.field,
-          fieldState = _ref2.fieldState;
-        var _a;
-        return jsxRuntime.jsx(FileTreeListItemContentInput_styled.StyledInput, Object.assign({}, field, {
-          type: "text",
-          className: className,
-          size: "small",
-          width: "full",
-          invalid: fieldState.invalid,
-          invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-          autoFocus: true,
-          style: style,
-          onChange: function onChange(e) {
-            return field.onChange(e.target.value.trim());
-          },
-          onKeyDown: handleKeyDown,
-          ref: inputElRef
-        }));
-      }
-    })
-  });
+      maxLength: {
+        value: FILENAME_MAX_LENGTH,
+        message: intl$1.formatMessage({
+          id: 'fileTree.list.item.content.input.validation.error.maxLength'
+        }, {
+          maxLength: FILENAME_MAX_LENGTH
+        })
+      },
+      validate: validateFilename
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+      return React.createElement(FileTreeListItemContentInput_styled.StyledInput, Object.assign({}, field, {
+        type: "text",
+        className: className,
+        size: "small",
+        width: "full",
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        autoFocus: true,
+        style: style,
+        onChange: e => field.onChange(e.target.value.trim()),
+        onKeyDown: handleKeyDown,
+        ref: inputElRef
+      }));
+    }
+  }));
 };
 
 exports.default = FileTreeListItemContentInput;

package/cjs/components/shared/file-tree/FileTreeListItemContentInput.styled.js

@@ -4,18 +4,14 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var INPUT_HEIGHT = '1.25rem';
-var INPUT_FONT_SIZE = '0.75rem';
-var INPUT_INNER_LEFT_PADDING = '0.125rem';
-var INPUT_INNER_RIGHT_PADDING = '0.25rem';
-var StyledInputForm = styled__default.default.form.withConfig({
+const INPUT_HEIGHT = '1.25rem';
+const INPUT_FONT_SIZE = '0.75rem';
+const INPUT_INNER_LEFT_PADDING = '0.125rem';
+const INPUT_INNER_RIGHT_PADDING = '0.25rem';
+const StyledInputForm = styled.form.withConfig({
   componentId: "sc-1glq6yp-0"
 })(["flex:1;display:flex;"]);
-var StyledInput = styled__default.default(blocks.Input).withConfig({
+const StyledInput = styled(blocks.Input).withConfig({
   componentId: "sc-1glq6yp-1"
 })(["min-height:", ";> div{background:transparent !important;> div{&:nth-child(1){padding:", ";}&:nth-child(3){padding:", ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0 !important;padding-bottom:0 !important;height:", " !important;color:", " !important;font-size:", " !important;}"], INPUT_HEIGHT, INPUT_INNER_LEFT_PADDING, INPUT_INNER_RIGHT_PADDING, INPUT_HEIGHT, designTokens.base.color.gray0, INPUT_FONT_SIZE);