dtable-ui-component 6.0.2 → 6.0.4

package/lib/utils/url.js

@@ -3,15 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.getImageThumbnailUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = void 0;
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
+var _file = require("../constants/file");
 const isTargetUrl = (target, url) => {
   if (!url || typeof url !== 'string') return false;
   return target && url ? url.indexOf(target) > -1 : false;
 };
 exports.isTargetUrl = isTargetUrl;
+const isBase64 = url => {
+  if (!url || typeof url !== 'string') return false;
+  const target = 'data:image/png;base64';
+  return url ? url.startsWith(target) : false;
+};
+exports.isBase64 = isBase64;
 const isInternalImg = (url, server) => {
+  var _window;
   if (!url || typeof url !== 'string') return false;
-  const currentServer = server || window.dtable && window.dtable.server;
+  const currentServer = server || ((_window = window) === null || _window === void 0 ? void 0 : _window.dtable) && window.dtable.server;
   return url.indexOf(currentServer) > -1;
 };
 exports.isInternalImg = isInternalImg;
@@ -19,14 +27,33 @@ const isCustomAssetUrl = url => {
   return isTargetUrl('custom-asset://', url);
 };
 exports.isCustomAssetUrl = isCustomAssetUrl;
+const checkImgExists = url => {
+  return new Promise(function (resolve, reject) {
+    let image = new Image();
+    image.src = url;
+    image.onload = function (res) {
+      resolve(res);
+    };
+    image.onerror = function (err) {
+      reject(err);
+    };
+  });
+};
+exports.checkImgExists = checkImgExists;
 const checkSVGImage = url => {
   if (!url || typeof url !== 'string') return false;
   const isSVGImage = url.substring(url.lastIndexOf('.')).toLowerCase() === '.svg';
   return isSVGImage;
 };
 exports.checkSVGImage = checkSVGImage;
+const isAIUrl = url => {
+  if (!url || typeof url !== 'string') return false;
+  return isTargetUrl('/ai/asset/', url) && url.includes('http');
+};
+exports.isAIUrl = isAIUrl;
 const isDigitalSignsUrl = url => {
   if (!url || typeof url !== 'string') return false;
+  if (isAIUrl(url)) return true;
   return isTargetUrl('/digital-signs/', url) && !url.includes('http');
 };
 exports.isDigitalSignsUrl = isDigitalSignsUrl;
