@oceanbase/ui 0.2.0

package/es/Highlight/index.less

@@ -0,0 +1,381 @@
+@import '../variable.less';
+
+@prefix: ob-highlight;
+
+.@{prefix} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  list-style: none;
+  border-radius: ~'@{borderRadius}px';
+
+  &:not(:hover) .@{prefix}-copy {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  @keyframes copy-button-trans {
+    0% {
+      opacity: 0.8;
+      margin-block-start: 0;
+    }
+    10% {
+      opacity: 0.8;
+      margin-block-start: -16px;
+    }
+    90% {
+      opacity: 0.8;
+      margin-block-start: -16px;
+    }
+    100% {
+      opacity: 0.8;
+      margin-block-start: 0;
+    }
+  }
+
+  .@{prefix}-json-view {
+    padding: 0;
+
+    .react-json-view {
+      padding: 0.5em;
+      overflow: auto;
+
+      .icon-container svg {
+        transform: translateY(5px);
+      }
+    }
+  }
+
+  &.@{prefix}-light {
+    .react-json-view {
+      background: @colorBgLayout;
+    }
+
+    .@{prefix}-light-index {
+      border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    display: block;
+    padding: 0.5em;
+    overflow-x: auto;
+    color: #383a42;
+    background: @colorBgLayout;
+
+    .hljs-comment,
+    .hljs-quote {
+      color: #a0a1a7;
+      font-style: italic;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-formula {
+      color: #a626a4;
+    }
+
+    .hljs-section,
+    .hljs-name,
+    .hljs-selector-tag,
+    .hljs-deletion,
+    .hljs-subst {
+      color: #e45649;
+    }
+
+    .hljs-literal {
+      color: #0184bb;
+    }
+
+    .hljs-string,
+    .hljs-regexp,
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta-string {
+      color: #50a14f;
+    }
+
+    .hljs-built_in,
+    .hljs-class,
+    .hljs-title {
+      color: #c18401;
+    }
+
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-selector-class,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-number {
+      color: #986801;
+    }
+
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-title {
+      color: #4078f2;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+
+    .hljs-link {
+      text-decoration: underline;
+    }
+  }
+
+  .@{prefix}-index {
+    box-sizing: border-box;
+    width: 40px;
+    min-width: 40px;
+    color: #aaa;
+    text-align: end;
+    background: rgba(255, 255, 255, 0.03);
+    user-select: none;
+    padding-block: 2px;
+    padding-inline: 8px;
+  }
+  .@{prefix}-content {
+    padding-block: 2px;
+    padding-inline: 8px;
+  }
+  .@{prefix}-copy {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+    inset-block-start: 16px;
+    inset-inline-end: 16px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  &:not(:hover) &.@{prefix}-copy {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .@{prefix}-copy-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+
+    &.scoll {
+      animation: copy-button-trans 2s;
+      animation-play-state: running;
+    }
+  }
+
+  .@{prefix}-dark {
+    display: block;
+    padding: 0.5em;
+    overflow-x: auto;
+    color: #c0c5ce;
+    background: #2b303b;
+    border-radius: ~'@{borderRadius}px';
+
+    &.@{prefix}-index {
+      border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    /* Ocean Comment */
+    .hljs-comment,
+    .hljs-quote {
+      color: #65737e;
+    }
+
+    /* Ocean Red */
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-regexp,
+    .hljs-deletion {
+      color: #bf616a;
+    }
+
+    /* Ocean Orange */
+    .hljs-number,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params,
+    .hljs-meta,
+    .hljs-link {
+      color: #d08770;
+    }
+
+    /* Ocean Yellow */
+    .hljs-attribute {
+      color: #ebcb8b;
+    }
+
+    /* Ocean Green */
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-addition {
+      color: #a3be8c;
+    }
+
+    /* Ocean Blue */
+    .hljs-title,
+    .hljs-section {
+      color: #8fa1b3;
+    }
+
+    /* Ocean Purple */
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #b48ead;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+  }
+
+  &.@{prefix}-diff {
+    overflow-y: auto;
+
+    // &.@{prefix} {
+    //   padding: 0;
+    // }
+
+    table {
+      width: 100%;
+      font-family: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace';
+      border-collapse: collapse;
+      border-spacing: 0;
+
+      td {
+        vertical-align: top;
+      }
+    }
+
+    .@{prefix}-diff-index,
+    .@{prefix}-diff-mark,
+    .@{prefix}-diff-code {
+      padding-block: 2px;
+      padding-inline: 8px;
+    }
+
+    .@{prefix}-diff-index,
+    .@{prefix}-diff-mark {
+      user-select: none;
+    }
+
+    .@{prefix}-diff-index {
+      width: 40px;
+      min-width: 40px;
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .@{prefix}-diff-mark {
+      width: 10px;
+      min-width: 10px;
+      text-align: center;
+    }
+
+    .@{prefix}-diff-code {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    // ======================= Theme =======================
+    // Light
+    &.@{prefix}-light {
+      .@{prefix}-diff-index,
+      .@{prefix}-diff-mark {
+        color: #aaa;
+      }
+
+      .@{prefix}-diff-index {
+        background: rgba(0, 0, 0, 0.01);
+        border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
+        border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
+
+        &:first-child {
+          border-inline-start: none;
+        }
+      }
+
+      // &.@{prefix}-diff-cell {
+      .@{prefix}-diff-cell-add {
+        background: #e7f1e2;
+        // .mix(##fafafa; 90)
+        // .toHexString();
+      }
+      .@{prefix}-diff-cell-remove {
+        background: #f6e3e4;
+        // .mix(##fafafa; 90)
+        // .toHexString();
+      }
+      .@{prefix}-diff-cell-empty {
+        background: rgba(0, 0, 0, 0.03);
+      }
+      // }
+    }
+
+    // Dark
+    &.@{prefix}-dark {
+      .@{prefix}-diff-index,
+      .@{prefix}-diff-mark {
+        color: #aaa;
+      }
+
+      .@{prefix}-diff-index {
+        background: rgba(255, 255, 255, 0.01);
+        border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
+        border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:first-child {
+          border-inline-start: none;
+        }
+      }
+
+      .@{prefix}-diff-cell-add {
+        background: #305c29;
+        // .mix(#2b303b; 60)
+        // .toHexString();
+      }
+      .@{prefix}-diff-cell-remove {
+        background: #6d2431;
+        // .mix(#2b303b; 60)
+        // .toHexString();
+      }
+
+      .@{prefix}-diff-cell-empty {
+        background: rgba(255, 255, 255, 0.03);
+      }
+    }
+  }
+}

package/es/Highlight/languages/bash.js

@@ -0,0 +1,2 @@
+import bash from 'highlight.js/lib/languages/bash';
+export default bash;

package/es/Highlight/languages/cpp.js

@@ -0,0 +1,2 @@
+import cpp from 'highlight.js/lib/languages/cpp';
+export default cpp;

package/es/Highlight/languages/css.js

@@ -0,0 +1,2 @@
+import css from 'highlight.js/lib/languages/css';
+export default css;

package/es/Highlight/languages/dockerfile.js

@@ -0,0 +1,2 @@
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
+export default dockerfile;

package/es/Highlight/languages/go.js

@@ -0,0 +1,2 @@
+import go from 'highlight.js/lib/languages/go';
+export default go;

package/es/Highlight/languages/groovy.js

@@ -0,0 +1,2 @@
+import groovy from 'highlight.js/lib/languages/groovy';
+export default groovy;

package/es/Highlight/languages/http.js

@@ -0,0 +1,2 @@
+import http from 'highlight.js/lib/languages/http';
+export default http;

package/es/Highlight/languages/java.js

@@ -0,0 +1,2 @@
+import java from 'highlight.js/lib/languages/java';
+export default java;

package/es/Highlight/languages/javascript.js

@@ -0,0 +1,2 @@
+import javascript from 'highlight.js/lib/languages/javascript';
+export default javascript;

package/es/Highlight/languages/json.js

@@ -0,0 +1,2 @@
+import json from 'highlight.js/lib/languages/json';
+export default json;

package/es/Highlight/languages/markdown.js

@@ -0,0 +1,2 @@
+import markdown from 'highlight.js/lib/languages/markdown';
+export default markdown;

package/es/Highlight/languages/nginx.js

@@ -0,0 +1,2 @@
+import nginx from 'highlight.js/lib/languages/nginx';
+export default nginx;

package/es/Highlight/languages/python.js

@@ -0,0 +1,2 @@
+import python from 'highlight.js/lib/languages/python';
+export default python;

package/es/Highlight/languages/ruby.js

@@ -0,0 +1,2 @@
+import ruby from 'highlight.js/lib/languages/ruby';
+export default ruby;

package/es/Highlight/languages/solidity.js

@@ -0,0 +1,2 @@
+import solidity from 'highlightjs-solidity/src/languages/solidity';
+export default solidity;

package/es/Highlight/languages/sql.js

@@ -0,0 +1,2 @@
+import sql from 'highlight.js/lib/languages/sql';
+export default sql;

package/es/Highlight/languages/typescript.js

@@ -0,0 +1,2 @@
+import typescript from 'highlight.js/lib/languages/typescript';
+export default typescript;

package/es/Highlight/languages/xml.js

@@ -0,0 +1,2 @@
+import xml from 'highlight.js/lib/languages/xml';
+export default xml;

package/es/Highlight/languages/yaml.js

@@ -0,0 +1,2 @@
+import yaml from 'highlight.js/lib/languages/yaml';
+export default yaml;

package/es/Highlight/locale/en-US.js

@@ -0,0 +1 @@
+export default {};

package/es/Highlight/locale/zh-CN.js

@@ -0,0 +1 @@
+export default {};

package/es/Highlight/locale/zh-TW.js

@@ -0,0 +1 @@
+export default {};

package/es/Highlight/useKeyDownCopyEvent.js

@@ -0,0 +1,54 @@
+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); }
+import React, { useEffect } from 'react';
+
+/**
+ * 为 Highlight 添加 focus 时可以按键全选的能力
+ * @param codeRef: React.RefObject<HTMLPreElement>
+ */
+
+export var useKeyDownCopyEvent = function useKeyDownCopyEvent(codeRef) {
+  // focus能力支持
+  var _focus = React.useRef();
+  function bindEvent(events, dom) {
+    Object.keys(events).forEach(function (key) {
+      if (_typeof(events[key]) === 'object' && events[key].handle) {
+        dom.addEventListener(key, events[key].handle, events[key].options);
+      } else {
+        dom.addEventListener(key, events[key]);
+      }
+    });
+    return function () {
+      Object.keys(events).forEach(function (key) {
+        if (_typeof(events[key]) === 'object' && events[key].handle) {
+          dom.removeEventListener(key, events[key].handle, events[key].options);
+        } else {
+          dom.removeEventListener(key, events[key]);
+        }
+      });
+    };
+  }
+  useEffect(function () {
+    if (codeRef.current) {
+      return bindEvent({
+        keydown: function keydown(ev) {
+          var selection = window.getSelection();
+          // 拦截ctrl + a 并判断是否 focus
+          if ((ev.ctrlKey || ev.metaKey) && ev.code === 'KeyA' && _focus.current && codeRef.current) {
+            var range = document.createRange();
+            range.selectNodeContents(codeRef.current);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            ev.preventDefault();
+          }
+        },
+        focus: function focus() {
+          _focus.current = true;
+        },
+        blur: function blur() {
+          _focus.current = false;
+        }
+      }, codeRef.current);
+    }
+  }, [codeRef.current, codeRef]);
+  return null;
+};