@bizhermit/react-sdk
Version:
React SDK
1 lines • 6.01 kB
JavaScript
;var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Style=exports.codeCn=void 0;const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),core_style_1=require("../styles/core-style"),css_var_1=require("../styles/css-var"),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),typescript_1=__importDefault(require("../utils/syntax-highlight/typescript"));exports.codeCn="bh-code";const Code=react_1.default.forwardRef(((e,t)=>{const{lineNodes:n,lineNumNodes:r,lineNumWidth:o}=(0,react_1.useMemo)((()=>{let t=[];switch(e.$language){case"ts":case"tsx":t=(0,typescript_1.default)(e.children);break;default:t=string_utils_1.default.isString(e.children)?e.children.split(/\r\n|\n/):[...e.children]}const n=[],r=[],o=Math.max(10*String(t.length).length+10,20),a=e.$lineHeight||24;return t.forEach(((e,t)=>{r.push(react_1.default.createElement(CodeLineNumber,{key:t,lineNumber:t+1,lineHeight:a})),n.push(react_1.default.createElement(CodeLine,{key:t,lineHeight:a},e))})),{lineNodes:n,lineNumNodes:r,lineNumWidth:o}}),[e.children]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,exports.codeCn,core_style_1.sbCn,(0,attributes_1.ftoCn)(e.$fto)),ref:t,"data-lang":e.$language??""},e.$edgeText?react_1.default.createElement("div",{className:`${exports.codeCn}-edge`},"start"):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("div",{className:`${exports.codeCn}-body`},react_1.default.createElement("div",{className:`${exports.codeCn}-line_number-wrap`,style:{width:o}},r),react_1.default.createElement("div",{className:`${exports.codeCn}-line-wrap`},n)),e.$edgeText?react_1.default.createElement("div",{className:`${exports.codeCn}-edge`},"end"):react_1.default.createElement(react_1.default.Fragment,null)),exports.Style)})),CodeLineNumber=({lineHeight:e,lineNumber:t})=>react_1.default.createElement("div",{className:`${exports.codeCn}-line_number`,style:{height:e}},t),CodeLine=({lineHeight:e,children:t})=>react_1.default.createElement("div",{className:`${exports.codeCn}-line`,style:{height:e},dangerouslySetInnerHTML:{__html:t}});exports.Style=react_1.default.createElement(jsx_style_1.default,{id:exports.codeCn},(()=>`\n.${exports.codeCn} {\n ${css_var_1.CssPV.flex}\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n color: #eee;\n font-family: Consolas, "Courier New", monospace;\n}\n.${exports.codeCn}-edge {\n width: 100%;\n color: #aaa;\n background: #000;\n padding: 0px 10px;\n flex: none;\n left: 0px;\n position: sticky;\n}\n.${exports.codeCn}-body {\n ${css_var_1.CssPV.flex}\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n flex: none;\n background: #111;\n min-width: 100%;\n}\n.${exports.codeCn}-line_number-wrap,\n.${exports.codeCn}-line-wrap {\n ${css_var_1.CssPV.flex}\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n min-height: 0px;\n flex: none;\n}\n.${exports.codeCn}-line_number-wrap {\n border-right: 1px solid #666;\n background: #000;\n color: #ccc;\n min-width: 30px;\n left: 0px;\n position: sticky;\n z-index: 1;\n}\n.${exports.codeCn}-line-wrap {\n z-index: 0;\n}\n.${exports.codeCn}-line_number {\n ${css_var_1.CssPV.flex}\n flex-flow: row nowrap;\n justify-content: flex-end;\n align-items: flex-start;\n flex: none;\n width: 100%;\n margin: 0px;\n padding-right: 5px;\n}\n.${exports.codeCn}-line {\n ${css_var_1.CssPV.flex}\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n flex: none;\n min-width: 100%;\n white-space: nowrap;\n margin: 0px;\n padding: 0px 5px;\n}\n.${exports.codeCn}-line:hover {\n background: #222;\n}\n.${exports.codeCn}[data-lang="rpg"] .${exports.codeCn}-line_number-wrap{\n color: #88f\n}\n.${exports.codeCn}[data-lang="rpg"] .${exports.codeCn}-line-wrap{\n color: #8f8;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-comment,\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-comment span {\n color: #3cb371 !important;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-string,\n.${exports.codeCn}[data-lang="tsx"] .${exports.codeCn}-string {\n color: #ffa07a;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-import,\n.${exports.codeCn}[data-lang="tsx"] .${exports.codeCn}-import {\n color: #ff89d4;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-export,\n.${exports.codeCn}[data-lang="tsx"] .${exports.codeCn}-export {\n color: #ff89d4;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-return,\n.${exports.codeCn}[data-lang="tsx"] .${exports.codeCn}-return {\n color: #ff89d4;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-var,\n.${exports.codeCn}[data-lang="tsx"] .${exports.codeCn}-var {\n color: #9e90ff;\n}\n.${exports.codeCn}[data-lang="ts"] .${exports.codeCn}-jsx,\n.${exports.codeCn}[data-lang="tsx"] .${exports.codeCn}-jsx {\n color: #9e90ff;\n}\n`)),exports.default=Code;