@@ -40,6 +67,7 @@ const needUseThumbnailImage = url => {
 };
 exports.needUseThumbnailImage = needUseThumbnailImage;
 const generateCurrentBaseImageThumbnailUrl = _ref => {
+  var _window2;
   let {
     server,
     workspaceID,
@@ -47,11 +75,15 @@ const generateCurrentBaseImageThumbnailUrl = _ref => {
     partUrl,
     size
   } = _ref;
+  const validServer = server || ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.dtable) && window.dtable.server || '';
   if (!partUrl || typeof partUrl !== 'string') return '';
-  return "".concat(server, "/thumbnail/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl, "?size=").concat(size);
+  let url = "".concat(validServer, "/thumbnail/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
+  if (url.indexOf('?') > -1) return "".concat(url, "&size=").concat(size);
+  return "".concat(url, "?size=").concat(size);
 };
 exports.generateCurrentBaseImageThumbnailUrl = generateCurrentBaseImageThumbnailUrl;
 const generateCurrentBaseImageUrl = _ref2 => {
+  var _window3;
   let {
     server,
     workspaceID,
@@ -59,7 +91,9 @@ const generateCurrentBaseImageUrl = _ref2 => {
     partUrl
   } = _ref2;
   if (!partUrl || typeof partUrl !== 'string') return '';
-  return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
+  if (partUrl.startsWith('http')) return partUrl;
+  const validServer = server || ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.dtable) && window.dtable.server || '';
+  return "".concat(validServer, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
 };
 exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
 const getImageThumbnailUrl = function (url) {
@@ -70,6 +104,7 @@ const getImageThumbnailUrl = function (url) {
     size = 256
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   if (!url || typeof url !== 'string') return '';
+  if (isAIUrl(url) || checkSVGImage(url) || !isInternalImg(url) || isBase64(url)) return url;
   if (server && dtableUuid && isCustomAssetUrl(url)) {
     const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
     return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
@@ -83,9 +118,93 @@ const getImageThumbnailUrl = function (url) {
       partUrl: url
     });
   }
-  if (checkSVGImage(url) || !isInternalImg(url)) {
-    return url;
-  }
+  if (url.includes('/thumbnail/workspace')) return url;
   return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
 };
-exports.getImageThumbnailUrl = getImageThumbnailUrl;
+exports.getImageThumbnailUrl = getImageThumbnailUrl;
+const getFileName = url => {
+  if (!url) return null;
+  let validUrl = url;
+  let qIndex = url.indexOf('/?');
+  if (qIndex !== -1) {
+    validUrl = validUrl.slice(0, qIndex);
+  }
+  const lastIndex = validUrl.lastIndexOf('/');
+  const name = url.slice(lastIndex + 1, qIndex);
+  return decodeURI(name);
+};
+exports.getFileName = getFileName;
+const imageCheck = filename => {
+  // no file ext
+  if (!filename || typeof filename !== 'string') return false;
+  if (filename.lastIndexOf('.') === -1) {
+    return false;
+  }
+  const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+  const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'webp'];
+  return image_exts.includes(file_ext);
+};
+exports.imageCheck = imageCheck;
+const isInternalURL = function (url) {
+  let {
+    server = ''
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!url || typeof url !== 'string') return false;
+  return server && url.indexOf(server) > -1;
+};
+exports.isInternalURL = isInternalURL;
+const getValidFileImageUrls = files => {
+  if (!Array.isArray(files)) return [];
+  return files.map(file => {
+    if (typeof file !== 'object') return null;
+    const {
+      url,
+      name
+    } = file;
+    if (!url || url.indexOf('/asset') < 0) return null;
+    return imageCheck(name) ? url : null;
+  }).filter(Boolean);
+};
+exports.getValidFileImageUrls = getValidFileImageUrls;
+const getFileIconUrl = (filename, direntType) => {
+  const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
+  const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
+  if (typeof direntType === 'string' && direntType === 'dir') {
+    const folder = _file.FILEEXT_ICON_MAP['folder'];
+    return _file.FILEEXT_ICON_URL_MAP[folder]['192'];
+  }
+  const identifierIndex = typeof filename === 'string' && filename.lastIndexOf('.');
+  if (identifierIndex === -1) return defaultIconUrl['192'];
+  const fileExt = typeof filename === 'string' && filename.slice(identifierIndex + 1).toLowerCase() || 'default';
+  const fileIcon = _file.FILEEXT_ICON_MAP[fileExt];
+  if (fileIcon) {
+    const iconUrl = _file.FILEEXT_ICON_URL_MAP[fileIcon];
+    return iconUrl['192'];
+  }
+  return defaultIconUrl['192'];
+};
+exports.getFileIconUrl = getFileIconUrl;
+const getFileThumbnailInfo = function (file) {
+  let {
+    server
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
+  const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
+  if (!file || !file.name) return {
+    isImage: false,
+    fileIconUrl: defaultIconUrl['192']
+  };
+  const isImage = imageCheck(file.name);
+  if (isImage && server) return {
+    isImage,
+    fileIconUrl: getImageThumbnailUrl(file.url, {
+      server
+    })
+  };
+  const iconUrl = getFileIconUrl(file.name, file.type);
+  return {
+    fileIconUrl: iconUrl,
+    isImage: false
+  };
+};
+exports.getFileThumbnailInfo = getFileThumbnailInfo;

package/lib/utils/utils.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.throttle = exports.isMac = exports.getEventClassName = exports.downloadFile = exports.debounce = void 0;
+exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = void 0;
+exports.isArrayFormatColumn = isArrayFormatColumn;
+exports.throttle = exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = exports.isMobile = exports.isMac = exports.isFunction = void 0;
+var _constants = require("../constants");
+var _url = require("./url");
 const debounce = (fn, wait) => {
   let timeout = null;
   return function () {
@@ -30,6 +34,7 @@ const throttle = (func, delay) => {
   };
 };
 exports.throttle = throttle;
+const isMobile = exports.isMobile = typeof window !== 'undefined' && (window.innerWidth < 768 || navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null);
 const isMac = () => {
   const platform = navigator.platform;
   // eslint-disable-next-line eqeqeq
@@ -48,9 +53,121 @@ const downloadFile = downloadUrl => {
   document.body.appendChild(iframe);
 };
 exports.downloadFile = downloadFile;
+const downloadFiles = (downloadUrlList, config) => {
+  const downloadFrame = document.getElementById('dtableUiComponentDownloadFrame');
+  if (downloadFrame != null) {
+    document.body.removeChild(downloadFrame);
+  }
+  downloadUrlList.forEach((url, index) => {
+    if (!(0, _url.isInternalURL)(url, config) && (0, _url.imageCheck)(url.replace('?dl=1', ''))) {
+      window.open(url);
+    } else {
+      const path = url;
+      let timer1 = setTimeout(function (path) {
+        return function () {
+          let iframe = document.createElement('iframe');
+          iframe.setAttribute('id', 'dtableUiComponentDownloadFrame');
+          iframe.style.display = 'none';
+          iframe.src = path;
+          document.body.appendChild(iframe);
+          let timer2 = setTimeout(function () {
+            iframe.remove();
+            clearTimeout(timer2);
+          }, 5000);
+          clearTimeout(timer1);
+        };
+      }(path), 1000 * index);
+    }
+  });
+};
+exports.downloadFiles = downloadFiles;
 const getEventClassName = e => {
   // svg mouseEvent event.target.className is an object
   if (!e || !e.target) return '';
   return e.target.getAttribute('class') || '';
 };
-exports.getEventClassName = getEventClassName;
+exports.getEventClassName = getEventClassName;
+const getTrimmedString = value => {
+  return typeof value === 'string' ? value.trim() : '';
+};
+exports.getTrimmedString = getTrimmedString;
+const isFunction = functionToCheck => {
+  const getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};
+exports.isFunction = isFunction;
+const isValidCellValue = value => {
+  if (value === undefined) return false;
+  if (value === null) return false;
+  if (value === '') return false;
+  if (JSON.stringify(value) === '{}') return false;
+  if (JSON.stringify(value) === '[]') return false;
+  return true;
+};
+exports.isValidCellValue = isValidCellValue;
+const isValidUrl = url => {
+  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
+  return reg.test(url);
+};
+exports.isValidUrl = isValidUrl;
+const openUrlLink = url => {
+  let a = document.createElement('a');
+  document.body.appendChild(a);
+  a.href = url;
+  a.target = '_blank';
+  a.rel = 'noopener noreferrer';
+  a.click();
+  document.body.removeChild(a);
+};
+exports.openUrlLink = openUrlLink;
+const getErrorMsg = error => {
+  let errorMsg = '';
+  if (error.response) {
+    if (error.response.status === 403) {
+      errorMsg = 'Permission_denied';
+    } else if (error.response.data && error.response.data['error_msg']) {
+      errorMsg = error.response.data['error_msg'];
+    } else if (error.response.data && error.response.data['error_message']) {
+      errorMsg = error.response.data['error_message'];
+    } else {
+      errorMsg = 'Error';
+    }
+  } else {
+    if (typeof error === 'object' && error.name) {
+      errorMsg = error.name;
+    } else {
+      errorMsg = 'Please_check_the_network';
+    }
+    // eslint-disable-next-line
+    console.log(error);
+  }
+  return errorMsg;
+};
+exports.getErrorMsg = getErrorMsg;
+function isArrayFormatColumn(columnType) {
+  return _constants.ARRAY_FORMAT_COLUMNS.includes(columnType);
+}
+const getFormulaArrayValue = value => {
+  if (!Array.isArray(value)) return [];
+  return value.map(item => {
+    if (Object.prototype.toString.call(item) !== '[object Object]') {
+      return item;
+    }
+    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
+    const {
+      display_value
+    } = item;
+    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
+    return display_value.map(i => {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
+        const {
+          display_value
+        } = i;
+        return display_value;
+      }
+      return i;
+    });
+  }).filter(item => isValidCellValue(item));
+};
+exports.getFormulaArrayValue = getFormulaArrayValue;

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.0",
     "@seafile/seafile-calendar": "0.0.24",
-    "@seafile/seafile-editor": "2.0.0",
+    "@seafile/seafile-editor": "2.0.1",
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
-    "dtable-utils": "5.0.15",
+    "dtable-utils": "5.0.16",
     "is-hotkey": "0.2.0",
     "react-color": "2.19.3",
     "react-responsive": "10.0.0",
     "react-select": "5.10.0",
+    "react-sweet-progress": "^1.1.2",
     "react-transition-group": "4.4.5",
     "reactstrap": "9.2.3"
   },

package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js

@@ -1,97 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
-require("./index.css");
-class PCCollaboratorEditorPopover extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onValueChanged = event => {
-      let value = event.target.value;
-      this.setState({
-        searchValue: value
-      });
-    };
-    this.onInputClick = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-    };
-    this.onCollaboratorItemToggle = item => {
-      this.props.onCollaboratorItemToggle(item);
-    };
-    this.getFilterCollaborator = () => {
-      let {
-        collaborators
-      } = this.props;
-      let filter = this.state.searchValue.toLowerCase();
-      if (!filter) {
-        return collaborators;
-      }
-      return collaborators.filter(collaborator => {
-        return collaborator.name.toString().toLowerCase().indexOf(filter) > -1;
-      });
-    };
-    this.state = {
-      searchValue: ''
-    };
-    this.editorInputRef = /*#__PURE__*/_react.default.createRef();
-  }
-  componentDidMount() {
-    this.editorInputRef.current.focus();
-  }
-  render() {
-    let {
-      searchValue
-    } = this.state;
-    let {
-      selectedCollaborators,
-      popoverPosition
-    } = this.props;
-    let collaborators = this.getFilterCollaborator();
-    let popoverStyle = Object.assign({}, {
-      ...popoverPosition
-    }, {
-      position: 'absolute'
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-editor-popover dtable-ui-collaborator-editor-popover",
-      style: popoverStyle,
-      ref: this.props.setPopoverRef
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-search-container"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      value: searchValue,
-      onChange: this.onValueChanged,
-      onClick: this.onInputClick,
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      ref: this.editorInputRef
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-list-container"
-    }, collaborators.length > 0 && collaborators.map((collaborator, index) => {
-      const isSelect = selectedCollaborators.some(selectedCollaborator => {
-        return selectedCollaborator.email === collaborator.email;
-      });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: index,
-        className: "collaborator-item-container",
-        onClick: this.onCollaboratorItemToggle.bind(this, collaborator)
-      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        collaborator: collaborator
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: "collaborator-checked"
-      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-check-mark"
-      })));
-    }), collaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "no-search-result"
-    }, (0, _lang.getLocale)('No_collaborators_available'))));
-  }
-}
-var _default = exports.default = PCCollaboratorEditorPopover;

