{"_id":"@amirnabaei/draganddrop","_rev":"1-fb182738b05cb25a4a3720c272e2dfa5","name":"@amirnabaei/draganddrop","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.7":{"name":"@amirnabaei/draganddrop","version":"0.1.7","main":"./lib/index.js","engines":{"node":">=4.0.0"},"author":{"name":"amir","email":"anabaei@sfu.ca","url":"http://reactjsconsulting.com/"},"files":["lib"],"dependencies":{"autoprefixer":"7.1.6","babel-core":"^6.26.0","babel-eslint":"7.2.3","babel-jest":"20.0.3","babel-loader":"^7.1.2","babel-preset-react-app":"^3.1.1","babel-runtime":"6.26.0","case-sensitive-paths-webpack-plugin":"2.1.1","chalk":"^1.1.3","chokidar":"^2.0.4","css-loader":"0.28.7","dotenv":"4.0.0","dotenv-expand":"4.2.0","eslint":"4.10.0","eslint-config-react-app":"^2.1.0","eslint-loader":"1.9.0","eslint-plugin-flowtype":"2.39.1","eslint-plugin-import":"2.8.0","eslint-plugin-jsx-a11y":"5.1.1","eslint-plugin-react":"7.4.0","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.5","fs-extra":"3.0.1","highlight.js":"^9.12.0","html-webpack-plugin":"2.29.0","install":"^0.11.0","jest":"20.0.4","npm-run-all":"^4.1.3","object-assign":"^4.1.1","postcss-flexbugs-fixes":"3.2.0","postcss-loader":"2.0.8","promise":"8.0.1","raf":"3.4.0","react":"^16.4.1","react-bootstrap":"^0.32.1","react-dev-utils":"^5.0.1","react-docgen":"^2.20.1","react-dom":"^16.4.1","react-modal":"^3.4.5","resolve":"1.6.0","style-loader":"0.19.0","styled-components":"^3.3.3","sw-precache-webpack-plugin":"0.11.4","url-loader":"0.6.2","webpack":"3.8.1","webpack-dev-server":"2.9.4","webpack-manifest-plugin":"1.3.2","whatwg-fetch":"^2.0.3"},"homepage":"http://anabaei.github.io/modaltest2/","scripts":{"prestart":"npm run gen:docs","start:docs":"node scripts/start.js","start":"npm-run-all --parallel start:docs gen:docs-watch","gen:docs":"node scripts/generateComponentData.js","gen:docs-watch":"npm run gen:docs -- --watch","build":"node scripts/build.js","deploy":"gh-pages -d build","build:commonjs":"cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js","test":"node scripts/test.js --env=jsdom"},"jest":{"collectCoverageFrom":["src/**/*.{js,jsx,mjs}"],"setupFiles":["<rootDir>/config/polyfills.js"],"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}","<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],"testEnvironment":"node","testURL":"http://localhost","transform":{"^.+\\.(js|jsx|mjs)$":"<rootDir>/node_modules/babel-jest","^.+\\.css$":"<rootDir>/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|css|json)$)":"<rootDir>/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],"moduleNameMapper":{"^react-native$":"react-native-web"},"moduleFileExtensions":["web.js","js","json","web.jsx","jsx","node","mjs"]},"babel":{"presets":[["env",{"modules":"commonjs"}],"react-app"]},"eslintConfig":{"extends":"react-app"},"devDependencies":{"babel-cli":"^6.26.0","cpx":"^1.5.0","cross-env":"^5.2.0","gh-pages":"^1.2.0","rimraf":"^2.6.2"},"gitHead":"1a0bb798cf7effa8f31ade6a5558db9645f93c0f","description":"## How it works * In preview page, by pressing publish key word, it uses windows session storage. It can save data as string so  ```javascript {sessionStorage.setItem('myData', JSON.stringify(this.state.props))} ``` * myData is variable to save data.  * I","_id":"@amirnabaei/draganddrop@0.1.7","_npmVersion":"6.1.0","_nodeVersion":"8.7.0","_npmUser":{"name":"amirnabaei","email":"anabaei@sfu.ca"},"dist":{"integrity":"sha512-lJWJ2ilRO0O76xzIx8N/QkdVfgdSasxupMPXPQS12Su1/H+udr+r8qxu/+11DXNV638db7foQ4Z/2bfiu4AP5A==","shasum":"812d5c2a078b7135df81df8b80a3c22891adba6b","tarball":"https://registry.npmjs.org/@amirnabaei/draganddrop/-/draganddrop-0.1.7.tgz","fileCount":10,"unpackedSize":38066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLS8TCRA9TVsSAnZWagAAv6wP/jPeHr7N/5UgB1d2aRh4\n3W13vWlhRkQg9XgKb1Rh2MpPyAe+G21PLfMWmA4sE6cjlvpVfzlmW8Lq3ZFa\nHkLINGrgik7tvVTitIA6/Xa395bIVi7ud1WiAJympeFzwEiv8sHECHhCWF/m\nikXqJgxHSKyuJ/GWz0e5FM6a+HrUHPiQK9NnPLMxeDSeZlRBZLJA+tlGG9bU\n/NhPGiRXGhm83DrWuVY81kB3I9SjIsq5ppuSPfjvU86C1nyAbNVqEqnO/09z\n1jWhlcAUCIdY7jscb1I7/hgn+eV9M0cbToo7ZC7FIAg3HzgJ4iFhSH6smFlJ\nkCJbUerFAjULSwXdNGajc/qjyoB+hg60zwDMiHwKS9/mjTx6MM+sy6GaTnBB\nOiv+bj59WBBTcEMnrAsv/SNUFuMjbhyQRcr8CYfDbCZ0HVGfiSWrBsMermy6\noJpFtfSdfOfnY0UdB5Ct7EJme2e1fxbNA+duFokfckxd2bTz6m1EIZfylopI\nRH2osw/hT0gAEekAPxh5zJjlmB7NuLfCCbiDZrurhInuW9PJzngKF1LTc/f/\nCupjwEAcgZIS+wrNPFFoyj33ZHLvUKeRIDJCRz25ATKLO79U0yFTFRluOss0\nTbT6YPyLLfxq/wgDdfH0GfzXhYn0uhgJov1/hlYHNKpuhqWpPBna1tTmPg/W\nhgqi\r\n=xCgK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDueIJOCwXQsh2yTvRlFIgCGnkASLe+Mpr0PKL6SVfjYQIhAMntoHymIkJKIbwf7/U3uURgSrP1DiA+XDRCmzkOWfTw"}]},"maintainers":[{"name":"amirnabaei","email":"anabaei@sfu.ca"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draganddrop_0.1.7_1529687827382_0.5215342571339883"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-22T17:17:07.095Z","0.1.7":"2018-06-22T17:17:07.438Z","modified":"2022-04-04T13:49:34.548Z"},"maintainers":[{"name":"amirnabaei","email":"anabaei@sfu.ca"}],"description":"## How it works * In preview page, by pressing publish key word, it uses windows session storage. It can save data as string so  ```javascript {sessionStorage.setItem('myData', JSON.stringify(this.state.props))} ``` * myData is variable to save data.  * I","homepage":"http://anabaei.github.io/modaltest2/","author":{"name":"amir","email":"anabaei@sfu.ca","url":"http://reactjsconsulting.com/"},"readme":"## To publish\n\n## How it works\n* In preview page, by pressing publish key word, it uses windows session storage. It can save data as string so \n```javascript\n{sessionStorage.setItem('myData', JSON.stringify(this.state.props))}\n```\n* myData is variable to save data. \n* Inside next page first destructure the data by \n```javascript\n constructor(props)\n {\n   super(props);\n  this.state = {\n    form: JSON.parse(sessionStorage.myData)\n    }\n }\n```\n* To create form from this props we save them into tasks and gothrough \n```javascript\nconst  {tasks} = this.state.form;\n  return(\n    <div>\n      <form onSubmit={handleSubmit}>\n      {\n        tasks.map(acc =>  <div> { acc.category === \"complete\" ?\n        myswitch(acc) : console.log(\"wip\") } </div> )\n      }\n     </form>\n    </div>\n  );\n```\n* `myswitch` is just a switch function to render elements and also each input has event listener to set states with everychanges   \n```javascript\nfunction myswitch(param)\n{\n   console.log(\"params name: \"+param.name);\n    switch(param.name)\n    {\n      case 'input':\n        return (\n           <div>\n            <label className=\"form-label\"> {param.label} </label>\n            <input className=\"form-control\" label={param.label} name={param.id} placeholder={param.label}  onChange={handleChange}/>\n          </div>)\n      case 'label':\n        return  <label className=\"form-labale\"> {param.label} </label>\n      case 'submitButton':\n          return <button className=\"btn btn-success\"> Submit </button>\n      default:\n       return \"\"\n    }\n  }\n```\n* `handleChange` function would be like \n```javascript\n const handleChange = (event) => {\n\n   switch(event.target.name)\n   {\n     case 'Last Name':\n     this.setState({last_name: event.target.value});\n     case 'First Name':\n     this.setState({first_name: event.target.value});\n     \n```\n* `handleSubmit` would be like \n```javascript\nconst handleSubmit = event => {\n    event.preventDefault();\n    const attr = {\n       firstName: this.state.first_name,\n       lastName: this.state.last_name,\n       evidence: 'something'\n     };\n Connection.postform(attr);\n```\n* Where the postform would be a callout connection to db\n\n","readmeFilename":"Readme.md"}