@tidy-ui/code
Version:
The Code component elegantly displays preformatted text, such as JavaScript code, on your webpage while maintaining its original format. With a convenient copy-to-clipboard button and seamless theming, sharing and styling code has never been smoother.
2 lines (1 loc) • 5.87 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),e=require("@tidy-ui/commons");function r(n){return n&&n.__esModule?n:{default:n}}var t=/*#__PURE__*/r(n),o=function(){return o=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},o.apply(this,arguments)};function a(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var i,l,s,c,u,d,p,f,b,m,h,v,y,g=e.css(i||(i=a(["\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n height: 1.8rem;\n width: 1.8rem;\n padding: 0.25rem;\n border-radius: 4px;\n"],["\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n height: 1.8rem;\n width: 1.8rem;\n padding: 0.25rem;\n border-radius: 4px;\n"]))),x=e.styled(e.Icon.CopyAll)(s||(s=a(["\n visibility: hidden;\n cursor: pointer;\n ","\n ","\n"],["\n visibility: hidden;\n cursor: pointer;\n ","\n ","\n"])),function(n){var r=n.theme.isDark;return e.css(l||(l=a(["\n color: ",";\n border: 1px solid ",";\n background-color: ",";\n "],["\n color: ",";\n border: 1px solid ",";\n background-color: ",";\n "])),e.hsla(r?e.color.slate[300]:e.color.slate[600]),e.hsla(r?e.color.slate[600]:e.color.slate[400]),e.hsla(r?e.color.slate[700]:e.color.slate[300]))},g),w=e.styled(e.Icon.CheckCircle)(u||(u=a(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var r=n.theme,t=r.palette,o=r.isDark;return e.css(c||(c=a(["\n color: ",";\n border: 1px solid ",";\n background-color: ",";\n "],["\n color: ",";\n border: 1px solid ",";\n background-color: ",";\n "])),t.success[600],t.success[600],e.hsla(o?e.color.slate[700]:e.color.slate[300]))},g),k=e.styled.div(d||(d=a(["\n overflow: auto;\n position: relative;\n &:hover "," {\n visibility: visible;\n }\n ","\n"],["\n overflow: auto;\n position: relative;\n &:hover "," {\n visibility: visible;\n }\n ","\n"])),x,e.applyStandardOverrideStyles),O=e.styled.pre(f||(f=a(["\n overflow: auto;\n padding: 1rem;\n line-height: 1.45;\n ","\n"],["\n overflow: auto;\n padding: 1rem;\n line-height: 1.45;\n ","\n"])),function(n){var r=n.theme,t=r.font,o=r.layout,i=r.isDark;return e.css(p||(p=a(["\n font-family: ",";\n font-size: ",";\n border-radius: ",";\n background-color: ",";\n "],["\n font-family: ",";\n font-size: ",";\n border-radius: ",";\n background-color: ",";\n "])),t.mono,t.size,o.radius,e.hsla(i?e.color.slate[700]:e.color.slate[200]))}),C=e.styled.div(h||(h=a(["\n position: absolute;\n top: 0.8rem;\n right: 2.6rem;\n font-size: 0.6rem;\n border-radius: 5px;\n padding: 6px 8px;\n transition: opacity 0.3s;\n ","\n &::after {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n margin-top: -5px;\n border-width: 5px;\n border-style: solid;\n ","\n }\n"],["\n position: absolute;\n top: 0.8rem;\n right: 2.6rem;\n font-size: 0.6rem;\n border-radius: 5px;\n padding: 6px 8px;\n transition: opacity 0.3s;\n ","\n &::after {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n margin-top: -5px;\n border-width: 5px;\n border-style: solid;\n ","\n }\n"])),function(n){var r=n.theme,t=r.isDark,o=r.palette,i=n.visible;return e.css(b||(b=a(["\n opacity: ",";\n color: ",";\n background-color: ",";\n "],["\n opacity: ",";\n color: ",";\n background-color: ",";\n "])),i?"1":"0",o.neutral[200],t?o.neutral[500]:o.neutral[800])},function(n){var r=n.theme,t=r.isDark,o=r.palette;return e.css(m||(m=a(["\n border-color: transparent transparent transparent ",";\n "],["\n border-color: transparent transparent transparent ",";\n "])),t?o.neutral[500]:o.neutral[800])}),j=e.styled.div(y||(y=a(["\n position: absolute;\n top: 0;\n width: 100%;\n padding: 0.25rem 1rem;\n ","\n ","\n"],["\n position: absolute;\n top: 0;\n width: 100%;\n padding: 0.25rem 1rem;\n ","\n ","\n"])),e.createFontStyle("caption"),function(n){var r=n.theme.isDark;return e.css(v||(v=a(["\n background-color: ",";\n color: ",";\n "],["\n background-color: ",";\n color: ",";\n "])),e.hsla(r?e.color.amber[700]:e.color.amber[500],.9),e.hsla(r?e.color.amber[400]:e.color.amber[950]))}),E=t.default.forwardRef(function(n,e){var r=n.children,a=n.canCopy,i=function(n,e){var r={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0&&(r[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)e.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(r[t[o]]=n[t[o]])}return r}(n,["children","canCopy"]),l=t.default.useRef(null),s=t.default.useState(!1),c=s[0],u=s[1],d=t.default.useState(),p=d[0],f=d[1];t.default.useEffect(function(){return function(){u(!1),f(void 0)}},[]);var b=t.default.useCallback(function(){navigator.permissions.query({name:"clipboard-write"}).then(function(n){var e;"granted"===n.state?navigator.clipboard.writeText("".concat(null===(e=l.current)||void 0===e?void 0:e.innerText)).then(function(){u(!0)}).catch(function(n){u(!1),f(n)}):f("Please grant 'clipboard-write' permission for this site on your browser")}).catch(function(n){u(!1),f(n)}),setTimeout(function(){return u(!1)},2e3),setTimeout(function(){return f(void 0)},5e3)},[l]);return t.default.createElement(k,o({ref:e,role:"contentinfo"},i),t.default.createElement(O,{ref:l},r),a&&t.default.createElement(t.default.Fragment,null,t.default.createElement(C,{visible:c,role:"tooltip"},"Copied"),c?t.default.createElement(w,{onClick:b,role:"status"}):t.default.createElement(x,{onClick:b,role:"button"})),p&&t.default.createElement(j,null,"".concat(p)))});E.defaultProps={canCopy:!0},E.displayName="Code",exports.Code=E;