dtable-ui-component 0.3.2 → 0.3.4-alpha1

package/lib/RowExpandFileFormatter/index.css

@@ -0,0 +1,72 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.row-expand-file-formatter {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 550px;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file {
+  height: 100px;
+  width: 100px;
+  border: 2px solid #ededed;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  position: relative;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:nth-child(5n + 1) {
+  margin-left: 0;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover {
+  border-color: #c9c9c9;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice {
+  height: 20px;
+  width: 100%;
+  top: 0;
+  position: absolute;
+  color: #fff;
+  display: none;
+  padding: 0 3px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-file-icons-choice {
+  display: flex;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon:nth-child(2) {
+  margin-left: 5px;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon .dtable-font {
+  font-size: 12px;
+  transform: scale(.7);
+}
+
+.tooltip-inner {
+  font-weight: lighter;
+  text-align: justify;
+  background-color: #303133;
+}

package/lib/RowExpandFileFormatter/index.js

@@ -0,0 +1,59 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import classname from 'classnames';
+import RowExpandFileItemFormatter from './row-expand-file-item-formatter';
+import './index.css';
+
+var RowExpandFileFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(RowExpandFileFormatter, _React$PureComponent);
+
+  var _super = _createSuper(RowExpandFileFormatter);
+
+  function RowExpandFileFormatter() {
+    _classCallCheck(this, RowExpandFileFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RowExpandFileFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName,
+          column = _this$props.column,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile,
+          readOnly = _this$props.readOnly;
+
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname('dtable-ui cell-formatter-container row-expand-file-formatter', containerClassName)
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(RowExpandFileItemFormatter, {
+          file: item,
+          key: index,
+          index: index,
+          column: column,
+          downloadFile: downloadFile,
+          deleteFile: deleteFile,
+          readOnly: readOnly
+        });
+      }));
+    }
+  }]);
+
+  return RowExpandFileFormatter;
+}(React.PureComponent);
+
+RowExpandFileFormatter.defaultProps = {
+  value: [],
+  containerClassName: ''
+};
+export { RowExpandFileFormatter as default };

package/lib/RowExpandFileFormatter/row-expand-file-item-formatter.js

@@ -0,0 +1,125 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import { Tooltip } from 'reactstrap';
+import { getLocale } from '../lang';
+import { getFileIconUrl } from '../FileItemFormatter/utils';
+import DeleteTip from '../common/delete-tip';
+
+var RowExpandFileItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(RowExpandFileItemFormatter, _Component);
+
+  var _super = _createSuper(RowExpandFileItemFormatter);
+
+  function RowExpandFileItemFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, RowExpandFileItemFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.toggleTooltip = function () {
+      _this.setState({
+        isTooltipOpen: !_this.state.isTooltipOpen
+      });
+    };
+
+    _this.closeDeleteTip = function () {
+      _this.setState({
+        isDeleteTipOpen: false
+      });
+    };
+
+    _this.onClickDelete = function (e) {
+      e.stopPropagation();
+      _this.position = {
+        top: e.clientY,
+        left: e.clientX
+      };
+
+      _this.setState({
+        isDeleteTipOpen: true
+      });
+    };
+
+    _this.onDelete = function (e) {
+      e.stopPropagation();
+
+      _this.closeDeleteTip();
+
+      _this.props.deleteFile(_this.props.index);
+    };
+
+    _this.getFileIconData = function (item) {
+      var fileIconUrl = getFileIconUrl(item.name, item.type);
+      return require('../FileItemFormatter/' + fileIconUrl);
+    };
+
+    _this.state = {
+      isTooltipOpen: false,
+      isDeleteTipOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(RowExpandFileItemFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          file = _this$props.file,
+          column = _this$props.column,
+          index = _this$props.index,
+          readOnly = _this$props.readOnly,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile;
+      var id = 'file-list-preview-item' + column.key + index;
+      var url = this.getFileIconData(file);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        key: "file-".concat(index),
+        className: "row-expand-item-file",
+        id: id
+      }, /*#__PURE__*/React.createElement("img", {
+        src: url,
+        id: "item-file-".concat(index),
+        alt: file.name
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "dtable-file-icons-choice"
+      }, downloadFile && /*#__PURE__*/React.createElement("span", {
+        className: "file-icon",
+        onClick: function onClick(e) {
+          return _this2.props.downloadFile(file, e);
+        }
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-download"
+      })), !readOnly && deleteFile && /*#__PURE__*/React.createElement("span", {
+        className: "file-icon",
+        onClick: this.onClickDelete
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })))), this.state.isDeleteTipOpen && /*#__PURE__*/React.createElement(DeleteTip, {
+        position: this.position,
+        toggle: this.closeDeleteTip,
+        onDelete: this.onDelete,
+        deleteTip: getLocale('Are_you_sure_you_want_to_delete_this_file')
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "bottom",
+        isOpen: this.state.isTooltipOpen,
+        toggle: this.toggleTooltip,
+        target: id,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        fade: false
+      }, file.name));
+    }
+  }]);
+
+  return RowExpandFileItemFormatter;
+}(Component);
+
+export { RowExpandFileItemFormatter as default };

package/lib/RowExpandFormatter/index.css

@@ -0,0 +1,73 @@
+.dtable-ui.dtable-row-expand-formatter {
+  width: 100%;
+  max-width: 100%;
+}
+
+.dtable-ui.dtable-row-expand-formatter .row-cell-empty {
+  height: 8px;
+  width: 20px;
+  background-color: #f1f1f1;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.dtable-ui.dtable-row-expand-formatter .dtable-ui.collaborator-item {
+  margin: 5px 10px 5px 0;
+}
+
+.dtable-ui.dtable-row-expand-formatter .dtable-ui.text-formatter,
+.dtable-ui.dtable-row-expand-formatter .dtable-ui.url-formatter,
+.dtable-ui.dtable-row-expand-formatter .dtable-ui.email-formatter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-ui.dtable-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
+  margin: 5px 0;
+}
+
+.dtable-ui.dtable-row-expand-formatter .dtable-ui.geolocation-formatter {
+  width: fit-content;
+  min-width: 80px;
+  max-width: 100%;
+  height: 28px;
+  line-height: 24px;
+  border: 2px solid transparent;
+  padding: 0 10px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.dtable-ui.dtable-row-expand-formatter .form-control {
+  background-color: #f8f9fa;
+}
+
+.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #e0e0e0;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+}
+
+.dtable-ui.dtable-row-expand-formatter .longtext-formatter-container {
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  padding: 0.375rem 0.75rem;
+  height: auto;
+  background-color: #fff;
+}
+
+.dtable-ui.dtable-row-expand-formatter .geolocation-formatter-container {
+  height: 38px;
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.dtable-row-expand-formatter .dtable-link-formatter {
+  padding-top: 8px;
+}