@zhenliang/sheet 0.0.1

package/dist/core/sheet/useContextMenu.js

@@ -0,0 +1,86 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useSetState } from "../../hooks";
+import { useEffect } from 'react';
+import { calcMenuPosition, extractDataRowAndCol, findParentTd } from "../util";
+export var useContextMenu = function useContextMenu(dispatch, elementRef) {
+  var enableContextMenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var contextMenuRef = arguments.length > 3 ? arguments[3] : undefined;
+  var _useSetState = useSetState({
+      showMenu: false,
+      position: {
+        top: 0,
+        left: 0
+      },
+      cellPosition: {
+        row: 0,
+        col: 0
+      }
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    menuEvent = _useSetState2[0],
+    setMenuEvent = _useSetState2[1];
+  var handleContextMenu = function handleContextMenu(e) {
+    var _contextMenuRef$curre;
+    e.preventDefault();
+    var currentCell = findParentTd(e.target);
+    if (!currentCell) return;
+    var currentPos = extractDataRowAndCol(currentCell);
+    dispatch({
+      type: 'mouseDown',
+      payload: {
+        pos: currentPos,
+        shiftKey: e.shiftKey
+      }
+    });
+    var _calcMenuPosition = calcMenuPosition({
+        tableElement: elementRef.current,
+        menuElement: (_contextMenuRef$curre = contextMenuRef.current) === null || _contextMenuRef$curre === void 0 ? void 0 : _contextMenuRef$curre.firstElementChild,
+        x: e.clientX,
+        y: e.clientY
+      }),
+      top = _calcMenuPosition.top,
+      left = _calcMenuPosition.left;
+    setMenuEvent({
+      showMenu: true,
+      position: {
+        top: top,
+        left: left
+      },
+      cellPosition: currentPos
+    });
+  };
+  useEffect(function () {
+    var _contextMenuRef$curre2, _contextMenuRef$curre3;
+    if (!elementRef.current || !enableContextMenu) return;
+    // 添加统一规范
+    (_contextMenuRef$curre2 = contextMenuRef.current) === null || _contextMenuRef$curre2 === void 0 ? void 0 : (_contextMenuRef$curre3 = _contextMenuRef$curre2.firstElementChild) === null || _contextMenuRef$curre3 === void 0 ? void 0 : _contextMenuRef$curre3.setAttribute('style', 'z-index: 5;word-break: keep-all;');
+    var handleClose = function handleClose() {
+      setMenuEvent({
+        showMenu: false
+      });
+    };
+    elementRef.current.addEventListener('contextmenu', handleContextMenu);
+    document.addEventListener('click', handleClose);
+    document.addEventListener('scroll', function () {
+      setMenuEvent({
+        showMenu: false
+      });
+    }, true);
+    return function () {
+      document.removeEventListener('contextmenu', handleContextMenu);
+      document.removeEventListener('click', handleClose);
+    };
+  }, [elementRef.current, enableContextMenu]);
+  return _objectSpread({}, menuEvent);
+};

package/dist/core/sheet/useKeyBoardEvent.js

@@ -0,0 +1,44 @@
+import { useKeyBoard } from "../../hooks";
+import { sideEffectReducer } from "../reducers/sideEffectReducer";
+export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
+  useKeyBoard({
+    move: function move(e, value) {
+      dispatch({
+        type: 'move',
+        payload: value
+      });
+    },
+    escape: function escape() {
+      dispatch({
+        type: 'escape'
+      });
+    },
+    reverse: function reverse() {
+      dispatch(sideEffectReducer.reverse);
+    },
+    delete: function _delete() {
+      dispatch(sideEffectReducer.delete);
+    },
+    enter: function enter() {
+      dispatch({
+        type: 'enter'
+      });
+    },
+    otherInput: function otherInput(e, value) {
+      dispatch({
+        type: 'otherInput',
+        payload: value
+      });
+    },
+    copy: function copy() {
+      dispatch(sideEffectReducer.copy);
+    },
+    paste: function paste() {
+      dispatch(sideEffectReducer.paste);
+    },
+    cut: function cut() {
+      dispatch(sideEffectReducer.copy);
+      dispatch(sideEffectReducer.delete);
+    }
+  }, elementRef.current);
+};

package/dist/core/sheet/useMouseEvent.js

@@ -0,0 +1,298 @@
+import { useMouse } from "../../hooks";
+import { useCallback, useRef } from 'react';
+import { extractDataRowAndCol, findParentTd } from "../util";
+var rowCount = 10; //每秒10行
+var colCount = 5; //每秒3列
+
+export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
+  var animateRef = useRef(false);
+  // const animateScrollCalled = useRef<number>(0);
+  var rowHeightRef = useRef(40);
+  var colWidthRef = useRef(100);
+  var resetInterval = useCallback(function () {
+    if (animateRef.current) {
+      animateRef.current = false;
+      // animateScrollCalled.current -= 1;
+    }
+  }, []);
+  var scrollTo = useCallback(function (type) {
+    if (!elementRef.current) return;
+    // 当前滚动高度
+    var _ref = elementRef.current || {},
+      scrollTop = _ref.scrollTop,
+      scrollLeft = _ref.scrollLeft,
+      scrollHeight = _ref.scrollHeight,
+      scrollWidth = _ref.scrollWidth;
+    var destination = {
+      y: scrollTop,
+      x: scrollLeft
+    };
+    var called = 0;
+    var rowCalled = 0;
+    var colCalled = 0;
+    var step = function step() {
+      var _elementRef$current;
+      (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.style.setProperty('scroll-behavior', 'auto');
+      var position = {
+        x: destination.x,
+        y: destination.y
+      };
+      if (type === 'bottom') {
+        position.y = scrollHeight;
+        if (Math.round(called / 60 * rowCount) - rowCalled > 1) {
+          rowCalled++;
+          dispatch({
+            type: 'rowMove',
+            payload: 1
+          });
+        }
+      }
+      if (type === 'right') {
+        position.x = scrollWidth;
+        if (Math.round(called / 60 * colCount) - colCalled > 1) {
+          colCalled++;
+          dispatch({
+            type: 'colMove',
+            payload: 1
+          });
+        }
+      }
+      if (type === 'left') {
+        position.x = 0;
+        if (Math.round(called / 60 * colCount) - colCalled > 1) {
+          colCalled++;
+          dispatch({
+            type: 'colMove',
+            payload: -1
+          });
+        }
+      }
+      if (type === 'top') {
+        position.y = 0;
+        if (Math.round(called / 60 * rowCount) - rowCalled > 1) {
+          rowCalled++;
+          dispatch({
+            type: 'rowMove',
+            payload: -1
+          });
+        }
+      }
+
+      // 距离目标滚动距离
+      var distance = {
+        x: position.x - destination.x,
+        // x: 0,
+        y: position.y - destination.y
+      };
+      // 目标滚动位置
+      destination = {
+        x: destination.x + (distance.x !== 0 ? distance.x * colWidthRef.current * colCount / 60 / Math.abs(distance.x) : 0),
+        // x: 0,
+        y: destination.y + (distance.y !== 0 ? distance.y * rowHeightRef.current * rowCount / 60 / Math.abs(distance.y) : 0)
+      };
+      if (!animateRef.current) return;
+      if (Math.abs(distance.x) + Math.abs(distance.y) < 2) {
+        var _elementRef$current2;
+        (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.scrollTo(destination.x, destination.y);
+        resetInterval();
+      } else {
+        var _elementRef$current3;
+        (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.scrollTo(destination.x, destination.y);
+        requestAnimationFrame(step);
+        called++;
+      }
+    };
+    step();
+  }, []);
+  var mouseDown = useCallback(function (e) {
+    var _elementRef$current4;
+    if (e.button !== 0) return;
+    e.preventDefault();
+    if (!((_elementRef$current4 = elementRef.current) !== null && _elementRef$current4 !== void 0 && _elementRef$current4.contains(e.target))) {
+      dispatch({
+        type: 'loseFocus'
+      });
+    }
+    var currentCell = findParentTd(e.target);
+    if (!currentCell) {
+      return;
+    }
+    var currentPos = extractDataRowAndCol(currentCell);
+    dispatch({
+      type: 'mouseDown',
+      payload: {
+        pos: currentPos,
+        shiftKey: e.shiftKey
+      }
+    });
+  }, []);
+  var mouseOver = useCallback(function (e) {
+    var _elementRef$current5, _elementRef$current6;
+    e.preventDefault();
+    if (!((_elementRef$current5 = elementRef.current) !== null && _elementRef$current5 !== void 0 && _elementRef$current5.contains(e.target))) return;
+    var currentCell = findParentTd(e.target);
+    if (!currentCell || currentCell.classList.contains('fixed')) return;
+    (_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0 ? void 0 : _elementRef$current6.style.setProperty('scroll-behavior', 'smooth');
+    var currentPos = extractDataRowAndCol(currentCell);
+    dispatch({
+      type: 'mouseOver',
+      payload: currentPos
+    });
+    dispatch(function (d, getState) {
+      var _elementRef$current7;
+      var _getState = getState(),
+        mouseDown = _getState.mouseDown;
+      if (!mouseDown || !elementRef.current) return;
+      var cellBounding = currentCell.getBoundingClientRect();
+      var parentBounding = (_elementRef$current7 = elementRef.current) === null || _elementRef$current7 === void 0 ? void 0 : _elementRef$current7.getBoundingClientRect();
+      var left = cellBounding.left,
+        top = cellBounding.top,
+        bottom = cellBounding.bottom,
+        right = cellBounding.right;
+      var parentLeft = parentBounding.left,
+        parentTop = parentBounding.top,
+        parentBottom = parentBounding.bottom,
+        parentRight = parentBounding.right;
+      var dBottom = bottom - parentBottom;
+      var dTop = top - parentTop;
+      var dLeft = left - parentLeft;
+      var dRight = right - parentRight;
+      var cellHeight = currentCell.clientHeight;
+      var cellWidth = currentCell.clientWidth;
+      rowHeightRef.current = cellHeight;
+      colWidthRef.current = cellWidth;
+      var isElementEdge = dBottom > -40 || dTop < 40 || dLeft < 40 || dRight > -40;
+      if (isElementEdge) {
+        if (animateRef.current === true) return;
+        animateRef.current = true;
+        // animateScrollCalled.current += 1;
+      } else {
+        resetInterval();
+      }
+      if (dBottom > -40) {
+        scrollTo('bottom');
+        // elementRef.current.scrollTop += cellHeight;
+      }
+
+      if (dTop < 40) {
+        scrollTo('top');
+        // elementRef.current.scrollTop -= cellHeight;
+      }
+
+      if (dLeft < 40) {
+        scrollTo('left');
+        // elementRef.current.scrollLeft -= cellWidth;
+      }
+
+      if (dRight > -40) {
+        scrollTo('right');
+        // elementRef.current.scrollLeft += cellWidth;
+      }
+    });
+  }, []);
+  var mouseUp = useCallback(function (e) {
+    e.preventDefault();
+    resetInterval();
+    var currentCell = findParentTd(e.target);
+    if (!currentCell || currentCell.classList.contains('fixed')) {
+      dispatch({
+        type: 'changes',
+        payload: {
+          mouseDown: false
+        }
+      });
+      return;
+    }
+    var currentPos = extractDataRowAndCol(currentCell);
+    dispatch({
+      type: 'mouseUp',
+      payload: currentPos
+    });
+  }, []);
+  var mouseLeave = useCallback(function (e) {
+    dispatch(function (d, getState) {
+      var _getState2 = getState(),
+        mouseDown = _getState2.mouseDown;
+      if (mouseDown && elementRef.current) {
+        var _elementRef$current8;
+        var parentBounding = (_elementRef$current8 = elementRef.current) === null || _elementRef$current8 === void 0 ? void 0 : _elementRef$current8.getBoundingClientRect();
+        var left = parentBounding.left,
+          top = parentBounding.top,
+          right = parentBounding.right,
+          bottom = parentBounding.bottom;
+        var x = e.x,
+          y = e.y;
+        resetInterval();
+        if (animateRef.current === true) return;
+        animateRef.current = true;
+
+        // animateScrollCalled.current += 1;
+        if (y > bottom) {
+          scrollTo('bottom');
+        }
+        if (y < top) {
+          scrollTo('top');
+        }
+        if (x < left) {
+          scrollTo('left');
+        }
+        if (x > right) {
+          scrollTo('right');
+        }
+      } else {
+        mouseDown && dispatch({
+          type: 'changes',
+          payload: {
+            mouseDown: false
+          }
+        });
+      }
+    });
+  }, []);
+  var doubleClick = useCallback(function (e) {
+    var _elementRef$current9;
+    if (!((_elementRef$current9 = elementRef.current) !== null && _elementRef$current9 !== void 0 && _elementRef$current9.contains(e.target))) {
+      return;
+    }
+    e.preventDefault();
+    var currentCell = findParentTd(e.target);
+    if (!(currentCell !== null && currentCell !== void 0 && currentCell.classList) || currentCell.classList.contains('read-only')) {
+      // 只读
+      return;
+    }
+    var currentPos = extractDataRowAndCol(currentCell);
+    dispatch({
+      type: 'doubleClick',
+      payload: currentPos
+    });
+  }, []);
+  var loseFocus = useCallback(function (e) {
+    var _elementRef$current10;
+    if (!((_elementRef$current10 = elementRef.current) !== null && _elementRef$current10 !== void 0 && _elementRef$current10.contains(e.target))) {
+      dispatch({
+        type: 'loseFocus'
+      });
+      return;
+    }
+    e.preventDefault();
+    var currentCell = findParentTd(e.target);
+    if (currentCell.classList.contains('read-only')) {
+      // 只读
+      return;
+    }
+    var currentPos = extractDataRowAndCol(currentCell);
+    dispatch({
+      type: 'doubleClick',
+      payload: currentPos
+    });
+  }, []);
+  useMouse({
+    mouseDown: mouseDown,
+    mouseOver: mouseOver,
+    mouseUp: mouseUp,
+    mouseLeave: mouseLeave,
+    mouseEnter: resetInterval,
+    doubleClick: doubleClick,
+    loseFocus: loseFocus
+  }, elementRef.current);
+};

package/dist/core/sheet/useVirtualList.js

@@ -0,0 +1,74 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { isEqual, throttle } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import { getRowHeight } from "../util";
+var extra = 20;
+// 虚拟列表
+export var useVirtualList = function useVirtualList(elementRef) {
+  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var virtualized = arguments.length > 2 ? arguments[2] : undefined;
+  var _useState = useState({
+      virtualStart: 0,
+      virtualEnd: data.length - 1,
+      paddingTop: 0,
+      paddingBottom: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var virtualStart = state.virtualStart,
+    virtualEnd = state.virtualEnd,
+    paddingTop = state.paddingTop,
+    paddingBottom = state.paddingBottom;
+  var virtualRef = useRef();
+  useEffect(function () {
+    if (!elementRef.current) return;
+
+    //  当前位定高的表格，所以可以直接获取第一行的高度
+
+    var rowHeight = getRowHeight(elementRef.current);
+    var handleScroll = throttle(function () {
+      var _ref = elementRef.current,
+        scrollTop = _ref.scrollTop,
+        clientHeight = _ref.clientHeight;
+      var itemHeight = rowHeight || 30;
+      var start = Math.floor(scrollTop / itemHeight) - extra;
+      var end = Math.ceil((scrollTop + clientHeight) / itemHeight) + extra;
+      var updateVirtualConfig = {
+        virtualStart: start,
+        virtualEnd: end,
+        paddingTop: start * itemHeight,
+        paddingBottom: (data.length - end) * itemHeight
+      };
+      if (isEqual(updateVirtualConfig, virtualRef.current)) {
+        return;
+      }
+      setState(updateVirtualConfig);
+      virtualRef.current = updateVirtualConfig;
+    }, 50);
+    elementRef.current.addEventListener('scroll', handleScroll);
+    return function () {
+      var _elementRef$current;
+      (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.removeEventListener('scroll', handleScroll);
+    };
+  }, [elementRef.current]);
+  if (!virtualized) {
+    return {
+      virtualStart: 0,
+      virtualEnd: data.length,
+      paddingTop: 0,
+      paddingBottom: 0
+    };
+  }
+  return {
+    virtualStart: Math.max(0, virtualStart),
+    virtualEnd: Math.min(data.length, virtualEnd),
+    paddingTop: Math.max(0, paddingTop),
+    paddingBottom: data.length - 1 <= virtualEnd ? 0 : paddingBottom
+  };
+};

package/dist/core/sheet/var.less

@@ -0,0 +1,41 @@
+.harvest{
+  --row-height:40px;
+  --cell-font-size:12px;
+  --cell-title-font-size:12px;
+  --cell-line-height:40px;
+  --cell-inner-height:39px;
+  --cell-padding-vertical:0;
+  --cell-padding-horizontal:5px;
+  --cell-border-color: #DDD;
+  --cell-background-color:white;
+  --cell-title-background-color:#f7f9fc;
+  --cell-read-only-background-color:#f7f9fc;
+  --cell-hover:white;
+  --cell-box-shadow:inset 0 -100px 0 rgba(33, 133, 208, 15%);;
+  --cell-fixed-box-shadow-left:inset 10px 0 8px -8px rgba(5, 5, 5,6%);
+  --cell-fixed-box-shadow-right:inset -10px 0 8px -8px rgba(5, 5, 5,6%);
+  --resizer: #2185d0;
+  --color:black;
+  --title-color:#999;
+  --read-color:#999;
+}
+
+.ali-devops{
+  --row-height:40px;
+  --cell-font-size:14px;
+  --cell-line-height:20px;
+  --cell-padding-vertical:12px;
+  --cell-padding-horizontal:12px;
+  --cell-border-color: #e5e5e5;
+  --cell-background-color:white;
+  --cell-title-background-color:white;
+  --cell-read-only-background-color:white;
+  --cell-fixed-box-shadow:inset -10px 0 8px -8px rgba(5, 5, 5,6%);
+  --cell-hover:#f7f7f7;
+  --cell-fixed-box-shadow-left:inset 10px 0 8px -8px rgba(5, 5, 5,6%);
+  --cell-fixed-box-shadow-right:inset -10px 0 8px -8px rgba(5, 5, 5,6%);
+  --resizer: #1b9aee;
+  --color:#262626;
+  --title-color:#8c8c8c;
+  --read-color:#8c8c8c;
+}