Added copy to clipboard component

pull/453/head
ioedeveloper 4 years ago
parent 71130115f2
commit 0b5c5d596c
  1. 4
      libs/remix-ui/clipboard/.babelrc
  2. 248
      libs/remix-ui/clipboard/.eslintrc
  3. 7
      libs/remix-ui/clipboard/README.md
  4. 14
      libs/remix-ui/clipboard/babel-jest.config.json
  5. 12
      libs/remix-ui/clipboard/jest.config.js
  6. 1
      libs/remix-ui/clipboard/src/index.ts
  7. 4
      libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.css
  8. 44
      libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
  9. 19
      libs/remix-ui/clipboard/tsconfig.json
  10. 13
      libs/remix-ui/clipboard/tsconfig.lib.json
  11. 15
      libs/remix-ui/clipboard/tsconfig.spec.json
  12. 2
      libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx
  13. 15
      libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
  14. 6
      libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx
  15. 9
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
  16. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
  17. 3
      nx.json
  18. 3
      tsconfig.json
  19. 27
      workspace.json

@ -0,0 +1,4 @@
{
"presets": ["@nrwl/react/babel"],
"plugins": []
}

@ -0,0 +1,248 @@
{
"rules": {
"array-callback-return": "warn",
"dot-location": ["warn", "property"],
"eqeqeq": ["warn", "smart"],
"new-parens": "warn",
"no-caller": "warn",
"no-cond-assign": ["warn", "except-parens"],
"no-const-assign": "warn",
"no-control-regex": "warn",
"no-delete-var": "warn",
"no-dupe-args": "warn",
"no-dupe-keys": "warn",
"no-duplicate-case": "warn",
"no-empty-character-class": "warn",
"no-empty-pattern": "warn",
"no-eval": "warn",
"no-ex-assign": "warn",
"no-extend-native": "warn",
"no-extra-bind": "warn",
"no-extra-label": "warn",
"no-fallthrough": "warn",
"no-func-assign": "warn",
"no-implied-eval": "warn",
"no-invalid-regexp": "warn",
"no-iterator": "warn",
"no-label-var": "warn",
"no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }],
"no-lone-blocks": "warn",
"no-loop-func": "warn",
"no-mixed-operators": [
"warn",
{
"groups": [
["&", "|", "^", "~", "<<", ">>", ">>>"],
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
["&&", "||"],
["in", "instanceof"]
],
"allowSamePrecedence": false
}
],
"no-multi-str": "warn",
"no-native-reassign": "warn",
"no-negated-in-lhs": "warn",
"no-new-func": "warn",
"no-new-object": "warn",
"no-new-symbol": "warn",
"no-new-wrappers": "warn",
"no-obj-calls": "warn",
"no-octal": "warn",
"no-octal-escape": "warn",
"no-redeclare": "warn",
"no-regex-spaces": "warn",
"no-restricted-syntax": ["warn", "WithStatement"],
"no-script-url": "warn",
"no-self-assign": "warn",
"no-self-compare": "warn",
"no-sequences": "warn",
"no-shadow-restricted-names": "warn",
"no-sparse-arrays": "warn",
"no-template-curly-in-string": "warn",
"no-this-before-super": "warn",
"no-throw-literal": "warn",
"no-restricted-globals": [
"error",
"addEventListener",
"blur",
"close",
"closed",
"confirm",
"defaultStatus",
"defaultstatus",
"event",
"external",
"find",
"focus",
"frameElement",
"frames",
"history",
"innerHeight",
"innerWidth",
"length",
"location",
"locationbar",
"menubar",
"moveBy",
"moveTo",
"name",
"onblur",
"onerror",
"onfocus",
"onload",
"onresize",
"onunload",
"open",
"opener",
"opera",
"outerHeight",
"outerWidth",
"pageXOffset",
"pageYOffset",
"parent",
"print",
"removeEventListener",
"resizeBy",
"resizeTo",
"screen",
"screenLeft",
"screenTop",
"screenX",
"screenY",
"scroll",
"scrollbars",
"scrollBy",
"scrollTo",
"scrollX",
"scrollY",
"self",
"status",
"statusbar",
"stop",
"toolbar",
"top"
],
"no-unexpected-multiline": "warn",
"no-unreachable": "warn",
"no-unused-expressions": [
"error",
{
"allowShortCircuit": true,
"allowTernary": true,
"allowTaggedTemplates": true
}
],
"no-unused-labels": "warn",
"no-useless-computed-key": "warn",
"no-useless-concat": "warn",
"no-useless-escape": "warn",
"no-useless-rename": [
"warn",
{
"ignoreDestructuring": false,
"ignoreImport": false,
"ignoreExport": false
}
],
"no-with": "warn",
"no-whitespace-before-property": "warn",
"react-hooks/exhaustive-deps": "warn",
"require-yield": "warn",
"rest-spread-spacing": ["warn", "never"],
"strict": ["warn", "never"],
"unicode-bom": ["warn", "never"],
"use-isnan": "warn",
"valid-typeof": "warn",
"no-restricted-properties": [
"error",
{
"object": "require",
"property": "ensure",
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
},
{
"object": "System",
"property": "import",
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
}
],
"getter-return": "warn",
"import/first": "error",
"import/no-amd": "error",
"import/no-webpack-loader-syntax": "error",
"react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }],
"react/jsx-no-comment-textnodes": "warn",
"react/jsx-no-duplicate-props": "warn",
"react/jsx-no-target-blank": "warn",
"react/jsx-no-undef": "error",
"react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }],
"react/jsx-uses-react": "warn",
"react/jsx-uses-vars": "warn",
"react/no-danger-with-children": "warn",
"react/no-direct-mutation-state": "warn",
"react/no-is-mounted": "warn",
"react/no-typos": "error",
"react/react-in-jsx-scope": "error",
"react/require-render-return": "error",
"react/style-prop-object": "warn",
"react/jsx-no-useless-fragment": "warn",
"jsx-a11y/accessible-emoji": "warn",
"jsx-a11y/alt-text": "warn",
"jsx-a11y/anchor-has-content": "warn",
"jsx-a11y/anchor-is-valid": [
"warn",
{ "aspects": ["noHref", "invalidHref"] }
],
"jsx-a11y/aria-activedescendant-has-tabindex": "warn",
"jsx-a11y/aria-props": "warn",
"jsx-a11y/aria-proptypes": "warn",
"jsx-a11y/aria-role": "warn",
"jsx-a11y/aria-unsupported-elements": "warn",
"jsx-a11y/heading-has-content": "warn",
"jsx-a11y/iframe-has-title": "warn",
"jsx-a11y/img-redundant-alt": "warn",
"jsx-a11y/no-access-key": "warn",
"jsx-a11y/no-distracting-elements": "warn",
"jsx-a11y/no-redundant-roles": "warn",
"jsx-a11y/role-has-required-aria-props": "warn",
"jsx-a11y/role-supports-aria-props": "warn",
"jsx-a11y/scope": "warn",
"react-hooks/rules-of-hooks": "error",
"default-case": "off",
"no-dupe-class-members": "off",
"no-undef": "off",
"@typescript-eslint/consistent-type-assertions": "warn",
"no-array-constructor": "off",
"@typescript-eslint/no-array-constructor": "warn",
"@typescript-eslint/no-namespace": "error",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": [
"warn",
{
"functions": false,
"classes": false,
"variables": false,
"typedefs": false
}
],
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{ "args": "none", "ignoreRestSiblings": true }
],
"no-useless-constructor": "off",
"@typescript-eslint/no-useless-constructor": "warn"
},
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true,
"node": true
},
"settings": { "react": { "version": "detect" } },
"plugins": ["import", "jsx-a11y", "react", "react-hooks"],
"extends": ["../../../.eslintrc"],
"ignorePatterns": ["!**/*"]
}