package/lib/FileEditor/pc-files-addition/index.js

@@ -1 +0,0 @@
-"use strict";

package/lib/FileEditor/pc-files-addition/pc-file-uploaded-item.js

@@ -1 +0,0 @@
-"use strict";

package/lib/FileEditor/pc-files-preview/index.js

@@ -1 +0,0 @@
-"use strict";

package/lib/FileEditor/pc-files-preview/pc-file-item-preview.js

@@ -1 +0,0 @@
-"use strict";

package/lib/FileItemFormatter/utils.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.imageCheck = exports.getFileThumbnailInfo = exports.getFileIconUrl = void 0;
-var _url = require("../utils/url");
-const FILEEXT_ICON_MAP = {
-  // text file
-  md: 'txt.png',
-  txt: 'txt.png',
-  // pdf file
-  pdf: 'pdf.png',
-  // document file
-  doc: 'word.png',
-  docx: 'word.png',
-  odt: 'word.png',
-  fodt: 'word.png',
-  ppt: 'ppt.png',
-  pptx: 'ppt.png',
-  odp: 'ppt.png',
-  fodp: 'ppt.png',
-  xls: 'excel.png',
-  xlsx: 'excel.png',
-  ods: 'excel.png',
-  fods: 'excel.png',
-  // video
-  mp4: 'video.png',
-  ogv: 'video.png',
-  webm: 'video.png',
-  mov: 'video.png',
-  flv: 'video.png',
-  wmv: 'video.png',
-  rmvb: 'video.png',
-  // music file
-  mp3: 'music.png',
-  oga: 'music.png',
-  ogg: 'music.png',
-  flac: 'music.png',
-  aac: 'music.png',
-  ac3: 'music.png',
-  wma: 'music.png',
-  // image file
-  jpg: 'pic.png',
-  jpeg: 'pic.png',
-  png: 'pic.png',
-  svg: 'pic.png',
-  gif: 'pic.png',
-  bmp: 'pic.png',
-  ico: 'pic.png',
-  // folder dir
-  folder: 'folder-192.png',
-  // default
-  default: 'file.png'
-};
-const getFileThumbnailInfo = fileItem => {
-  let fileIconUrl;
-  let isImage;
-  if (!fileItem.name) {
-    fileIconUrl = FILEEXT_ICON_MAP['default'];
-    isImage = false;
-  } else {
-    isImage = imageCheck(fileItem.name);
-    if (isImage) {
-      fileIconUrl = (0, _url.getImageThumbnailUrl)(fileItem.url);
-    } else {
-      fileIconUrl = require('./' + getFileIconUrl(fileItem.name, fileItem.type));
-    }
-  }
-  return {
-    fileIconUrl,
-    isImage
-  };
-};
-exports.getFileThumbnailInfo = getFileThumbnailInfo;
-const getFileIconUrl = (filename, direntType) => {
-  if (typeof direntType === 'string' && direntType === 'dir') {
-    return 'assets/folder/' + FILEEXT_ICON_MAP['folder'];
-  }
-  const identifierIndex = typeof filename === 'string' && filename.lastIndexOf('.');
-  if (identifierIndex === -1) {
-    return 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
-  }
-  const file_ext = typeof filename === 'string' && filename.slice(identifierIndex + 1).toLowerCase() || 'default';
-  const iconUrl = FILEEXT_ICON_MAP[file_ext] ? 'assets/file/192/' + FILEEXT_ICON_MAP[file_ext] : 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
-  return iconUrl;
-};
-exports.getFileIconUrl = getFileIconUrl;
-const imageCheck = filename => {
-  // no file ext
-  if (!filename || typeof filename !== 'string') return false;
-  if (filename.lastIndexOf('.') === -1) {
-    return false;
-  }
-  const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
-  const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'webp'];
-  return image_exts.includes(file_ext);
-};
-exports.imageCheck = imageCheck;

package/lib/MultipleSelectEditor/index.css

@@ -1,9 +0,0 @@
-.dtable-ui-multiple-select-editor {
-  position: relative;
-}
-
-.dtable-ui-select-editor-container {
-  display: inline-block;
-  height: 30px;
-  padding: 0 10px;
-}