@ -0,0 +1,7 @@
# remix-ui-clipboard
This library was generated with [Nx](https://nx.dev).
## Running unit tests
Run `nx test remix-ui-clipboard` to execute the unit tests via [Jest](https://jestjs.io).

@ -0,0 +1,14 @@
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
]
}

@ -0,0 +1,12 @@
module.exports = {
name: 'remix-ui-clipboard',
preset: '../../../jest.config.js',
transform: {
'^.+\\.[tj]sx?$': [
'babel-jest',
{ cwd: __dirname, configFile: './babel-jest.config.json' }
]
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
coverageDirectory: '../../../coverage/libs/remix-ui/clipboard'
};

@ -0,0 +1 @@
export * from './lib/copy-to-clipboard/copy-to-clipboard';

@ -0,0 +1,4 @@
.copyIcon {
margin-left: 5px;
cursor: pointer;
}

@ -0,0 +1,44 @@
import React from 'react'
import * as copy from 'copy-text-to-clipboard'
import './copy-to-clipboard.css'
export const CopyToClipboard = ({ getContent, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => {
const handleClick = () => {
let copiableContent:string
try {
copiableContent = getContent()
} catch (e) {
// addTooltip(e.message)
return
}
if (copiableContent) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
try {
if (typeof copiableContent !== 'string') {
copiableContent = JSON.stringify(copiableContent, null, '\t')
}
} catch (e) {
console.error(e)
}
copy(copiableContent)
// addTooltip('Copied value to clipboard.')
} else {
// addTooltip('Cannot copy empty content!')
}
}
return (
<i
title={tip}
className={`copyIcon far ${icon} p-2`}
data-id="copyToClipboardCopyIcon"
aria-hidden="true"
{...otherProps}
onClick={handleClick}
></i>
)
}
export default CopyToClipboard

@ -0,0 +1,19 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

@ -0,0 +1,13 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": ["node"]
},
"files": [
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
"../../../node_modules/@nrwl/react/typings/image.d.ts"
],
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

@ -0,0 +1,15 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"include": [
"**/*.spec.ts",
"**/*.spec.tsx",
"**/*.spec.js",
"**/*.spec.jsx",
"**/*.d.ts"
]
}

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import { ExtractData, ExtractFunc } from '../types'
export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => {
const [data, setData] = useState(null)
const [data, setData] = useState([])
useEffect(() => {
const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => {

@ -190,26 +190,27 @@ const debug = (txHash) => {
}
const getTrace = (hash) => {
if (!hash) return
return new Promise(async (resolve, reject) => { /* eslint-disable-line */
const web3 = await getDebugWeb3()
const currentReceipt = await web3.eth.getTransactionReceipt(hash)
setState(prevState => {
return { ...prevState, currentReceipt }
})
const debug = new Debugger({
web3,
offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
compilationResult: async (address) => {
try {
return await fetchContractAndCompile(address, state.currentReceipt)
return await fetchContractAndCompile(address, currentReceipt)
} catch (e) {
console.error(e)
}
return null
}
})
setState(prevState => {
return { ...prevState, currentReceipt }
})
debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => {
if (error) return reject(error)
resolve(trace)
@ -230,7 +231,7 @@ const deleteHighlights = async () => {
<div className="px-2">
<TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
<StepManager stepManager={ state.debugger ? state.debugger.step_manager : null } />
{/*<VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
<VmDebuggerHead vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } />
</div>
{/* <div className="statusMessage">{state.statusMessage}</div>
<VmDebugger vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}

@ -11,8 +11,10 @@ export const StepManager = ({ stepManager }) => {
})
useEffect(() => {
stepManager && stepManager.event.register('revertWarning', setRevertWarning)
stepManager && stepManager.event.register('stepChanged', updateStep)
if (stepManager) {
stepManager.event.register('revertWarning', setRevertWarning)
stepManager.event.register('stepChanged', updateStep)
}
}, [stepManager])
const setRevertWarning = (warning) => {

@ -3,13 +3,12 @@ import AssemblyItems from './assembly-items'
import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
import useExtractData from '../../hooks/extract-data'
import { DropdownPanelProps, ExtractData } from '../../types'
import { CopyToClipboard } from '@remix-ui/clipboard'
import './styles/dropdown-panel.css'
/* eslint-disable-next-line */
import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
/* eslint-disable-next-line */
import copyToClipboard from '../../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard'
export const DropdownPanel = (props: DropdownPanelProps) => {
const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props
@ -120,7 +119,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
}
}
})
if (!this.displayContentOnly) {
if (!state.displayContentOnly) {
// this.view.querySelector('.title i.fa-copy').style.display = 'block'
setState(prevState => {
return {
@ -188,7 +187,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
let content: JSX.Element | JSX.Element[] = <div>Empty</div>
if (state.json) {
content = data.map(item => {
content = (data).map(item => {
return (
<TreeView key={item.key}>
{ renderData(item.data, item.key) }
@ -200,7 +199,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
<div className="py-0 px-1 title">
<div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
<div className="name" onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}></span>
{copyToClipboard(() => copyClipboard())}
<CopyToClipboard getContent={copyClipboard} />
</div> : <div></div>
if (state.displayContentOnly) {

@ -35,6 +35,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
})
useEffect(() => {
if (vmDebuggerLogic) {
vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
setAsm({ code, address, index })
})
@ -97,18 +98,19 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
})
})
vmDebuggerLogic.start()
}, [])
}
}, [vmDebuggerLogic])
return (
<div id="vmheadView" className="mt-1 px-0">
<div className="d-flex flex-column">
<div className="w-100" hidden>
<FunctionPanel calldata={functionPanel} />
<SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
<SolidityState calldata={solidityState.calldata} message={solidityState.message} />
<div className="w-100">
<FunctionPanel calldata={functionPanel || {}} />
{/* <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} /> */}
{/* <SolidityState calldata={solidityState.calldata} message={solidityState.message} /> */}
</div>
<div className="w-100"><CodeListView asm={asm} /></div>
<div className="w-100"><StepDetail detail={stepDetail} /></div>
{/* <div className="w-100"><CodeListView asm={asm} /></div> */}
{/* <div className="w-100"><StepDetail detail={stepDetail} /></div> */}
</div>
</div>
)

@ -78,6 +78,9 @@
},
"remix-ui-utils": {
"tags": []
},
"remix-ui-clipboard": {
"tags": []
}
}
}

@ -28,7 +28,8 @@
"@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"],
"@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
"@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
"@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"]
"@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
"@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]

@ -590,6 +590,33 @@
}
}
}
},
"remix-ui-clipboard": {
"root": "libs/remix-ui/clipboard",
"sourceRoot": "libs/remix-ui/clipboard/src",
"projectType": "library",
"schematics": {},
"architect": {
"lint": {
"builder": "@nrwl/linter:lint",
"options": {
"linter": "eslint",
"tsConfig": [
"libs/remix-ui/clipboard/tsconfig.lib.json",
"libs/remix-ui/clipboard/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**", "!libs/remix-ui/clipboard/**/*"]
}
},
"test": {
"builder": "@nrwl/jest:jest",
"options": {
"jestConfig": "libs/remix-ui/clipboard/jest.config.js",
"tsConfig": "libs/remix-ui/clipboard/tsconfig.spec.json",
"passWithNoTests": true
}
}
}
}
},
"cli": {

Loading…
Cancel
Save